摘要

1)标签选择器: $(“sel1”)2）id选择器： $(“#sel1”)3）class选择器：$(“.sel1”)4）通配选择器：$(“*”)

JQuery

一、选择器

1.基本选择器

1)标签选择器: $("sel1")

2）id选择器： $("#sel1")

3）class选择器：$(".sel1")

4）通配选择器：$("*")

5）群组选择器：$("sel1,sel2")

6）特殊用法:

$("div.box")

补充：

//设置单个css样式 $("选择器").css("属性","值"); //设置多个样式使用对象 $("选择器").css({   background:"#ccc",   color:"red" }); 

2.层级选择器

1）包含选择器：sel1 sel2

​ sel1 下的所有子代（包括所有子孙代）

2）子类选择器：sel1>sel2

​ sel1下的子一代

3）相邻选择器：sel1+sel2

​ sel1后紧挨着的兄弟元素sel2（选出一个）

4）兄弟选择器： sel1~sel2

​ sel1后所有sel2元素（不需要相邻，可以选出所有）

3.伪类选择器

（1）特定位置选择器

1) :first:

2) :last

3) :eq(index) （索引从0开始）

（2）指定范围选择器

1) :even （索引为偶数）

2) :odd （索引为奇数）

3) :gt(index)

4) :lt(index)

（3）排除选择器

​ :not（选择器)

（4）匹配子元素的伪类选择器

与父元素相关。

1）E:first-child ：

2）:last-child

3）E:nth-child(index)： （ nth 索引从1开始）

​ A . :nth-child(even)：

​ B . :nth-child(odd)：

​ C . :nth-child(index)

​ D . :nth-child(2n)：

​ E . :nth-child(2n+1):

4 ) :nth-last-child(index)：

与父元素无关

5 )E :nth-of-type(index)：(从前往后)

6 )E :nth-last-of-type(index): (从后向前)

7）E:hidden （选择出 所有display为none的元素）

与父元素相关和与父元素无关

与父元素相关举例：

		<ul> 			<li>我是ul1</li> 			<li>我是ul2</li> 			<p>你好你好</p> 			<li>我是ul3</li> 			<li>我是ul4</li> 			<li>我是ul5</li> 			<p>你好你好</p> 		</ul> <script> //与父元素相关，获取不到"我是ul5" $("ul li:nth-last-child(1)").css("background-color","blue"); //与父元素无关(nth-last-of-type),可以获取到"我是ul5"的li $("ul li:nth-last-of-type(1)").css("background-color","blue"); </script> 

4.内容选择器

1）:contains('内容')

2）:empty （元素内容为空，空格不算空）

3）:has（“a”）

5.属性选择器

1）$(“元素[属性='属性值']”)

2）$(“元素[属性!='属性值']”)

3）$(“元素[属性^='属性值']”) （^ 以“...”开头）

4）$(“元素[属性$='属性值']”) （$ 以“...”结尾）

5）$(“元素[属性*='属性值']”) （包含"..."）

6.表单选择器

（1）:text （选择出type为“text”）

（2）:password

（3）:submit

（4）:radio

（5）:checkbox

（6）:button

（7）:reset

（8）:image

（9）:file

（10）:checked

（11）:disabled （被禁用的表单元素）

（12）:enabled （未被禁用的元素）

（12）:selected

区分$(“input”)和$(“:input”)：

$(“input”)是一个元素选择器，只能匹配input标记；

$(“:input”)是一个伪类选择器，几乎可以匹配所有的表单元素。

二、过滤器

过滤器不可以单独使用，必须跟在选择器的后面使用。

过滤器是对选择器查询出的结果进行第二次筛选。

1.$（选择器）.过滤器

.first()

.last()

2.下标过滤器

.eq(index)

3.表达式过滤器

filter(expr)/(fn)：筛选出与指定表达式/函数匹配的元素集合。

4.后代层次关系

（1）.find("selecotr1") 查找所有子代

（2）.children("selecotr1")

5.上一级层次关系

（1）.parent()

（2）.parents()

.parents(selector1)

（3）.parentsUntil(selector1) 直到这个选择器，不包括这个选择器

6.兄弟关系

（1）下面的同级兄弟：

​ 1）.next()

​ 2）.nextAll()

​ 3）.nextUntil() 后面所有兄弟，直到...

（2）上面的同级兄弟：

​ .prev()

​ .prevAll()

​ .prevUntil(selector)

（3） .siblings() 前后所有兄弟

7.单一过滤器

.map() 映射

.not(selector)过滤

.slice(a,b)截取（包头不包尾）

也可截取string与array;

.has()包含

8.判定过滤器

.hasClass(className)

.is(表达式)

.css(一个值)：获取样式（内联，内部，外部，未设置的样式）

9.串联过滤器

1.add(selector)，将selector指定的选择器对象添加到选择器范围中。该过滤器的功能也可以利用群组选择器实现。

2.end()，将一个带有过滤器结构的jQuery对象返回其对应的选择器对象。

10.操作属性

（1）.attr()（不能操作内置属性，用于操作常规属性，id,class,src等）

.attr(属性)：一个值表示获取

.attr(属性，属性值)：两个值表示设置

.removeAttr("属性"):

（2）prop()用于操作内置属性（比如checked,innerHTML等）

.prop(属性)

.prop(属性，属性值)

.removeProp("属性")

（3）.addClass()

添加多个class:(1)addClass(class1 class2 class3)

（4）.removeClass():移除class

（5）.toggleClass(class1): 切换

（6）

.html():表示获取jquery对象的内容；

.html(参数)：设置jquery对象的内容，传递的参数了可以为字符串，也可以为标签，也可以为“”

（7）

.text()：表示获取jquery对象的文本内容；

.text("文本"):设置jquery对象的文本内容，但是不会解析标签，只能原样输出标签，当成文本传递。

（8）.val() 获取值（表单input的值）

三、操作DOM

1.创建节点

$("<h1></h1>")

2.插入节点

内部插入

a.append(b) 在a的内部添加b

a.appendTo(b) a添加到b内部后面

a.prepend(b) 在a内部的前面添加b

a.prependTo(b)

节点剪切

如果是选择的是已存在的节点则会将已存在的节点剪切到指定位置

外部插入

a.after(b) 在a的外部后面添加b

a.insertAfter(b) 将a插入到b外部的后面

a.before(b)

a.insertBrfore(b)

节点包裹

//外包 $("span").wrap("<p></p>")  //每个span外面，外包一个p标签 //总包 $("span").wrapAll("<p></p>")  //所有span外面，整个外包一个p标签 //内包 $("div").wrapInner("<p></p>")  //div内包一个p //卸包 $("span").unwrap()         //可用于删除上一级父元素 

删除节点

两种方法都可以删除节点，并返回被删除的JQuery对象 $("div").remove()             //删除选择的节点（会删除原有事件）    $("div").detach()              //删除选择的节点（删除节点，但保留原有事件） //清空节点（只清空节点内容，不删除节点） $("div").empty() 

节点克隆（复制节点）

传参和不传参的区别

$("选择器").clone()             //不传参数true,不复制事件 $("选择器").clone(true)             //复制节点，包括节点的事件 

节点替换

js中标签替换

dom.outerHTML = "<p>我是被替换的标签</p>"

Jquery中节点替换

//指定元素替换成匹配元素 $("div").replaceWith("<p><p>")   //用p标签替换所有的div //用匹配元素替换成指定元素 $("span").replaceAll("a")      //用span标签替换掉所有的a标签 

四、JQuery动画

1.显隐动画

$("选择器").show(speed,fn) speed为速度(毫秒数)，fn为回调函数

$("选择器").hide(speed,fn)

$("选择器").toggle(speed)

2.显隐滑动效果

.slideUp(speed,fn)

.slideDown(speed,fn)

.slideToggle(speed,fn)

3.淡入淡出效果

.fadeIn(speed,fn) 淡入

.fadeOut(speed,fn) 淡出

.fadeToggle(speed,fn)

fadeTo(speed,opaity,fn) 指定改变到某个透明度

注：由于fadeIn()和fadeOut()的边界是1和0，所以使用fadeTo()就无法使用fadeIn()或者fadeOut()

4.自定义动画

.animate({属性1：属性值1,属性2：属性值2},speed,linear,fn)

第三个参数linear为匀速，默认值为easy减速

有先后执行顺序的动画（三种方式）

（1）将后执行的动画写入回调函数fn

（2）链式调用： $("选择器").animate().animate()

（3）队列式调用：$("选择器").animate();$("选择器").animate();

让图片水平居中在容器内部

（1）

将盒子定位到容器中间

left:50%

top:50%

用margin拉回

margin-left:-50%

margin-top:盒子高的一半

（2）

第一张图片:display:inline-block

让图片水平居中：text-align:center

让图片垂直居中：vertical-align:middle

注：由于vertical-align是相对于某个元素垂直居中，所以要加空白盒子

height:100%;

vertical-align:middle;

display:inline-block;

无缝滚动实例

思路：

1.设置当前索引curIndex,和前一张索引prevIndex。(curIndex为下一次要显示的图片索引，prevIndex为现在看见的图片)

2.点击下一张按钮，图片向左移动；点击前一张按钮，图片向右移动

3.滑动前将要滑入的图片放指定位置，现在的照片prevIndex划走，要滑入的照片curIndex进入

style样式

		<style type="text/css"> 			* { 				margin: 0; 				padding: 0; 			}  			.box { 				width: 800px; 				height: 550px; 				border: 1px solid #000; 				margin: 50px auto; 				position: relative; 				overflow: hidden; 			}  			li { 				list-style: none; 			}  			.imgList { 				width: 800px; 				height: 550px; 				position: relative; 				overflow: hidden; 			}  			.imgList li { 				position: absolute; 				left: 800px; 			} 			.box img { 				width: 800px; 				height: 550px; 				position: absolute; 				left: 800px; 			} 			.btn { 				font-size: 40px; 				color: #fff; 				width: 50px; 				height: 80px; 				box-shadow: 0 0 18px #fff; 				position: absolute; 				top: 230px; 				text-align: center; 				line-height: 80px; 				border-radius: 50%; 				cursor: pointer; 			} 			#prev { 				left: 50px; 			} 			#next { 				right: 50px; 			} 			.nav { 				height: 50px; 				text-align: center; 				position: absolute; 				width: 100%; 				bottom: 30px; 			} 			.nav li { 				display: inline-block; 				width: 30px; 				height: 30px; 				background: #ccc; 			} 			.nav .on { 				background: #333; 			} 		</style> 

html主体部分

		<div class="box"> 			<img style="left: 0px;" src="./img/images/show/9/1.jpg" alt="JQuery总结" /> 			<img src="./img/images/show/9/2.jpg" alt="JQuery总结"/> 			<img src="./img/images/show/9/3.jpg" alt="JQuery总结" /> 			<img src="./img/images/show/9/4.jpg" alt="JQuery总结" /> 			<img src="./img/images/show/9/5.jpg" alt="JQuery总结" /> 			<div id="prev" class="btn"><</div> 			<div id="next" class="btn">></div> 			<ul class="nav"> 				<li class="on"></li> 				<li></li> 				<li></li> 				<li></li> 				<li></li> 			</ul> 		</div> 

js部分（使用Jquery实现）

		<script src="js/jquery-1.11.3.js"></script> 		<script> 			var prevIndex = 0; 			var curIndex = 0; 			$("#next").click(function() { 				//.is(":animated"):正在执行动画返回true，没在执行动画返回false 				if ($(".box>img").eq(curIndex).is(":animated")) { 					return; 				} 				if (curIndex >= $(".box>img").length - 1) { 					curIndex = 0; 				} else { 					curIndex++ 				} 				tab(); 				prevIndex = curIndex; 			}) 			$("#prev").click(function() { 				if ($(".box>img").eq(curIndex).is(":animated")) { 					return; 				} 				if (curIndex <= 0) { 					curIndex = $(".box>img").length - 1; 				} else { 					curIndex--; 				} 				tab(); 				prevIndex = curIndex; 			}) 			$(".nav li").click(function() { 				curIndex = $(this).index(); 				if (curIndex == prevIndex) { 					return; 				} 				tab(); 				prevIndex = curIndex; 			}) 			//左边按钮：向右边滑动； 			function tab() { 				//切大图； 				if (curIndex == 0 && prevIndex == 4) { 					//边界2，当前在最后一张，点击next 					//向左滑动：前一张向左滑动，当前那一张摆放在右边，滑动到当前位置； 					$(".box>img").eq(prevIndex).animate({ 						left: -800 					}, 1000) 					$(".box>img").eq(curIndex).css("left", "800px").animate({ 						left: 0 					}, 1000) 				} else if (prevIndex == 0 && curIndex == 4  ) { 					//边界1，当前在第一张，点击prev 					//向右滑动：前一张向右滑动，当前那一张摆放在左边，滑动到当前位置 					$(".box>img").eq(prevIndex).animate({ 						left: 800 					}, 1000) 					$(".box>img").eq(curIndex).css("left", "-800px").animate({ 						left: 0 					}, 1000) 				} else if (curIndex > prevIndex) { 					$(".box>img").eq(prevIndex).animate({ 						left: -800 					}, 1000) 					$(".box>img").eq(curIndex).css("left", "800px").animate({ 						left: 0 					}, 1000) 				} else { 					$(".box>img").eq(prevIndex).animate({ 						left: 800 					}, 1000) 					$(".box>img").eq(curIndex).css("left", "-800px").animate({ 						left: 0 					}, 1000) 				} 				//切小点； 				$(".nav li").eq(curIndex).addClass("on").siblings().removeClass() 			} 		</script> 

5.动画执行

清除动画计时器

.stop(true)

.stop(true,true) 传入两个值比传入一个值清除更快

判断是否正在运动

.is(":animated")

五、Event事件

一、定位与尺寸

1、获得jQuery对象的尺寸：

（1）.css(“width”)获取width(带有px)，和margin/padding/border无关。

（2）.width()/.height()：获取width(不带有px)，和margin/padding/border无关。

Js:offsetWidth:获取的是width+border+padding(不带单位)，与margin无关。

（3）.innerWidth()/innerHeight()获取的是windth+padding(不带单位)，与border与margin无关。

（4）.outerWidth(true)：获取width+padding+margin+border(不带单位)

.outerWidth(false):获取width+padding+border(不带单位)==js的offsetWidth

（1）区别$(document).width():大小取决于内容的大小

（2）与$(window).width()：取决于window窗口的大小

2、获得jQuery对象的定位位置

(1)绝对定位：利用offset()方法获得的定位对象又具备两个属性：

.offset().left：永远相对于浏览器的位置，元素相对于document的left(不带)

(2)相对定位：jQuery对象使用position()方法获得相对定位对象。

取决于父元素写了position定位的父盒子。

.position().left

二、滚动事件：

scrollLeft()：设置/获取水平滚动条滚走的左侧距离。

scrollTop()：设置/获取垂直滚动条滚走的顶部距离。

不传值表示获取垂直滚动条滚走的顶部距离。

传值表示设置值。

三、Event事件：

1、Event属性：

type：获取事件类型名称

target:发生事件的节点

keyCode：只针对于keypress事件，获取键盘键数字 按下回车，13

2、鼠标位置

pageX:光标对于页面原点的水平坐标 body，document

pageY：光标对于页面原点的垂直坐标

clientX：光标对于浏览器窗口的水平坐标 浏览器

clientY：光标对于浏览器窗口的垂直坐标

screenX：光标对于电脑屏幕的水平坐标 电脑屏幕

screenY：光标对于电脑屏幕的垂直坐标

offsetX:鼠标相对于事件源的位置

offsetY:

3.阻止冒泡

stopPropagation()

4.阻止对象的默认行为

preventDefault()

5. 事件绑定

（1）on()与bind()方法基本相同

$("btn").bind("click",function(){...}) //同一个元素写不同事件执行相同的方法 $("btn").bind("click mouseover mouseout",function(){...}) //同一个元素写不同事件执行不同的方法(写成对象的方式) $("btn").bind({   click:function(){...},   mouseover:function(){...} })  

不同点:on(事件，selector，参数，fn)，on存在事件委托；

//h1将事件click委托给body，实际上仍然是“h1”操作 $("body").on("click","h1",function(){...}) 

（2）自定义事件

.bind("say",function(){...})

触发自定义事件

.trigger("say")

注：如果js有的事件，但是JQuery中没有，需要进行事件绑定使用，但是不需要触发。

（3）移除绑定事件

移除元素绑定的所有事件

.off()

.unbind()

移除特定事件

.unbind("click")

移除特定事件的特定方法fn

.unbind("click",fn)

（4）one(事件，fn)

该事件只执行一次。常用于请求后台数据时。

四、事件类型名：

1、鼠标事件：（7个）

click（鼠标单击左键）、dlbclick（鼠标双击左键）、mouseover（鼠标划入）、mouseout（鼠标划出）、mousemove（鼠标移动）、mouseenter（鼠标进入）、

mouseleave（鼠标移开）、mouseup（鼠标抬起）、mousedown（鼠标按下）。

Mouseenter与mouseover的区别：mouseenter只作用于本身，不会作用于子元素。

2、键盘事件：（3个）

keypress、keyup、keydown

3、表单元素事件：

表单事件：

(1).submit()：form.submit()提交

.submit(fn):当提交时执行fn函数

(2)form.reset():重置 只针对dom元素

当重置时执行

$("form").bind("reset",function(){   alert("确定重置吗") }) 

表单元素事件：

.focus()；获得焦点

.focus(fn):当获得焦点时执行

（1）blur()：同focus

（2）.focusin()

（3）.focusout()

（4）.change()：当改变时执行；

（5）.select()：选中

.select():输入框里的值被全部选中

.select(fn):当输入框的值被选中时执行fn

（6）input():作用于所有form元素(要使用事件绑定)

4、浏览器事件：

resize()：当浏览器的大小发生变化时触发该事件。

.scroll()：当浏览器滚动条发生滚动时触发该事件。

5、其它事件：

.load()：当页面加载后触发该事件，多用于JavaScript的window对象中。

.unload()：当页面卸载（关闭页面）时触发该事件。

.Beforeunload()：离开页面（更新网址，关闭网页）之前执行； .error()：当图片加载失败时触发该事件。

6.释放JQuery

$.noConflict()

仅仅释放JQuery的$，JQuery仍然代表JQuery

可以指定新字符代表JQuery

var j = $.noConflict();    //j代表JQuery 

六、JQuery异步操作（Ajax）

1.js中的Ajax

js中的Ajax

//1.创建对象 request = new XMLHTTPRequest(); //2.链接后台 request.open("GET","接口地址"); //3.发送 request.send();  //请求成功 request.onload=function(){   data = request.responseText;   //返回的数据   console.log(JSON.parse(data)); } //请求失败 request.onerror=function(){    } //请求状态改变 request.onreadystatechange=function(){    } 

Promise

三种状态（状态不可逆）

1.Pending(待定)：初始状态，既没有被兑现也没有被拒绝

2.fulfilled(已兑现)：操作成功完成

3.regected(已拒绝)：操作失败

//成功执行then,失败执行catch  			new Promise(function(resolve, reject) { 				var request = new XMLHttpRequest(); 				request.open("GET","接口地址"); 				request.send(); 				request.onload = function() { 					//resolve提交到then 					resolve(request.responseText) 				} 				request.onerror = function() {           //regect提交到catch 					reject("error"); 				} 			}).then(function(res) { 				console.log(JSON.parse(res)) 				var val = JSON.parse(res); 				console.log(val.data[1].icon); 			}).catch(function(rej) { 				console.log(rej) 			})  

2.JQuery中的异步请求

链接网页

$("sel").load("head.html") 

$.get()和$.post()

$.get()与$.post()使用方式相同

$.get()传参的三种方式

(1)url传参（问号分隔）

$.get("地址?type=1",function(res){...})

(2)字符串传参（多个值用&分隔）

$.get("地址","type=1",function(res){...})

(3)JSON传参

$.get("地址",{type:1},function(res){...})

$.ajax

$.ajax({   type:"get",   url:"地址",   data:{type:"值"},   success:function(res){     //请求成功返回的数据     console.log(res);   },   error:function(rej){     console.log("error");   } }) 

不同页面间传递数据

1.浏览器存储传参

//存值 localStorage.setItem("myId","值"); //获取值 localStorage.getItem("myId"); 

2.url地址传参

地址栏中通过?分隔传参，传多个参数再用&分隔

window.location.search得到url中的参数

//获取地址栏中参数的值，name为参数的名字 GetQueryString: function(name) { 		//定义正则，用于获取相应参数 		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); 		//字符串截取，获取匹配参数值 		var r = window.location.search.substr(1).match(reg); 		// console.log(r) 		//但会参数值 		if (r != null) return r[2]; 		return null; 	} 

拓展：url中的参数加密和解密：

加密：

u=encodeURIComponent("要加密的str");

解密：

decodeURIComponent(u)