零基础学前端.jQuery入门与实践教程

￡神魔★判官ぃ 2022-09-03 04:20 203阅读 0赞

--------------------

学习目标:

*  掌握编程jQuery的基本使用
 *  掌握jQuery插件的使用
 *  能够开发jQuery插件
 *  选择器、属性操作、样式操作、节点操作、动画、事件、插件  
    typora-copy-images-to: media

--------------------

复习：

原生js的优缺点：

优点：

所有前端框架的基础，类似于Java、C语言的大基础；

缺点：

1.不能添加多个入口函数，如果有，则后面会把前面的给覆盖掉；

2.原生js的API名字太长，不好记；

3.原生js有些属性后者方法，有浏览器兼容问题；

4.原生js容错率太低，即前面的代码一旦出错，后续所有代码不再执行；

# jQuery #

## 一.jQuery简介 ##

### 1.JavaScript库的概念 ###

JavaScript开发的过程中，处理浏览器的兼容很复杂而且很耗时，于是一些封装了这些操作的库应运而生。这些库还会把一些常用的代码进行封装。

把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js）

常见的JavaScript 库 - jQuery、Prototype、MooTools。其中jQuery是最常用的一个。

jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发，其实就是一个加强版的common.js，因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。

### 2.jQuery的优点好处 ###

jQuery设计的宗旨是'Write Less，Do More'，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的操作，优化HTML文档操作、事件处理、动画设计和Ajax交互。
    jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器。
    极大地简化了 JavaScript 编程。

### 3.jQuery的版本 ###

jQuery版本有很多，分为1.x 2.x 3.x
    
    1.x版本：能够兼容IE678浏览器
    2.x版本：不兼容IE678浏览器
    1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。
    3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）
    发现：京东、新浪大厂，都有jquery的使用，但是一些大厂还在用，并且发现大厂用的时候，版本比较低，考虑很多客户广泛性。
    注意：开发版本和生产版本
    https://jquery.com/
    https://code.jquery.com/
    国内多数网站还在使用1.x的版本

### 4.体验jQuery ###

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SwyqHBD9-1628145022876)(C:\\Users\\teayear\\Desktop\\深圳\\jquery(1)\]\\jquery\\media\\image-20210802093229514.png)

案例：让div显示与设置内容

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j4k2zQBm-1628145022879)(C:\\Users\\teayear\\Desktop\\深圳\\jquery(1)\]\\jquery\\media\\image-20210802095031470.png)

使用JavaScript开发过程中，有许多不便之处

-查找元素的方法太少，麻烦。
    -遍历伪数组很麻烦，通常要嵌套一大堆的for循环。
    -有兼容性问题。
    -想要实现简单的动画效果，也很麻烦
    -代码冗余。

$(document).ready(function () { 
        $('#btn1').click(function () { 
          	// 隐式迭代：偷偷的遍历，在jQuery中，不需要手动写for循环了，会自动进行遍历。
            $('div').show(200);
        });
    
        $('#btn2').click(function () { 
            $('div').text('我是内容');
        });
    });

优点总结：

-查找元素的方法多种多样，非常灵活
    -拥有隐式迭代特性，因此不再需要手写for循环了。
    -完全没有兼容性问题。
    -实现动画非常简单，而且功能更加的强大。
    -代码简单、粗暴。

### 5.jQuery中顶级对象 ###

jQuery中的顶级对象是jQuery,$是jQuery的简写；

获取jQuery对象
    入口函数
    高级功能

注意：jQuery中的$和JQuery关键字本身为同一对象；

### 6.jQuery中页面加载事件 ###

使用jQuery的三个步骤：

引入jQuery文件;后续所有的库文件都是这样滴Mui/Layui/vue.js。。。
    入口函数
    功能实现；重点--->又有三个步骤;

关于jQuery的入口函数：

// 第一种写法
    $(document).ready(function() { 
    	
    });
    // 第二种写法
    $(function() { 
    	
    });

jQuery入口函数与window.onload的对比

a.window.onload只能有一个，jQuery的入口函数可以是多个；
    b.执行时机不同,jQuery的效率高于系统默认的入口函数;
       1.JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
       2.jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

## 二.jQuery对象和DOM对象 ##

jQuery对象和DOM对象的区别

#### 1.DOM对象 ####

用原生JavaScript获取的DOM对象
    	通过document.getElementById()  反馈的是元素(DOM对象)
    通过document.getElementsByTagName()获取到的是什么？
    	伪数组(集合)，集合中的每一个对象是DOM对象

#### 2.jQuery对象 ####

jQuery对象用$()的方式获取的对象
    jQuery对象又可以叫做包装集(包装的DOM对象的集合)

#### 3.区别 ####

jQuery对象不能使用DOM对象的成员，DOM对象不能使用jQuery对象的成员

// DOM对象
    var box = document.getElementById('box');
    // 错误
    box.text('hello');
    // 正确 Dom对象.属性=值;
    box.innerText = 'hello';
    
    // jQuery对象，jQuery对象加前缀$，用以区分DOM对象
    var $box = $('#box');
    // 错误 dom对象;
    $box.innerText = 'hello';
    // 正确
    $box.text('hello');

### 4.相互转换 ###

jQuery对象转换成DOM对象：   
    	jQuery对象.get(索引值); 
    	jQuery对象[索引值] 
        	jQuery对象是包装集(集合)，从集合中取数据可以使用索引的方式
    DOM对象转换成jQuery对象：   
    	$(DOM对象) 只有这一种方法;

### 5.案例 ###

*  开关灯 \[01-开关灯.html\]

// 仅仅演示对象之间的转换，代码不推荐这么写
    jQuery(document).ready(function () { 
      // 获取元素；
      var inpArr = document.getElementsByTagName('input');
      // 获取第一个按钮，然后绑定事件；
      $(inpArr[0]).click(function () { 
        // 设置body的背景色
        $('body')[0].style.background = '#fff';
      });
      // 获取第二个按钮，然后绑定事件；
      $(inpArr[1]).click(function () { 
        // 设置body的背景色
        $('body').get(0).style.background = '#000';
      });
    });

## 三.选择器 ##

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

jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。（查看jQuery文档）

jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。

### 1.jQuery基本选择器 ###

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>用法</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>ID选择器</td> 
   <td>$(’#id’);</td> 
   <td align="left">获取指定ID的元素</td> 
  </tr> 
  <tr> 
   <td>类选择器</td> 
   <td>$(’.class’);</td> 
   <td align="left">获取同一类class的元素</td> 
  </tr> 
  <tr> 
   <td>标签选择器</td> 
   <td>$(‘div’);</td> 
   <td align="left">获取同一类标签的所有元素</td> 
  </tr> 
  <tr> 
   <td>并集选择器</td> 
   <td>$(‘div,p,li’);</td> 
   <td align="left">使用逗号分隔，只要符合条件之一就可。</td> 
  </tr> 
  <tr> 
   <td>交集选择器</td> 
   <td>$(‘div.redClass’);</td> 
   <td align="left">获取class为redClass的div元素</td> 
  </tr> 
 </tbody> 
</table>

*  总结：跟css的选择器用法一模一样。

### 2.jQuery层级选择器 ###

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>用法</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>子代选择器</td> 
   <td>$(‘ul &gt; li’);</td> 
   <td align="left">使用-号，获取儿子层级的元素，注意，并不会获取孙子层级的元素</td> 
  </tr> 
  <tr> 
   <td>后代选择器</td> 
   <td>$(‘ul li’);</td> 
   <td align="left">使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等</td> 
  </tr> 
 </tbody> 
</table>

*  跟CSS的选择器一模一样,可以测试个数输出。

### 3.jQuery过滤选择器 ###

*  这类选择器都带冒号:

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>用法</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:eq（index）</td> 
   <td>$(‘li:eq(2)’).css(‘color’, ‘red’);</td> 
   <td align="left">获取到的li元素中，选择索引号为2的元素，索引号index从0开始。</td> 
  </tr> 
  <tr> 
   <td>:odd</td> 
   <td>$(‘li:odd’).css(‘color’, ‘red’);</td> 
   <td align="left">获取到的li元素中，选择索引号为奇数的元素</td> 
  </tr> 
  <tr> 
   <td>:even</td> 
   <td>$(‘li:even’).css(‘color’, ‘red’);</td> 
   <td align="left">获取到的li元素中，选择索引号为偶数的元素</td> 
  </tr> 
 </tbody> 
</table>

### 4.jQuery筛选选择器(方法) ###

*  筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>用法</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>children(selector)</td> 
   <td>$(‘ul’).children(‘li’)</td> 
   <td align="left">相当于$(‘ul-li’),子类选择器</td> 
  </tr> 
  <tr> 
   <td>find(selector)</td> 
   <td>$(‘ul’).find(‘li’);</td> 
   <td align="left">相当于$(‘ul li’),后代选择器</td> 
  </tr> 
  <tr> 
   <td>siblings(selector)</td> 
   <td>$(’#first’).siblings(‘li’);</td> 
   <td align="left">查找兄弟节点，不包括自己本身。</td> 
  </tr> 
  <tr> 
   <td>parent()</td> 
   <td>$(’#first’).parent();</td> 
   <td align="left">查找父亲</td> 
  </tr> 
  <tr> 
   <td>eq(index)</td> 
   <td>$(‘li’).eq(2);</td> 
   <td align="left">相当于$(‘li:eq(2)’),index从0开始</td> 
  </tr> 
  <tr> 
   <td>next()</td> 
   <td>$(‘li’).next()</td> 
   <td align="left">找下一个兄弟</td> 
  </tr> 
  <tr> 
   <td>first()</td> 
   <td>$(‘li’).first()</td> 
   <td align="left">第一个</td> 
  </tr> 
  <tr> 
   <td>last()</td> 
   <td>$(‘li’).last()</td> 
   <td align="left">最后一个</td> 
  </tr> 
  <tr> 
   <td>prev()</td> 
   <td>$(‘li’).prev()</td> 
   <td align="left">找上一次兄弟</td> 
  </tr> 
 </tbody> 
</table>

### 5.案例 ###

*  鼠标放上突出展示 \[02-突出展示.html\]
 *  鼠标进入高亮显示 \[03-鼠标进入高亮显示.html\]
 *  下拉菜单 \[04-下拉菜单.html\] √
 *  手风琴 \[05-手风琴.html\]
 *  淘宝服饰精品 \[06-淘宝服饰精品.html\]

## 四.jQuery操作样式 ##

### 1.CSS操作 ###

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

// name：需要设置的样式名称
    // value：对应的样式值
    $obj.css(name, value);
    // 使用案例
    $('#one').css('background','gray');// 将背景色修改为灰色

*  设置多个样式

// 参数是一个对象，对象中包含了需要设置的样式名和样式值
    $obj.css(obj);
    // 使用案例
    $('#one').css({ 
        'background':'gray',
        'width':'400px',
        'height':'200px'
    });

*  获取样式

// name:需要获取的样式名称
    $obj.css(name);
    // 案例
    $('div').css('background-color');

注意：获取样式操作只会返回第一个元素对应的样式值。

隐式迭代：

1.  设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值
2.  获取操作的时候，如果是多个元素，那么只会返回第一个元素的值。

### 2.class操作 ###

*  添加样式类

// name：需要添加的样式类名，注意参数不要带点.
    $obj.addClass(name);
    // 例子,给所有的div添加one的样式。
    $('div').addClass('one');

*  移除样式类

// name:需要移除的样式类名
    $obj.removeClass('name');
    // 例子，移除div中one的样式类名
    $('div').removeClass('one');

*  判断是否有某个样式类

// name:用于判断的样式类名，返回值为true false
    $obj.hasClass(name)
    // 例子，判断第一个div是否有one的样式类
    $('div').hasClass('one');

*  切换样式类

// name:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式。
    $obj.toggleClass(name);
    // 例子
    $('div').toggleClass('one');

### 3.案例 ###

*  tab栏切换案例

## 五.jQuery动画 ##

*  jQuery提供了三组基本动画，这些动画都是标准的、有规律的效果，jQuery还提供了自定义动画的功能。
 *  演示动画效果

### 1.三组基本动画 ###

*  显示(show)与隐藏(hide)是一组动画：
 *  滑入(slideUp)与滑出(slideDown)与切换(slideToggle)，效果与卷帘门类似
 *  淡入(fadeIn)与淡出(fadeOut)与切换(fadeToggle)

$obj.show([speed], [callback]);
    // speed(可选)：动画的执行时间
    	 // 1.如果不传，就没有动画效果。如果是slide和fade系列，会默认为normal
    	 // 2.毫秒值(比如1000),动画在1000毫秒执行完成(推荐)
         // 3.固定字符串，slow(200)、normal(400)、fast(600)，如果传其他字符串，则默认为normal。
    // callback(可选):执行完动画后执行的回调函数
    
    slideDown()/slideUp()/slideToggle();同理
    fadeIn()/fadeOut();fadeToggle();同理

### 2.自定义动画 ###

CSS3学过；语法格式：animation,transform rotate等结合。

*  animate: 自定义动画

$(selector).animate({ params},[speed],[easing],[callback]);
    // {params}：要执行动画的CSS属性left top width height，带数字（必选）
    // speed：执行动画时长（可选）
    // easing:执行效果，默认为swing（缓动） 可以是linear（匀速）
    // callback：动画执行完后立即执行的回调函数（可选）

### 3.动画队列与停止动画 ###

*  在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画队列中，等前面的动画执行完成了才会执行（联想：火车进站）。

// stop方法：停止动画效果
    stop(stopAll, goToEnd);
    // 第一个参数：是否清除队列
    // 第二个参数：是否跳转到最终效果

### 4.案例 ###

*  开机动画案例 \[09-开关机动画.html\]
 *  下拉菜单-动画 \[10-下拉菜单-动画.html\]

## 六.jQuery节点操作 ##

### 1.创建节点 ###

// $(htmlStr)
    // htmlStr：html格式的字符串
    $('<span-这是一个span元素</span-');

### 2.添加节点 ###

append  appendTo	在被选元素的结尾插入内容
    prepend prependTo	在被选元素的开头插入内容
    before				在被选元素之后插入内容
    after				在被选元素之前插入内容

### 3.清空节点与删除节点 ###

*  empty：清空指定节点的所有元素，自身保留(清理门户)

$('div').empty(); // 清空div的所有内容（推荐使用，会清除子元素上绑定的内容，源码）
    $('div').html('');// 使用html方法来清空元素，不推荐使用，会造成内存泄漏，绑定的事件不会被清除。

*  remove：相比于empty，自身也删除（自杀）

$('div').remove();

### 4.克隆节点 ###

*  作用：复制匹配的元素

// 复制$(selector)所匹配到的元素（深度复制）
    // cloneNode(true)
    // 返回值为复制的新元素，和原来的元素没有任何关系了。即修改新元素，不会影响到原来的元素。
    $(selector).clone();

### 5.案例 ###

*  城市选择 \[11-城市选择案例.html\]
 *  删除表格 \[12 表格删除案例.html\]
 *  根据数据生成表格 \[13-表格生成案例.html\]
 *  添加和删除表格数据 \[14-动态数据添加和删除.html\]

## 七.jQuery操作属性 ##

### 1.attr操作 ###

*  设置单个属性

// 第一个参数：需要设置的属性名
    // 第二个参数：对应的属性值
    $obj.attr(name, value);
    // 用法举例
    $('img').attr('title','哎哟，不错哦');
    $('img').attr('alt','哎哟，不错哦');

*  设置多个属性

// 参数是一个对象，包含了需要设置的属性名和属性值
    $obj.attr(obj)
    // 用法举例
    $('img').attr({ 
        title:'哎哟，不错哦',
        alt:'哎哟，不错哦',
        style:'opacity:.5'
    });

*  获取属性

// 传需要获取的属性名称，返回对应的属性值
    $obj.attr(name)
    // 用法举例
    var oTitle = $('img').attr('title');
    alert(oTitle);

*  移除属性

// 参数：需要移除的属性名，
    $obj.removeAttr(name);
    // 用法举例
    $('img').removeAttr('title');

### 2.prop操作 ###

*  在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法。

// 设置属性
    $(':checked').prop('checked',true);
    // 获取属性
    $(':checked').prop('checked');// 返回true或者false

本质原因：\*\*\*\*property\*\*\*\* : 原生JS对对象的属性称之为 **property** **。**

***\*attribute\** ：HTML元素标签上的属性称之为attribute。**

使用jQuery操作的元素属性时：布尔值属性：使用prop() ，非布尔值属性：使用attr() 。

总结：

***\*attribute 与 \*\*property\*\* \*\*同步关系\*\**\***

非布尔值属性：实时同步。

布尔值属性：

property 永远不会同步至attribute

### 3.val()/text/()html() ###

$obj.val()		获取或者设置表单元素的value属性的值
    $obj.html() 	对应innerHTML
    $obj.text()		对应innerText/textContent，处理了浏览器的兼容性

### 4.案例 ###

*  表格全选反选 \[15-表格全选反选.html\]
 *  打字效果 \[16-打字效果.html\]

## 八.jQuery尺寸和位置操作 ##

### 1.width方法与height方法 ###

*  设置或者获取高度，不包括内边距、边框和外边距

// 带参数表示设置高度
    $('img').height(200);
    // 不带参数获取高度
    $('img').height();

获取网页的可视区宽高

// 获取可视区宽度
    $(window).width();
    // 获取可视区高度
    $(window).height();

### 2.innerWidth/innerHeight/outerWidth/outerHeight ###

innerWidth()/innerHeight()	方法返回元素的宽度/高度（包括内边距）。
    outerWidth()/outerHeight()  方法返回元素的宽度/高度（包括内边距和边框）。
    outerWidth(true)/outerHeight(true)  方法返回元素的宽度/高度（包括内边距、边框和外边距）。

### 3.scrollTop与scrollLeft ###

*  设置或者获取垂直滚动条的位置

// 获取页面被卷曲的高度
    $(window).scrollTop();
    // 获取页面被卷曲的宽度
    $(window).scrollLeft();

### 4.offset方法与position方法 ###

*  offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素(offsetParent)的位置。

// 获取元素距离document的位置,返回值为对象：{left:100, top:100}
    $(selector).offset();
    // 获取相对于其最近的有定位的父元素的位置。
    $(selector).position();

案例：固定导航栏 \[17-固定导航栏.html\]  
案例：电梯导航 \[18-电梯导航.html\]

## 九.jQuery事件机制 ##

> JavaScript中已经学习过了事件，jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。

### 1.jQuery事件发展历程(了解) ###

简单事件绑定–bind事件绑定–delegate事件绑定–on事件绑定(推荐)

*  简单事件注册

click(handler)			单击事件
    mouseenter(handler)		鼠标进入事件
    mouseleave(handler)		鼠标离开事件

缺点：不能同时注册多个事件

*  bind方式注册事件

// 第一个参数：事件类型
    // 第二个参数：事件处理程序
    $('p').bind('click mouseenter', function(){ 
        // 事件响应方法
    });

缺点：不支持动态事件绑定

*  delegate注册委托事件

// 第一个参数：selector，要绑定事件的元素
    // 第二个参数：事件类型
    // 第三个参数：事件处理函数
    $('.parentBox').delegate('p', 'click', function(){ 
        // 为 .parentBox下面的所有的p标签绑定事件
    });

缺点：只能注册委托事件，因此注册时间需要记得方法太多了

*  on注册事件

### 2.on注册事件(重点) ###

*  jQuery1.7之后，jQuery用on统一了所有事件的处理方法。
 *  最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。

on注册简单事件

// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
    $(selector).on( 'click', function() { });

on注册事件委托

// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
    $(selector).on('click','span', function() { });

事件委托原理

// 事件委托的原理
    var ul = document.querySelector('#ul');
    ul.onclick = function (e) { 
      // console.log(e.target.tagName);
      if (e.target.tagName.toLowerCase() === 'li') { 
        console.log(e.target);
      }
    }

on注册事件的语法：

// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
    // 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
    // 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
    // 第四个参数：handler，事件处理函数
    $(selector).on(events[,selector][,data],handler);

*  通过源码查看 bind click delegate on 注册事件的区别

### 3.事件解绑 ###

*  unbind方式（不用）

$(selector).unbind(); // 解绑所有的事件
    $(selector).unbind('click'); // 解绑指定的事件

*  undelegate方式（不用）

$( selector ).undelegate(); // 解绑所有的delegate事件
    $( selector).undelegate( 'click' ); // 解绑所有的click事件

*  off方式（推荐）

// 解绑匹配元素的所有事件
    $(selector).off();
    // 解绑匹配元素的所有click事件
    $(selector).off('click');

### 4.触发事件 ###

$(selector).click(); // 触发 click事件
    $(selector).trigger('click');

### 5.jQuery事件对象 ###

jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。

// screenX和screenY 对应屏幕最左上角的值
    // clientX和clientY 距离页面左上角的位置（忽视滚动条）
    // pageX和pageY 距离页面最顶部的左上角的位置（会计算滚动条的距离）
    
    // event.keyCode 按下的键盘代码
    // event.data 存储绑定事件时传递的附加数据
    
    // event.stopPropagation() 阻止事件冒泡行为
    // event.preventDefault() 阻止浏览器默认行为
    // return false:既能阻止事件冒泡，又能阻止浏览器默认行为。

## 10.jQuery补充知识点 ##

### 1.链式编程 ###

*  通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。children(‘li’).siblings(‘ul’).show()
 *  常问原因，有几种形式；

end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。

### 2.each方法 ###

*  jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。

作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数

// 参数一表示当前元素在所有匹配元素中的索引号
    // 参数二表示当前元素（DOM对象）
    $(selector).each(function(index,element){ });

### 3.多库共存 ###

*  jQuery使用 作 为 标 示 符 ， 但 是 如 果 与 其 他 框 架 中 的 作为标示符，但是如果与其他框架中的 作为标示符，但是如果与其他框架中的冲突时，jQuery可以释放$符的控制权.

var c = $.noConflict();// 释放$的控制权,并且把$的能力给了c

## 十一.插件 ##

### 1.常用插件 ###

*  弹出层插件 layer
    
     *  [layer插件][layer]
 *  放大镜插件
    
     *  [jQuery.zoom][]
 *  轮播图插件
    
     *  [http://sorgalla.com/jcarousel/][http_sorgalla.com_jcarousel]
     *  [https://github.com/OwlCarousel2/OwlCarousel2][https_github.com_OwlCarousel2_OwlCarousel2]
 *  图片懒加载插件
    
     *  [jQuery.lazyload][]
 *  jQueryUI
    
     *  常用的2-3个功能演示
 *  查看jQuery插件的源码

### 2.自己探索插件 ###

*  [artDialog][]
 *  [图片放大][Link 1]
 *  [github上搜索][github]

## 3.jQuery插件开发 ##

*  给jQuery增加方法的两种方式

$.method = fn		静态方法
    $.fn.method = fn	实例方法

*  增加一个静态方法，实现两个数的和，插件

(function ($) { 
      $.add = function (a, b) { 
        return a + b;
      }
    }(jQuery))
    
    $.add(5, 6);

*  tab栏插件

*  表格插件

*  插件开发的原理

[layer]: https://github.com/sentsin/layer
[jQuery.zoom]: http://www.jacklmoore.com/zoom/
[http_sorgalla.com_jcarousel]: http://sorgalla.com/jcarousel/
[https_github.com_OwlCarousel2_OwlCarousel2]: https://github.com/OwlCarousel2/OwlCarousel2
[jQuery.lazyload]: https://github.com/tuupola/jquery_lazyload
[artDialog]: https://github.com/aui/artDialog
[Link 1]: https://github.com/fat/zoom.js
[github]: http://www.github.com