jQuery

1.产生原因：

• 1.1因为JavaScript的缺点：

	JavaScript	jQuery
入口函数	只能有一个，如果有多个，后面的会覆盖前面	可以有多个，并且不会发生覆盖的情况
代码容错性	代码容错性差，代码出现错误，会影响到后面代码的运行	代码容错性好，屏蔽错误，并且不会影响后面代码的运行
浏览器兼容性	兼容性差，比如火狐不支持innerText	对浏览器兼容性做了封装，因此不存在兼容性问题
操作复杂性	DOM操作复杂，对于一些简单的动画效果，实现起来比较麻烦	DOM操作简单，支持隐式迭代，实现动画非常简单。

• 1.2而jQuery的优点：

1.以强大的CSS选择器为基础，几乎所有的操作都先使用选择器查找DOM对象，然后对其进行各种操作

2.查找元素的方法多种多样，非常灵活

3.对DOM的操作提供了方便的扩展，易用的事件处理API和动画API。 强大的插件机制。

4.拥有隐式迭代器，因此不再需要手写for循环了

5.社区活跃，文档非常齐全，全部配有示例。学习容易，易用性很高。

6.代码简单，粗暴。 

2.基本概念

• 2.1Query

• 2.1.1区分jQuery和JavaScript

JavaScript是一门编程语言，jquery是用JavaScript实现的一个JavaScript库。

• 2.1.2什么是jQuery：

jQuery是一个快速，小型且功能丰富的JavaScript库。借助易于使用的API（可在多种浏览器中使用），使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。兼具多功能性和可扩展性。（JavaScript库就是把常用的方法写到一共单独的js文件，使用时直接引用这个js文件即可。）

• 2.1.3怎样使用jQuery：

1）引入jQuery文件

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

2）入口函数

在<script>下写入

第一种写法：

  $(document).ready(function () {

    console.log("这是jQuery入口函数的第一种写法");

  });

第二种写法：  

  $(function () {
    console.log("这是jQuery入口函数的第二种写法");
  });

3）功能实现

• 2.1.4对比JavaScript的入口函数jQuery的入口函数,执行时机

1. JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
2. jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

• 2.2jQuery的$符号

•  2.2.1 $：其实$就是一个函数：$();参数不一样，功能不一样
• 2.2.2 $常用的几种情况：

 1. 参数是一个function, 入口函数

  $(function () {

  });  

2.  把document对象转换成jquery对象 

 $(document).ready(function () {

   });  

解析：参数是一个字符串,用来找对象

$("div")查找所有的div元素

$("#btn") 查找id=”btn” 

$(".current")查找类名是current的元素

$ === jQuery,也就是说能用$的地方，完全可以用jQuery，$仅仅是简写形式。

$.fn  ==== jQuery.prototype，所以 $.fn和jQuery.prototype等价

• 2.3jQuery对象与DOM对象之间的转换（难点）

• 2.3.1什么是DOM对象（js对象）？

使用JavaScript中的方法获取到的元素就是dom对象。dom对象只可以使用dom对象的方法和属性

举例：

var cloth =document.getElementById("cloth");

  cloth.style.backgroundColor="pink";

• 2.3.2什么是jQuery对象？

jquery对象就是使用jquery的方法获取到的对象就是jQuery对象。jquery对象只能使用jquery对象的方法

举例：

var $li=$("li");

console.log($li);

$li.text("这是jQuery对象");

• 2.3.3深入了解jQuery对象

jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合（伪数组））

• 2.3.4jQuery对象和DOM对象的相互转换

1）jquery对象转DOM对象

第一种方法（推荐使用）：

var $li = $("li");

$li[1].style.backgroundColor = "red";

第二种方法：

$li.get(0).style.backgroundColor = "yellow";

2） DOM对象转jQuery对象

var cloth=document.getElementById("cloth");

$(cloth);

 

3.jQuery选择器（重点）

• 3.1什么是jQuery选择器？

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。即事件作用的主体就是jQuery选择器。注意：jQuery选择器返回的是jQuery对象。

名称	用法	描述
ID选择器	$(“#id”);	获取指定ID的元素
类选择器	$(“.class”);	获取同一类class的元素
标签选择器	$(“div”);	获取同一类标签的所有元素
并集选择器	$(“div,p,li”);	使用逗号分隔，只要符合条件之一，就可获取所有的div，p，li元素
交集选择器（标签指定式选择器）	$(“div.redClass”);	注意选择器1和选择器2之间没有空格，class为redClass的div元素，注意区分后代选择器。

和css的选择器用法一模一样。

• 3.2过滤选择器：

这类选择器都带冒号：

	用法	描述
:eq(index)	$(“li:eq(2)”).css(“color”,”red”);	获取到的li元素中，选择索引号为2的元素。(索引号index从0开始)。
:odd	$(“li:odd”).css(“color”,”red”);	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”).css(“color”,”red”);	获取到的li元素中，选择索引号为偶数的元素

• 3.3筛选选择器(方法)

	用法	说明
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”)，子类选择器
find(selector)	$(“ul”).find(“li”);	相当于$(“ul li”),后代选择器
siblings(selector)	$(“#first”).siblings(“li”);	查找兄弟节点，不包括自己本身。
parent()	$(“#first”).parent();	查找父亲
eq(index)	$(“li”).eq(2);	相当于$(“li:eq(2)”),index从0开始
next()	$(“li”).next()	找下一个兄弟
prev()	$(“li”).prev()	找上一次兄弟

4.jquery操作样式（重点）

• 4.1css操作

功能：设置或者修改样式，操作的是style属性。

• 设置单个样式

css(name,value)  name：需要设置的样式名称 value：对应的样式值

举例：

$(“#one”).css(“background”,”gray”);//将背景色修改为灰色

• 设置多个样式

css(obj);  obj参数是一个对象，对象中包含了需要设置的样式名和样式值。

举例：

$(“#one”).css({

       “background”:”gray”,

       “windth”:”400px”,

       “height”:”200px”

});

• 获取样式

css(name);name:需要获取的样式名称

举例：

$(“div”).css(“background-color”);

 

 

• class操作

• 添加样式类

addClass(name);  name：需要添加的样式类名，这个类名不需要添加点（.）

举例：给所有的div添加one的样式

$(“div”).addClass(“one”);

• 移除样式类

removeClass(“name”);     name:需要移除的样式名称

举例：移除div中one的样式类名

$(“div”).removeClass(“one”);

• 判断是否有样式类

hasClass(name);  name:用于判断的样式类名，返回值为true false

举例：判断第一个div是否有one的样式类

$(“div”).hasClass(“one”);

• 切换样式类

toggleClass(name);name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。

举例：

$(“div”).toggleClass(“one”);

5.插件

• 制作jQuery插件

原理：jQuery插件其实说白了就是给jQuery对象增加一个新的方法，让jQuery对象拥有某一个功能。

举例：给jQuery的原型，增加一个sayHi的方法，jQuery可以直接调用方法。

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

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

    <script>

        //给jquery的原型增加了一个方法，sayHi的方法

        jQuery.prototype.sayHi = function () {

            console.log("呵呵");

        }

        //jquery可以调用这个新创建的方法。

        $(jQuery).sayHi();

    </script>

</body>

</html>

因为$.fn  ==== jQuery.prototype

        $.fn.sayHi = function () {

所以 $.fn和jQuery.prototype等价