【jQuery笔记Part1】11-jQuery选择器

最新推荐文章于 2021-08-30 13:47:01 发布

萌宅鹿同学

最新推荐文章于 2021-08-30 13:47:01 发布

阅读量227

点赞数

分类专栏： # jQuery笔记文章标签： jQuery JS siblings hover

本文链接：https://blog.csdn.net/weixin_43734095/article/details/100057444

版权

jQuery笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

jQuery选择器

基本选择器
层级选择器
属性选择器
筛选选择器
siblings 案例

jQuery笔记目录

基本选择器

在这里插入图片描述
初始 html 页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--基本选择器-->
    <div id="id">id选择器的内容</div>
    <div class="class">class选择器的内容1</div>
    <div class="class">class选择器的内容2</div>
    <p>元素选择器1</p>
    <p>元素选择器2</p>
</body>
</html>

运行结果：
在这里插入图片描述
基本选择器示例：

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        baseSelector(); // 基本选择器
    });
    function baseSelector() {
        $('#id').css('background-color','red');
        // $('.class').css('background-color','green') /*全部修改样式*/

        // $('.class:eq(0)').css('background-color','green'); /*只修改第一个的样式*/
        $('.class').eq(1).css('background-color','green');  /*只修改第二个的样式*/

        $('p').css('background-color','yellow'); /*修改所有p标签的样式*/
    }
</script>

运行结果：
在这里插入图片描述

层级选择器

在这里插入图片描述
初始 html 页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--层级选择器-->
<ul id="box1">
    <li>0001</li>
    <li>0002</li>
    <li>0003</li>
    <li>0004</li>
    <li>0005</li>
    <li>0006</li>
    <li>0007</li>
    <li>0008</li>
    <li>0009</li>
    <li>0010</li>
    <ul id="box2">
        <li>1111</li>
        <li>2222</li>
    </ul>
</ul>

<div>div1</div>
<div>div2</div>

<p id="x">哈哈哈</p>

</body>
</html>

运行效果：
在这里插入图片描述

层级选择器示例：

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        leverSelector(); // 层级选择器
    });

    function leverSelector() {
        // $('#box1 li').css('color','red') /*选择ul当中的所有li*/
        // $('#box1>li').css('color','red')    /*选择ul当中子元素的li*/
        // $('#box1+div').css('font-size','100px')    /*#box1后面的第一个div标签*/
        $('#box1~div').css('color','red')    /*#box1后面的所有div标签*/
    }
</script>

运行效果：
在这里插入图片描述

属性选择器

注意单引号与双引号的区别！
在这里插入图片描述
初始html:

属性选择器示例：

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    function propertySelector() {
        $('a[href*="itlike"]').text('喜欢IT！')
    }
</script>

运行效果：
在这里插入图片描述

筛选选择器

在这里插入图片描述

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(function () {
        filterSelector();  // 筛选选择器
    });
tion filterSelector() {
        // $('#box1 li:odd').css('background-color','red'); // 所有索引值为偶数的li
        // $('#box1 li:even').css('background-color','green'); // 所有索引值为奇数的li

        //$('#box1 li:lt(5)').css('background-color','purple'); /*大于5的*/
        //$('#box1 li:gt(5)').css('background-color','purple');  /*小于5的*/
        //$('#box1 li:eq(5)').css('background-color','purple');  /*等于5的*/

        // $('#box2').parent().css('background-color','red'); /*匹配元素的父级元素*/
        // $('#box2').parents().css('background-color','red'); /*相当于所有元素*/
        $('.test1').siblings().css('font-size','40px'); /*所有兄弟元素(不包括自己)*/
    }
</script>

运行效果：
在这里插入图片描述

siblings 案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery实现撩课风云榜-(界面搭建)</title>
    <style>
        * {margin: 0; padding: 0; border: 0; list-style: none}

        .sortBox {width: 320px; height: 550px;margin: 50px auto;
            border: 1px solid #ccc;font-size: 12px;
        }
        .title {color: purple; font-size: 20px; margin-left: 10px; line-height: 40px}

        .filmList li {border-top: 1px dashed #ccc;line-height: 30px;
            margin: 0 10px 5px;box-sizing: border-box;overflow: hidden;cursor: pointer;}

        .filmSortNum {display: inline-block;width: 20px;height: 20px;
            background-color: #cccccc;text-align: center;line-height: 20px;}

        .filmImg {width: 80px;height: 110px;float: left;}

        .filmContent {float: left;width: 210px;line-height: 18px;
            font-size: 12px;margin-left: 10px;}

        .sortBox li:nth-child(-n + 3) span:nth-child(1) {
            background-color: purple;
        }
        .filmList li div {display: none;}
        .filmList .current div {display: block;}
    </style>
</head>
<body>

<div class = "sortBox">
    <p class = "title">撩课风云榜</p>
    <ul class = "filmList">
        <li class="current">
            <span class="filmSortNum">1</span>
            <span>电影名称</span>
            <div>
                <img class="filmImg" src="source/filmimage/01.jpg">
                <p class="filmContent">《西虹市首富》是由闫非、彭大魔编剧兼执导，沈腾、宋芸桦、张一鸣、常远、张晨光、魏翔等主演的喜剧片，于2018年7月27日在中国大陆上映。</p>
            </div>
        </li>
        <li>
            <span class="filmSortNum">2</span>
            <span>电影名称</span>
            <div>
                <img class="filmImg" src="source/filmimage/01.jpg">
                <p class="filmContent">《西虹市首富》是由闫非、彭大魔编剧兼执导，沈腾、宋芸桦、张一鸣、常远、张晨光、魏翔等主演的喜剧片，于2018年7月27日在中国大陆上映。</p>
            </div>
        </li>
        <li>
            <span class="filmSortNum">3</span>
            <span>电影名称</span>
            <div>
                <img class="filmImg" src="source/filmimage/01.jpg">
                <p class="filmContent">《西虹市首富》是由闫非、彭大魔编剧兼执导，沈腾、宋芸桦、张一鸣、常远、张晨光、魏翔等主演的喜剧片，于2018年7月27日在中国大陆上映。</p>
            </div>
        </li>
        <li>
            <span class="filmSortNum">4</span>
            <span>电影名称</span>
            <div>
                <img class="filmImg" src="source/filmimage/01.jpg">
                <p class="filmContent">《西虹市首富》是由闫非、彭大魔编剧兼执导，沈腾、宋芸桦、张一鸣、常远、张晨光、魏翔等主演的喜剧片，于2018年7月27日在中国大陆上映。</p>
            </div>
        </li>
        <li>
            <span class="filmSortNum">5</span>
            <span>电影名称</span>
            <div>
                <img class="filmImg" src="source/filmimage/01.jpg">
                <p class="filmContent">《西虹市首富》是由闫非、彭大魔编剧兼执导，沈腾、宋芸桦、张一鸣、常远、张晨光、魏翔等主演的喜剧片，于2018年7月27日在中国大陆上映。</p>
            </div>
        </li>
        <li>
            <span class="filmSortNum">6</span>
            <span>电影名称</span>
            <div>
                <img class="filmImg" src="source/filmimage/01.jpg">
                <p class="filmContent">《西虹市首富》是由闫非、彭大魔编剧兼执导，沈腾、宋芸桦、张一鸣、常远、张晨光、魏翔等主演的喜剧片，于2018年7月27日在中国大陆上映。</p>
            </div>
        </li>
    </ul>
</div>

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('.filmList li').hover(function () { // 监听鼠标悬浮事件
            // console.log(this)
            // 鼠标放在哪里，便将此元素加上添加current类（特效类），然后通过 siblings() 将兄弟级别的元素全部去除这个类，保证每次鼠标移动时只有一个特效。
            $(this).addClass('current').siblings().removeClass('current'); 
        });
    });
</script>

</body>
</html>

运行效果：鼠标放在哪一行便产生特效。

在这里插入图片描述

萌宅鹿同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
【jQuery笔记Part1】11-jQuery选择器

10-jQuery选择器基本选择器层级选择器属性选择器筛选选择器siblings 案例基本选择器初始 html 页面：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head...
复制链接

扫一扫