JQuery从开始到结束

最新推荐文章于 2022-03-19 11:22:44 发布

自律自强的鱼

最新推荐文章于 2022-03-19 11:22:44 发布

阅读量416

点赞数

分类专栏： Js 文章标签： js jquery

本文链接：https://blog.csdn.net/weixin_42863800/article/details/104306802

版权

Js 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

Ⅰ- 壹 - JQuery介绍

一什么是JQuery?

JQuery是一个JavaScript库，他通过封闭原生JavaScript函数得到一套定义好的方法。JQuery已经集成了JavaScript、css、DOM、和Ajax于一体的强大功能，他可以用最少的代码，完成很多复杂而困难的功能。

二 jQuery的功能

jQuery作为JavaScript封装的库，他的目的就是为了简化开发者使用JavaScript。主要功能有以下几点：

像CSS那样访问和操作DOM
修改CSS控制页面外观
简化JavaScript代码操作
事件处理更加容易
各种动画效果使用方便
让Ajax技术更加完美
基于jQuery大量插件
自行扩展功能插件

三 JQuery 代码风格

在jQuery程序中，不管是页面元素的选择、内置的功能函数，都是美元符号“ $” 来起始的。而这个 “$ ”就是jQuery当中最重要且独有的对象：jQuery对象，所以我们在页面元素选择或执行功能函数的时候可以这么写：
jQuery的代码模式是采用的连缀方式，可以不停的连续调用功能函数。 $(’#box’).css(‘color’,‘red’).css(‘font-size’,‘50px’);//连缀
jQuery中代码注释和JavaScript是保持一致的，有两种最常用的注释：单行使用“//…”，多行使用“/…/”
//$(’#box’).css(‘color’,‘red’);

Ⅱ - 贰 - JQuery使用

一 JQuery 简单选择器

在使用jQuery选择器时，我们首先必须使用“$()”函数来包装我们的CSS规则。而CSS规则作为参数传递到jQuery对象内部后，再返回包含页面中对应元素的jQuery对象。随后，我们就可以对这个获取到的DOM节点进行行为操作了

CSs模式	JQuery模式	描述
div{}	$(“div”)	获取所有div元素
#box{}	$("#box")	获取id为box的元素
.box{}	$(".box")	获取class为box的所有元素

$('div').css('color','red');//元素选择器，返回多个元素 
$('#box').css('color','red');//ID选择器，返回单个元素 
$('.box').css('color','red'); //类(class)选择器，返回多个元素

为了证明ID返回的是单个元素，而元素标签名和类(class)返回的是多个，我们可以采用jQuery核心自带的一个属性

length：
      alert($('#box').length);

二 JQuery 高级选择器

在 find()、next()、nextAll()和 children()这四个方法中，如果不传递参数，就相当于传递了“*”，
层次选择器对节点的层次都是有要求的，比如子选择器，只有子节点才可以被选择到，孙子节点和重孙子节点都无法选择到。next和nextAll选择器，必须是同一个层次的后一个和后N个，不在同一个层次就无法选取到了。
理论上来讲，jQuery 提供的方法 find()、next()、nextAll()和 children()运行速度要快于使用高级选择器。因为他们实现的算法有所不同，高级选择器是通过解析字符串来获取节点对象，而 jQuery 提供的方法一般都是单个选择器，是可以直接获取的。但这种快慢的差异，对于客户端脚本来说没有太大的实用性，并且速度的差异还要取决了浏览器和选择的元素内容。

选择器	JQuery模式	描述
群组选择器	$(“pan,em,box”)	获取多个选择器的DOM对象
后代选择器	$(“ui li a”)	获取追溯到的多个DOM对象
子代选择器	$(“div>div1”)	获取子代class为div1的所有元素
下一个兄弟选择器	$(".div1+div")	获取下一个兄弟选择器
	$(".div1").next()	类似于$(".div1+")获取下一个兄弟元素
下面所有的兄弟选择器	$(".div1~div")	获取下面所有的兄弟选择器
同级上下所有元素选定	$(’#box’).siblings(‘p’)
同级下所有元素选定	$(".div1").nextAll()	获取div1下面所有的兄弟选择器
	$(".div1").nextUntil(".div2")	div1到div2之间的兄弟元素
向上的一个兄弟元素	$(".div1").prev()	向上的一个兄弟元素
向上的所有兄弟元素	$(".div1").prevAll()	向上的所有兄弟元素
向上指定到直间兄弟元素	$(".div1").prevUntil(".div2")	向上到div2直接兄弟元素
统配选择器	$("*")	获取所有元素标签的DOM对象

//群组选择器
span,em,.box{ //多种选择器添加红色字体 
        color:red
;} 
$('span,em,.box').css('color','red');//群组选择器jQuery方式 
//后代选择器
ul li a{ //层层追溯到的元素添加红色字体
         color:red;
} 
$('ul li a').css('color','red');//群组选择器jQuery方式 

$("div>div1").css('color','red');//后代选择器jQuery方式 


//通配选择器
*{ //页面所有元素都添加红色字体
        color:red;
} 
$(".div1").nextUntil(".div2").css("color","red");//div1到div2之间的兄弟元素
$('*').css('color','red'); //通配选择器

三 JQuery 属性选择器

CSs模式	JQuery模式	描述
a[title]	$(“a[title]”)	获取具有这个属性的DOM对象
a[title=num1]	$(“a[title=num1]”)	获取具有这个属性=这个属性值的DOM对象
a[title^=num]	$(“a[title^=num]”)	获取具有这个属性且开头属性值匹配的DOM对象
a[title\|=num]	$(“a[title!=num]”)	获取具有这个属性切等于属性值或开头属性值匹配后面跟一个“-”号的DOM对象
a[title$=num]	$(" a [t i t l e$ =num]")	获取具有这个属性且结尾属性值匹配的DOM对象
a[title!=num]	$(“a[title!=num]”)	获取具有这个属性且不等于属性值匹配的DOM对象
a[title~=num]	$(“a[title~=num]”)	获取具有这个属性是以一个空格分隔的列表，其中包含属性值的DOM对象
a[title*=num]	$(“a[title*=num]”)	获取具有这个属性且属性含有一个指定字符串的DOM对象
a[bbb][title=num]	$(“a[bbb][title=num]”)	获取具有这个属性且属性值匹配的DOM对象

// 属性选择器
console.log($("div[a]"));//[a] 表示是否具备标签属性a
console.log($("[a]"));//[a] 表示是否具备标签属性a
console.log($("[a=1]"));//标签必须有a属性，并且属性值是1
console.log($("[a^=1]"));//属性值的开头是1的元素
$("[b|=ab]").css("color","red");//值是ab或者以ab起头后面使用—来连接的
        
$("[b~=ab]").css("color","red");//值是ab或者值是以空格区分，并且中间包含ab的
//一般用于class中的多个样式选择
$("[b$=b]");以b结尾的值
$("[b!=ab]");值不是ab的
$("[b*=c]");值中包含有c这个字符的
$("[a][b]");//有a属性和b属性的元素

四 JQuery 过滤器

类似于伪类选择器

过滤器名	JQ语法	说明	返回
:first	$(li:first)	获取第一个元素	单个元素
:last	$(li:last)	获取最后一个元素	单个元素
:not()	$('li:not(.red))	获取class不是red的li元素	集合元素
:even	$(li:even)	选择索引（0开始）是偶数的所有元素	集合元素
:odd	$(li:odd)	选择索引（0开始）是奇数的所有元素	集合元素
:eq(index)	$(li:eq(2))	选择索引（0开始）是等于index元素	集合元素
:gt(index)	$(li:gt(2))	选择索引（0开始）是大于index元素	集合元素
:lt(index)	$(li:le(2))	选择索引（0开始）是小于index元素	集合元素
:header	$(:header)	选择标题元素h1-h6	集合元素
:animated	$(:animated)	选择正在执行动画的元素	集合元素
:focus	$(:focus)	选择当前被焦点的元素一般针对表单元素和超链接你	集合元素

1 :first

$("li:first").css("color","red");
$("li:first-child").css("color","red");//当前li是不是父容器当中的第一个li元素
$("li:first-of-type").css("color","red");//当前li是不是父容器当中li类型中的第一个
$("li").first()--->$("li:first")

2 :last

$("li:last").css("color","red");
$("li:last-child").css("color","red");
$("li:last-of-type").css("color","red");
$("li").last()--->$("li:last")

3 基数偶数过滤器

$("li:nth-child(2)").css("color","red");//当前li是不是该元素父容器的第2个子元素  2不是索引值，从1开始
$("li:nth-of-type(2)").css("color","red");//寻找当前元素的父容器中第二个是li类型的元素， 2不是索引值
$("li:nth-child(2n)").css("color","red");//偶数
$("li:nth-of-type(2n)").css("color","red");//偶数
$("li:nth-child(even)").css("color","red")//偶数
$("li:nth-of-type(even)").css("color","red")//偶数
$("li:odd").css("color","red");//奇数  这是按照索引值设置 从0开始 把所有li放在一个列表中，奇偶获取

 $("li:nth-child(2n-1)").css("color","red");//奇数
 $("li:nth-of-type(2n-1)").css("color","red");//奇数
 $("li:nth-child(odd)").css("color","red");//奇数
$("li:nth-of-type(odd)").css("color","red");//奇数
 $("li:even").css("color","red");//偶数  这是按照索引值设置 从0开始 把所有li放在一个列表中，奇偶获取

4 :not

$("div:not(.ab)").css("color","red");//不是什么内容
$("div").not(".ab")--->$("div:not(.ab)")//class不是.ab的元素

5 :eq :gt :lt

$("div:eq(1)").css("color","red");//是按照索引开始从第0个开始的
$("li:gt(2)").css("color","red");//列表中下标大于2的所有元素
$("li:lt(2)").css("color","red");//列表中下标小于2的所有元素
 $("div").eq(1)--->$("div:eq(1)")

6 :empty

console.log( $("div:empty"));//没有子元素或者没有内容的空元素

7 :has()

console.log($("div:has(.ab)"));//判断div元素中是否后代元素中有class是ab的元素
$("div").has(".ab")

8 :parent :contains :has()

console.log($(".div1:contains(1)"));//判断元素的后代中有1这个内容的元素
console.log($(".div2:parent"));//判断div2有子元素的或者有内容的
console.log($(".div1:has(.div2)"));//含有div2的内容的div1元素

9 :hidden :visibie

console.log($(":hidden"));//隐藏  display:none这是隐藏的， visibility: hidden不属于隐藏
console.log($(":visibie"));//显示的内容

10 is

方法判断有没有class ， hasClass方法判断div中有没有class是ab的元素

console.log($("div").is(".ab"));//判断div中有没有class是ab的元素  返回值true或者false
 console.log($("div").hasClass("ab"));//判断div中有没有class是ab的元素  返回值true或者false
// is不单纯可以判断class还可以判断其他选择器，hasClass只能判断class
 console.log($("div").slice(2,4)); //将所有选中元素的列表截取第几个到第几个

五 JQuery 遍历

jQuery提供了一个遍历工具专门来处理这种对象数组，$.each()方法，这个方法可以轻松的遍历对象数组。

$.each(box,function(attr,value){//遍历JavaScript原生态的对象数组 
    //attr为下标  value 为这个元素 
	alert(attr+':'+value);
}); 
//使用$.each()可以遍历原生的JavaScript对象数组，如果是jQuery对象的数组怎么使用.each()方法呢？ 
//index为索引，element为元素DOM 
$('div').each(function(index,element){
	alert(index+':'+element);
});

六 JQuery 方法

1 设置元素及内容

我们通过前面所学习的各种选择器、过滤器来得到我们想要操作的元素。这个时候，我们就可以对这些元素进行 DOM 的操作。那么，最常用的操作就是对元素内容的获取和修改。

方法名	简述
html()	获取元素中HTML内容
html(value)	设置元素中HTML内容
text()	获取元素中文本内容
text(value)	设置原生中文本内容
val( )	获取表单中的文本内容
val(value)	设置表单中的文本内容

$('#box').html();//获取html内容
$('#box').text();//获取文本内容，会自动清理html标签
$('#box').html('<em>www.li.cc</em>');//设置html内容
$('#box').text('<em>www.li.cc</em>');//设置文本内容，会自动转义html标签

注意：当我们使用html()或text()设置元素里的内容时，会清空原来的数据。而我们期望能够追加数据的话，需要先获取原本的数据。

	$('#box').html($('#box').html()+'<em>www.li.cc</em>');//追加数据 
如果元素是表单的话，jQuery提供了val()方法进行获取或设置内部的文本数据。
	$('input').val();//获取表单内容
	$('input').val('www.li.cc');//设置表单内容

2 元素属性的操作


attr()	是设置在DOM标签上的属性
prop()	是设置在DOM对象上的对象属性
data()	是设置在jQuery映射对象上的属性，为了不污染DOM对象的属性

三个设置属性的用法同下

方法名	简述
attr(key)	获取某个元素key属性的属性值
attr(key, value)	设置某个元素key属性的属性值
attr( {key1:value2, key2:valu…})	设置某个元素多个key属性的属性值
att(key, function (index, value) {})	设置某个元素key通过fn来设置

 // 只能获取到列表中第一个元素的a属性值
console.log($("div").attr("a"));

$("div").attr("b","10");

//循环遍历给每个div添加属性c 
$("div").attr("c",function(index,item){
       return index+1;
  })

        // 多个不同属性
   $("div").attr({
        b:"1",
        c:function(index,item){
            return index+1;
        }
    })

3 元素样式的操作

CSS操作的方法

方法名	描述
css(name)	获取某个元素行内的CSS样式
css([namel, name2, name3])	获取某个元素行内多个Css样式
css(name, value)	设置某个元素行内的Css样式
css(name, function (index, value) )	设置某个元素行内的Css样式
css( (namel : valuel, name2 : value2})	设置某个元素行内多个CSS样式
addClass(class)	给某个元素添加一个CSS类
addClass(classl class2 class…)	给某个元素添加多个CSS类
removeClass(class)	删除某个元素的一个CSS类
removeClass(lassl class2 las…)	删除某个元素的多个CSS类
toggleClass(class)	来回切换默认样式和指定样式
toggleClass(class1 class2 cas…)	同上
toggleClass(lass, switch)	来回切换样式的时候设置切换频率
toggleCas(function(){})	通过匿名函数设置切换的规则
toggleClass(finction (){}, switch)	在匿名函数设置时也可以设置频率
toggleCas(function(i,c,s){},switch)	在匿名函数设置时传递三个参数

$('div').css('color'); //获取元素CSS样式的颜色 
$('div').css('color','red'); //设置元素行内CSS样式颜色为红色
	在CSS获取上，我们也可以获取多个CSS样式，而获取到的是一个对象数组，如果用传统方式进行解析需要使用for in遍历。
	 var box=$('div').css(['color','height','width']);
             //得到多个CSS样式的数组对象
	for(var i in box){//逐个遍历出来 
		alert(i+':'+box[i]);
	}

除了行内CSS设置，我们也可以直接给元素添加CSS类，可以添加单个或多个，并且也可以删除它。

$('div').addClass('red');//添加一个CSS类
$('div').addClass('red bg');//添加多个CSS类
$('div').removeClass('bg');//删除一个CSS类
$('div').removeClass('red bg');//删除多个CSS类

4 CSS操作方法

(1)width()和height()方法

方法名	描述
width(value)	设置某个元素的长度
width(function (index, width) {})	通过匿名函数设置某个元素的长度
height()	获取某个元素的长度
height(value)	设置某个元素的长度
height(finction (index, width) {})	通过匿名函数设置某个元素的长度

width

$('div').width();//获取元素的长度，返回的类型为number
$('div').width(500);//设置元素长度，直接传数值，默认加px
$('div').width('500pt'); //同上，设置了pt单位 
$('div').width(function(index,value){ //index是索引，value是原本值
return       value-500;//无须调整类型，直接计算 
});
//pt: point，点，印刷行业常用单位，等于1/72英寸

height
$('div').height();//获取元素的高度，返回的类型为number
$('div').height(500);//设置元素高度，直接传数值，默认加px
$('div').height('500pt'); //同上，设置了pt单位 
$('div').height(function(index,value){ //index是索引，value是原本值
return value-1;//无须调整类型，直接计算 
});

(2)内外边距和边框尺寸方法

方法名	描述
innerWidth()	获取元素宽度，包含内边距padding
innerHeight()	获取元素高度，包含内边距padding
outerWidth()	获取元素宽度，包含边框border和内边距padding
outerHeight()	获取元素高度，包含边框border和内边距padding
outerWidth(ture)	同上，且包含外边距
outerHeight(true)	同上，且包含外边距

alert($('div').width()); //不包含 
alert($('div').innerWidth());//包含内边距padding 
alert($('div').outerWidth());//包含内边距padding+边框border 
alert($('div').outerWidth(true)); //包含内边距padding+边框border+外边距margin

(3)元素偏移方法

方法名	描述
offset()	获取某个元素相对于视口的偏移位置
position()	获取某个元素相对于父元素的偏移位置
scrollTop()	获取垂直滚动条的值
scrollTop(value)	设置垂直滚动条的值
scrollLeft()	获取水平滚动条的值
scrollLeft(value)	设置水平滚动条的值

$('strong').offset().left;//相对于视口的偏移
$('strong').position().left;//相对于父元素的偏移
$(window).scrollTop();//获取当前滚动条的位置
$(window).scrollTop(300); //设置当前滚动条的位置

5 DOM元素节点的操作

方法名	描述
append(content)	向指定元素内部后面插入节点content
append(function (index, html) {})	使用匿名函数向指定元素内部后面插入节点
appendTo(content)	将指定元素移入到指定元素content内部后面
prepend(content)	向指定元素content内部的前面插入节点
prepend(function (index, htm1) {})	使用匿名函数向指定元素内部的前面插入节点
prependTo(content)	将指定元素移入到指定元素content内部前面
wrap(content)	给每个元素外面的包裹一个content标签
wrapAll(content)	给所有元素外面包裹一个content标签
after(content)	向指定元素的外部后面插入节点content
after(function (index, html) {})	使用匿名函数向指定元素的外部后面插入节点
before(content)	向指定元素的外部前面插入节点content
before(function (index, html) {})	使用匿名函数向指定元素的外部前面插入节点
insertAfter(content)	将指定节点移到指定元素content外部的后面
insertBefore(content)	将指定节点移到指定元素content外部的前面
unwrap()	将包裹的父元素删除
wrapInner(content)	给每个内容包裹一个content标签

$('div').append('<strong>节点</strong>');//向div内部插入strong节点 
$('div').append(function(index,html){ //使用匿名函数插入节点，html是原节点 	return'<strong>节点</strong>';
}); 
$('span').appendTo('div');//将span节点移入div节点内
$('span').appendTo($('div')); //同上 
$('div').prepend('<span>节点</span>');//将span插入到div内部的前面
$('div').append(function(index,html){ //使用匿名函数，同上 
return'<span>节点</span>';
}); 
$('span').prependTo('div');//将span移入div内部的前面$('span').prependTo($('div')); //同上




$('div').after('<span>节点</span>');//向div的同级节点后面插入span
$('div').after(function(index,html){ //使用匿名函数，同上 
return'<span>节点</span>';
}); 
$('div').before('<span>节点</span>');//向div的同级节点前面插入span
$('div').before(function(index,html){ //使用匿名函数，同上 	
    return'<span>节点</span>';
});
$('span').insertAfter('div');//将span元素移到div元素外部的后面
$('span').insertBefore('div'); //将span元素移到div元素外部的前面






$("div").wrap("<a></a>");//给每个元素外面的包裹一个a标签
$("div").wrapAll("<a></a>");//给所有元素外面包裹一个a标签
$("span").unwrap();//将包裹的父元素删除
$("div").wrapInner("<a></a>");//给每个div的内容包裹一个a标签

(1) 复制节点

$('body').append($('div').clone(true));//复制一个节点添加到HTML中

注意：clone(true)参数可以为空，表示只复制元素和内容，不复制事件行为。而加上true参数的话，这个元素附带的事件处理行为也复制出来。

(2) 删除节点

$('div').remove(); //直接删除div元素
注意：.remove()不带参数时，删除前面对象选择器指定的元素。而.remove()本身也可以带选择符参数的，比如：$('div').remove('#box');只删除id=box的div。 
//保留事件的删除节点
$('div').detach(); //保留事件行为的删除

注意：.remove()和.detach()都是删除节点，而删除后本身方法可以返回当前被删除的节点对象，但区别在于前者在恢复时不保留事件行为，后者则保留。

//清空节点
$('div').empty(); //删除掉节点里的内容

(3) 替换节点

$('div').replaceWith('<span>节点</span>');//将div替换成span元素
$('<span>节点</span>').replaceAll('div'); //同上

注意：节点被替换后，所包含的事件行为就全部消失了。

6 表单元素的操作

表单作为 HTML 中一种特殊的元素，操作方法较为多样性和特殊性，开发者不但可以使用之前的常规选择器或过滤器，也可以使用 jQuery 为表单专门提供的选择器和过滤器来准确的定位表单元素。

我们可以使用 id、类(class)和元素名来获取表单字段，如果是表单元素，都必须含有 name属性，还可以结合属性选择器来精确定位。

$('input').val();//元素名定位，默认获取第一个
$('input').eq(1).val();//同上，获取第二个
$('input[type=password]').val();//选择 type 为 password 的字段
$('input[name=user]').val();//选择 name 为 user 的字段

那么对于 id 和类(class)用法比较类似，也可以结合属性选择器来精确的定位，在这里我们不在重复。对于表单中的其他元素名比如：textarea、select 和 button 等，原理一样，不在重复

虽然可以使用常规选择器来对表单的元素进行定位，但有时还是不能满足开发者灵活多变的需求。所以，jQuery 为表单提供了专用的选择器。

方法名	描述	返回
: input	选取所有input. textarea、 select 和button 元素	集合元素
:text	选择所有单行文本框，即type=text	集合元素
:password	选择所有密码框，即type=password	集合元素
:radio	选择所有单选框，即type=radio	集合元素
:checkbox	选择所有复选框，即type=checkbox	集合元素
:submit	选取所有提交按钮，即type=submit	集合元素
:reset	选取所有重置按钮，即type=reset	集合元素
:image	选取所有图像按钮，即type=image	集合元素
:button	选择所有普通按钮，即button 元素	集合元素
:file	选择所有文件按钮，即type=file	集合元素
:hidden	选择所有不可见字段，即type=hidden	集合元素
:enabled	选取所有可用元素	集合元素
:disabled	选取所有不可用元素	集合元素
:checked	选取所有被选中的元素，单选和复选字段	集合元素
:selected	选取所有被选中的元素，下拉列表	集合元素

七 JQuery事件

1 on绑定事件 off关闭事件

在JQuery中绑定事件使用off关闭事件

//创建一个div添加到body。
 $("<div></div>").appendTo("body").css({
             width:50,
             height:50,
             backgroundColor:"red"
         }).on("click",clickHandler);//绑定事件
         // div.addEventListener("click",clickHandler);
 
         function clickHandler(e){
             // this  事件侦听的元素  DOM
             // this.removeEventListener("click",clickHandler);
             $(this).off("click",clickHandler);//关闭事件
         }

2 事件命名空间

匿名函数不使用函数名清除，都是匿名函数。会将当前jQuery对象所有的click清除，这个时候就需要用到。事件命名空间

  $("<div></div>").appendTo("body").css({
                    width:50,
                    height:50,
                    backgroundColor:"red"
                }).on("click.a",function(){
                    console.log("aaa");
                    $(this).off("click.a");
                }).on("click.b",function(){
                    console.log("bbb");
                })

在事件后面加 .名用于区分事件

3 简写事件

方法名	触发条件	描述
click(fn)	鼠标	触发每-一个匹配元素的click(单击)事件
dblclick(fn)	鼠标	触发每一个匹配元素的dblclick(双击)事件
mousedown(fn)	鼠标	触发每一-个匹配元素的mousedown(点击后)事件
mouseup(fn)	鼠标	触发每一个匹配元素的mouseup(点击弹起)事件
mouseover(fn)	鼠标	触发每一个匹配元素的mouseover(鼠标移入)事件
mouseout(fn)	鼠标	触发每一个匹配元素的mouseout(鼠标移出)事件
mousemove(fn)	鼠标	触发每一个匹配元素的mousemove(鼠标移动)事件
mouseenter(fn)	鼠标	触发每一个匹配元素的mouseenter(鼠标穿过)事件
mouseleave(fn)	鼠标	触发每一个匹配元素的mouseleave(鼠标穿出)事件
keydown(fn)	键盘	触发每一个匹配元素的keydown(键盘按下)事件
keyup(fn)	键盘	触发每一个匹配元素的keyup(键盘按下弹起)事件
keypress(fn)	键盘	触发每一个匹配元素的keypress(键盘按下)事件
unload(fn)	文档	当卸载本页面时绑定-一个要执行的函数
resize(fn)	文档	触发每一-个匹配元素的resize(文档改变大小)事件
scroll(fn)	文档	触发每一个匹配元素的scroll(滚动条拖动)事件
focus(fn)	表单	触发每一个匹配元素的focus(焦点激活)事件
blur(fn)	表单	触发每一个匹配元素的blur(焦点丢失)事件
focusin(fn)	表单	触发每一-个匹配元素的focusin(焦点激活)事件
focusout(fn)	表单	触发每一个匹配元素的focusout(焦点丢失)事件
select(fn)	表单	触发每一个匹配元素的select(文本选定)事件
change(fn)	表单	触发每一个匹配元素的change(值改变)事件
submit(fn)	表单	触发每一个匹配元素的submit(表单提交)事件
复合事件		描述
ready(fn)		当DOM加载完毕触发事件
hover([fn1,]fn2)		当鼠标移入触发第-一个fnl,移出触发fn2

mouseover()和.mouseout()表示鼠标移入和移出的时候触发。那么 jQuery 还封装了另外一组：.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发。那么这两组本质上有什么区别呢？手册上的说明是：.mouseenter()和.mouseleave()这组穿过子元素不会触发，而.mouseover()和.mouseout()则会触发。

$("div").mousedown(function(e){
        
        }).mouseup(function(){
          
        })
    })

4 event对象的属性

属性名	描述
type	获取这个事件的事件类型，例如: click
target	获取绑定事件的DOM元素
data	获取事件调用时的额外数据
relatedTarget	获取移入移出目标点离开或进入的那个DOM元素
currentTarget	获取冒泡前触发的DOM元素，等同与this
pageX/pageY	获取相对于页面原点的水平/垂直坐标
screenX/screenY	获取显示器屏幕位置的水平/垂直坐标(非jQuery封装)
clientX/clientY	获取相对于页面视口的水平/垂直坐标(非jQuery封装)
result	获取上一个相同事件的返回值
timeStamp	获取事件触发的时间戳
which	获取鼠标的左中右键(1,2,3)，或获取键盘按键
altKey/shifKey/ctrlKey/metaKey	获取是否按下了alt、 shift、 ctrl(这三个非jQuery封装)或meta键(IE原生meta键，jQuery 做了封装)

//通过 event.type 属性获取触发事件名 
$('input').click(function(e){ 
alert(e.type); 
});


//通过 event.target 获 取绑定的 DOM 元素 
$('input').click(function(e){ 
alert(e.target); 
});


//通过 event.data 获取额外数据，可以是数字、字符串、数组、对象 
$('input').bind('click',123,function(){ //传递 data 数据 	
    alert(e.data); //获取数字数据 
});

//注意：如果字符串就传递：'123'、如果是数组就传递：[123,'abc']，如果是对象就传递： {user:'Lee',age:100}。数组的调用方式是：e.data[1]，对象的调用方式是：e.data.user。


//event.data 获取额外数据，对于封装的简写事件也可以使用
$('input').click({user:'Lee', age:100},function(e){ 
alert(e.data.user); 
});
//注意：键值对的键可以加上引号，也可以不加；在调用的时候也可以使用数组的方式： alert(e.data['user']);

5 冒泡和默认行为的一些方法

方法名	描述
preventDefault()	取消某个元素的默认行为
isDefaultPrevented()	判断是否调用了preventDefault()方法
stopPropagation()	取消事件冒泡
isPropagationStopped()	判断是否调用了stopPropagation()方法
stopImmediatePropagation()	取消事件冒泡,并取消该事件的后续事件处理函数
isImmediatePropagationStopped()	判断是否调用了stopImmediatePropagation()方法

八 JQuery 动画

方法名	描述
hide(time\|\|fn)	隐藏 HTML 元素：
show(time)	显示 HTML 元素：

$("div").hide(2000).show(2000);

  $("div").hide(2000,function(){
            $(this).show(2000);
        }) 


$("div").hide(2000,function(){
            $(this).toggle(2000);
        })

1 固定动画方法

方法名	简介
slideDown(speed,callback)	向上滑动
slideUp(speed,callback)	向下滑动
slideToggle()	向下-向上滑动切换
fadeIn(speed,callback)	淡入
fadeOut(speed,callback)	淡出
fadeTo()	淡出可设置透明度

$("div").slideUp(2000).slideDown(2000);


$("div").fadeOut(1000).fadeIn(1000);
$("div").fadeTo(2000,0.4);//透明到多少

2 自定义动画方法

.animate()

注意：一个 CSS 变化就是一个动画效果，上面的例子中，已经有四个 CSS 变化，已经实现了多重动画同步运动的效果。
必传的参数只有一个，就是一个键值对 CSS 变化样式的对象。还有两个可选参数分别为速度和回调函数。

$('.animate').click(function(){ 
$('#box').animate({ 
'width':'300px', 
'height':'200px', 
'fontSize':'50px', 
'opacity':0.5 
}); 
});



$(document).on("click",function(e){
            $("div").animate({
                left:e.clientX-25,
                top:e.clientY-25,
                width:100,
                height:100
            },500)
        })

自定义实现列队动画的方式，有两种：

在回调函数中再执行一个动画；
通过连缀或顺序来实现列队动画。通过依次顺序实现列队动画

九 JQuery 插件

扩展jQuery插件的作用是非常强大的，它可以节省大量开发时间。

添加JQuery的两种方法：

$.extend()向jquery中添加函数
$.fn上面添加一个方法

1 $.fn

利用$.fn实现获取宽度功能

//实现width功能
$.fn.widths=function(w){
           if(w===undefined) return parseFloat(this.css("width"));
           w=parseFloat(w)
           if(isNaN(w)) return;
           this.css({
               width:w+"px"
           })
        }
//使用

$("div").widths(true);

利用$.fn实现设置背景的功能

//实现设置背景的功能
 $.fn.bgc=function(color){
            if(color===undefined) return this.css("backgroundColor");
            this.css("backgroundColor",color);
            return this;
        }

//使用
 $("<div</div>")
            .appendTo("body")
            .width(100)
            .height(100)
            .bgc("red").on("click",function(){

        })

2 $.extend

实现$.each() 功能


//简单设置一个a方法
 $.extend({
            a:function(){
                console.log("aa");
            }
        })

//使用
$.a(); //打印aa

//实现$.each()  
$.extend({
            eachs:function(list,fn){
                switch(list.constructor){
                    case Array:
                    case jQuery:
                    case HTMLCollection:
                    case NodeList:
                    for(var i=0;i<list.length;i++){
                        fn(i,list[i]);
                    }
                    break;
                    case Object:
                        for(var prop in list){
                            fn(prop,list[prop]);
                        }
                    break;
                    
                    case Set:
                        for(var value of list){
                            fn(value,value);
                        }
                    break;
                    case Map:
                         for(var value of list){
                            fn(value[0],value[1]);
                        }
                    break;
                }
            }
        })

0 - 0 - 知识点：

一 load事件和ready事件

ready早于load执行。

 $(document).ready(function(){
   // 当DOM全部创建完成后，图片没有加载完成前

   })
	//当DOM全部创建完成后
   window.onload=function(){

   }

二 JQuery抛发事件

trigger：会触发默认事件

triggerHandler：这个不会触发默认事件

$("form").trigger("submit");//会触发默认事件

//$("form").triggerHandler("submit");//这个不会触发默认事件


//事件抛发流程

$("div").on("chilema",function(e,a,b,c){
     console.log(e,a,b,c);
  })
$("div").trigger("chilema",[10,100,1000])