前端之jQuery
一.选择器和筛选器
选择器
基本选择器
$("*") $("#id") $(".class") $("element") $(".class,p,div")
层级选择器
$(".outer div") $(".outer>div") $(".outer+div") $(".outer~div")
筛选选择器
$("li:first") $("li:eq(2)") $("li:even") $("li:gt(1)")
属性选择器
$('[id="div1"]') $('["hantao="sb"][id]')
表单选择器
$("[type='text']")----->$(":text") 注意只适用于input标签
筛选器
过滤筛选器
$("li").eq(2) $("li").first() $("ul li").hasclass("test")
查找筛选器
查找子标签： $("div").children(".test") $("div").find(".test")
向下查找兄弟标签： $(".test").next() $(".test").nextAll()
$(".test").nextUntil()
向上查找兄弟标签： $("div").prev() $("div").prevAll()
$("div").prevUntil()
查找所有兄弟标签： $("div").siblings()
查找父标签： $(".test").parent() $(".test").parents()
$(".test").parentUntil()
二.操作元素
文本操作
<p class="p1">PPP</p> <p class="p1">PPP</p> <p class="p1">PPP</p> <p class="p1">PPP</p> <script src="jquery-3.2.1.min.js"></script> <script> $("p").click(function () { console.log($(this)); $(this).html() }) </script>
<div class="outer">
<span class="num">23</span>
</div>
<button>click</button>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("button").click(function () {
var $val=$(".outer .num").html();
$(".outer .num").html(parseInt($val)+1)
})
</script>
属性操作
$().attr(属性名) $().attr(属性名, 属性值) // 针对 checked select $().prop(属性名) $().prop(属性名, 属性值) $(":checkbox").prop("checked",false) class操作 $("").addClass(class|fn) $("").removeClass([class|fn])
value操作
针对input,textarea,select
取值操作：
$("").val()
赋值操作：
$("").val("")
each循环
//循环1 var arr=[111,222,333] // $.each(循环对象，function () { // // }) $.each(arr,function (i,j) { console.log(i); //索引 console.log(j); //值 }) //循环2 $("p").each(function () { console.log($(this).html()) })
表格操作
<body>
<button class="select_all">全选</button>
<button class="cancel">取消</button>
<button class="reverse">反选</button>
<hr>
<table>
<tr>
<td>
<input type="checkbox">
</td>
<td>张三</td>
<td>18</td>
<td>s1</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>李四</td>
<td>8000</td>
<td>s1</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>王五</td>
<td>10000</td>
<td>s1</td>
</tr>
</table>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(".select_all").click(function () {
$(":checkbox").prop("checked",true)
});
$(".cancel").click(function () {
$(":checkbox").prop("checked",false)
})
$(".reverse").click(function () {
$(":checkbox").each(function () {
// if ($(this).prop("checked")){
// $(this).prop("checked",false)
// }
// else {
// $(this).prop("checked",true)
// }
$(this).prop("checked",!$(this).prop("checked"))
})
})
</script>
</body>
事件委派
$("ul li").click(function () {
alert($(this).html())
})
$("button").click(function () {
$("ul").append("<li>444</li>")
})
//事件委派
$("ul").on("click","li",function () {
alert($(this).html())
})
节点操作
对象转换
DOM对象转换jQuery对象：
$()
jQuery对象转换DOM对象：
$()[0]
创建标签
$("<p>")
插入节点
//内部插入
$("").append(content|fn) ----->$("p").append("<b>Hello</b>");
$("").appendTo(content) ----->$("p").appendTo("div");
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");
$("").prependTo(content) ----->$("p").prependTo("#foo");
//外部插入
$("").after(content|fn) ----->$("p").after("<b>Hello</b>");
$("").before(content|fn) ----->$("p").before("<b>Hello</b>");
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").insertBefore(content) ----->$("p").insertBefore("#foo");
<script> $(".add").click(function () { //创建标签 var $img=$("<img>"); $img.attr("src","egon.jpg"); //添加节点 $(".outer").append($img); //$img.appendTo(".outer"); 同上 //$(".outer").after($img) 添加到标签下面做为兄弟标签 }) </script>
删除节点
//删除标签 $(".delete").click(function () { //remove // $(".outer h4").remove() //empty $(".outer h4").empty() })
替换节点
//替换节点 var $img=$("<img>"); $img.attr("src","egon.jpg"); $(".replace").click(function () { $(".outer p").eq(1).replaceWith($img) })
克隆节点
//clone节点 var $copy=$(".outer").clone();
<body>
<div class="style_box">
<div class="item">
<button class="add">+</button>
<input type="text">
</div>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(".item .add").click(function () {
var $clone=$(this).parent().clone();
$clone.children(".add").html("-").attr("class","del");
$(".style_box").append($clone);
})
$(".style_box").on("click",".del",function () {
$(this).parent().remove()
})
</script>
</body>
动画效果
//用n秒的时间显示或隐藏 $(".xianshi").click(function () { // $(".c1").removeClass("hide") $(".c1").show(2000); }); $(".yincang").click(function () { // $(".c1").addClass("hide") $(".c1").hide(2000); })
$(".qiehuan").click(function () {
$(".c1").slideToggle(2000);
})
<script>
//用n秒的时间显示或隐藏(滑动)
$(".xianshi").click(function () {
$(".c1").slideDown(2000);
});
$(".yincang").click(function () {
$(".c1").slideUp(2000);
})
</script>
<!--淡入淡出-->
<script>
$(".xianshi").click(function () {
$(".c1").fadeIn()
})
$(".yincang").click(function () {
$(".c1").fadeOut()
})
$(".qiehuan").click(function () {
$(".c1").fadeToggle()
//$(".c1").fadeto(1000,.02)
})
</script>
CSS操作
$("").offset([coordinates])
$("").position()
console.log($(".c1").offset().top);
console.log($(".c1").offset().left);
console.log($(".c2").offset().top);
console.log($(".c2").offset().left);
console.log($(".c1").position().top);
console.log($(".c1").position().left);
$(".c2").offset({top:200,left:200});
滚动条返回顶部实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 100%;
height: 2000px;
background-color: darkgray;
}
.return_top{
width: 100px;
height: 60px;
background-color: yellow;
color: white;
text-align: center;
line-height: 60px;
position: fixed;
bottom: 20px;
right: 20px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="return_top hide">返回顶部</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(window).scroll(function () {
var $current_position=$(window).scrollTop();
if ($current_position>200){
$(".return_top").show();
}
else {
$(".return_top").hide();
}
})
$(".return_top").click(function () {
$(window).scrollTop(0)
})
</script>
</body>
</html>
浙公网安备 33010602011771号