jQuery选择器及应用
jQuery获取元素的方式
- 根据id获取
- id选择器
- ==用法:==$("#id的值");
- 获取的元素的个数:一个
" class="hljs
">$("#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()== 方法:
- 获取属性值