从零开始学 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");	查找除自身以外的全部兄弟节点

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