jQuery选择器及应用

jQuery选择器及应用

jQuery获取元素的方式

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

" class="hljs 
  
  
  
  

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