一、jQuery获取和操作元素属性

DOM中有很多方式获取元素，比如通过id，通过标签名，通过类名，通过name的值，通过选择器等方式。

在 jQuery 中就只有一种方式：$("选择器")

1、id 选择器

语法： $("#id选择器的值")

$(function () {// 页面加载
  $("#btn").click(function () {    console.log($(this).val());
    $(this).val("改变按钮");    // this.value = "改变按钮";
  });
});

注意：this 是DOM对象。

this.value = "改变按钮"; // 是DOM的写法，没问题。

PS：jQuery 中使用 jQuery对象.val("内容") 来设置表单标签的 value 属性。

2、标签选择器

语法： $("标签名")

$(function () {// 页面加载
  $("#btn").click(function () {
    $("p").text("桃花依旧笑春风");
  });
});

1、jQuery 中的 .text() ，如果括号中没有值的话，是获取文本内容；如果有值的话，就是设置文本内容。

2、 $("p") 是获取所有的 p 标签，然后全部设置文本内容，我们并没有循环设置，但是全部的 p 标签的文本内容都改变了，这是 jQuery 内部自动循环了，这就是隐式迭代。

3、类选择器

语法：$(".类型选择器") ，注意前面的点。

$(function () { // 页面加载
  $("#btn").click(function () {
    $(".cls").css("border", "1px solid red");
  });
});

点击按钮设置应用了 cls 类选择器的标签的边框样式。

PS：jQuery中使用 jQuery对象.css("属性":"值"); 的方式设置标签的样式。

4、并集选择器

语法：$("div,p,span")，中间使用逗号隔开。

如果上面的 div 有 id 选择器 dv；span 有类选择器 cls；

上面的写法也可以这样写： $("#dv, p, .cls")

5、交集选择器

语法：$("div.cls")

标签名 + 类样式的方式。

小总结：jQuery中的一些方法

val(); // 获取或设置表单标签中的 value 值。css(); // 设置元素的 css 样式属性值。text(); // 获取或设置标签的文本内容----相当于DOM中的innerTexthtml(); // 获取或设置标签的html内容----相当于DOM中的innerHTML

6、后代（层次）选择器

语法：$("div ul span")

选择 div 下面所有 ul 下的所有的 span 标签，不包括 div 下面的 span，必须在 ul 里面。

7、子代选择器

语法：$("div>span")

选择 div 的直接下一代的所有span，不能隔代。

8、兄弟选择器

语法：$("div~span")

选择的是 div 后面的所有兄弟标签为 span 的标签。

9、直接兄弟选择器

语法：$("div+span")

选择的是div 后面的直接兄弟标签，如果这个直接兄弟为 span 标签则选中，如果为其他标签则不选中。

9.1、案例：各行变色

// body 主要内容

    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
    
// jQuery 代码
$(function () {
  $("#btn").click(function () {
    $("div li:odd").css("backgroundColor", "red");
    $("div li:even").css("backgroundColor", "yellow");
  });
});

:odd 选择第奇数个 li 标签。

：even 选择第偶数个 li 标签。

9.2、案例：下拉菜单

html>
    
    
    

    
    <!---->

    

        

            
            

                
1
                
2
                
3
            
        
        

            
            

                
1
                
2
                
3
            
        
        

            
            

                
1
                
2
                
3
            
        
    

1、jQuery中鼠标进入事件是：mouseenter；鼠标离开事件是：mouseleave

2、css 中的 display:none|block 对应的隐藏和显示在 jQuery 中可以使用方法：show() 和 hide();

3、show 和 hide 方法中可以添加参数，数字表示毫秒。表示的显示和隐藏的动画效果。

4、stop 方法表示在显示和隐藏之前先清除之前的动画效果，防止鼠标操作过快，动画的显示跟不上操作。

10、过滤选择器

这类选择器都带有冒号。

:eq(index) // 选择一个给定索引值的元素:odd       // 选择索引为奇数的元素:even      // 选择索引为偶数的元素

用法：

$("li:eq(2)") // 匹配li元素中，索引为2的元素$("li:odd") // 匹配li元素中，索引为奇数的元素$("li:even") // 匹配li元素中，索引为偶数的元素

10.1、案例：淘宝精品展示

效果：鼠标进入标签，标签的背景颜色改变，并且切换到对应的图片显示。

html>
    
    
    

    

        

        

        

    
    

        

        

        

    

1、$(this).index() 可以获取当前 li 的索引。

2、:eq() 选择器：匹配一个给定索引值的元素。

3、.hide() 隐藏一个元素； .show() 显示一个元素。

11、筛选选择器

当 next， prev 系列的方法，如果没写参数，则查找所有的兄弟节点；如果有参数，则查找所有兄弟节点中的指定元素。

原文出处