最新版JQuery笔记

如果不熟悉JavaScript的，可以看另外一篇博客。最新版JavaScript笔记_JMEATLIP的博客-CSDN博客

---

1.JQuery简介

     JQuery = JavaScript + Query，其实是一种函数。而JQuery对象是DOM对象的数组 + JQuery 提供的一系列功能函数。

(1)引入JQuery

<script type="text/javascript" src="路径名称">
</script>

(2)对比JavaScript和JQuery

  JavaScript的写法：

window.onload = function(){
  var btnObj = document.getElementById("btnId");
  btnObj.onclick = function(){
     ......
  }
}

  JQuery的写法：

$(function(){                   //表示页面加载完之后，相当于onload方法，注意别忘记写这句
    var $btnObj = $("#btnId");  //按id查询标签对象
    $btnObj.click(fucntion(){   //绑定单击事件
        ......
    });
});

  给按钮添加响应函数的步骤：

    1.先使用JQuery查询到标签对象。

    2.使用标签对象.click( function(){} );

（3)JQuery核心函数 $

     1.当传入的参数为 函数 时，表示页面加载完成之后，相当于window.onload = function(){}。上面的对比就是例子。

     2.当传入的参数为 HTML字符串 时，JQuery会自动创建这个html标签对象。

     3.当传入的参数为 选择器字符串 时，比如

         $(#"id属性值")：表示id选择器，根据id查询标签对象。例如上面的$("#btnId")。

         $("标签名")：表示标签名选择器，根据指定的标签名查询标签对象。比如$("button")。

         $(".class属性值")：表示类型选择器，根据class属性查询标签对象。

     4..当传入的参数为 DOM对象 时，JQuery会将DMO对象转换成JQuery对象。

（4）JQuery对象和DOM对象之间的相互转换

    如下图所示：

eg:  document.getElementById("btnName")是一个DOM对象，

        $( document.getElementById("btnName") )就转成JQuey对象了。

     反过来，$( document.getElementById("btnName") )是JQuey对象，

     然后$( document.getElementById("btnName") )[下标]就转成DOM对象。 

---

2.选择器

（1）基础选择器

   1.根据ID查询：

$(function(){                                    //要在页面加载后按钮的点击事件才能生效，相当于onload方法
   $("#btn01").click(function()){                //选择对应的按钮
     $("#one").css("background-color","颜色");   //点击按钮后，符合条件的div会变色
});
......
});
ps:btn01为Button的名称，one为其id,下面三例子都要在页面加载完后才生效

   2.根据类名查询：

$("#btn02").click(function()){
    $(".mini").css("background-color","颜色");   //点击按钮后，符合条件的div会变色
});
ps:mini为类名

   3.根据div查询：

$("#btn02").click(function()){
    $("div").css("background-color","颜色");   //点击按钮后，符合条件的div会变色
});

    4.多个条件查询：

$("#btn02").click(function()){
    $("span,#two").css("background-color","颜色");   //选择span类型而且id为two的元素
});

  ps: $("*") 可选择所有的元素。

（2）层次选择器

  1.ancestor descendant 型

  eg:选择body内的所有div:

$("#btn01").click(function()){
     $("body div").css("background-color","颜色");   //后面我直接省略写了
}); 

  2.parent  > child 型

  eg:选择body内的div子元素:

$("body > div")

  3.prev + next 型

  eg:选择id为one的下一个div元素:

$("#one+div")

  4.prev ~ siblings 型

  eg:选择id为two的后面所有div兄弟元素:

$("#two~div")

eg: 获取选中多选框的值

法一：

$("#btn4").click(function(){
   var &checkboies = $(":checkbox:checked");//获取全部选中的复选框标签对象
   //老式遍历
   for(var i = 0 ;i < &checkboies.length; i++){
      alert( &checkboies[i].value );
   }
});

法二（推荐）：

$("#btn4").click(function(){
   var &checkboies = $(":checkbox:checked");//获取全部选中的复选框标签对象
   &checkboies.each(function(){
    alert(this.value);
   });
});
说明：each方法是JQuery对象提供用来遍历元素的方法，this表示当前遍历到的dom对象。

ps:这里例子主要是想突出JQuery遍历元素的方式。

---

3.属性操作

(1)常用属性

标签名	作用	类似于
html()	设置和获取起始标签和结束标签中的内容	dom属性的innerHTML
text()	设置和获取起始标签和结束标签中的文本	dom属性的innerText
val()	设置和获取表单项的value属性值	dom属性的value

说明：当不传参数的时候，是获取值；传递参数时，是设置值。

(2)attr()和prop()的异同 

相同点：都可以设置和获取属性的值。传入一个参数代表获取值，两个参数代表设置值。

不同点：attr()不推荐操作checked、readOnly、selected、disabled等等。但是可以操作非标准的属性，比如自定义属性。因为，当用attr()来获取checked标签时，若选中标签，则显示id，反之则显示undefined。

              prop()只推荐操作checked、readOnly、selected、disabled。当用prop()来获取checked标签时，若选中标签，则显示true，反之则显示false。