掌握jQuery获取元素的方法

最新推荐文章于 2021-06-30 10:53:44 发布

英子的搬砖日志

最新推荐文章于 2021-06-30 10:53:44 发布

阅读量766

点赞数 1

分类专栏： JavaScript 文章标签： jquery 标签获取元素

本文链接：https://blog.csdn.net/ganyingxie123456/article/details/60788955

版权

JavaScript 专栏收录该内容

46 篇文章 10 订阅

订阅专栏

jQuery获取元素的方法

1. 利用标签名改变格式

语法： $(‘标签名’)

2.通过id获取元素

语法： $(‘#id’)

3.通过类名获取元素

语法： $(‘.类名’)

4. 一次性获取多个元素

语法： $(‘元素名，元素名，元素名，…’)

演示例1：html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script src="./jquery-1.8.3.js"></script>
    <script src="./jquery.js"></script>
</head>
<body>
    <p><span>这是一个span标签</span></p>
    <div id="div1">id号为div1</div>
    <p class="p1">通过类名获取标签改变样式</p>
</body>
</html>

js代码：

$(function(){
    $("span").css("color","red");
    $("#div1").css("color","blue");
    $(".p1").css("color","yellow");
    $("span,#div1,.p1").css("background","pink");
})

5.通过指定层次关系获取元素

语法：

   $('祖先，子孙')
   $('父，子')
   $('前+后')
   $('兄~弟')

演示例2： html代码：

<form>
    <lahel>子节点</lahel>
    <input type="text" value="背景变色">
    <fieldset>
        <label>孙节点</label>
        <input type="text" value="背景变色">
    </fieldset>
</form>
<label>在form标签外</label>
<input type="text" value="背景不变色">
<fieldset>
    <label>在form标签外</label>
    <input type="text" value="背景不变色">
</fieldset>

js代码：

$(function(){
    $("form input").css("background","pink");
    $("form > label").css("color","blue");
    $("label+input").css("color","yellow");
    $("form~label").css("border","5px solid purple");
});

6.根据元素的属性值获取元素

语法：

[attribue] , 获取拥有指定属性的元素

[attribue = value] , 获取拥有指定属性且设定值一致的元素的元素

[attribue ！= value] , 获取拥有指定属性且设定值不一致的元素的元素

[attribue ^= value] , 获取拥有指定属性且设定值的最初部分一致的元素

[attribue $= value] , 获取拥有指定属性且设定值的最后部分一致的元素

[attribue *= value] , 获取拥有指定属性且设定值包含指定字符串的元素

演示例3： html代码：

<div>div标签无id</div>
<div id="div1" class="class1">div标签有id</div>
<p id="p1" class="class1">p标签有id1</p>
<p id="p2" class="class2">p标签有id2</p>
<p id="p3" class="class2">p标签有id3</p>

js代码：

$(function(){
    $("p[id]").css("color","yellow");
    $("div[id=div1]").css("color","pink");
    $("p[id!=p1]").css("color","blue");
    $("p[id^=p3]").css("color","green");
    $("p[id$=1]").css("color","purple");
    $("p[id^=p][class=class1]").css("color","red");
});

7.通过过滤器获取元素

过滤器：

：first , 获取第一个元素

：last ， 获取最后一个元素

：not(filter) , 获取除了了指定元素外的元素

：even ， 获取偶数序号的元素 

：odd ， 获取奇数序号的元素 

：eq（index），获取指定序号的元素

：gt（index），获取指定序号后的元素

：lt（index），获取指定序号前的元素

：header ，获取标题元素

：animated ， 获取动画元素

：contains（text），获取包含字符串的元素

：empty ，获取空元素

：has（selector），获取拥有子孙的元素

：parent ， 获取非空元素

演示例4：html代码：

<ul>
    <li>这是第0个li标签</li>
    <li><h3><span>第1个li标签</span>改变</h3></li>
    <li>第2个li标签</li>
    <li><span>第3个li标签</span></li>
    <li>第4个li标签</li>
</ul>

js代码：

$("li:first").css("color","red");
$("li:last").css("color","pink");
$("li:not(:first)").css("color","green");
$("li:even").css("background","yellow");
$("li:odd").css("background","purple");

8.获取表单元素

方法：

：input ， 获取所有表单元素

：text ， 获取text属性的元素

：password ， 获取password属性的元素

：radio ， 获取单选按钮元素

：checkbox ， 获取多选按钮元素

：submit ， 获取submit属性的元素

：image ， 获取image属性的元素

：button ， 获取button属性的元素或button标签

：file ， 获取file属性的元素

提示：使用 “ ：hidde n” 时可以获取HTML/xHTML文档中的所有隐藏元素，要获取表单中hidden属性的元素，应使用 “ input:hidden ” 。

9.通过过滤器获取表单元素

过滤器：

：enahled ， 获取可输入状态的元素

：disabled , 获取不可输入状态的元素

：checked ， 获取选中状态的元素

：selected ， 获取下拉框中选中状态的元素

演示例5：html代码：

<form action="#">
    <ul>
    <li>
        <label>订单号</label>
        <input type="text" name="" disabled="disabled"></li>
    <li>
        <label>订单所有者</label>
        <input type="text"></li>
    <li>
        <input type="checkbox" name="category" value="红"><label>红</label>
        <input type="checkbox" name="category" value="黄"><label>黄</label>
        <input type="checkbox" name="category" value="蓝"><label>蓝</label>
        <input type="checkbox" name="category" value="紫"><label>紫</label>
        <input type="checkbox" name="category" value="白"><label>白</label>
    </li>
    <li>
        <select multiple="multiple">
            <option>选项1</option>
            <option>选项2</option>
            <option>选项3</option>
            <option>选项4</option>
        </select>
    </li>
    </ul>
    </form>
    <div id="msg">
        <p id="category"></p>
        <p id="option"></p>
    </div>

js代码：

$(function(){
    $("input:text:enabled").val("能输入");
    $("input:text:disabled").val("不能输入");
    (function checkboxClick(){
        $(":checkbox").unbind("check",checkboxClick);
        var val='';
        $(":checkbox:checked").each(function(){
            val += $(this).val()+',';
        });
        $("#category").html("选择的数据是："+val);
        $(":checkbox").click(checkboxClick);
    })();
    $("select").change(function(){
        var txt = '';
        $("select option:selected").each(function () {
            txt += $(this).each() + ',';
        });
        $("#option").html("选择的选项是：" + txt);
    }).trigger("change");
});

10.从集合元素中通过指定序号获取元素

语法： eq（index）

11.获取指定条件一致的元素

语法：filter（expr）

12.获取指定范围的元素

语法：slice（start,[end]）

13.获取与表达式一致的元素

语法：is（expr）

14.获取元素的下一个元素

语法：next（[expr]）

15.获取元素的前一个元素

语法：prex([expr])

16.获取元素的父元素

语法：parent([expr])

17.获取元素的子元素

语法：children([expr])

演示例6: html+css代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jquery</title>
    <script src="./jquery-1.8.3.js"></script>
    <script src="./jquery.js"></script>
    <style>
    p{
        width: 50px;
        border:1px solid #000000;
        margin: 0;
        padding: 0;
    }
    </style>
</head>
<body>
    <div id="contain">
        <p>0</p>
        <p class="center">1</p>
        <p class="center">2</p>
        <p class="center">3</p>
        <p>4</p>
        <p >5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        <p class="blue">9</p>
        <p>10</p>
        <p class="yellow">11</p>
        <p>12</p>
        <p>13</p>
        <p class="yes">14</p>
        <p>15</p>
        <p class="yes">16</p>
        <p>17</p>
    </div>
</body>
</html>

js代码：

$(function(){
    $("p").eq(0).css("background","red");
    $("p").css("color","blue").filter(".center").css("background","yellow");
    $("p").slice(4,7).css("background","green");
    $("p").each(function(){
        switch(true){
        case $(this).is(".blue"):$(this).css("background","pink");
        case $(this).is(".yellow"):$(this).css("background","purple");
        default:break;
        }
    });
    $("p").next('.yes').css('background','grey');
    $("p").prev('.yes').css('background','lightblue');
    $("p").parent().css('background','grey');
    $("#contain").children(".yes").css('color','red');
});