jQuery的语法
基本语法格式:
$("元素对象").方法();
1、jQuery 符号 $
jQuery 语句以 $ 符号开始。这个符号是jQuery的别称。
在同时使用多个JavaScript函数库的HTML文档中,jQuery可能会和其他相同的字符的函数产生冲突,因此可以使用jQuery的noConflict()方法自定义jQuery的别称符号,noConflict()方法的基本语法格式:
新的别称符号 = jQuery.noConflict();
例如下面的语句自定义jQuery的别称符号jq,则之后的jQuery语句以jq开始。
jq = jQuery.noConflict();
2、元素对象
元素对象是jQuery语句中操作的对象,可以采用选择器、过滤器的方式,用于选择文档中的HTML元素对象。
$(document)表示整个HTML文档对象,$("p") 表示选择网页中的标记<p>元素对象。
3、方法
方法是对选择的对象进行的操作。
$("p").hide()
hide()方法是隐藏对象
还可以使用css方法:
$("p").css("color")
这里是获取p元素的color属性
$("p").css("color","red")
这里是把p元素的color改成red
4、document对象的ready()方法;
在元素加载前就执行jQuery代码,容易导致潜在的错误,所有的jQuery语句需要写在document对象的ready()方法中,才不会报错:
$(document).ready(
function(){
$("p").css("color","red")
}
)
实例代码:
<!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>jquery学习1</title>
<script src="../jquery-3.5.1.min.js"></script>
</head>
<body>
<p>这是一段话</p>
</body>
<script>
$(document).ready(
function () {
$("p").hide()
}
)
</script>
</html>
jQuery选择元素对象
jQuery 语句中首先要选择元素对象才能进行操作,jQuery选择元素的方式有选择器、过滤器和遍历方法。
全局选择器
全局选择器可以标记文档页面中所有的元素
$("*").方法();
标记选择器
标记选择器可以指定标记名称的全部元素
$("标记名称").方法();
id选择器
id选择器能够指定唯一id名称的单个元素
$(#"id名称").方法();
类选择器
类选择器可以选择所有具有一个类名的元素
$(."类名称").方法();
实例:
<!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>jquery学习1</title>
<script src="../jquery-3.5.1.min.js"></script>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p class="a">这是一段话</p>
<p id="b">这是一段话</p>
<p class="a">这是一段话</p>
</body>
<script>
$(document).ready(
function () {
var x = $("p").css("color");
alert("段落颜色本来是" + x);
$("*").css("border", "1px solid")
$(".a").css("font-style", "italic")
$("#b").css("font-size", "20px")
}
)
</script>
</html>
复合选择器
复合不是和前女友复合 而是用多种选择器指定一个或多个元素
1、多重选择器
多重选择器是用 , 分隔多个选择器,用于同时选择多个元素。多个选择器可以是基础选择器的任意一种或几种,只要元素对象匹配其中任意一种选择器,则元素对象被选中:
$("p ,.a , #b").hide()
示例:
<script>
$(document).ready(
function () {
$("p,.a,#b").css("border", "1px solid")
}
)
</script>
2、属性选择器
属性选择器用于选择具有某种属性或者属性值特征的所有元素对象。
$("a[href$='.com']").css("color","red")
<!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>jquery学习1</title>
<script src="../jquery-3.5.1.min.js"></script>
<style>
p {
color: red;
}
</style>
</head>
<body>
<div style="width:200px;height:100px;background-color: red;"></div>
<div style="width:150px;height:150px;background-color: red;"></div>
<a href="/">baidu</a>
</body>
<script>
$(document).ready(
function () {
$("[width]").css("width", "50")
$("[height]").css("height", "50")
$("a[href$='.com']").css("font-style", "italic")
}
)
</script>
</html>