jQuery基本概念

学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常见的效果。

为什么要学习jQuery？

【01-让div显示与设置内容.html】

使用javascript开发过程中，有许多的缺点：

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

jQuery初体验

【02-让div显示与设置内容.html】

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

    $("#btn2").click(function () {
        $("div").text("我是内容");
    });
});

优点总结：

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

没有对比，就没有伤害，有了对比，处处戳中要害。

什么是jQuery?

jQuery的官网 http://jquery.com/ jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。

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

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

jQuery的版本

官网下载地址：http://jquery.com/download/ 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-1.12.4.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本没有颗阅读性。
jquery-1.12.4.js:未压缩版本，适用于学习与开发环境，源码清晰，易阅读。

jQuery的入口函数

使用jQuery的三个步骤：

1. 引入jQuery文件
2. 入口函数
3. 功能实现

关于jQuery的入口函数：

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

onload与jQuery的入库函数区别：

1. onload执行一次，会覆盖先前的代码
2. onload需要等待页面资源加载完成后执行函数
3. jQuery的入库函数可以执行多次，代码不会覆盖
4. 等待页面DOM属加载完成后执行函数，比onload执行要早

jQuery入口函数与js入口函数的对比

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

jQuery对象与DOM对象的区别（重点）

1. DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
2. jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
3. jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合（伪数组））
4. DOM对象与jQuery对象的方法不能混用。

DOM对象转换成jQuery对象：【联想记忆：花钱】

var $obj = $(domObj);
var 变量名 = $(DOM对象);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

jQuery对象转换成DOM对象：

var $li = $(“li”);
for(var i =0; i<$li.length;i++){
    //通过遍历取出的是DOM对象
    $li[i]
}

//第一种方法（推荐使用）
//取出jQuery伪数组的第一个DOM对象
$li[0]
//第二种方法
$li.get(0)

【练习：隔行变色案例.html】

选择器

什么是jQuery选择器

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

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

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

基本选择器

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

层级选择器

跟CSS的选择器一模一样。

过滤选择器

这类选择器都带冒号:

【案例：隔行变色】

筛选选择器(方法)

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

注意：可以没有参数

【案例：下拉菜单】this+children+mouseenter+mouseleave

【案例：突出展示】siblings+find
【案例：手风琴】next+parent
【案例：淘宝精品】index+eq

jquery操作样式

1. style：行内样式
2. class：类样式（主要方式）
3. css()：采用的是行内
   1. 情况一： css(name,value)给元素添加一个样式，直接给样式名称和值
   2. 情况二： css({key:value,key2:value2}) 给元素添加多个样式，参数传入对象
   3. 情况三： css(name) 当只传入样式名的时候，返回该样式名称的值
4. 注意
   1. 隐式迭代：设置操作的时候，如果是多个元素，那么给所有的元素设置相同的值
   2. 获取操作的时候，如果是多个元素，那么只会返回第一个元素的值。

 <script src="jquery-1.12.4.min.js"></script>
<script>
// 给元素添加单个样式
      $('div').css("backgroundColor",'red')
      // 给元素添加多个样式
 $('div').css({
   "backgroundColor":'red',
   'border':'2px solid black',
    "margin":'100px auto'
  })
      // 获取样式的值
var sv=$('div').css('border')  
//此处如果有多个div，只返回第一个元素的该样式的值
console.log("样式的值",sv)
</script>

jquery操作class

回忆一下js中操作类名的方法

• classList.add("className"); 添加类名
• classList.remove("className"); 删除类名
• classList.contains('className'); 是否包含类名
• classList.toggle('className'); 切换类名

常用方法介绍

1. addClass(name): 添加类名，同时操作多个类名，中间空格隔开

  $('div').addClass('base fz')

1. removeClass(name): 移除指定类，同时操作多个类名，中间空格隔开

  $('div').removeClass('fz')  // 如果参数为空，就会移除掉该元素所有的类名

1. toggleClass(name): 切换类名，同时操作多个类名，中间空格隔开

  $('div').toggleClass('red') // 所谓切换，就是如果有该类名则删除，如果没有则添加

1. hasClass(name): 是否有某个类名，同时操作多个类名，中间空格隔开,顺序不能变

  $('div').hasClass('red') // 返回true或者false，如果有多个元素只判断"第一个"

jquery操作属性

js中操作属性

• setAttribute 设置属性
• getAttribute 获取属性

使用方法:

//单一属性设置
//name:属性名 value：属性值
attr(name,value) 

//多个属性设置
attr({name:value,name:value,name:value,....})

//获取属性值
attr(name)  name 属性名

1. attr() 设置属性
   1. 情况一： attr(name,value) //设置单个属性 $('img').attr("title","这是图片")
   2. 情况二: attr({key:value,key2:value2}) // 设置多个属性 $('img').attr({ "title": "这是图片", 'alt': '哈哈' })
   3. 情况三: attr(name) // 获取属性的值 $('img').attr('title')
2. removeAttr() 移除单个或者多个属性

$('img').removeAttr('alt')  // 移除单个属性
$('img').removeAttr('alt title') // 移除多个属性中间用"空格隔开"

注意：attr无法处理布尔类型的，attr操作布尔属性的bug。

布尔类型的属性操作

attr操作布尔属性的bug

 <!-- 这段代码使用attr操作布尔类型的属性有Bug -->
<button>选中</button>
<button>不选中</button>
<input type="checkbox">

       $('button:first').click(function () {
            $('input').attr('checked', true);
            console.log($('input').attr('checked'));
        });
        $('button:last').click(function () {
            $('input').attr('checked', false);
            console.log($('input').attr('checked'));  // undefined
        });

prop()

1.6版本以后凡是布尔类型属性如：checked disabled selected不在使用attr来操作，换成prop

prop()的 demo

      $('button:first').click(function() {
         $('input').prop('checked', true);
  console.log($('input').prop('checked'));
      });   $('button:last').click(function() {
        $('input').prop('checked', false);
        console.log($('input').prop('checked'));
      });

功能正常

att和prop值得注意点

• attr() 处理非布尔类型的固有的或者 自定义属性
• prop() 能处理自带属性和布尔类型属性， 不能处理自定义属性

jquery动画

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

隐藏/展示动画

(参数为空,没有动画效果):本质就是改变元素的width,height,opacity

1. show(time,func) 展示动画

   time：元素展开的动画时间，单位毫秒，可以直接数字，也可以固定字符串形式：

   fast:快=200msnormal：正常=400ms slow:慢=600ms

   func: 回调函数[可选参数],动画执行完成后执行

2. hide() 隐藏动画

   用法和show()一致，只是动画效果是逆向的

3. toggle()

   动画切换，如果当前状态是展示，触发toggle()则隐藏，否则展示

注意：显示/隐藏动画的本质就是改变原始的高度、宽度、透明度

淡入/淡出动画

(没有参数时默认是normal也就是400ms):本质就是改变元素透明度

1. fadeIn()
2. fadeOut()
3. fadeToggle()

参数，用法和show()/hide()/toggle()一致可以一并记忆，只是动画效果不同

注意：淡入/淡出的本质就是改变原始的透明度

下拉/上卷动画

(没有参数时默认是normal也就是400ms):本质就是改变元素的height属性

1. slideDown()
2. slideUp()
3. slideToggle()

参数，用法和show()/hide()/toggle()一致可以一并记忆，只是动画效果不同

注意：下拉/上卷的本质就是改变原始的高度

自定义动画 animate()

参数1：必填，给动画设置样式 是个对象 参数2：指定动画时间，默认是normal 参数3：指定动画效果 默认是swing：秋千效果 ,常用的还有linear：匀速 等等 参数4：回调函数，动画完成后执行

jquery动画队列

jquery为了保证动画不会丢失，使用队列的形式，依次执行动画 所以只要你触发动画事件，就相当于向队列添加一个动画任务,直到执行完成

stop()停止动画

参数一：是否清除被选元素所有加入队列的动画？true/false，默认false 参数二: 是否直接跳到最后的执行结果？true/false,默认false

如果参数stop(true,true) 第一参数是true动画队列会被清除，所以即使第二参数也是true,但因为动画队列被清除后没有了后续动画也就执行不到最终的效果

//停止之前所有执行的动画队列，执行当前动画
$(this).stop().animate("width",400,function(){})

拓展：多媒体audio方法

load()加载多媒体文件 jQuery里有该方法

play()播放文件 jQuery里面没有改方法

CSS3动画

使用jQuery操作css3动画

1. 在要做动画的元素的父级元素上添加transition过渡动画
2. 使用JQuery操作变化的类名
3. 使用transitionend API监听transition动画是否执行完成

注意：推荐使用节流阀思想，所有元素都在做动画，只要监听其中一个元素执行完整即可

//监听动画是否执行完成
$(divs)[0].addEventlistener("transitionend",function(){
   flag = true ; 
});

jQuery操作节点

创建节点

语法：$("完整标签")

var btn = $("<button> 新的</button>")

添加节点

//从后面添加到父级元素中
append()
parantNode.append(chirldNode)

appendTo()
chirldNode.appendTo(parantNode)

//从前面面添加到父级元素中
prepend()
parantNode.prepend(chirldNode)

prependTO()
chirldNode.appendTo(parantNode)

//兄弟元素添加节点
before() 
兄弟元素.before(新节点) 前面追加节点

after()
兄弟元素.after(新节点) 从后面追加节点

删除节点

移除元素
//移除自身
$("div")remove()；
//清空子元素，不包括自身
$("div").empty()；

复制节点

clone()无参数，默认false，克隆元素包含元素内容，但是不包含事件，浅克隆
clone(true)有参数，克隆元素包含元素内容，包括元素事件，深度克隆

jQuery特殊属性操作

val方法

val方法用于设置和获取表单元素的值，例如input、textarea的值

//设置值

$("#name").val(“张三”);

//获取值

$("#name").val();

【案例：京东搜索.html】

html方法与text方法

html方法相当于innerHTML text方法相当于innerText

//设置内容
$(“div”).html(“<span>这是一段内容</span>”);

//获取内容
$(“div”).html()

//设置内容
$(“div”).text(“<span>这是一段内容</span>”);

//获取内容
$(“div”).text()

区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。

width方法与height方法

设置或者获取高度

//带参数表示设置高度
$(“img”).height(200);

//不带参数获取高度
$(“img”).height();

获取盒子内部高度(高度+padding)

innerHeight()
innerWidth()

获取盒子内部高度(高度+padding+border)

outerHeight()
//参数布尔类型，无参数：默认false， 不包含marginTop和marginBottom
//有参数：true，包含marginTop和marginBottom

outerWidth()
//参数布尔类型，无参数：默认false， 不包含marginLeft和marginRight
//有参数：true，包含marginLeft和marginRight

获取网页的可视区宽高

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

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

scrollTop与scrollLeft

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

//获取页面被卷曲的高度
$(window).scrollTop();
//设置页面被卷曲的高度
$(window).scrollTop(100);

//获取页面被卷曲的宽度
$(window).scrollLeft();
//设置页面被卷曲的宽度
$(window).scrollLeft(100);
注意：window在jQuery中无法执行动画(animate)

【案例：仿腾讯固定菜单栏案例】【案例：小火箭返航案例】

offset方法与position方法

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

//获取元素距离document的位置,返回值为对象：{left:100, top:100}

$(selector).offset();

//获取相对于其最近的有定位的父元素的位置。

$(selector).position();

jQuery事件机制

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

jQuery事件发展历程(了解)

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

简单事件注册

click(handler)        单击事件
mouseenter(handler)   鼠标进入
mouseleave(handler)   鼠标离开
focus() 			 获取焦点
btur() 				 失去焦点

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

bind方式注册事件

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

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

delegate注册委托事件

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

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

on注册事件

on注册事件(重点)

jQuery1.7之后，jQuery用on统一了所有事件的处理方法。

最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。

on注册简单事件

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

on注册事件的语法：

// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）

// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。

// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）

// 第四个参数：handler，事件处理函数

$(selector).on("events","selector",{"data":"itcast"},handler);

$(selector).on( "click", function() {
    
});

on注册委托事件

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

事件解绑

注意：简单注册事件没有解绑事件

unbind方式（不用）

 //解绑所有的事件
$(selector).unbind();

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

undelegate方式（不用）

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

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

off方式（推荐）

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

// 解绑匹配元素的所有click事件
$(selector).off("click");
// 解绑指定元素指定事件
$(selector).off("click","li");
//解绑所有元素的指定事件
$(selector).off("click","**");

//解绑委托事件
$("div").off("click mouseenter","li,p")

触发事件

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

$(selector).trigger("click");

jQuery事件对象

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

screenX和screenY   对应屏幕最左上角的值

//clientX和clientY   距离页面左上角的位置（忽视滚动条）

//pageX和pageY   距离页面最顶部的左上角的位置（会计算滚动条的距离）

//event.keyCode 按下的键盘代码

//event.data  存储绑定事件时传递的附加数据

//event.stopPropagation() 阻止事件冒泡行为

//event.preventDefault()    阻止浏览器默认行为

//return false:既能阻止事件冒泡，又能阻止浏览器默认行为。
//一旦使用return false 就终止代码执行，后续不再执行

【案例：钢琴版导航（加强）.html】

jQuery补充知识点

链式编程

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

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

【案例：五角星评分案例.html】

迭代方式

隐式迭代

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

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

显示迭代

方式一：for循环

方式二：each方法

// 参数一表示当前元素在所有匹配元素中的索引号

// 参数二表示当前元素（DOM对象）

$(selector).each(function(index,element){});

【案例：不同的透明度.html】

多库共存

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

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

插件

常用插件

插件：jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。

jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。

jquery.color.js

animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。

使用插件的步骤

1. 引入jQuery文件
2. 引入插件（如果有用到css的话，需要引入css）
3. 使用插件

jquery.lazyload.js

懒加载插件

jquery.ui.js插件

jQueryUI专指由jQuery官方维护的UI方向的插件。

官方API：http://api.jqueryui.com/category/all/

其他教程：jQueryUI教程

基本使用:

2.	1.	引入jQueryUI的样式文件
2.	引入jQuery
3.	引入jQueryUI的js文件
4.	使用jQueryUI功能

使用jquery.ui.js实现新闻模块的案例

制作jquery插件

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

//通过给$.fn添加方法就能够扩展jquery对象
$.fn. pluginName = function() {};

制作手风琴插件