JQuery总结
作者：互联网
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" />
<img src="./img/images/show/9/2.jpg"/>
<img src="./img/images/show/9/3.jpg" />
<img src="./img/images/show/9/4.jpg" />
<img src="./img/images/show/9/5.jpg" />
<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)
标签：JQuery,总结,function,元素,curIndex,选择器,fn,left 来源： https://www.cnblogs.com/wangchuanxiansheng/p/16420837.html