jQuery介绍及选择器的使用1

什么是 jQuery

jQuery 是 js 的一个库，封装了我们开发过程中常用的一些功能，方便我们调用，提高开发效率。我们用的时候，直接引用到页面里即可。

• 官网：http://jquery.com/

jQuery 的两大特点

（1）链式编程：比如.show()和.html()可以连写成.show().html()。

链式编程原理：return this。

通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 this。

（2）隐式迭代：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；

如果获取的是多元素的值，大部分情况下返回的是第一个元素的值。

使用 jQuery 的基本步骤

（1）引包（cdn，本地jq包）

（2）入口函数

（3）功能实现代码

jQuery 的入口函数和 $ 符号

入口函数：

写法一：

       //1.文档加载完毕，图片不加载的时候，就可以执行这个函数。
       $(document).ready(function () {
           alert(1);
       })

写法二：（写法一的简洁版）

       //2.文档加载完毕，图片不加载的时候，就可以执行这个函数。
       $(function () {
           alert(1);
       });

写法三：

       //3.文档加载完毕，图片也加载完毕的时候，在执行这个函数。
       $(window).ready(function () {
           alert(1);
       })

jQuery的$符号

$符号是一个函数名，等同于jQuery,

jQuery 使用 $ 符号原因：书写简洁、相对于其他字符与众不同、容易被记住。

jQuery占用了我们两个变量：$ 和 jQuery。当我们在代码中打印它们俩的时候：

    <script src="jquery-1.11.1.js"></script>
    <script>

        console.log($);
        console.log(jQuery);
        console.log($===jQuery);


    </script>

打印结果如下：

image

从打印结果可以看出，$ 代表的就是 jQuery。

js中的DOM对象 和 jQuery对象 比较（重点，难点）

二者的区别

通过 jQuery 获取的元素是一个数组，数组中包含着原生JS中的DOM对象。举例：

针对下面这样一个div结构：

<div></div>
<div class="box"></div>
<div id="box"></div>
<div class="box"></div>
<div></div>

通过原生 js 获取这些元素节点的方式是：

    var myBox = document.getElementById("box");           //通过 id 获取单个元素
    var boxArr = document.getElementsByClassName("box");  //通过 class 获取的是数组
    var divArr = document.getElementsByTagName("div");    //通过标签获取的是数组

通过 jQuery 获取这些元素节点的方式是：（获取的都是数组）

    //获取的是数组，里面包含着原生 JS 中的DOM对象。
    var jqBox1 = $("#box");
    var jqBox2 = $(".box");
    var jqBox3 = $("div");

二者的相互转换

1、 DOM 对象 转为 jQuery对象：

    $(js对象);

2、jQuery对象 转为 DOM 对象：

    jquery对象[index];      //方式1（推荐）

    jquery对象.get(index);  //方式2

jQuery 选择器

1、jQuery 的基本选择器

jquery返回的dom对象是数组

image

2、层级选择器

image

3、基本过滤选择器

image

4、属性选择器

image

5、筛选选择器

image