jQuery基础知识常用

目录

第一章、体验jQuery

1.1 jQuery官网

1.2 什么是jQuery

1.3 如何使用jQuery

1.4 jQuery版本介绍

第二章、jQuery的常用函数及对象

2.1 $函数

2.2 设置、获取文本内容text()

2.3 设置、获取样式css()

2.4 常用选择器

2.5 class操作

2.6 jQuery动画

2.6.1 显示show()与隐藏hide()

2.6.2 滑入slideDown()与滑出slideUp()

2.6.3 淡入fadeIn()与淡出fadeOut()

2.6.4 自定义动画animate()

2.6.5 停止动画stop()

2.7 动态创建元素

2.7.1 html()

2.7.2 $()

2.8 jQuery节点操作

2.8.1 添加节点的常用方式

2.8.2 移除节点的常用方式

2.8.3 克隆节点的常用方式

2.9 val()函数

2.10 属性操作attr()和removeAttr()

2.11 操作布尔类型的属性props

2.12 宽和高

2.12.1 获取元素的宽和高

2.12.2 width()和height()

2.12.3 innerWidth()和innerHeight()

2.12.4 outerWidth()和outerHeight()

2.13 位置

2.13.1 offset() 和 position()

2.13.2 scrollTop()和scrollLeft()

2.14 事件

2.14.1 鼠标事件

2.14.2 键盘事件

2.14.3 表单事件

2.14.4 事件绑定

2.14.5 事件对象

第三章、jQuery补充

3.1链式编程与end方法

3.2 each()

第四章、jQuery扩展

4.1 多库并存

4.2 插件使用

第一章、体验jQuery

1.1 jQuery官网

官方地址：jQuery

建议使用文档：jQuery 教程 | 菜鸟教程

1.2 什么是jQuery

jQuery其实就是一个封装了很多方法的js库.使用jQuery其实目的就是方便我们相比使用原生的JavaScript（调用参数,返回值,方法有什么效果....）

1.3 如何使用jQuery

1.3.1 引入jQuery文件

· 本地引入：将jQuery下载下来，然后导入项目中，使用script标签进行引用

·网址引入：使用jQuery的远程CDN资源库在线引入

//方法1：本地引入
 
//方法2：网址引入

1.3.2 写一个入口函数

·两种写法：

//方法一
$(document).ready(function () {
    ...内容
});
//方法二：(常用)
$(function(){
    ....内容
})

·这里说说jQuery入口函数和window.onload入口函数的区别.

1、window.onload入口函数不能写多个,但是jQuery的入口函数是可以写多个的.

2、执行时机不同: jQuery入口函数要快于window.onload.

原因：jQuery入口函数等待页面上dom树加载完后执行.

           window.onload而等待页面上所有的资源(dom树/外部css/js连接,图片)都加载完毕后执行.

验证：
window.onload = function () {
  alert("我是window.onload");  //后弹窗
}

$(function () {
  alert("我是jQuery入口函数");  //先弹窗
});

1.3.3 找到你要操作的元素(利用jQuery选择器),去操作他(给他添加属性,样式,文本....).

/*例如：('选择器')->获取选择器；width(100)、height(100)、css('backgroundColor','red')样式，text('哈哈')文本*/
$(document).ready(function () {
  $('div').width(100).height(100).css('backgroundColor','red').text('哈哈'); //链式编程.
});

1.4 jQuery版本介绍

        1.x  支持老浏览器比如ie678      停止更新

        2.x  不支持老浏览器的               停止更新

        3.x  不支持老浏览器的               更新中

第二章、jQuery的常用函数及对象

2.1 $函数

（1）$是什么：$是一个函数，参数传递不同，效果也不一样。

        ·如果参数传递的是一个匿名函数-入口函数

$(function(){
});

        ·如果参数传递的是一个字符串-选择器/创建一个标签

$('#one');
$('
啦啦,我是一个div
');

        ·如果参数是一个dom对象,那他就会把dom对象转换成jQuery对象.

$(dom对象);

              ----DOM对象与jQuery对象的转换：

                   ·DOM对象:原生js选择器获取到的对象

                    特点：只能调用dom方法或者属性,不能调用jQuery的属性或者方法

document.getElementById("");
document.getElementsByTagName("");
document.getElementsByClassName("")
var div = document.getElementById("box");
div.style.backgroundColor = 'red'; //dom对象是可以调用dom的属性或者方法

                   ·jQuery对象：利用jQuery选择器获取到的对象,

                    特点:只能调用jQuery的方法或者属性,不能调用dom对象的属性或者方法.

var $div = $('#box');
$div.css('backgroundColor','green');//jQuery对象是可以调用jQuery的方法的.

                   ·DOM对象与jQuery对象互相转换:

                        -使用$()转换为jQuery对象

                        -使用下标 / jQuery的方法get()转换为DOM对象

//加$()转换jQuery对象
var div1 = document.getElementById("one");
var $div1 = $(div1);
//使用下标来取出来为DOM对象
var $divs = $('div');
var div1 = $divs[0];
//使用jQuery的方法.get()取出来的也是DOM对象
var div2 = $divs.get(1);

(2) $和jQuery是等价的,是一个函数.

console.log(window.jQuery === window.$);//true
console.log(Object.prototype.toString.call($));//'[object Function]'

(3)jQuery文件是一个自执行函数,执行这个jQUERY文件中的代码,其实就是执行这个自执行函数.

导入jquery文件其实就是给window对象添加一个jQuery属性和$属性。

(function(){
   window.jQuery = window.$ = jQuery;
}());

2.2 设置、获取文本内容text()

（1）获取文本: text()方法不给参数

  ·获取id为div(或者class为box)这个标签的文本：会获取到这个标签中所有的文本,包括后代元素的文本

  ·获取标签为div的元素的文本：包含了多个dom元素的jQuery对象,通过text()方法获取文本,会把所有dom元素的文本获取到

console.log($('#div').text())
console.log($('div').text())
console.log($('.box').text())

(2)设置文本: text()方法给参数,参数就是要设置的文本

· 给id为div(或者class为box)的这个标签设置文本：会覆盖他原来的内容,如果设置的文本中包含标签,是不会把这个标签给解析出来的.

· 给标签为div的元素设置文本：包含了多个dom元素的jQuery对象,通过text()方法设置文本,会把所有的dom元素都设置上.

$('#div').text('我是新设置的文本');
$('#div').text('我是新设置的文本我是连接');
$('.box').text('我是新设置的文本');
$('div').text('设置的文本');

2.3 设置、获取样式css()

(1）获取样式: css()方法设置参数为要获取值的样式名.

· 获取id为div(或者class为box)这个元素的样式.

· 获取标签为div的元素们的样式.

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

console.log($('#div').css('width')); //'200px'
console.log($('#div').css('height')); //'200px'
console.log($('#div').css('background-color'));//'rgb(255, 190, 220)'
console.log($('#div').css('backgroundColor'));//'rgb(255, 190, 220)'
console.log($('.box').css('border'));//'1px solid rgb(255, 0, 0)'
//注意：获取样式操作只会返回第一个元素对应的样式值。
console.log($('div').css('width'));//'200px'

(2)设置样式: css()方法要给样式名和样式值(注意:设置的样式是行内样式)

·给id为div(或者class为box)的这个元素设置样式:可以设置单个样式和多个样式

·给标签为div的元素们设置样式

//单个标签设置单样式
$('#div').css('width','300px');
$('#div').css('height',300);
$('#div').css('backgroundColor','red');
$('#div').css('border','10px solid green');
//单个设置多样式
$('#div1').css({
   width:300,
   'height':'300px',
   'background-color':'green',
   'border-top-width':'10px'
});
//多个标签设置多样式
$('div').css({
   width: 300,
  'height': '300px',
  'background-color': 'green',
  'border': '10px solid red',
   marginTop:10
});

2.4 常用选择器

2.4.1 基本选择器(这种方法可以理解和和css里面的选择器是一样的)

·id选择器            $('#id')

·类选择器            $(".类名")

·标签选择器          $("标签名")

·并集选择器          $('.box1,.box2')

·交集选择器          $('li.current')

·获取当前元素标签       $(this) ……

2.4.2 层次选择器

·后代选择器   $('#fahter div')  ---> 获取id为father这个标签的所有后代的div

·子代选择器   $('#father > div')  ---> 获取id为father这个元素的所有子代(第一层)div

·相邻兄弟选择器   $('#box+li')   ---> 获取id为box的下一个兄弟li标签

·普遍兄弟选择器   $('#box~li')   ---> 获取id为box的其他所有兄弟li标签

2.4.3 DOM遍历

(1)后代

· children()   --->返回被选元素的所有直接子元素。（括号加选择器名称，找到所有对应的孩子元素）

· find()         --->返回被选元素的后代元素，一路向下直到括号中选择器对应的元素。

(2)父亲

· parent()     --->返回被选中元素的父亲的元素。

(3)兄弟

· siblings()    --->返回被选元素的所有同胞元素。（括号中加选择器的名称，表示需要所有该类别的同胞元素）

· next()        --->返回被选元素的下一个同胞元素

· nextAll()   --->返回被选元素之后的所有跟随的同胞元素

· prev()      --->返回被选元素的上一个同胞元素(与next()相反)

· prevAll()   --->返回被选元素之前的所有跟随的同胞元素(与nextAll()相反)

(4)过滤

· first()        --->返回被选元素的首个元素。

· last()        --->返回被选元素的最后一个元素。

· eq()         --->返回被选元素中带有指定索引号的元素。

· not()       --->返回不匹配标准的所有元素（括号中放入条件）

· filter()     --->允许规定一个标准。不匹配这个标准的元素会被从集合中删除，否则被返回。

· index()   --->返回当前元素在兄弟元素之间的索引值

2.5 class操作

(1)添加类 addClass(类名)

//1、给id为div的元素添加一个类：名为fontSize30.
$('#div').addClass('fontSize30');
//2、添加多个类(用空格隔开)：类名为fontSize30 width200
$('#div').addClass('fontSize30 width200');

(2)移除类  removeClass(类名)

//1、给id为div1的元素移除单个类.
$('#div1').removeClass('fontSize30');
//移除多个类
$('#div1').removeClass('fontSize30 width200');
//移除所有的类
$('#div1').removeClass();

(3)判断类  hasClass(类名)

//判断一个元素有没有某个类,如果有就返回true,如果没有就返回false.
console.log($('#div').hasClass('fontSize30'));

(4)切换类  toggleClass(类名)

//如果元素有某个类就移除这个类, 如果元素没有这类就添加这个类.
$('#div').toggleClass('fontSize30');

2.6 jQuery动画

2.6.1 显示show()与隐藏hide()

(1)显示show(参数1，参数2)

    · 参数1:代表执行动画的时长 毫秒数,也可以是代表时长的字符串 fast normal  slow

    · 参数2:代表动画执行完毕后的回调函数.

    (i)如果show()这个方法没有参数,那就没有动画效果,类似与display：block

    (ii)如果要想要动画效果,就给他参数1.

//方法1:给毫秒数
$('#div').show(2000);
//方法2:fast(200) normal(400)  slow(600)
$('#div').show('fast'); //注意如果单词写错默认为normal

    (iii)放第二个参数，回调函数，里面还可以继续写动画

$('#div').show(2000, function () {
   alert('动画执行完毕了...');
})

(2)隐藏hide(参数1，参数2):用法与显示一样

(3)显示隐藏切换toggle(参数1，参数2):用法与显示一样，如果元素是隐藏状态就动画显示; 如果元素是显示状态就动画影藏

2.6.2 滑入slideDown()与滑出slideUp()

(1)滑入slideDown(参数1，参数2)

    · 参数1:动画执行的时长

    · 参数2:动画执行完毕后的回调函数

    (i)如果slideDown()/slideUp()这个方法没有参数,相当于给一个默认的时长,normal代表的400毫秒

    (ii)给参数1,可以让动画的时间自定义(使用方法与2.6.1类似)

//让id为div的元素滑入.
//没有给参数相当于给了一个默认的时长,mormal代表的400毫秒
$('#div').slideDown();
//给了参数相当于设置了动画时长
$('#div').slideDown(2000);
//第二个回调函数参数表示之后要做的事
$('#div1').slideDown(2000, function () {
  alert('滑入完成了..');
});

(2)滑出slideUp(参数1，参数2)

(3)滑入滑出切换slideToggle(参数1，参数2)：元素是隐藏状态就滑入; 元素是显示状态就滑出.

2.6.3 淡入fadeIn()与淡出fadeOut()

(1)淡入fadeIn(参数1，参数2)

    · 参数1:动画执行的时长

    · 参数2:动画执行完毕后的回调函数

    (i)如果fadeIn()/fadeOut()这个方法没有参数,相当于给了一个默认的时长,normal代表的400毫秒

    (ii)给参数1,可以让动画的时间自定义(使用方法与2.6.1类似)

//让id为div的这个元素淡入
//不给参数相当于给了一个默认的动画时长,normal400毫秒
$('#div1').fadeIn(); 
//给参数相当于自定义时长
$('#div1').fadeIn(1000);
//第二个回调函数参数表示之后要做的事
$('#div1').fadeIn(2000, function () {
  alert('淡入完成了...');
});

(2)淡出fadeOut(参数1，参数2)

(3)淡入淡出切换fadeToggle(参数1，参数2)

(4)淡入到那里 fadeTo(执行时间，透明度):淡入到哪一个透明度

//将div盒子的透明度淡入0~1
$('#div').fadeTo(1000,0.5)

2.6.4 自定义动画animate()

animate(参数1，参数2，参数3，参数4)

        · 参数1:必选的 对象 代表的是需要做动画的属性

        · 参数2:可选的 代表执行动画的时长

        · 参数3:可选的 代表的是缓动还是匀速 linear(匀速)  swing(缓动)   默认不写是缓动

        · 参数四:可选的 动画执行完毕后的回调函数(也可以执行完之后继续设置自定义动画)

/*让id为div的盒子先右移到800px，期间宽高变化为200px，透明度变化为0.5，
  匀速，执行2s；执行完上个动画之后，再让它移动到400px的位置，宽高变化
  为300px，距离上父盒子150px，透明度变化到1，2s执行完成，缓动执行*/
$('#div').animate({
  left:800,
  width:200,
  height:200,
  opacity:0.5
},2000,'linear', function () {
  $('#div1').animate({
     left:400,
     width:300,
     height:300,
     top:150,
     opacity:1
  },2000,swing);
});

2.6.5 停止动画stop()

stop(参数1，参数2)---->两参数都是布尔值

        · 参数1：是否清除队列(每一个动画都是一个队列)

        · 参数2：是否跳转到最终效果(是否跳转当前执行的动画的最终效果)

注意：如果stop()方法不写参数,默认就是两个false

2.7 动态创建元素

jQuery中创建节点的两种常用方式: html() 和 $()

2.7.1 html()

(1)获取内容：html()方法不给参数，获取指定元素内的所有内容(包括标签)

//获取id为div中的所有内容
console.log($('#div').html());

(2)设置内容：html()方法给参数，会给原来的内容覆盖掉，如果设置的内容中包含了标签,是会把标签给解析出来

//在id为div的盒子里设置内容
$('#div').html('我是设置的内容百度一下');

2.7.2 $()

$()能创建元素,但是创建的元素只存在于内存中,如果要在页面上显示,就要使用jquery的方法添加

var $link = $('我是新闻');
//追加节点：使用jquery添加元素的方法
$('#div').append($link);

2.8 jQuery节点操作

  

    
我是第1个li标签
    
我是第2个li标签
    
我是第3个li标签
    
我是第4个li标签
    
我是第5个li标签
  
  

    
我是第1个li标签2
    
我是第2个li标签2
    
我是第3个li标签2
    
我是第4个li标签2
    
我是第5个li标签2
  

2.8.1 添加节点的常用方式

(1)append():

用法：父元素.append(子元素); --->作为最后一个子元素添加.

        · 新创建一个li标签,添加到ul1中的去

var $liNew = $("
我是新创建的li标签
");
$('#ul1').append($liNew);

        · 把ul1中已经存在的li标签添加到ul中去. 剪切后，作为最后一个子元素添加.

var $li3 = $('#li3');
$('#ul1').append($li3);

        · 把ul2中已经存在的li标签添加到ul1中去.剪切后作为最后一个子元素添加.

var $li32 = $('#li32');
$('#ul1').append($li32);

(2)prepend()

用法：父元素.prepend(子元素);  --->作为第一个子元素添加(用法与append一样，效果刚好相反)   

//新建一个li标签,添加到ul1中去.
var $liNew = $("
我是新创建的li标签
");
$('#ul1').prepend($liNew);
//把ul1中已经存在的li标签添加到ul1中去. 剪切后作为第一个子元素添加.
var $li3 = $('#li3');
$('#ul1').prepend($li3);
//把ul2中已经存在的li标签添加到ul1中去. 剪切后作为第一个子元素添加.
var $li32 = $('#li32');
$('#ul1').prepend($li32);

(3)before()

用法：元素A.before(元素B); --->把元素B插入到元素A的前面,作为兄弟元素添加

        · 新建一个div在id为ul1的前面

var $divNew = $('
我是新建的div
');
$('#ul1').before($divNew);

(4)after()

用法：元素A.after(元素B); --->把元素B插入到元素A的后面,作为兄弟元素添加

        · 新建一个div在id为ul1的后面

var $divNew = $('
我是新建的div
');
$('#ul1').after($divNew);

(5)appendTo()

用法：子元素.appendTo(父元素); --->把子元素作为父元素的最后一个子元素添加.

        · 新建一个li标签,添加到ul1中li标签的最后面

var $liNew = $("
我是新创建的li标签
");
$liNew.appendTo($('#ul1'));

(6)prependTo() --->与(5)用法相同

2.8.2 移除节点的常用方式

(1)清空元素: empty()

        · 清空id为ul1的ul标签内的所有元素

$('#ul1').empty();

(2)移除节点: remove()

        · 移除id为li3的li标签

$('#li3').remove();

(3)结合遍历DOM方法使用

        · 移除ul1，通过子节点id为li3的li标签，获取它的父节点，然后移除父节点ul

$('#li3').parent().remove();

2.8.3 克隆节点的常用方式

(1)克隆节点:clone()

        · 使用该方法只存在于内存中,如果要在页面上显示,需要追加到页面上

        · clone()方法,有个参数(true/flase),参数不管是true还是false,都是会克隆到后代节点的.

        · clone()方法参数是true表示会把事件一起克隆到(深克隆). 参数如果是false就不会克隆事件 (浅克隆)

        · 不给参数默认是false

//给ul1添加点击事件
$('#ul1').click(function () {
  alert('哈哈,我被点击了...');
})

//克隆id为ul1的节点
//$('#ul1').clone()->点击事件不会被克隆，$('#ul1').clone(true)点击事件也被克隆
var $cloneUl = $('#ul1').clone();
//修改克隆节点的id
$cloneUl.attr('id','ul3');
//把克隆的节点追加到body中.
$('body').append($cloneUl);

2.9 val()函数

原生js是通过value属性来获取或者设置表单元素的值,jQuery则是利用val()函数获取表单的内容

(1)val()方法,不给参数获取表单内容

console.log($('#txt').val());

(2)val()方法,给参数设置表单内容

$('#txt').val('我是设置的值')

2.10 属性操作attr()和removeAttr()

(1)attr()

attr可以增(参数由属性和属性名，标签没有该属性)、改(参数有属性和属性名，标签有该属性)、查(参数只有属性名)三种操作

        · 设置单属性：操作标签.attr('属性名','属性内容') -->添加一个属性(可以自定义)

$('img').attr('src','992.gif');//以前有src属性,更改这个属性.
$('img').attr('aaa','哈哈哈');//修改自定义属性.
$('img').attr('bbb','bbb');//如果元素原来没有这个属性,那就是添加属性.

        · 设置多属性：操作标签.attr({属性名:'属性内容',属性名:'属性内容'……})  -->添加一个或者多个属性(也可由自定义属性)

$('img').attr({
  src:'992.gif',
  aaa:"hahaha",
  bbb:'bbb'
});

        · 获取属性：操作标签.attr('属性名')  --->获取该属性名对应的内容(没有属性名返回undefind)

console.log($('img').attr('src'));//自带的属性可以获取
console.log($('img').attr('aaa'));//自定义的属性也可以获取
//如果没有这个属性,获取到的值就是undefined; attr()设置的属性也是可以获取的.
console.log($('img').attr('bbb'));

(2)removeAttr()

        ·移除单个属性：removeAttr('属性名')

$('img').removeAttr('alt');
$('img').removeAttr('aaa');
$('img').removeAttr('bbb');

        ·移除多个属性：removerAttr('属性名 属性名 属性名')

$('img').removeAttr('alt aaa bbb');

2.11 操作布尔类型的属性props

 //针对于复选框

对于单选框/复选框，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法。

        ·设置

$('#ckb1').prop('checked','true')

        · 获取：如果复选框是选中状态返回一个true； 多选框是取消选中状态那返回就是一个false

console.log($('#ckb1').prop('checked'))

2.12 宽和高

.div {
  border: 10px solid red;
  padding: 20px;
  margin: 30px;
}

2.12.1 获取元素的宽和高

       ·获取元素的宽：操作元素.css('width')

//获取id为div的元素的宽
console.log($('#div').css('width'))

        ·获取元素的高：操作元素.css('hight')

//获取id为div的元素的高
console.log($('#div').css('height'))

2.12.2 width()和height()

获取或者设置元素的宽高的(只是内容宽高),这个宽高不包括padding/border/margin

        ·获取

console.log($('#div').width()); //获取元素的内容宽 200px
console.log($('#div').height());  //获取元素的内容高  200px

        ·设置

$('#div').width(300);  //设置元素内容宽为300px 
$('#div').height(300);  //设置元素内容高为300px

2.12.3 innerWidth()和innerHeight()

返回元素的宽度/高度（包括内边距padding)

console.log($('#div').innerWidth()); //240px width+padding
console.log($('#div').innerHeight()); //240px height+padding

2.12.4 outerWidth()和outerHeight()

方法返回元素的宽度/高度，内带参数true/false

        ·outerWidth()和outerHeight():包括内边距、边框-->padding+border

console.log($('#div').outerWidth()); //260px
console.log($('#div').outerHeight()); //260px

        ·outerWidth(true)和outerHeight(true):包括内外边距、边框-->padding+border+margin

console.log($('#one').outerWidth(true));  //320px
console.log($('#one').outerHeight(true));  //320px

2.13 位置

2.13.1 offset() 和 position()

        ·offset()：相对页面左上角的坐标

console.log($('#son').offset());
console.log($('#son').offset().top);  //150(不定)
console.log($('#son').offset().left);  //130

        ·position()：相对于有定位的父元素左上角的坐标

console.log($('#son').position())  // 110 110

2.13.2 scrollTop()和scrollLeft()

·scrollLeft()：表示元素内容被卷曲出去的宽度(滚动条滚动了多少)

·scrollTop()：表示元素内容被卷曲出去的高度

       ·获取

//获取元素
console.log($('div').scrollLeft() + ":" + $('div').scrollTop());
//获取页面被卷曲的高度和宽度
console.log($(window).scrollTop(),$(window).scrollLeft());

       ·设置

//设置元素内容被卷曲出去的高度或者宽度
$('div').scrollLeft(217);
$('div').scrollTop(217);
//设置页面被卷曲出去的距离
$(window).scrollTop(1000);
$(window).scrollLeft(1000);

2.14 事件

2.14.1 鼠标事件

(1)点击事件：click()

按钮

$('button').click(function () {
    console.log('按钮被单击了');
});

(2)鼠标进入和离开事件：mouseenter()、mouseleave()

盒子

//鼠标进入
$('.div').mouseenter(function () {
    console.log('mouse enter');
});
//鼠标离开
$('.div').mouseleave(function () {
    console.log('mouse leave');
});

与mouseover、mouseout的区别：

mouseenter()、mouseleave()不支持事件冒泡，事件只在鼠标移动到选取的元素上时触发(使用它)

mouseover、mouseout支持事件冒泡，事件在鼠标移动到选取的元素及其子元素上时都触发

(3)鼠标移动事件：mousemove()

鼠标指针在元素内移动时，mousemove事件就会被触发

盒子

$('.div').mousemove(function (event) {
    console.log(event.offsetX, event.offsetY);
});

2.14.2 键盘事件

(1)键盘按下和键盘松开事件：keydown()和keyup()

//键盘按键按下事件
$('input').keydown(function (event) {
    console.log(event.key);
});
//键盘按键松开事件
$('input').keyup(function (event) {
    console.log(event.key);
});

2.14.3 表单事件

(1)获取焦点触发事件：focus()

(2)失去焦点触发事件：blur()

(3)内容改变触发事件：change()

(4)内容选择触发事件：select()

//获取焦点
$('.input').focus(function () {
    $(this).css('background', 'red');
});
//失去焦点
$('.input').blur(function () {
    $(this).css('background', 'skyblue');
});
//内容发生改变
$('.input').change(function () {
    $(this).css($(this).val());
});
//选择内容触发函数
$('.input').select(function () {
    console.log($(this).val());
});

(5)表单提交触发事件：submit()

$('form').submit(function () {
    alert('该表已提交了');
});

2.14.4 事件绑定

(1)事件注册：on()

我是一个span标签

//点击添加一个div
$('#btn').click(function () {
  var $divNew = $('
');
  $('body').append($divNew);
});

        --->on()的两种注册方式

                ·简单注册事件，不支持动态注册的(对应元素新建之后不会带事件一起注册)

//使用该方法，在该实例中新建div不会有点击事件
$('div').on('click', function () {
    console.log("我是单击事件...");
});

                ·委托注册，支持动态注册的(对应元素新建之后会带事件一起注册)

//使用该方法，在该实例中新建div、span之后，也会有点击事件
$('body').on('click','div,span', function () {
  console.log("单击事件.");
}); 

(2)事件解绑：off()

        ·不给参数就是解绑所有的事件

        ·给参数解绑指定事件，例如：off('click')解绑指定的点击事件

$('#button').off();//解绑所有事件.
$('#button').off('click');//解绑click事件.

(3)事件触发：trigger()

        · 代码的方式来触发事件

        · 可以使用他来触发自定义事件

//给div注册一个自定义事件.
$('#one').on('zidingyi', function () {
  console.log("我触发了自定义事件！！！");
});
//那现在就是要触发该怎么办?就可以使用触发器trigger.
$('#btn2').on('click', function () {
  var res = confirm('请问要触发自定义事件吗');
  if(res){
      //触发自定义的zidingyi事件.
      $('#one').trigger('zidingyi');
  }
});

2.14.5 事件对象

(1)什么是事件对象?

注册一个事件,系统就会帮我们生成一个对象记录这个事件触发时候的一些信息，比如触发事件的时候有没有按住某个键,再比如触发这个事件的时候的一些坐标信息....jQuery中用事件参数e(event)来获取。

(2)三组常用的坐标

        · event.screenX和event.screenY:触发事件那一点距离 电脑屏幕最左上角的值

        · event.clientX和event.clientY:触发事件那一点距离 可视区左上角的值

        · event.pageX和event.pageY:触发事件那一点距离  页面左上角的值

 $('#one').on('click', function (e) {
    console.log(e);
    //触发事件那一点距离 屏幕最左上角的值
    console.log("screenX"+ e.screenX +" : " + e.screenY);
    //触发事件那一点距离 可视区左上角的值
    console.log("clientX"+ e.clientX +" : " + e.clientY);
    //触发事件那一点距离  页面左上角的值
    console.log("pageX"+ e.pageX +" : " + e.pageY);
});

(3)阻止事件冒泡

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

(4)阻止默认事件

event.preventDefault() //阻止默认行为-阻止a标签的跳转.

注意：

return false;  //既能阻止事件冒泡,又能阻止默认行为.

(5)获取键盘按下的键

console.log(event.keyCode);  //获取用户按下的是哪个键

第三章、jQuery补充

3.1链式编程与end方法

(1)什么时候可以链式编程?

· 如果给元素调用一个方法,这个方法有返回值,并且返回的是一个jQuery对象,那就可以继续再点出jQuery方法。(必须是jQuery对象才能点出jQuery方法)

例如：

console.log($('div').width(100).width()); //100
$('div').width(100).width().height(100); //报错了,因为数值不能点出jQuery方法.

(2)end()方法

· 回到上一个状态

·end()方法他也是jQuery方法,那他也需要一个jQuery对象才能点出了

//代码来源，五星评分
$(this).text(sx_wjx).prevAll().text(sx_wjx).end().nextAll().text(kx_wjx)

3.2 each()

· 遍历一个jQuery对象，为每个匹配元素执行一个函数

    
什么都看不见
    
什么都看不见
    
什么都看不见
    
什么都看不见
    
什么都看不见
    
什么都看不见
    
什么都看不见
    
什么都看不见
    
什么都看不见
    
什么都看不见

var $lis = $('#ulList').children();
//给每一个对象设置不同的值的时候
//作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数
$lis.each(function (index,element) {
   // console.log(index); //每一个li标签的索引
   // console.log(element);//每一个li标签,是一个dom对象.

   $(element).css('opacity',(index+1)/10);
});

第四章、jQuery扩展

4.1 多库并存

(1)如何查看jQuery的版本?

//通过以下四种方式可以查看jQuery的版本.
console.log(jQuery.fn.jquery);
console.log(jQuery.prototype.jquery);
console.log($.fn.jquery);
console.log($.prototype.jquery);

(2)如果引入了多个jQuery文件，使用的$是哪一个jQuery文件中的呢?

 //哪个文件后引入,使用的$就是谁的.
console.log($.fn.jquery);

(3)多库共存-->参数

 var _$ =  $.noConflict(); //3.0.0版本jQuery文件把$符号的控制权给释放了.
(function ($) {
  //在这个自执行函数中,就可以继续使用$了.
}(_$));
console.log(_$.fn.jquery);//3.0.0
console.log(jQuery.fn.jquery);//3.0.0
console.log($.fn.jquery);//1.12.4

(4)多库共存-->多个jQuery

注意：自己写的js文件不要放在jQuery文件最后面，不然将会看最后一个jQuery文件，将没有jQuery对应的方法

console.log($.fn.jquery);
var _$300 = $.noConflict(); //3.0.0版本的jQuery把$的控制权给释放了
var _$1124 = $.noConflict(); //1.12.4版本的jQuery把$的控制权给释放了
console.log($);
console.log(_$1124.fn.jquery);
console.log(_$300.fn.jquery);

4.2 插件使用

jQuery插件库: jQuery插件库-收集最全最新最好的jQuery插件

·用来做扩展功能用的

(1)使用插件的方法

        · 引入jQuery文件

        · 引入插件文件

        · 调用插件对应的方法