实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Juqery常用选择器</title>
<style type="text/css">
div{
width: 500px;
height: 200px;
margin: auto;
}
div ul{
list-style-type: none;
}
div ul li{
float: left;
margin-right: 10px;
width: 30px;
height: 30px;
background-color: red;
border-radius: 50%;
text-align: center;
line-height: 30px;
}
.blue{
background-color: blue;
}
.yellow{
background-color: yellow;
}
.fontcolor{
color: red;
}
</style>
</head>
<body>
<div class="test">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li id="sex">6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<div>
<input type="text" name="">
<input type="text" name="">
<button>sfs</button>
</div>
<div>
<p>
<span>你好</span>
<span>我不好</span>
<span>大家好才是真的好</span>
</p>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//子元素选择器 选择倒数第三个
// $("ul li:nth-last-child(3)").addClass('blue')
//偶数选择器 选择为 13579
// $("ul li:nth-last-child(even)").addClass('yellow')
//表单元素选择器 input, textarea, select 和 button 元素
// $(":input").addClass('yellow') //给所有上面能选的input 添加背景色
// 常用有以下几种：
// 1. :input 匹配所有 input, textarea, select 和 button 元素
// 2. :text 匹配所有的单行文本框
// 3. :password 匹配所有密码框
// 4. :radio 匹配所有单选按钮
// 5. :checkbox 匹配所有复选框
// 6. :submit 匹配所有提交按钮(只匹配 type="submit" 的input或者button)
// 7. :image 匹配所有图像域
// 8. :reset 匹配所有重置按钮
// 9. :button 匹配所有按钮
// 10 :file 匹配所有文件域
//属性选择器
$("[id=sex]").addClass('yellow') //选择 id=sex 的元素
// 常用的以下几种方式
// 1. [attribute] 匹配包含给定属性的元素（如： 包含id、name、class等 ）
// 2. [attribute=value] 匹配给定的属性是某个特定值的元素（如： 查找name=‘text’的元素 ）
// 3. [attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。（如：查找name !=‘text’的元素 ）
// 4. [attribute^=value] 匹配给定的属性是以某些值开始的元素（如：查找 name 以btn_开头的元素 ）
// 5. [attribute$=value] 匹配给定的属性是以某些值结尾的元素（如： 查找 name 以news结束的元素 ）
// 6. [attribute*=value] 匹配给定的属性是以包含某些值的元素（如： 查找 name 包含news的元素 ）
//内容选择器
$("span:contains('你好')").addClass('fontcolor') //将匹配到的标签方字颜色改为红色
// 常见用法有以下几种
// 2. :empty 不包含子元素或者文本的空元素
// 3. :has(selector) 匹配所有包含 选择器‘selector’元素的 元素
// 如下（$('div:has(li)'), 匹配所有的包含li元素的div元素）
// 4. :parent 匹配所有的 含有子元素或者文本的元素
// 如：$("td:parent")
//层次选择器
// 即：ancestor（祖先）为form，descendant（子孙）为input
// 例如：$(".bgRed div") 选择css类为bgRed的元素中所有的<div>元素
$('.test ul').addClass('fontcolor') //将class 为 test 下面所有的ul 文本改为红色
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
