选择器
基本选择器
<head>
<meta charset="UTF-8">
<title>jQuery操作DOM</title>
<style>
div{
100px;
height: 100px;
background-color: #666666;
text-align: center;
line-height: 100px;
margin-top:10px ;
}
</style>
</head>
<body>
<div class="box">喵</div>
<div id="box1">汪</div>
<div>嗷呜</div>
<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
$(function () {
//标签选择器
//获取的标签有三个，jquery内部进行遍历
$('div').click(function () {
alert($(this).text());
});
//类选择器
console.log($('.box'));
//id选择器
console.log($('#box1'))
//通配符选择器,通常不用，效率低，选中的是所有
console.log($(*)
})
</script>
</body>
层级选择器
<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
$(function () {
//后代选择器
$('.list li').css('list-style','none');
//子代选择器
$('.item1>ul').css('font-size','20px');
//+紧邻选择器：只选中紧邻的一个
$('.item1+.item2').css('backgroundColor','red');
//~兄弟选择器：匹配所有.tiem1之后的所有兄弟姐妹元素
$('.tiem1~li').css('backgroundColor','yellow')
});
</script>
基本过滤选择器
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
$(function () {
//基本过滤选择器
//:eq(index)，选择序号为index元素
$('ul li:eq(2)').css('background','red');
//:gt(index)，匹配所有大于给定索引值的元素
$('ul li:gt(0)').css('color','yellow');
// :lt(index) 匹配所有小于给定索引值的元素
$('ul li:lt(4)').css('color','#666');
//:even 匹配所有索引值为偶数的元素，从0开始计数
$('ul li:even').css('color','red');
//:odd 匹配所有索引值为奇数的元素，从0开始计数
$('ul li:odd').css('color','green');
//:first 获取第一个元素
$('ul li:first').text('真的吗？');
//:last 获取最后一个元素
$('ul li:last').html('我是最后一个元素？');
})
</script>
</body>
属性选择器
<body>
<input type="text">
<input type="password">
<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
$(function () {
$('input[type=text]').css('background','#666');
})
</script>
</body>
过滤选择器
<body>
<div class="box">
<ul>
<li class="item">
<span>喵喵喵1</span>
</li>
<li class="item2">
<span>喵喵喵2</span>
</li>
<li>喵喵喵3</li>
<li>喵喵喵4</li>
<li class="children">喵喵喵5</li>
</ul>
<div class="children">你大爷！</div>
</div>
<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
$(function () {
//find(selector) 括号中放的是选择器
//查找后代，包括子子孙孙
$('.box').find('ul').css('color','red');
//jquery中的链式编程：一行代码可完成的事情：拿到DOM后可接着做其他操作
$('.box').find('.item').css('color','green').click(function () {
alert($(this).text())
})
//子代children() 获取的是亲儿子
$('.box').children('.children').css('color','yellow');
//选择自己的父级parent()，亲爹
$('.children').parent('.box').css('background','#666')
//eq(index) index从0开始，
$('.box li').eq(3).css('font-size',20)
})
</script>
</body>
siblings选择器
查找所有兄弟元素，不包括自己
- 使用siblings选择器一行代码实现选项卡：
<style>
button{
100px;
height: 40px;
background: transparent;
}
</style>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
$(function () {
$('button').click(function () {
//使用siblings选择器（选中所有兄弟元素，不包括自己）一行代码实现选项卡
//点击之后设置自己的样式为红色，然后使用选中兄弟选择器，设置兄弟选择器的背景颜色为透明色（在css设置中设置了）
$(this).css('backgroundColor','red').siblings('button').css('background','transparent')
alert($(this).text())
})
})
</script>
</body>