JQuery总结（一）

 

1.为什么学习JQuery？

   原生JS开发的缺点

         *查找元素比较麻烦，查找元素的方法也不多，且方法的兼容性差。如：getElementsByClassName()不兼容IE6/7/8。

         *操作样式比较麻烦

          *原生JS的动画比较麻烦。

          *批量控制麻烦。有时出现闭包等问题  同时排他操作也比较麻烦。

          *HTML节点操作麻烦

2. JQuery是什么？

     *Jquery是DOM编程领域的霸主，简化原生JS(DOM)开发。

     *jquery本质上还是属于JS，是一个JS库。

     *有了jquery，工程师有更多的精力思考逻辑，不必思考细枝末节的兼容问题。

3. JQuery版本区别：

1. * 版本 兼容IE6/7/8
2. *  版本不兼容IE6/7/8
3. *  版本不兼容6/7/8  更加简洁(但国内不流行)

     压缩版 体制小，适合生产环境(项目做好后使用)

     非压缩版  体积大，阅读性强，适合开发阶段。

 

4.怎么使用：

（1）先引包

（2）写入口函数：

         2种写法：

         第一种：

$(document).ready(function(){
    //逻辑
});

       第二种：一般使用第二种

$(function(){
    //逻辑
});

5.JQuery入口函数与JS入口函数的区别：

（1）：JS入口函数

Window.onload=function(){
    //等页面所有的资源(图片、文件)加载完成才执行
}

（2）：JQuery入口函数

$(function(){
    //只要等文档树加载完就执行，其并不会等文件、图片加载完才执行。
});

6.$的本质：

$的本质就是一个函数，参数不一样，对应的功能就不一样。如：

     $(function(){}) 表示入口函数

     $(“div”) 参数时字符串，代表查找所有的div元素

     $(“#btn1”) 代表查找id为btn1的元素

     $(document).ready(function(){}) 把DOM对象转成jquery对象

     $===jquery:再写代码时，可以直接把$符号替换成jquery的。

7.JQuery对象与JS对象

   DOM对象只能用DOM对象的方法和属性，JQuery对象只能使用JQuery对象的属性与方法。

（1）JS对象：使用js方式获取的元素，如：

var sh=document.getElementById("sh");
sh.style.backgroundColor="gold";

（2）JQuery对象：使用jquery获取的元素，如：

var lis=$("li");
console.log(lis);

（3）JQ对象转JS对象（2种方法）

给JQuery对象加一个对象[0]或对象.get(0)的方式。如：

var lis=$("li");//JQ对象
lis[0].style.fontSize="40px";//转js对象的第一种方法
lis.get(3).style.color="red";//转JS对象的第二种方法

（4）DOM对象转jquery对象：给对象加个$(对象)即可，如：

var sh=document.getElementById("sh");//获取JS对象
$("sh").text("haha");//把JS对象转JQ对象

8.JQuery的选择器

  JQuery支持css1~css3的所有选择器，而且还有自己的选择器。

（1）基本选择器

        ID选择器 $(“#id”) 得到指定id的元素。

        类选择器 $(“.class”) 得到所有class的元素

        标签选择器 $(“标签名”) 得到所有的标签

        并集选择器 $(“div,#demo”) 得到所有div或id为demo的元素

        交集选择器 $(“p.demo”) 找到既是p元素并且p元素的类名为demo的元素

        层级选择器，表示父子关系。如：

            子代选择器 $(“ul>li”) ul下所有第一级li元素

            后代选择器 $(“ul  li”) ul下所有的li元素

（2）JQuery特有的选择器

       过滤选择器 :

            :eq(index) 如：$(“li:eq(2)”) 得到li元素中索引为2的元素。索引号从0开始。

            :odd 选择序号为奇数的元素。1 3 5à实际上它在显示时是偶数的，因为索引从0开始，1的索引在显示中是第二个。

            :even 选择序号为偶数的元素。0 2 4

       筛选选择器(方法)：

           children(selector) 方法：$(“ul”).children(“li”) ul的所有亲儿子li，等价于$(“ul>li”)。

           find(selector)方法：$(“ul”).find(“li”) 在ul下找后代li，这个li不一定是第一级。等价于$(“ul  li”)。

           siblings(selector)方法：查找兄弟节点，不包含自己。

           parent()方法：查找亲父亲

          eq(index)方法：$(“li”).eq(2)  序号从0开始

          next()方法：寻找下一个兄弟

          prev()方法：寻找上一个兄弟