1.css的常用选择器
1.标签选择器：
语法:E1(以文档语言对象类型作为选择器)
2.通配符选择器：
语法：*（选定文档目录树(DOM)中的所有类型的单一对象）
3.ID选择器：
语法：#sID（以文档目录(DOM)中作为对象的唯一标识符的ID作为选择）
4.类选择器：
语法：.className(在HTML中可以使用此种选择器)
5.群组选择器：
语法：E1,E2,E3(将同样的定义应用于多个选择器，可以将选择器以逗号分隔的方式合并为组)
6.包含选择器：
语法：E1,E2(选择所有被E1包含的E2。即E1.contains(E2)==true
2.jQuery选择器
| 名称 | 说明 |
| #id | 根据元素的id选择 |
| element | 根据元素的名称选择 |
| .class | 根据元素的css类选择 |
| * | 选择所有元素 |
| selector1, selector2, selectorN | 可以将几个选择器用“,”分隔开，然后再拼成一个选择器的字符串。会同时选中这几个选择器匹配的内容 |
jQuery选择器例题：
<script src="./js/jquery.min.js"></script>
<script>
$(function(){
//JQ的id选择器
var d1=$("#d1")
console.log(d1.text())
//jQ的class选择器
var c1=$(".c1")
console.log(c1.text())
//JQ的标签选择器
var p=$("P")
console.log(p.text())
//层级选择器 ul>li：指直接包含的li ul li:指所有包含的li
var li=$("ul>li")
li.css("color","red")
//属性选择器
var a=$("a[target='_blank']")//选择具有target属性且属性值是_blank的a标签
a.css("color","red")
})
</script>
</head>
<body>
<div id="d1">
id选择器
</div>
<div class="c1">
class选择器1
</div>
<div class="c1">
class选择器2
</div>
<p>标签选择器1</p>
<p>标签选择器2</p>
<p>标签选择器3</p>
<hr />
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
<li>西瓜</li>
<li>葡萄</li>
<ol>
<li>牛奶</li>
<li>面包</li>
<li>瓜子</li>
</ol>
</ul>
<a href="https://www.baidu.com" target="_blank">超链接1</a><br/>
<a href=""target="_parent">超链接2</a><br/>
<a href="">超链接3</a><br/>
<a href="">超链接4</a><br/>3.层级选择器
| 名称 | 用法 | 描述 |
| 子代选择器 | $("ul>li"); | 使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素 |
| 后代选择器 | $("ul li"); | 使用空格，代表后代选择器，获取ul下的所有li元素,包括孙子等 |
层级选择器例题
<body>
<div id="main">我是带id的div</div>
<div class="nav">我是带class的div</div>
<div>我是div标签</div>
<ul>
<li>我是ul的</li>
<li>我是ul的</li>
<li>我是ul的</li>
</ul>
<script type="text/javascript">
$(function() {
console.log($("#main"));
console.log($(".nav"));
console.log($("div"));
console.log($("ul li"));
})
</script>
</body>4.过滤选择器
| 语法 | 用法 | 描述 |
| :first | $('li:first') | 获取第一个li元素 |
| :last | $('li:last') | 获取最后一个li元素 |
| :eq(index) | $("li:eq(2)") | 获取到的li元素中，选择索引号为2的元素，索引号index从0开始 |
| :odd | $("li:odd") | 获取到的li元素中，选择索引号为奇数的元素 |
| :even | $("li:even") | 获取到的li元素中，选择索引号为偶数的元素 |
过滤选择器例题：
<script src="JQuery1/js/jquery.min.js"></script>//引入JQ类库
<script >
$(function(){
//过滤选择器
// var li=$("ul>li:gt(2)");//获取到的Li元素中索引大于2的元素
// var li=$("ul>li:lt(2)");//获取到的Li元素中索引小于2的元素
// var li=$("ul>li:odd");//获取到的Li元素中索引为奇数的元素 例：1 3 5
// var li=$("ul>li:even");//获取到的Li元素中索引为偶数的元素 例：0 2 4
// var li=$("ul>li:first");//获取到的Li元素中的第一个元素
// var li=$("ul>li:last");//获取到的Li元素中的最后一个元素
var li=$("ul>li:eq(3)")///获取到的Li元素中索引中等于3的元素
li.css("color","red")
});
</script>
</head>
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
<li>葡萄</li>
<li>西瓜</li>
<li>柚子</li>
</ul>
</body>5.表单过滤选择器
| 名称 | 用法 | 描述 |
| 可用元素选择器 | :enabled | 获得可用元素 |
| 不可用元素选择器 | :disabled | 获得不可用元素 |
| 选中选择器 | :checked | 获得单选/复选框选中的元素 |
| 选中选择器 | :selected | 获得下拉框中的元素 |
表单过滤选择器例题
<title>表单过滤选择器</title>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
//按钮的点击事件
$("#btn").click(function() {
var jq1 = $("input:enabled")
var jq2 = $("input:checked")
for (var i = 0; i < jq2.length; i++) {
var dom = jq2[i];
alert(dom.value);
}
})
})
</script>
</head>
<body>
<p id="d1">选择器</p >
<form action="#" method="post">
可用表单:<input type="text" name="name" value="" /><br />
不可用表单:<input type="text" name="id" value="编号20056" disabled="true" /><br />
单选框:<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女<br />
复选框:<input type="checkbox" name="hobby" value="唱歌" />唱歌
<input type="checkbox" name="hobby" value="rap" />rap
<input type="checkbox" name="hobby" value="篮球" />篮球<br />
下拉框:<select name="addr">
<option value="河南">河南</option>
<option value="河北">河北</option>
<option value="山东">山东</option>
<option value="山西">山西</option>
</select><br />
<button type="button" id="btn" />按钮</button>
</form>
</body>
1184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
