大家好，这里是「 从零开始学 Web 系列教程 」，并在下列地址同步更新......

在这里我会从 Web 前端零基础开始，一步步学习 Web 相关的知识点，期间也会分享一些好玩的项目。现在就让我们一起进入 Web 前端学习的冒险之旅吧！

一、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中的innerText

html(); // 获取或设置标签的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 主要内容

<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.2、案例：下拉菜单

<!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>

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、案例：淘宝精品展示

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

<!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>

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

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

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

11、筛选选择器

名称 用法 描述
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 系列的方法，如果没写参数，则查找所有的兄弟节点；如果有参数，则查找所有兄弟节点中的指定元素。

从零开始学 Web 之 jQuery（二）获取和操作元素的属性的更多相关文章

  1. 从零开始学 Web 之 jQuery（五）操作元素其他属性，为元素绑定事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. 从零开始学 Web 之 jQuery（六）为元素绑定多个相同事件，解绑事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  3. 从零开始学 Web 之 jQuery（一）jQuery的概念，页面加载事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  4. 从零开始学 Web 之 jQuery（七）事件冒泡，事件参数对象，链式编程原理

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  5. 从零开始学 Web 之 jQuery（八）each，多库共存，包装集，插件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  6. 从零开始学 Web 之 jQuery（三）元素操作，链式编程，动画方法

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  7. 从零开始学 Web 之 jQuery（四）元素的创建添加与删除，自定义属性

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  8. 从零开始学 Web 之 DOM（六）为元素绑定与解绑事件

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... +-------------------------------------------------------- ...

  9. 从零开始学 Web 之 CSS3（三）渐变，background属性

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

随机推荐

  1. 手机连得上WIFI，电脑连不上的情况

    可以搜到,密码也对,但就是连不上,这时候可能就是你的设置错了. 操作步骤以下: 右击我的电脑-->管理-->设备管理器-->网络适配器-->找到你wifi对应的那个名称(如果不 ...

  2. 激活prompt

    1.下载SQLPrompt 2. 断网, 打开注册机,拷贝验证码 2. 点击activate, 拷贝代码

  3. OS history

    UNIX的诞生   1965年时,贝尔实验室(Bell Labs)加入一项由奇异电子(General Electric)和麻省理工学院(MIT)合作的计划:该计划要建立一套多使用者.多任务.多层次(m ...

  4. 网站开发，推荐使用SuperSlide 插件-Tab标签切换，图片滚动，无缝滚动，焦点图

    SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...

  5. QT-QWebEngineView-createWindow弹出页面解决

    首先要写一个继承QWebEngineView的类 头文件: #ifndef WEBBROWSER_H #define WEBBROWSER_H #include <QWebEngineView& ...

  6. MFC禁用关闭按钮

    有时候我们在写MFC程序时,需要在对话框中开启线程处理一些事情,如果在线程执行过程中点击关闭按钮,会导致程序崩溃. 这里介绍一种解决方法,禁用关闭按钮 解决方法 开启线程前禁用关闭按钮 CMenu* ...

  7. app已损坏，打不开。你应该将它移到废纸篓

    首先声明: 有可能并非你安装的软件已损坏,而是Mac系统的安全设置问题,因为这些应用都是破解或者汉化的,那么解决方法就是临时改变Mac系统安全设置. 出现这个问题的解决方法: 修改系统配置:系统偏好设 ...

  8. DRF 商城项目 - 日志处理

    logging  模块 logging 模块是最基本的日志处理模块 缺陷 但是拥有一些很致命的缺陷 要求用户主动查询, 需要登录到服务器才可以查看日志文件 自带的报错外部通知也没办法判断同类取舍, 短 ...

  9. python 使用unittest进行单元测试

    import unittest import HTMLTestRunner """ Python中有一个自带的单元测试框架是unittest模块,用它来做单元测试,它里面 ...

  10. Shell-3--变量

    用户自定义变量 环境变量 位置参数变量 预定义变量