这篇博客详细介绍了jQuery的选择器使用，包括ID选择器、类名选择器、标签选择器、属性选择器和伪类选择器。此外，还阐述了jQuery中的事件处理，如点击、鼠标悬停等，并展示了如何绑定和解绑事件。内容还涵盖了元素筛选、属性操作、样式操作、类名操作、链式编程、元素内容和节点操作等。最后，讨论了动画效果的实现，如淡入淡出、滑动和自定义动画。
选择器
jQuery选择元素可以使用css选择器。
- id选择器
$("#id名")
- 类名选择器
$(".类名")
- 标签选择器
$("标签名")
- 属性选择器
$("[name='username']")
- 伪类选择器（表单的伪类）
$("li:first-child")
$("li:last-child")
$("li:nth-child(数字)") // 第一个元素对应数字是1
$("li:empty") // 空标签
jQuery获取元素不会获取单个元素，页面中只要满足选择器的，都会获取到，也就是jQuery获取到的永远是集合。
筛选器
和伪类选择一样，筛选出需要的元素
$("li:first")
$("li:last")
$("li:event")
$("li:odd")
$("li:eq(数字)") // 选择下标是指定数字的元素
$("li:lt(数字)") // 下标小于指定数字的元素
$("li:gt(数字)") // 下标大于指定数字的元素
表单元素选择器
$(":input") // 匹配所有的表单元素 包括：文本框（input）下拉列表(select)、文本域(textarea)
$(":text") // 匹配单行文本框type="text" $("input:text") $("input[type=text]")
$(":password") // 匹配单行密码框
$(":radio") // 匹配单选按钮
$(":checkbox") // 匹配多选按钮
$(":submit") // 匹配提交按钮
$(":reset") // 匹配重置按钮
$(":image") // 匹配图片按钮
$(":button") // 匹配普通按钮
$(":file") // 匹配文件上传
$(":hidden") // 匹配隐藏域
表单对象选择器
$("input:enabled") // 所有可用表单元素
$("input:disbaled") // 所有禁用表单元素
$("input：checked") // 所有选中的表单元素 -- 重点
$("option:selected") // 被选中的下拉框元素 -- 重点
筛选器方法
使用方法来筛选元素
$("li").first() // 元素集合中的第一个
$("li").last() // 元素集合中的最后一个
$("div").next() // div的下一个兄弟元素
$("div").prev() // div的上一个兄弟元素
$("div").nextAll() // div后面的所有兄弟元素
$("div").prevAll() // div前面的所有兄弟元素
$("div").parent() // div的父元素
$("div").parents() // div的所有直系祖宗元素
$("div").eq(数字) // 指定下标的div元素
$("div").find(选择器) // div后代中的的指定元素
$("div").siblings() // div的所有兄弟元素
$("div").children() // div下的所有子元素
筛选方法可以进行链式筛选
事件
jquery中的事件是将事件名作为方法名，传入回调函数即可。
$("div").click(function(){
});
$("div").mouseover(function(){
});
标准的事件处理：
on方法用于绑定事件、委托事件、传入参数
$(元素).on(事件类型[,委托的子元素][,传入的参数],处理的函数)
使用说明：
- 事件类型不用加on
- 委托元素必须是子元素
- 传入的参数会传到处理函数中，且在事件对象的data属性中
off方法用于解绑事件
$(元素).off(事件类型,处理函数)
trigger方法用于手动触发事件：
$(元素).trigger(事件类型,处理函数)
只能触发一次的事件：
$(元素).one(事件类型,处理函数);
特殊事件：
hover事件，包含鼠标放上去和鼠标离开
$("元素").hover(鼠标放上去的处理函数,鼠标离开的处理函数)
属性操作
设置属性：
$("div").prop(属性名,属性值);
获取属性：
$("div").prop(属性名);
设置自定义属性：
$("div").attr(属性名,属性值);
获取自定义属性：
$("div").attr(属性名);
删除属性：
$("div").removeProp(属性名);
$("div").removeAttr(属性名); // 删除自定义属性
案例：全选反选
js写法
<body>
<input type="checkbox">商品1<br>
<input type="checkbox">商品2<br>
<input type="checkbox">商品3<br>
<input type="checkbox">商品4<br>
<input type="checkbox">商品5<br>
<input type="checkbox">商品6<br>
<button class="all">全选</button><button class="reverse">反选</button><button class="allNot">取消</button><br>
<span>删除</span>
</body>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
var checkboxs = document.querySelectorAll("input");
document.querySelector(".all").onclick=function(){
for(var i=0;i<checkboxs.length;i++){
if(!checkboxs[i].checked){
checkboxs[i].checked = true;
}
}
}
document.querySelector(".reverse").onclick=function(){
for(var i=0;i<checkboxs.length;i++){
if(!checkboxs[i].checked){
checkboxs[i].checked = true;
}else{
checkboxs[i].checked = false;
}
}
}
document.querySelector(".allNot").onclick=function(){
for(var i=0;i<checkboxs.length;i++){
if(checkboxs[i].checked){
checkboxs[i].checked = false;
}
}
}
</script>
jquery写法：
$(".all").click(function(){
$("input[type='checkbox']").prop("checked",true);
});
$(".reverse").click(function(){
$("input[type='checkbox']").each(function(i,v){
$(this).prop("checked",$(this).prop("checked"));
});
});
$(".allNot").click(function(){
$("input[type='checkbox']").prop("checked",false);
});
当操作jquery对象的时候，不需要遍历操作每一个，直接操作的就是每一个元素。因为在jquery内部自带遍历操作。这就是隐形迭代。
each方法，用来遍历元素，参数有两个，下标和值。
样式操作
设置样式：
$("div").css(css属性名,值); // 设置一个样式
$("div").css({ // 设置多个样式
css属性名:值,
css属性名:值
})
获取样式：
$("div").css(css属性名);
类名操作
$("div").addClass(类名); // 添加类名
$("div").removeClass(类名); // 删除类名
$("div").toggleClass(类名); // 在添加和删除之间切换
$("div").hasClass(类名); // 判断元素是否有这个类名，有是true，没有是false
链式编程
$(this).index() // index方法是获取元素的下标
$("li").index(3) // 将li标签的index下标设置为3
链式编程在这里体现的淋漓尽致。
在链式编程中，通常需要操作上一个已经操作过的元素对象，这时候使用end方法，可以将当前返回的对象转到上一个操作过的对象
例：
var res = $(this)
.siblings() // 从$(this)对象转到了兄弟元素对象
.parent() // 从兄弟元素对象转到了父元素对象
.end() // 返回上一次操作的对象，也就是从父元素对象转到了兄弟元素对象
.end() // 返回上一次操作的对象，也就是从兄弟元素对象转到了$(this)对象
// 此时返回的res是$(this)
元素内容操作
$("div").text(); // 获取元素内容 === 相当于 div.innerText
$("div").text("盒子"); // 设置元素内容 === 相当于 div.innerText = "盒子"
$("div").html(); // 获取元素代标签的内容 === 相当于 div.innerHTML
$("div").html("<b>文字</b>"); // 设置元素带标签的内容 === 相当于 div.innerHTML = "<b>文字</b>"
$("input").val(); // 获取表单元素的值 === 相当于 input.value
$("input").val("请输入用户名"); // 设置表单元素的内容 === 相当于 input.value = "请输入用户名"
元素节点操作
创建元素：
$("标签和内容") // 创建一个标签并给里面放内容
例：
var box = $("<div class='box'>div盒子</box>");
console.log(box);
添加元素
- 给父元素追加子元素：
父元素.append(子元素)
例：
<div>
<span>span标签</span>
</div>
</body>
<script src="jquery.js"></script>
<script type="text/javascript">
var box = $("div");
var b = $("<b>加粗文字</b>")
box.append(b);
</script>
- 给父元素最前面添加子元素：
父元素.prepend(子元素);
例：
<div>
<span>span标签</span>
</div>
</body>
<script src="jquery.js"></script>
<script type="text/javascript">
var box = $("div");
var b = $("<b>加粗文字</b>")
box.prepend(b);
</script>
- 将子元素添加到父元素中
// 将子元素追加到父元素中
子元素.appendTo(父元素);
// 将子元素添加到父元素最前面
子元素.prependTo(父元素);
- 添加兄弟元素：
- 添加下一个兄弟元素
// 添加下一个兄弟元素
元素.after(下一个兄弟元素);
例：
<div>
<span>span标签</span>
</div>
</body>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
var span = $("span");
var b = $("<b>加粗文字</b>")
span.after(b);
</script>
- 添加上一个兄弟元素：
元素.before(上一个兄弟元素);
例：
<div>
<span>span标签</span>
</div>
</body>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
var span = $("span");
var b = $("<b>加粗文字</b>")
span.before(b);
</script>
- 将元素添加到某个元素的前面或后面：
// 将元素添加到某个元素前面
要添加的元素.insertBefore(元素);
// 将元素添加到某个元素后面
要添加的元素.insertAfter(元素);
替换元素
使用新元素替换某个元素：
某个元素.replaceWith(新元素)
例：
<div>
<span>span标签</span>
</div>
</body>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
var span = $("span");
var b = $("<b>加粗文字</b>")
span.replaceWith(b);
</script>
用新元素替换掉某个元素：
新元素.replaceAll(某个元素)
删除元素
删除元素内部所有标签和内容，让自己变成一个空标签
元素.empty()
例：
<div>
<span>span标签</span>
</div>
</body>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
var box = $("div");
box.empty();
</script>
将当前标签从页面中删除
元素.remove() // 删除自己和自己内部所有内容
例：
<div>
<span>span标签</span>
</div>
</body>
<script src="../js/jquery.js"></script>
<script type="text/javascript">
var box = $("div");
box.remove();
</script>
复制元素
元素.clone([是否复制自身的事件][,是否复制子元素的事件])
使用说明：
- jqueyr中的复制元素是深复制，复制标签结构和内容
- 这个方法接收两个参数，参数1代表是否把元素的事件也克隆出来，默认为false；参数2代表是否把元素的子元素的事件克隆出来，默认跟随第一个参数的值。
- 如果不复制父元素的事件，子元素的事件也不能复制
节点操作案例：滑动轮播图
元素尺寸
元素内容区域尺寸操作：
元素.height(); // 获取元素内容区域高度
元素.height(高度); // 设置元素内容区域高度
元素.width(); // 获取元素内容区域宽度
元素.width(宽度); // 设置元素内容区域宽度
获取元素内部区域尺寸：
元素.innerHeight(); // 获取元素内部的高度，包含padding，但不包含border
元素.innerWidth(); // 获取元素内部的宽度，包含padding，但不包含border
获取元素占据页面的尺寸：
元素.outHeight(); // 获取元素占据的高度，包含padding和border，不包含margin
元素.outHeight(true); // 获取元素占据的高度，包含padding和border，包含margin
元素.outWidth(); // 获取元素占据的宽度，包含padding和border，不包含margin
元素.outWidth(true); // 获取元素占据的宽度，包含padding和border，包含margin
元素位置
元素相对页面的位置操作：
元素.offset(); // 获取到元素在页面中的位置，包含left值和top值，返回一个对象
元素.offset({left:值,top:值}); // 将元素设定到指定的位置，使用relative
元素相对父元素的值：
元素.position(); // 获取元素相对于定位的父元素的偏移值，不管设置的是什么，获取到的永远是left和top
获取元素滚动过的距离：
$(window).scrollTop(); // 获取元素滚动过的高度
$(window).scrollLeft(); // 获取元素滚动过的宽度
$(window).scrollTop(值); // 设置元素滚动过的高度
$(window).scrollLeft(值); // 设置元素滚动过的宽度
动画
基本动画
显示：
元素.show(); // 让元素从隐藏状态变为显示状态（从display:none;变为 display:block;）
可选参数1：时间，毫秒数 == 让元素在规定的时间内显示（操作的属性有很多）
可选参数2：速度方式，匀速或加速或减速
可选参数3：动画结束后执行的回调函数
隐藏：
元素.hide()； // 让元素从显示状态切换到显示状态
可选参数和show一样
切换显示隐藏：
元素.toggle(); // 让元素在隐藏和显示状态切换
可选参数和show一样
元素上下拉动隐藏显示：
元素.slideDown() // 让元素向下拉动显示
元素.slideUp() // 让元素向上拉动隐藏
元素.slideToggle() // 让元素切换上下拉动显示隐藏
参数和show一样
元素透明度显示隐藏：
元素.fadeIn() // 让元素从透明度0变为1的显示
元素.fadeOut() // 让元素从透明度1变为0的隐藏
元素.slideToggle() // 让元素切换透明度显示隐藏
参数和show一样
让元素切换到指定的透明度：
元素.fadeTo(毫秒数,透明度,速度方式,结束的回调函数) // 让元素在指定的时间内切换到指定的透明度
自定义动画
开启动画：
元素.animate({
css属性名:属性值,
css属性名:属性值,
。。。
}[,毫秒数][,速度方式][,执行结束的回调函数]);
停止动画：
元素.stop(); // 将动画停止在当前状态
元素.finish(); // 将动画停止在结束状态
stop有两个参数，值都是布尔值：
参数1表示是否停止后续的动画，true表示停止，false表示不停止，默认是false
参数2表示是否停止在当前动画的结束位置，true表示停止的当前动画的结束位置，false表示停止在当前位置，默认为false
动画的链式操作：
通常在一个动画中的所有css属性是同时进行的，想要将所有动画按顺序执行的话，可以将多个动画嵌套在动画结束的回调函数中，但是这样容易造成回调地狱，所以jquery提供了一个动画的链式操作，让所有动画组成一个队列，按顺序执行
例：
<style>
div{
width: 100px;
height:100px;
background-color: red;
position:absolute;
}
</style>
<body>
<button class="start">按钮</button>
<div></div>
</body>
<script src="./js/jquery.js"></script>
<script type="text/javascript">
$(".start").click(function(){
$("div").animate({
left:"300px"
}).animate({
top:"300px"
}).animate({
width:"300px"
}).animate({
height:"50px"
})
});
</script>
4005
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
