左边的是jQuery用法 右边是js用法
$("tag") == document.getElementsByTagName("tag");
$(".class") == document.getElementsByClassName("class");
$("#id") == document.getElementById("id");
$("sb").css("background","red") == sb.style.background = "red";
var bg = $("sb").css("background-color");console.log(bg);//输出rgb(255,0,0)//红色
$("sb").css({"background":"red","font-size":"14px"})
$("#id>.class>tag") $(".class tag") $(li.class) $(".f1+.fr")在css里的方法这里也可以用
过滤选择器：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>过滤选择器</title>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
//从0开始数
// :odd奇数行
//$("li:odd").css("background","red");
// :even偶数行
//$("li:even").css("background","green");
// :eq(index)指定行
//$("ul li:eq(4)").css("font-size","30px");
// :lt(index)小于6的
//$("li:lt(6)").css("font-size","30px");
// :gt(index)大于7的
//$(".ulList1 li:gt(7)").css("font-size","40px");
// :first第一个
//$(".ulList li:first").css("font-size","40px");
// :last最后一个
//$("li:last").css("font-size","40px");
});
</script>
</head>
<body>
<ul class="ulList">
<li>01男嘉宾</li>
<li>02男嘉宾</li>
<li>03男嘉宾</li>
<li>04男嘉宾</li>
<li>05男嘉宾</li>
<li>06男嘉宾</li>
<li>07男嘉宾</li>
<li>08男嘉宾</li>
<li>09男嘉宾</li>
<li>10男嘉宾</li>
</ul>
<ul class="ulList">
<li>01男嘉宾</li>
<li>02男嘉宾</li>
<li>03男嘉宾</li>
<li>04男嘉宾</li>
<li>05男嘉宾</li>
<li>06男嘉宾</li>
<li>07男嘉宾</li>
<li>08男嘉宾</li>
<li>09男嘉宾</li>
<li>10男嘉宾</li>
</ul>
</body>
</html>
属性选择器：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
// 属性选择器
/*$("a[href]").css("color","red");*/
// [attr=value]
//$("a[href='http://web.itcast.cn']").css("font-size","40px");
// [attr!=value]
//$("a[href!='http://www.baidu.com']").css("font-size","40px");
// [attr^=value]开头
//$("a[href^='http']").css("font-size","40px");
// [attr$=value]结尾
//$("a[href$='cn']").css("font-size","40px");
// [attr*=value]通配符
//$("a[href*='sina']").css("font-size","40px");
// [attr][attr] 都满足 交集
$("a[href][title*='的']").css("font-size","40px");
});
</script>
</head>
<body>
<div class="divItem">
<a href="www.baidu.com" title="谁啊？">百度</a>
<a href="http://www.taobao.com" title="我是title的内容">淘宝网</a>
<a href="http://sina.com.cn">新浪</a>
<a>我没有href</a>
</div>
</body>
</html>
筛选选择器：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="jquery-3.3.1.js"></script>
<script>
$(document).ready(function () {
// .eq()
// 类比 ":eq(index)" 选择器
//$("span").eq(1).css("font-size","40px");
// .first()
// 类比 ":first" 选择器
//$("span").first().css("font-size", "40px");
// .parent()
// 选择父亲元素
//$("#sp").parent().css("background", "gold");
//$("p").parent("#div").css("background", "gold");
// .siblings()
// 选择所有的兄弟元素
//$("#li04").siblings(".liItem").css("background", "gold");
// .find()
// 查找所有后代元素
$("div").find("#li04").css("background", "gold");
});
</script>
</head>
<body>
<div>
<span>我是第1个span</span>
<span id="sp">我是第2个span</span>
<span>我是第3个span</span>
</div>
<div id="div">
<p>Hello</p>
</div>
<div class="selected">
<p>Hello Again</p>
</div>
<div>
<ul>
<li>我是li01</li>
<li>我是li02</li>
<li>我是li03</li>
<li id="li04">我是li04</li>
<li>我是li05</li>
<li class="liItem">我是li06</li>
<li>我是li07</li>
<li>我是li08</li>
</ul>
</div>
</body>
</html>