jQuery选择器发明的目的是准确地选取我们所需要的应用效果的元素。
jQuery元素选择器和属性选择器允许我们通过标签名属性名或内容对HTML元素进行选择。
有三种选择器:
jQuery元素选择器(标签选择器)
jQuery属性选择器(#id选择器)
jQueryCSS选择器(类选择器,.class选择器)
在jQuery中获取和设置样式被封装成了函数:
jQuery对象.csss(“样式名称”);
jQuery对象.csss(“样式名称”,“样式的属性值”);
注意:报错请检查中英文,不同浏览器解析不同
补充:在网页中id只能使用一次,class允许重复使用
举个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="标签选择器改变">
<input type="button" value="id选择器改变" id="idChoose">
<input type="button" value="类选择器改变" class="classChoose">
<div id="testDiv">没改变的</div>
</body>
<script type="text/javascript" src="../static/js/jquery-3.5.1.js"></script>
<script>
//class选择器
var $classChoose = $(".classChoose");
$classChoose.click(
function (){
var divForTest = document.getElementById("testDiv");
divForTest.innerHTML = "class选择器改变";
}
);
//id选择器改变
var $idChoose = $("#idChoose");
$idChoose.click(
function (){
var divForTest = document.getElementById("testDiv");
divForTest.innerHTML = "id选择器改变";
}
);
//标签选择器改变
var $tagChoose = $("input");
// alert( $tagChoose.length );
// alert( $tagChoose.get(0).html().toString() );
// alert( $tagChoose.get(0).text().toString() );
// alert( $tagChoose.get(0).val().toString() );
$tagChoose.get(0).click(
function (){
var divForTest = document.getElementById("testDiv");
alert(divForTest.innerHTML)
divForTest.innerHTML = "标签选择器改变";
}
);
</script>
</html>
运行结果: