标签：内容 com charset jquery 选择 char 通配符 3.1 select
左边的是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>
标签：内容 com charset jquery 选择 char 通配符 3.1 select
原文地址：https://www.cnblogs.com/alex-xxc/p/9738753.html
