版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/vivian_1122/article/details/89067754
1.选择器案例
a.点击按钮,设置层中的显示内容为:这是一个层,同时设置这个层的背景颜色
(id选择器);
<input type="button" value="好听的歌" id="btn">
<div id="dv"></div>
// 点击按钮,设置层中的显示内容为:这是一个层,同时设置这个层的背景颜色
// (id选择器);
$(function() {
$('#btn').click(function() {
$('#dv').text('慢慢喜欢你'); //相当于DOM中的innerText或者是textContent
$('#dv').css('backgroundColor', 'yellow');
})
})
b.点击按钮,设置多个p标签中显示内容为:我们都是p(标签选择器)
<!-- 点击按钮,设置多个p标签中显示内容为:我们都是p(标签选择器) -->
<p>李敏镐</p>
<p>李敏镐1</p>
<p>李敏镐2</p>
<p>李敏镐3</p>
<p>李敏镐4</p>
<button id="btn">点我</button>
<script>
$(function() {
$('#btn').click(function() {
$('p').text('我们都是p标签');
})
})
</script>
2.标签+类样式选择器
<!-- 点击按钮,设置多个p标签中显示内容为:我们都是p(标签选择器) -->
<ul>
<li>44444444444444444444</li>
<li class="cls">5555555555555555555</li>
<li>666666666666666666</li>
</ul>
<button id="btn">点我</button>
<script>
$(function() {
$('#btn').click(function() {
$('li.cls').css('backgroundColor', 'yellow');
})
})
</script>
3.多条件选择器
$('span,li,div')
4.几个常见的方法
.html() 方法,设置标签中间显示其他标签及内容,类似于innerHTML
.text() 方法,设置标签中间显示的文本内容,类似于innerText
.val() 方法,设置input标签中value的值,类似于value
.css() 方法,设置元素的样式,类似于style
注意:
()中写字符串,一个参数,就是要设置的值,什么也不写,返回的是这个属性的值
.css()写的是键值对
$('#dv').html('<p>这是一个p标签</p>');
5.层次选择器
$('#dv p') //获取的是div中所有的p标签元素
$('#dv>p') //获取的是div中直接的子元素
$('#dv+p') //获取的是div后面的第一个p标签元素
$('#dv~p') //获取的是div后面所有直接的兄弟元素p标签元素
6.奇偶选择器
$('#ul li:even') //偶数选择器
$('#ul li:odd') //奇数选择器
7.索引选择器
eq(3)//获取索引3的元素
gt(3)//索引大于3的所有元素
lt(3)//索引小于3的所有元素你
精品展示案例
$(function(){
//获取左侧的列表中的li注册鼠标进入的事件
$("#left>li").mouseover(function(){
//获取当前li的索引值 .index()方法
var index = $(this).index();
$('#center'>li:eq("+index+")).siblings('li').hide();
$('#center>li:eq("+index+")).show();
//获取右侧的列表中的li注册鼠标进入的事件
$("#right>li").mouseover(function(){
var index = $(this).index()+9;
$('#center'>li:eq("+index+")).siblings('li').hide();
$('#center>li:eq("+index+")).show();
});
})