如果一定要将
jQuery
代码写在
DOM
元素的前面,则可以使用如下语法来实现。
//
语法
1(
简写形式
)
$(function(){
/
页面
DM
加载后执行的代码
});
或
//
语法
2(
完整形式
)
$(document).ready(function(){
//
页面
DM
加载后执行的代码
});
一.jQuery 选择器
1.基本选择器
id
选择器 :$("#id") ,获取指定 id
的元素
全选选择器 :$("*") ,匹配所有元素
类选择器 :$(".class") ,Index 页面的结构文件获取同一类
class
的元素
标签选择器 :$("div") ,获取相同标签名的所有元素
并集选择器 :$("div,p,li") ,选取多个元素
交集选择器 :$("li.current") ,交集元素
![](https://i-blog.csdnimg.cn/blog_migrate/7ff5ac310e595f5a3682de5d1d0b791c.png)
2.层级选择器
子代选择器 :$("ul > li") ,$("ul > li")子代选择器获取子级元素
后代选择器 :$("ul li") ,$("ul li")后代选择器获取后代元素
3.筛选选择器
![](https://i-blog.csdnimg.cn/blog_migrate/fafb883e8387930246099fb81a9a7444.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jquery-3.5.1.min.js"></script>
</head>
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>樱桃</li>
</ul>
<div>
<li>红色</li>
<li>黄色</li>
<li>紫色</li>
<li>红色</li>
</div>
<script>
$('ul li:first').css('color','red'); //为匹配的元素设置文本的颜色
$('ul li:last').css('color','blue');
$('ul li:eq(2)').css('color','pink')
$('div li:even').css('background-color','yellow');
$('div li:odd').css('background-color','green');
</script>
</body>
</html>
4.常用的筛选方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../jquery-3.5.1.min.js"></script>
</head>
<body>
<h2 id='list1'>水果列表</h2>
<ul class='fruit'>
<li>苹果</li>
<li>香蕉</li>
<li>葡萄</li>
<li>樱桃</li>
</ul>
<div>
<h2 id='list2'>城市列表</h2>
<p>常州</p>
<p>南京</p>
<p>无锡</p>
<p>苏州</p>
</div>
<h1 id='list3'>动物乐园</h1>
<ol>
<li>猴子</li>
<li>兔子</li>
<li>大象</li>
<li>斑马</li>
</ol>
<script>
console.log($("#list2").parent())
$("ul").children("li").css('color','blue')
$('body').find('h2').css('color','red')
$('div>p').eq(2).siblings('p').css('font-style','italic')
$('ol li').eq(0).nextAll().css('color','pink')
$('ol li').eq(3).prevAll().cass('color','red')
console.log($('ul').hasClass('fruit'))
</script>
</body>
</html>
5.筛选元素
6.属性选择器
7.子元素选择器
8.表单选择器
二.jQuery 操作 DOM
1.jQuery 操作元素内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>操作元素内容</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div>
<span>我是span1的内容</span>
</div>
<div>
<span>我是span2的内容</span>
</div>
<p>我是段落1的内容</p>
<p>我是段落2的内容</p>
<input type="text" value="我是默认文本">
<input type="button" value="提交按扭">
<script>
//1.获取设置元素内容html()
console.log($("div").html());
$("div").html("<span>hello</span>");
// 2. 获取设置元素文本内容 text()
console.log($("p").text());
$("p").text("我是新的段落内容");
// 3. 获取设置表单值 val()
console.log($("input").val());
$('input').val('我是新值');
</script>
</body>
</html>
2 jQuery 操作元素样式
css()方法
css 方法设置单个样式
css 方法设置多个样式
类操作
添加类:
$(selector).addClass(className)
移除类:
$(selector).removeClass(className)
切换类:
$(selector).toggleClass(className,switch)
![](https://i-blog.csdnimg.cn/blog_migrate/60b316445e9a8c518be666a26b9305bc.png)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<style>
div{
margin: 20px;
width: 200px;
}
.red{
background-color: red;
}
.border{
border: 2px solid green;
}
</style>
<div>first div</div>
<div>second div</div>
<div>third div</div>
<script>
$("div").click(function() {
$(this).toggleClass("red border");
});
</script>
</body>
</html>
.3 jQuer操作元素属性
prop()方法
prop()
方法用来设置或获取元素的固有属性值
prop()
方法获取属性值语法。
$(selector).prop("属性名
")
prop()
方法设置属性值语法。
$(selector).prop("属性
", "
属性值
")
![](https://i-blog.csdnimg.cn/blog_migrate/eff03fa62de14ecfb000f43df80bbaa9.png)
attr()方法
attr()
用来设置或获取元素的自定义属性,自定义属性是指用户给元素添加的非固有属
性
attr()
方法获取属性值语法。
$(selector).attr("属性名
")
attr()
方法设置属性值语法。
$(selector).attr("属性
", "
属性值
")
![](https://i-blog.csdnimg.cn/blog_migrate/36130cbcc69b2b2840a0ad5cfa6b39f1.png)
data()方法
data()
方法用来在指定的元素上存取数据,数据保存在内存中,并不会修改
DOM
元素
结构;一旦页面刷新,之前存放的数据都将被移除
data()
方法获取属性值语法。
$(selector).data("数据名
")
data()
方法设置属性值语法。
$(selector).data("数据名
", "
数据值
")
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<div>This is a DIV.</div>
<script>
$("div").data("uname", "Tom");
$("div").data({
"gender": "male",
"age": 18
});
console.log($("div").data("uname"));
console.log($("div").data("gender"));
console.log($("div").data("age"));
</script>
</body>
</html>
4 jQuery 操作 DOM 节点
遍历元素
其基本语法如下。
$(selector).each(function(index, domEle) {
//
对每个元素进行操作的语句
});
each
方法遍历元素
![](https://i-blog.csdnimg.cn/blog_migrate/82c5e4326b402090ca178fe8f2398cca.png)
$.each()
方法可用于遍历任何对象,主要用于数据处理,如数组、对象。
$.each()
方法的
使用和
each()
方法类似,具体语法如下。
$.each(arr, function(index,element){
//
对每个元素进行操作
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../js/jquery-3.5.1.min.js"></script>
</head>
<body>
<script>
// 遍历数组
var arr = ["JavaScript", "MySQL", "HTML5"];
$.each(arr, function(index, element) {
console.log(index); //数组的索引
console.log(element); //数组元素
});
// 遍历对象
var stud = {
name: "Tom", gender: "male", age: 20, };
$.each(stud, function(index, element) {
console.log(index); //对象中的每个成员名
console.log(element); //对象中的每个成员的值
});
</script>
</body>
</html>
创建元素
添加元素
内部添加