JQuery获取元素的N种方法

迈不过友情╰ 2022-06-14 06:41 292阅读 0赞

# **一.根据标签属性或属性值获取** #

## 1.根据属性获取元素 ##

**比如要获取页面p标签中属性有id的元素**

代码如下:

$("p[id]").css("color","red");

## 2.根据属性值获取元素 ##

特殊符号 **$ ， ！ ， \* ， @ ， ^** 的灵活使用。

--------------------

### **2.1 $** ###

**\[attribute$=value\]，匹配给定的属性是以某些值结尾的元素。下面举个例子来说明一下：**

**jq代码：**

$("input[name$='letter']")

**获取结果：**

[ <input name="newsletter" />, <input name="jobletter" /> ]

--------------------

### **2.2 !** ###

**\[attribute!=value\]，匹配所有不含有指定的属性，或者属性不等于特定值的元素，此选择器等价于:not(\[attr=value\]).例子说明一下：**

**jq代码：**

$("input[name!='newsletter']").attr("checked", true);

**结果:**

[ <input type="checkbox" name="accept" value="Evil Plans" checked="true" /> ]

--------------------

### **2.3 \*** ###

**\[attribute\*=value\]，匹配给定的属性是以包含某些值的元素。举个例子说明一下：**

**jq代码：**

$("input[name*='man']")

**结果:**

[ <input name="man-news" />, <input name="milkman" />, <input name="letterman2" /> ]

--------------------

### **2.4 @** ###

**匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。**

### **2.5 ^** ###

**\[attribute^=value\]，匹配给定的属性是以某些值开始的元素，下面举个例子来说明一下**

**jq代码：**

$("input[name^='news']")

**结果:**

[ <input name="newsletter" />, <input name="newsboy" /> ]

--------------------

### **2.6 获取指定属性且设定值中有指定字符串的元素**  ###

**jq代码：**

$("input[name$='letter'][value$='zz']").attr("checked","true");支持多条件操作

--------------------

**在jquery中，当使用**

$(”input[name='metaId']“).val()

**不能直接获得被选择的radio的值，只是获得 radio标签的第一个值，这可能jquery使用xpath语言了进行查找有关，而我们通常是想获得被选中的radio的值，有以下几种方法：**

1，使用$(”input[name='metaId']:checked”).val()获得 //name代表radio中name属性名 
    
    2，使用$(”:radio:checked”).val()获得 //限制页面只有一组radio标签

--------------------

# **二.根据标签选择器以及父子节点获取指定元素** #

# **1. 根据下标获取元素** #

**jq代码**

--------------------

## **2. 获取指定条件一致和指定范围的元素** ##

**jq代码**

--------------------

## **3.获取与条件表达式一致的元素**  ##

**jq代码**

--------------------

## **4.获取元素的上一个元素和下一个元素**  ##

**jq代码**

//获取元素的下一个元素 
    jQuery(function(){
         
        $("p").next(".yes").css("color","red"); 
    }) 
    
    //获取元素的上一个元素 
    jQuery(function(){
         
        $("p").prev(".yes").css("color","red"); 
    })

--------------------

## **5.获取元素的父元素和子元素** ##

**jq代码**

//获取元素的父元素 
    jQuery(function(){
         
        $("p").parent().css("color","red"); 
    }) 
    //获取元素的子元素 
    jQuery(function(){
         
        $("#aa").children(".yes").css("color","red"); 
    })