jQuery选择器及应用
jQuery获取元素的方式
- 根据id获取
- id选择器
- 用法:$("#id的值");
- 获取的元素的个数:一个
$("#div")
-
根据标签的名字获取
- 标签选择器
- 用法:$(“标签名字”);
- 获取的元素的个数:多个
// <div id="btn" class="dv"></div>
$(".di")
- 根据类样式的名字获取
- 类选择器
- 用法:$(".类样式的名字");
- 获取的元素的个数:多个
// <div id="btn" class="dv"></div>
$("div")
- 标签加类选择器
//<li class="dv">nihao </div>
$("li.dv")
- 层次选择器
<ul id="uu">
<li></li>
<li></li>
<li></li>
</ul>
//获取所有的li标签
$(function () {
$("#uu>li")
})
6.过滤选择器
- even 偶数 选择器
- odd 奇数 选择器
$(".wrap li:odd").css("background","red"); //设置li奇数行的样式
$(".wrap li:even").css("background","blue");//设置li偶数行的样式
7.索引选择器
- lt(index):设置索引小于index的所有的标签元素
- eq(index):设置索引为index的标签元素
- gt(index):设置索引大于index的所有的标签元素
//设置ul中的索引为4的li的标签元素
$(".wrap li:eq(4)").css("background","red");
//设置ul中的索引大于4的所有li的标签元素
$(".wrap li:gt(4)").css("background","blue");
//设置ul中的索引小于4的所有li的标签元素
$(".wrap li:lt(4)").css("background","green");
jQuery中常见的几个方法
注意:以下几个方法,括号里面什么都不写表示获取,写内容表示设置
- .html() 方法:
- 设置标签中间显示其他标签及内容,类似于innerHTML
- .text() 方法:
- 设置标签中间显示的文本内容,类型于innerText
- .val() 方法:
- 设置input标签中value值,类似于value
- .css() 方法:
- 设置元素的样式,类似于style
- .attr() 方法:
- 获取属性值