左边的是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>0.jQuery选择器
原文地址：https://www.cnblogs.com/alex-xxc/p/9738753.html