专栏首页从零开始学 Web 前端从零开始学 Web 之 jQuery(二)获取和操作元素的属性

从零开始学 Web 之 jQuery(二)获取和操作元素的属性

一、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 系列的方法,如果没写参数,则查找所有的兄弟节点;如果有参数,则查找所有兄弟节点中的指定元素。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 声音功能让儿童编程更有创造性

    导读:Scratch中声音功能非常强大,除了常规的音效,你甚至可以模拟各种乐器的各个发音、设置节拍、休止……如果你愿意,甚至可以用它创作一个交响乐。我们可以引导...

    一石匠人
  • 一张图理清《梅花易数》梗概

    学《易经》的目的不一定是为了卜卦,但是了解卜卦绝对能够让你更好地了解易学。今天用一张思维导图对《梅花易数》的主要内容进行概括,希望能够给学友们提供帮助。

    一石匠人
  • 天干地支五行八卦的对应关系

    一石匠人
  • SQL中GROUP BY用法示例

    GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类...

    Awesome_Tang
  • 复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

    从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负...

    haifeiWu
  • 【系统设置】CentOS 修改机器名

    ken.io
  • 什么样的人生才是有意义的人生——没有标准的标准答案

    【导读】其实我们可以跳出这个小圈圈去更加科客观地看一下这个世界。在夜晚的时候我们仰望天空,浩瀚的宇宙中整个地球只是一粒浮尘,何况地球上一个小小的人类?在漫长的历...

    一石匠人
  • 《动物魔法学校》儿童学编程Scratch之“外观”部分

    导读:本文通过一个案例《动物魔法学校》来学习Scratch语言的“外观”部分。之后通过一系列其他功能的综合运用对作品功能进行了扩展。

    一石匠人
  • 儿童创造力教育与编程教育的碰撞——MIT雷斯尼克教授最新理论梗概

    儿童编程教育已经在我国各一线二线城市疯狂出现,颇有“烂大街”的趋势。我们不禁要问很多很多问题:

    一石匠人
  • 我不是算命先生,却对占卜有了疑惑——如何论证“占卜前提”的正确与否

    事出有因,我对《周易》感兴趣了很多年。只是觉得特别有趣,断断续续学习了一些皮毛。这几天又偶然接触到了《梅花易数》,觉得很是精彩,将五行八卦天干地支都串联了起来。...

    一石匠人

扫码关注云+社区

领取腾讯云代金券