文章内容输出来源：拉勾教育JAVA就业训练营
总目录跳转链接：总目录
如有侵权请联系本人
邮箱:xiaogueika@tom.com
jQuery官网：http://jQuery.com
一、选择器
1. 基本选择器
基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器
| 名称 | 语法构成 | 描述 | 示例 |
|---|---|---|---|
| 标签选择器 | element | 根据给定的标签名匹配元素 | $("h2" )选取所有h2元素 |
| 类选择器 | .class | 根据给定的class匹配元素 | $(" .title")选取所有class为title的元素 |
| ID选择器 | #id | 根据给定的id匹配元素 | $(" #title")选取id为title的元素 |
| 并集选择器 | selector1,selector2,…,selectorN | 将每一个选择器匹配的元素合并后一起返回 | $("div,p,.title" )选取所有div、p和拥有class为title的元素 |
| 交集选择器 | element.class或element#id | 匹配指定class或id的某元素或元素集合 | $("h2.title")选取所有拥有class为title的h2元素 |
<body>
<p>中国</p>
<p>武汉</p>
<p class="jy">加油</p>
<p id="wan">祖国万岁</p>
<h3 class="jy">祖国万岁</h3>
</body>
<script>
//$("p").css("color","red");// 标签选择器，获得所有的p
//$(".jy").css("color","blue");//类选择器
//$("#wan").css("color","#000");//ID选择器,更具备唯一性
//$(".jy,#wan").css("color","pink");// 并集选择器，.jy和#wan
//$("h3.jy").css("color","yellow");// 交集选择器，既是h3标签，又拥有.jy的元素
</script>
2. 层次选择器
| 名称 | 语法构成 | 描述 | 示例 |
|---|---|---|---|
| 后代选择器 | ancestor descendant | 选取ancestor元素里的所有 descendant（后代）元素 | $("#menu span" )选取#menu下的元素 |
| 子选择器 | parent>child | 选取parent元素下的child（子）元素 | $(" #menu>span" )选取#menu的子元素 |
| 相邻元素选择器 | prev+next | 选取紧邻prev元素之后的next元素 | $(" h2+dl " )选取紧邻元素之后的同辈元素 |
| 同辈元素选择器 | prev~sibings | 选取prev元素之后的所有siblings元素 | $(" h2~dl " )选取元素之后所有的同辈元素 |
<body>
<h3>000</h3>
<div id="x">
111
<p>p1</p>
<div>
<p>p2</p>
</div>
</div>
<h3>222</h3>
<h3>333</h3>
</body>
<script>
//$("#x p").css("color","red"); // 后代选择器，忽略层级
//$("#x>p").css("color","red"); // 子代选择器，只负责子级
//$("#x+h3").css("color","red"); // 相邻元素选择器，下一个紧邻的兄弟h3
//$("#x~h3").css("color","red"); // 同辈元素选择器，下面的所有兄弟h3
</script>
3. 属性选择器
| 语法构成 | 描述 | 示例 |
|---|---|---|
| [attribute] | 选取包含给定属性的元素 | $(" [href]" )选取含有href属性的元素 |
| [attribute=value] | 选取等于给定属性是某个特定值的元素 | $(" [href ='#']" )选取href属性值为“#”的元素 |
| [attribute !=value] | 选取不等于给定属性是某个特定值的元素 | $(" [href !='#']" )选取href属性值不为“#”的元素 |
| [attribute^=value] | 选取给定属性是以某些特定值开始的元素 | $(" [href^='en']" )选取href属性值以en开头的元素 |
| [attribute$=value] | 选取给定属性是以某些特定值结尾的元素 | $(" [href$='.jpg']" )选取href属性值以.jpg结尾的元素 |
| [attribute*=value] | 选取给定属性是以包含某些值的元素 | $(" [href* ='txt']")选取href属性值中含有txt的元素 |
| [s1] [s2] [sN] | 选取满足多个条件的复合属性的元素 | $("li[id][title=新闻]" )选取含有id和title属性为新闻的<li>元素 |
<body>
<a href="www.lagou.com">拉勾网</a>
<a href="www.sina.com.cn">新浪网</a>
<a href="http://www.163.com">网易</a>
<p href="x">哈哈1</p>
<p href="x" title="x">哈哈2</p>
</body>
<script>
//$("[href]").css("color","red"); // 选取拥有href属性的元素
//$("[href='x']").css("color","red"); // 选取拥有href=x的元素
//$("a[href!='x']").css("color","red"); // 选取a标签中href不等于x的元素
//$("[href^='www']").css("color","red"); // 选取href属性以www开头的元素
//$("[href$='com']").css("color","red"); // 选取href属性以com结尾的元素
//$("[href*='a']").css("color","red"); // 选取href属性包含a的元素
//$("p[href][title='x']").css("color","red"); // 选取拥有href属性和title属性，并且title=x的p元素
</script>
4. 过滤选择器
| 语法构成 | 描述 | 示例 |
|---|---|---|
| :first | 选取第一个元素 | $(" li:first" )选取所有 |
| :last | 选取最后一个元素 | $(" li:last" )选取所有 |
| :even | 选取索引是偶数的所有元素（index从0开始） | $(" li:even" )选取索引是偶数的所有 |
| :odd | 选取索引是奇数的所有元素（index从0开始） | $(" li:odd" )选取索引是奇数的所有 |
| :eq(index) | 选取索引等于index的元素（index从0开始） | $(“li:eq(1)” )选取索引等于1的 |
| :gt(index) | 选取索引大于index的元素（index从0开始） | $(" li:gt(1)" )选取索引大于1的 |
| :lt(index) | 选取索引小于index的元素（index从0开始） | $(“li:lt(1)” )选取索引小于1的 |
| not(节点) | 选取选中的节点外的所有元素 | $(“li”).not( $(this).siblings() )除了他自己所有li节点 |
<body>
<h2 id="h2#x">修仙小说</h2>
<ul>
<li>凡人修仙传</li>
<li>遮天</li>
<li>神墓</li>
<li>残袍</li>
<li>大主宰</li>
</ul>
</body>
<script>
//$("li:first").css("color","red"); // 第一个li
//$("li:last").css("color","red"); // 最后一个li
//$("li:even").css("color","red"); // 偶数行的li
//$("li:odd").css("color","red"); // 奇数行的li
//$("li:eq(2)").css("color","red"); // 下标为2的li
//$("li:gt(1)").css("color","red"); // 下标大于1的li
//$("li:lt(2)").css("color","red"); // 下标小于2的li
//$("#h2\\#x").css("color","red"); // 使用转义符
</script>
二、事件
1. 鼠标事件
鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有：
| 方法 | 描述 | 执行时机 |
|---|---|---|
| click( ) | 触发或将函数绑定到指定元素的click事件 | 单击鼠标时 |
| mouseover( ) | 触发或将函数绑定到指定元素的mouse over事件 | 鼠标移过时 |
| mouseout( ) | 触发或将函数绑定到指定元素的mouse out事件 | 鼠标移出时 |
<body>
<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">
<img src="img/1.jpg" width="300">
</body>
<script>
$("img").click( function(){
//点击一下，换照片
$(this).attr( "src","img/2.jpg" ); //this就是事件触发的源头
} );
$("img").mouseover( function(){ //移动到元素上
$(this).css( "border","2px solid red" );
} );
$("img").mouseout( function(){ //离开元素
$(this).css( "border","2px solid white" );
} );
</script>
2. 键盘事件
| 方法 | 描述 | 执行时机 |
|---|---|---|
| keydown( ) | 触发或将函数绑定到指定元素的keydown事件 | 按下键盘时 |
| keyup( ) | 触发或将函数绑定到指定元素的keyup事件 | 释放按键时 |
<body>
<input>
<h3></h3>
</body>
<script>
$("input").keyup( function(){
var str = $(this).val(); // 获取框中的值
$("h3").text( str ); // 将h3元素中的文本内容更改为str
} );
</script>
3. 表单事件
| 方法 | 描述 | 执行时机 |
|---|---|---|
| focus( ) | 触发或将函数绑定到指定元素的focus事件 | 获得焦点 |
| blur( ) | 触发或将函数绑定到指定元素的blur事件 | 失去焦点 |
<body>
<form action="">
<p>帐号: <input id="a" value="请输入帐号..."> </p>
<p>电话: <input id="b"> </p>
</form>
</body>
<script>
//获得焦点（激活/点击一下）
$("#a").focus(function(){
$(this).val("");
});
//失去焦点（未激活/未点击）
$("#a").blur(function(){
$(this).val("请输入帐号...");
});
</script>
4. 鼠标悬停复合事件
hover()方法相当于mouseover(鼠标移过)与mouseout（鼠标移出）事件的组合
<body>
<img src="img/3.jpg" width="400">
</body>
<script>
$("img").hover(
function(){
$(this).css("border","5px solid red");
},
function(){
$(this).css("border","5px solid white");
}
);
</script>
5. 连续点击复合事件
toggle()除了可以模拟鼠标的连续单击事件
<body>
<h2>修仙小说</h2>
<ul>
<li>凡人修仙传</li>
<li>遮天</li>
<li>神墓</li>
<li>残袍</li>
<li>大主宰</li>
</ul>
</body>
<script>
$("h2").click(function(){
$("ul").toggle(); // 连续点击，ul的可见和隐藏进行切换
});
</script>
6. 事件的动态绑定
对dom元素绑定事件的另一种写法
<body>
<h2>点我试试</h2>
</body>
<script>
//可以绑定多种类型的事件
$("h2").on("click mouseover",function(){
alert("点我或移动上来");
});
</script>
三、元素的隐藏和显示
ps：可选的 speed 参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒
1. 改变元素的宽和高（带动画效果）
show( speed )：显示hide( speed )：隐藏toggle( speed )等价于show+hide : 显示的隐藏，隐藏的显示
<style>
div{
width: 200px;
height: 200px;
background-color: black;
}
</style>
<body>
<button id="btn1">显示</button>
<button id="btn2">隐藏</button>
<button id="btn3">切换</button>
<div></div>
</body>
<script>
$("#btn2").click(function(){
//fast:快速的
//slow:缓慢的
//毫秒：自定义
$("div").hide('fast');
});
$("#btn1").click(function(){
$("div").show('slow');
});
$("#btn3").click(function(){
$("div").toggle(1000);
});
</script>
2. 改变元素的高（拉伸效果）
slideDown( speed )：显示slideUp( speed )：隐藏slideToggle( speed )等价于slideDown+slideUp
<style>
div{
width: 200px;
height: 200px;
background-color: black;
}
</style>
<body>
<button id="btn1">显示</button>
<button id="btn2">隐藏</button>
<button id="btn3">切换</button>
<div></div>
</body>
<script>
$("#btn2").click(function(){
$("div").slideUp(1000); //向上收缩
});
$("#btn1").click(function(){
$("div").slideDown(1000); //向下伸展
});
$("#btn3").click(function(){
$("div").slideToggle(1000); //切换
});
</script>
3. 不改变元素的大小（淡入淡出效果）
fadeIn( speed )显示fadeOut( speed )隐藏fadeToggle( speed )等价于fadeIn+fadeOut动画fadeTo( speed , 透明度 )方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
<style>
div{
width: 200px;
height: 200px;
background-color: black;
}
</style>
<body>
<button id="btn1">显示</button>
<button id="btn2">隐藏</button>
<button id="btn3">切换</button>
<button id="btn4">透明</button>
<div></div>
</body>
<script>
$("#btn2").click(function(){
$("div").fadeOut(1000); // 隐藏：淡出我的视线
});
$("#btn1").click(function(){
$("div").fadeIn(1000); // 显示：映入眼帘
});
$("#btn3").click(function(){
$("div").fadeToggle(1000); // 切换
});
$("#btn4").click(function(){
$("div").fadeTo(1000,0.5); // 1秒内变成50%的透明度
});
</script>
4. 链(多个动作/方法连接在一起)
链是允许我们在同一个元素上在一条语句中运行多个jQuery方法，可以把动作/方法链接在一起 ；
点击一次按钮，让div完成4个指定动作: 背景变粉 --> 字体变绿-->收缩 -->拉伸
<style>
div{
width: 200px;
height: 200px;
background-color: black;
color:white;
font-size: 3em;
}
</style>
<body>
<button>试试</button>
<div>hello</div>
</body>
<script>
$("button").click(function(){
$("div").css("background-color","pink") //背景变粉
.css("color","green") //字体变绿
.slideUp(1000) //收缩
.slideDown(1000); //拉伸
});
</script>
四、DOM和CSS的操作
1. 属性函数
- attr( “属性” ); 获得元素的属性值
- attr( “属性” , “新值” ); 修改元素的属性值
<body>
<button id="btn1">点我试试</button>
<hr>
<img src="img/1.jpg" title="美女大图" width="300">
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$("#btn1").click(function(){
console.log($("img").attr("src")); //attr( "属性" ); 获得元素的属性值
$("img").attr("src","img/2.jpg"); //attr( "属性" , "新值" ); 修改元素的属性值
$("img").attr("title","高清无码");
$("img").attr( {width:"200",height:"200"} ); //用json语法修改多个属性值
});
</script>
- val() ; 获得表单元素中的value值
- val(“x”) 修改表单元素中的value值
- html(); 获得元素中的内容（标签+文本）
- html(“x”) 修改元素中的内容（标签+文本）
- text(); 获得元素中的文本
- text(“x”) 修改元素中的文本
<body>
<button>试试</button>
<hr>
<input id="username">
<div>
<h1><i>中国加油！</i></h1>
</div>
</body>
<script>
$("button").click(function(){
//alert($("input").val()); //获得input框中的值
//$("input").val("哈哈哈"); //修改input框中的值
//alert( $("div").html() ); //获得div中的内容（包含标签信息）
//alert( $("div").text() ); //获得div中的内容（不包含标签信息，只包含文本内容）
//$("div").text("祖国万岁！"); //修改div中的内容（全部内容都覆盖）
});
</script>
2. 样式函数
- css( “属性”); 获得该属性值
- css( “属性”,“值”); 设置属性的值
- css( { json} ); 设置多个属性的值
- width(); 获得元素的宽度
- width( number ); 修改元素的宽度
- height(); 获得元素的高度
- height( number ); 修改元素的高度
<!-- CSS -->
<style>
div{
width: 150px;
height: 150px;
background-color: #000;
}
</style>
<body>
<button>试试</button>
<hr>
<div></div>
</body>
<script>
$("button").click(function(){
//var w = $("div").css("width"); // 获取css属性，width的值
//1.一个键值对
//$("div").css("background-color","pink");
//2.链式编程
//$("div").css("background-color","pink").css("border-radius","50%");
//3.json为参数
$("div").css({
opacity:"0.4",
background:"orange",
borderRadius:"50%"
} );
});
</script>
<!-- width、height-->
<style>
div{
width: 150px;
height: 150px;
background-color: #000;
}
</style>
<body>
<button>试试</button>
<hr>
<div></div>
</body>
<script>
$("button").click(function(){
var w = $("div").width(); // （无参）获取宽度
var h = $("div").height();// （无参）获取高度
console.log("宽:"+w+"px，高:"+h+"px");
$("div").width("300"); // （传参）修改宽度
$("div").height("300"); //（传参）修改高度
});
</script>
3. 类样式函数(换样式)
- addClass(); 为元素添加类样式
- removeClass(); 将元素的类样式移除
- toggleClass(); 样式的切换（有=>无，无=>有）
<style>
div{
width: 100px;
height: 100px;
background-color: #000;
}
.a{
background: palevioletred;
border-radius: 50%;
}
.b{
border:5px dashed darkcyan;
opacity: 0.6;
}
.cn{
background: #000;
color:#FFF;
font-family: 字魂49号-逍遥行书;
}
</style>
<body>
<button id="btn1">试试</button>
<button id="btn2">取消透明度</button>
<button id="btn3">样式切换</button>
<hr>
<div></div>
<h1>中华人民共和国，万岁！</h1>
</body>
<script>
$("#btn1").click(function(){
// $("div").addClass("a");
$("div").addClass("a b");
});
$("#btn2").click(function(){
$("div").removeClass("b");
});
$("#btn3").click(function(){
$("h1").toggleClass("cn");
});
</script>
4. 节点操作
-
创建节点
工厂函数$()用于获取或创建节点 -
插入节点
插入子节点语法 功能 append(content) $(A).append(B)表示将B追加到A中，
如：$("ul").append($newNode1);appendTo(content) $(A).appendTo(B)表示把A追加到B中，
如：$newNode1.appendTo("ul");prepend(content) $(A).prepend(B)表示将B前置插入到A中，
如：$("ul"). prepend($newNode1);prependTo(content) $(A).prependTo(B)表示将A前置插入到B中，
如：$newNode1.prependTo("ul");插入同辈节点
语法 功能 after(content) $(A).after(B)表示将B插入到A之后，
如：$("ul").after($newNode1);insertAfter(content) $(A). insertAfter(B)表示将A插入到B之后，如：$newNode1.insertAfter("ul");before(content) $(A). before(B)表示将B插入至A之前，如：$("ul").before($newNode1);insertBefore(content) $(A). insertBefore(B)表示将A插入到B之前，如$newNode1.insertBefore("ul"); -
替换节点
节点.replaceWith(“更换内容”)
“更换内容”.replaceAll(节点) -
复制节点
clone() -
删除节点
remove()删除整个节点
empty()清空节点内容
五、遍历节点
看菜鸟吧！！！！太多了！！！！
https://www.runoob.com/jquery/jquery-traversing.html
扫一扫
575
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
