從零開始學 Web 之 jQuery（二）獲取和操做元素的屬性

時間 2019-11-17

標籤開始 web jquery 獲取元素屬性欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新......javascript

github：https://github.com/Daotin/Web

微信公衆號：Web前端之巔

博客園：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！css

1、jQuery獲取和操做元素屬性

DOM中有不少方式獲取元素，好比經過id，經過標籤名，經過類名，經過name的值，經過選擇器等方式。html

在 jQuery 中就只有一種方式：$("選擇器")前端

一、id 選擇器

語法： $("#id選擇器的值")java

$(function () {// 頁面加載
  $("#btn").click(function () {
    console.log($(this).val());
    $(this).val("改變按鈕");
    // this.value = "改變按鈕";
  });
});

注意：this 是DOM對象。jquery

this.value = "改變按鈕"; // 是DOM的寫法，沒問題。git

PS：jQuery 中使用 jQuery對象.val("內容") 來設置表單標籤的 value 屬性。github

二、標籤選擇器

語法： $("標籤名")微信

$(function () {// 頁面加載
  $("#btn").click(function () {
    $("p").text("桃花依舊笑春風");
  });
});

一、jQuery 中的 .text() ，若是括號中沒有值的話，是獲取文本內容；若是有值的話，就是設置文本內容。ide

二、 $("p") 是獲取全部的 p 標籤，而後所有設置文本內容，咱們並無循環設置，可是所有的 p 標籤的文本內容都改變了，這是 jQuery 內部自動循環了，這就是隱式迭代。

三、類選擇器

語法：$(".類型選擇器") ，注意前面的點。

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

點擊按鈕設置應用了 cls 類選擇器的標籤的邊框樣式。

PS：jQuery中使用 jQuery對象.css("屬性":"值"); 的方式設置標籤的樣式。

四、並集選擇器

語法：$("div,p,span")，中間使用逗號隔開。

若是上面的 div 有 id 選擇器 dv；span 有類選擇器 cls；

上面的寫法也能夠這樣寫： $("#dv, p, .cls")

五、交集選擇器

語法：$("div.cls")

標籤名 + 類樣式的方式。

小總結：jQuery中的一些方法

val(); // 獲取或設置表單標籤中的 value 值。
css(); // 設置元素的 css 樣式屬性值。
text(); // 獲取或設置標籤的文本內容----至關於DOM中的innerText
html(); // 獲取或設置標籤的html內容----至關於DOM中的innerHTML

六、後代（層次）選擇器

語法：$("div ul span")

選擇 div 下面全部 ul 下的全部的 span 標籤，不包括 div 下面的 span，必須在 ul 裏面。

七、子代選擇器

語法：$("div>span")

選擇 div 的直接下一代的全部span，不能隔代。

八、兄弟選擇器

語法：$("div~span")

選擇的是 div 後面的全部兄弟標籤爲 span 的標籤。

九、直接兄弟選擇器

語法：$("div+span")

選擇的是div 後面的直接兄弟標籤，若是這個直接兄弟爲 span 標籤則選中，若是爲其餘標籤則不選中。

9.一、案例：各行變色

// body 主要內容
<input type="button" value="按鈕" id="btn">
<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</div>

// jQuery 代碼
$(function () {
  $("#btn").click(function () {
    $("div li:odd").css("backgroundColor", "red");
    $("div li:even").css("backgroundColor", "yellow");
  });
});

:odd 選擇第奇數個 li 標籤。

：even 選擇第偶數個 li 標籤。

9.二、案例：下拉菜單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0 ;
            padding: 0;
        }
        li{
            list-style-type: none;
        }
        a {
            text-decoration: none;
        }
        #dv>ul>li {
            float: left;
            margin: 0 10px;
            width: 50px;
            height: 20px;
            background-color: pink;
        }

        #dv>ul>li ul {
            display: none;
        }

        #dv>ul>li li {
            background-color: #ff486b;
        }

    </style>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 鼠標進入
            $("#dv>ul>li").mouseenter(function () {
                $(this).children("ul").stop().show(200);
            });
            // 鼠標離開
            $("#dv>ul>li").mouseleave(function () {
                $(this).children("ul").stop().hide(200);
            });
        });
    </script>

</head>
<body>

<!--<input type="button" value="按鈕" id="btn">-->
<div id="dv">
    <ul>
        <li>
            <a href="javascript:void(0);">周杰倫</a>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">林俊杰</a>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">陳奕迅</a>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </li>
    </ul>
</div>

</body>
</html>

一、jQuery中鼠標進入事件是：mouseenter；鼠標離開事件是：mouseleave

二、css 中的 display:none|block 對應的隱藏和顯示在 jQuery 中可使用方法：show() 和 hide();

三、show 和 hide 方法中能夠添加參數，數字表示毫秒。表示的顯示和隱藏的動畫效果。

四、stop 方法表示在顯示和隱藏以前先清除以前的動畫效果，防止鼠標操做過快，動畫的顯示跟不上操做。

十、過濾選擇器

這類選擇器都帶有冒號。

:eq(index) // 選擇一個給定索引值的元素
:odd       // 選擇索引爲奇數的元素
:even      // 選擇索引爲偶數的元素

用法：

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

10.一、案例：淘寶精品展現

效果：鼠標進入標籤，標籤的背景顏色改變，而且切換到對應的圖片顯示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        #dv {
            margin-left: 500px;
            margin-top: 200px;
        }
        .ul1 li, .ul3 li {
            width: 50px;
            height: 30px;
            /*background-color: #24bcff;*/
            border: 1px solid red;
            text-align: center;
            margin-top: -1px;
        }

        a {
            text-decoration: none;
        }
        ul {
            float: left;
        }

        img {
            width: 200px;
            height: 93px;
        }
        .ul2 {
            width: 200px;
            height: 93px;
            overflow: hidden;
        }
        .ul2 li {
            float: left;
        }
    </style>
</head>
<body>

<div id="dv">
    <ul class="ul1">
        <li><a href="javascript:void(0);">img1</a></li>
        <li><a href="javascript:void(0);">img2</a></li>
        <li><a href="javascript:void(0);">img3</a></li>
    </ul>
    <ul class="ul2">
        <li><img src="images/img1.jpg"></li>
        <li><img src="images/img2.jpg"></li>
        <li><img src="images/img3.jpg"></li>
    </ul>
</div>


<script src="common.js"></script>
<script src="jquery-1.12.4.min.js"></script>
<script>

    $(function () {

        // 左li 鼠標進入
        $(".ul1>li").mouseenter(function () {
            $(this).css("backgroundColor", "purple");
            // console.log($(this).index());

            // 隱藏全部的圖片
            $(".ul2>li").hide();
            // 顯示丟應的圖片
            $(".ul2>li:eq("+ $(this).index() +")").show();
        });

        // 左li 鼠標離開
        $(".ul1>li").mouseleave(function () {
            $(this).css("backgroundColor", "");
        });
    });
    
</script>
</body>
</html>

一、$(this).index() 能夠獲取當前 li 的索引。

二、:eq() 選擇器：匹配一個給定索引值的元素。

三、.hide() 隱藏一個元素； .show() 顯示一個元素。

十一、篩選選擇器

名稱	用法	描述
children(選擇器)	$("ul").children("li");	（子類選擇器）至關於$("ul>li")
find(選擇器)	$("ul").find("li");	（後代選擇器）至關於$("ul li")
eq(index)	$("li").eq(2)	至關於 $("li:eq(2)");
parent()	$("#first").parent();	查找父親
next()	$("li").next("li");	查找下一個兄弟節點
prev()	$("li").prev("li");	查找上一個兄弟節點
nextAll()	$("li").nextAll("li");	查找後面全部的兄弟節點
prevAll()	$("li").prevAll("li");	查找上面全部的兄弟節點
siblings(選擇器)	$("#first").siblings("li");	查找除自身以外的全部兄弟節點