jQuery选择器及应用

jQuery选择器及应用

jQuery获取元素的方式

1. 根据id获取
   • id选择器
   • 用法：$("#id的值");
   • 获取的元素的个数：一个

$("#div")

2. 根据标签的名字获取

   • 标签选择器
   • 用法：$(“标签名字”);
   • 获取的元素的个数：多个

// <div id="btn" class="dv"></div>
$(".di")

3. 根据类样式的名字获取
   • 类选择器
   • 用法：$(".类样式的名字");
   • 获取的元素的个数：多个

// <div id="btn" class="dv"></div>
$("div")

4. 标签加类选择器

 //<li class="dv">nihao </div>
        $("li.dv")

5. 层次选择器

<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() 方法：
  • 获取属性值