- 基本选择器
<body>
<div id="div1" class="box">div1(class=box)</div>
<div id="div2" class="box">div1(class=box)</div>
<div id="div3">div3</div>
<span class="box">span(class=box)</span>
</body>
<script src="jquery库/jquery-1.10.1.min.js"></script>
<script>
$(function (){
//1.获取id为div1的元素
$('#div1').css('background','red');
//2.获取所有的div元素
$('div').css('color','green');
//3.获取所有class是box的元素
$('.box').css('font-size','30px');
//4.获取所有的div和span的元素
$('div,span').css('background','yellow');
//5.获取所有class属性为box的div元素
$('div.box').css('color','white');
})
</script>
- 层次选择器
层次选择器: 查找子元素, 后代元素, 兄弟元素的选择器
- ancestor descendant
在给定的祖先元素下匹配所有的后代元素 - parent>child
在给定的父元素下匹配所有的子元素 - prev+next
匹配所有紧接在 prev 元素后的 next 元素 - prev~siblings
匹配 prev 元素之后的所有 siblings 元素
<body>
<ul>
<li>AAAAA</li>
<li class="box">CCCCC</li>
<li title="hello"><span>BBBBB</span></li>
<li title="hello"><span>DDDD</span></li>
<span>EEEEE</span>
</ul>
</body>
<script src="jquery库/jquery-1.10.1.min.js"></script>
<script>
$(function(){
//1. 选中ul下所有的的span
$('ul span').css('background','pink');
//2. 选中ul下所有的子元素span
$('ul>span').css('background','red');
//3. 选中class为box的下一个li
$('.box+li').css('font-size','30px');
//4. 选中ul下的class为box的元素后面的所有兄弟元素
$('ul .box~*').css('color','yellowgreen');
})
</script>
- 过滤选择器
<body>
<div id="div1" class="box">class为box的div1</div>
<div id="div2" class="box">class为box的div2</div>
<div id="div3">div3</div>
<span class="box">class为box的span</span>
<br/>
<ul>
<li>AAAAA</li>
<li title="hello">BBBBB</li>
<li class="box">CCCCC</li>
<li title="hello">DDDDDD</li>
<li title="two">BBBBB</li>
<li style="display:none">我本来是隐藏的</li>
</ul>
<script src="jquery库/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
//1. 选择第一个div
$('div:first').css('background','blue');
// 2. 选择最后一个class为box的元素
$('.box:last').css('background','skyblue');
//3. 选择所有class属性不为box的div
$('div:not(.box)').css('background','hotpink');
// 4. 选择第二个和第三个li元素
$('li:eq(1)').css('color','green');
// 5. 选择内容为BBBBB的li
$('li:eq(2)').css('color','green');
// 6. 选择隐藏的li
$('li:gt(0):first').css('font-size','30px');
//7. 选择有title属性的li元素
$('li:gt(1):first').css('font-size','30px');
//8. 选择所有属性title为hello的li元素
$('li:contains(BBBBB)').css('color','purple');
//显示显示隐藏的li
$('li:hidden').show();
//选择具有title属性的li
$('li[title]').hide();
//选择所有属性title为hellow的li
$('li[title=hello]').show();
</script>
- 表单选择器
<body>
<form>
用户名: <input type="text"/><br>
密 码: <input type="password"/><br>
爱 好:
<input type="checkbox" checked="checked"/>篮球
<input type="checkbox" checked="checked"/>足球
<input type="checkbox"/>羽毛球 <br>
性 别:
<input type="radio" name="sex" value='male' checked/>男
<input type="radio" name="sex" value='female'/>女<br>
邮 箱: <input type="text" name="email" disabled="disabled"/><br>
所在地:
<select id="bian">
<option value="1">北京</option>
<option value="2" selected="selected">天津</option>
<option value="3">河北</option>
</select><br>
<input type="submit" value="提交"/>
</form>
</body>
<script src="jquery库/jquery-1.10.1.min.js"></script>
<script>
/*
需求:
1. 选择不可用的文本输入框
2. 显示选择爱好 的个数
3. 显示选择的城市名称
*/
// $('input[disabled]').css('background','yellow');
$('input:disabled').css('background','yellow');
console.log($(':checkbox:checked').length);
console.log($(':radio:checked').length);
console.log($('select>option:selected').html());
console.log($('select>option:selected').val());
</script>
1018
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
