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执行后的结果