选择网页元素(只要你选择1.0.0系列jquery,就直接兼容到IE8以下) $(); 1、模拟css选择器传参
<script>
window.onload = function(){
//id = div1
$("#div1").css("backgroundColor", 'red');
//tagName = li;
$("li").css("backgroundColor", 'blue');
//class = box
$("ul .box").css("backgroundColor", 'orange');
//name = hello
$("[name=hello]").css("backgroundColor", 'green');
}
</script>
</head>
<body>
<div id = 'div1'>div</div>
<ul>
<li class = 'box'>111</li>
<li>111</li>
<li name = 'hello'>111</li>
<li>111</li>
<li class = 'box'>111</li>
</ul>
<ol>
<li class = 'box'>222</li>
<li>222</li>
<li name = 'hello'>222</li>
</ol>
</body>
2、独有表达式选择
<script>
window.onload = function(){
$("li").css("backgroundColor", 'blue');
//获取第一个
$("li:first").css("backgroundColor", 'blue');
$("li:last").css("backgroundColor", 'blue');
//所有奇数位
$("li:odd").css("backgroundColor", 'blue');
//所有偶数位
$("li:even").css("backgroundColor", 'blue');
//找到指定下标的元素
$("li:eq(3)").css("backgroundColor", 'blue');
}
</script>
</head>
<body>
<div id = 'div1'>div</div>
<ul>
<li class = 'box'>111</li>
<li>111</li>
<li name = 'hello'>111</li>
<li>111</li>
<li class = 'box'>111</li>
</ul>
<ol>
<li class = 'box'>222</li>
<li>222</li>
<li name = 'hello'>222</li>
</ol>
</body>
3、支持多种筛选方式
<script>
window.onload = function(){
//找到指定下标的元素
/$("li:eq(3)").css("backgroundColor", 'blue');
/$("li").eq(3).css("backgroundColor", 'red');
//获取ul li.box
/$("ul li.box").css("backgroundColor", 'red');
//过滤
$("ul li").filter(".box").css("backgroundColor", 'red');
}
</script>
</head>
<body>
<div id = 'div1'>div</div>
<ul>
<li class = 'box'>111</li>
<li>111</li>
<li name = 'hello'>111</li>
<li>111</li>
<li class = 'box'>111</li>
</ul>
<ol>
<li class = 'box'>222</li>
<li>222</li>
<li name = 'hello'>222</li>
</ol>
</body>