jquery基础知识

Jquery

------ Javascript的类库

一种封装好的Javascript的类库的集合，提供了很多方便快捷和强大的功能和效果

Jquery自动兼容各种浏览器

将Jquery的js文件引入到html文档中

Jquery官方网站上有两种

Jquery.x.x.x.js       ----  完整版    带有格式的jquery的源代码    

Jquery.x.x.x.min.js   ----  常用      没有格式的jquery的源代码    体积小

-----  1. 基础使用

核心（十分重要） ---  选择器（参照css的选择器来理解）

   三种核心选择器

   (1)  $("#haha")    ---   ID选择器

                获得html中ID是haha的元素的Jquery对象

   (2)  $(".xixi")    ---   类选择器

                获得html中使用了xixi样式的所有Jquery对象

   (3)  $("p")    ---  普通选择器

                获得html中所有的p标记的Jquery对象

       

   Jquery对象与Javascript原生的dom对象的区别

   其他的选择器

   (1)  组合选择器

          将多个核心选择器组装成层次结构

           $("#div1 input")  --- id是div1元素内的所有input标记 

           $("div input")    --- 所有div中的所有input标记

          $("div,span,p.myClass")   ，-- 匹配任一即可

                 匹配  div

                 匹配  span

                 匹配  使用了myClass样式的p

          $(".haha .hehe")   ---  使用了haha样式的元素内使用了hehe样式的所有标记
 $(".haha.hehe")   ---  同时使用了haha样式和hehe样式的所有标记

    (2)  属性选择器

          $("input[type=text]")   --  所有input标记且type属性为text的所有标记
 $("input[type!=text]")   --  所有input标记且type属性不为text的所有标记

 $("input[type^=t]")   --  所有input标记且type属性以t开始的所有标记
 $("input[type$=t]")   --  所有input标记且type属性以t结束的所有标记

     $("input[type*=t]")   --  所有input标记且type属性含有t的所有标记

          所有input标记checkbox，同时name是haha

          $("input[type=checkbox][name=haha]")

          $(":checkbox")   --- 所有的多选按钮
  $(":checkbox[name=haha]")

    (3)  序号选择器
  $("tr:even")   --- 偶数行  从0开始计

          $("tr:odd")   --- 奇数行  从0开始计  

           :eq(0)    ---第一行

           :gt(2)    ---大于第2行  从0开始

           :lt(2)    ---小于第2行  从0开始

    (4)  状态选择器

           :checked   -- 选中

           :selected   --  选中

           :enabled  -- 启用

           :disabled  -- 禁用

     控制显示与隐藏

         show()  --- 显示

         hide()  --- 隐藏

         toggle()  --- 智能的交替控制

         fadeIn    --- 淡入

         fadeOut   --- 淡出

         fadeToggle   ---  智能交替淡入淡出

         slideDown   ---  展开

         slideUp     ---  收起  

         slideToggle   ----  智能控制

     控制value值

          val()     --- 取值

          val(xxx)     --- 存值

     控制属性值

          attr("属性名")   --- 获得属性名对应的属性值

          attr("属性名","xxx")   --- 将某个属性的值设置成xxx

          prop("单属性", true)   --- 设置某单属性生效

          prop("单属性", false)   --- 设置某单属性失效

          单属性：不用属性值控制   常见：readonly,disabled,checked,selected

     控制css
 css("css属性名")    ----取得对应css样式属性的值

          css("css属性名","xxxxx")    ----将某css属性的值设置为xxxxx

          addClass("class名")   ----- 添加某class样式

          removeClass("class名")   ------ 移除某class样式

     控制内容

       html()               -------- 取得html代码

          html(xxxxxx)         -------- 设置html代码

          text()               --------  取得文本内容

          text(xxxxx)          --------  设置文本内容

     遍历

         each(function(){  //每一个元素应该做的事情  })

     事件处理

         除了支持常规的js调用方式外

         还支持事件绑定的方式

         为jquery对象绑定某种事件来完成调用

         ready事件（重要）  ---   dom准备完成事件：

    看起来是页面加载时自动调用

                                             在页面的文档DOM准备后即自动调用ready事件

   

         load事件    ---    相当于onload事件：页面加载时自动调用onload

         ready要早于load事件进行调用

         所有的事件绑定都要在ready或load事件中完成

          click(function (){});  单击事件

          blur(function (){});   失去焦点事件

          change(function (){});  值改变事件

          focus(function (){});  获得焦点事件

          hover(function(){}, function(){});  悬停事件  --- 复合事件

 submit(function (){});   表单提交事件

                return false;   ---拦截表单提交

                return true；   ---提交表单

-----  2. Ajax技术

    Ajax：异步通信机制

        体现：在不整体刷新网页的前提下，向服务器发送请求并得到请求结果

        效果：网页局部刷新

        应用：用户名重复检测    多级联动菜单       富客户端的应用

    Jquery中主要有三种方法来实现AJAX功能

        $.ajax    ---- 完整版

           JSON数据格式
      {person:{name:张三,age:22}}

                主要以键值对的形式存在    name 键key    ：    张三  值 value

                {key1:value1,key2:value2,....keyn:valuen}

                          ----json对格式很敏感  错了一点都不行

                {cities:[{cname:沈阳},{cname:大连}]}

           XML数据格式

               <person>
  <name>张三</name>

                   <age>22</age>

               </person>

        $.ajax({特定的json格式});

        $.get ---  get请求方式的简化版       课后自己查阅API

        $.post ---  post请求方式的简化版     课后自己查阅API

        同步与异步

           默认是异步请求，Ajax执行期间，页面的js代码正常继续往下执行，不等待ajax的返回结果
           同步请求，Ajax执行期间，页面会锁定，所有的操作都会等待ajax执行后的结果