02 - jQuery选择器以及样式操作

jQuery中的选择器

在说jQuery中的选择器之前 咱们先回忆一下DOM中选择元素的方法

// id
document.getElementById('id');
// 根据标签 多个
document.getElementsByTagName('tag');
// name  多个
document.getElementsByTagName('name');
// className 多个
document.getElementsByClassName('className'); 

// jQuery中获取元素的方法：通过各种选择器来获取元素
// id 选择器
$('id');
// 标签选择器
$('div');
// 类选择器
$('.className');
// * 表示所有
$('*');

是不是感觉和CSS选择元素语法一样呢？对的基本就是这样子的！！！
那么下面咱们先看一些案例吧；

id选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #dv {
            height: 200px;
            width: 300px;
            background-color: pink;
        }
    </style>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        // 点击按钮，设置层中显示内容为：这是一个层，同时设置这个层的背景颜色（id选择器）

        $(function () {
            // 获取按钮，调用点击事件的方法
            $('#btn').click(function () {
                // .text() 相当于DOM中的innerText或者textContent
                $('#dv').text('这是一个层');
                $('#dv').css('backgroundColor', 'yellow');
            });
        });
    </script>
</head>
<body>
    <input type="button" value="展示效果" id="btn">
    <div id="dv"></div>
</body>
</html>
标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        // 点击按钮，设置多个p标签中的内容显示为：我们都是p(标签选择器)
        // 页面加载事件
        $(function () {
            $('#btn').click(function () {
                $('p').text('我们都是p');
            });
        });
    </script>
</head>
<body>
    <input type="button" value="设置内容" id="btn">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
</body>
</html>
类选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .cls {
            background-color: hotpink;
        }
    </style>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        // 点击按钮，设置页面上应用cls类样式的元素背景颜色（类选择器）
        $(function () {
            $('#btn').click(function () {
                $('.cls').css('backgroundColor', 'red');
            });
        });
    </script>
</head>
<body>
    <input type="button" value="显示效果" id="btn">
    <br />
    <span class="cls">这是一个span</span>
    <p class="cls">这是一个p</p>
</body>
</html>
标签+类选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .cls {
            background-color: pink;
        }
    </style>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        // 点击按钮设置页面上应用cls类样式的li标签背景颜色改变
        $(function () {
            $('#btn').click(function () {
                $('li.cls').css('backgroundColor', 'red');
            });
        });
    </script>
</head>
<body>
    <input type="button" value="选择样式" id="btn">
    <ul>
        <li class="cls">1</li>
        <li>2</li>
        <li>3</li>
        <li class="cls">4</li>
        <li class="cls">5</li>
    </ul>
</body>
</html>
多条件选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        li, span, div {
            display: block;
            height: 100px;
            width: 100px;
            background-color: pink;
            margin-top: 10px;
        }
    </style>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        $(function () {
           $('#btn').click(function () {
               $('span,li,div').css('backgroundColor', 'yellow');
           });
        });
    </script>
</head>
<body>
    <input type="button" value="设置颜色" id="btn">
    <span></span>
    <li></li>
    <div></div>
</body>
</html>
层次选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
       div li:last-child {
           background-color: antiquewhite;
       }

    </style>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        $(function () {
            // 获取div中的相关元素
            $('#btn').click(function () {
                // 获取div中的所有p标签
                //$('div p').css('backgroundColor', 'red');

                // 获取div的子p标签
                // $('div > p').css('backgroundColor', 'red');

                $('div li:nth-child(1)').css('backgroundColor', 'yellow');
            });
        });
    </script>
</head>
<body>
    <input type="button" value="显示效果" id="btn">
    <div>
        <p>这是div中的第一个p</p>
        <ul>
            <li>这是第一个li</li>
            <li><p>这是第二个li的p</p></li>
            <li>这是第三个li</li>
        </ul>
        <p>这是div中的第二个p</p>
    </div>
    <p>这是div后面的第一个p</p>
    <p>这是div后面的第二个p</p>
    <p>这是div后面的第三个p</p>
</body>
</html>
索引选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            list-style-type: none;
            width: 200px;
            position: absolute;
            left: 500px;
        }
        ul li{
            margin-top: 10px;
            cursor: pointer;
            text-align: center;
            font-size: 20px;
        }
    </style>
    <script src="../jquery-1.12.2."></script>
    <script>
        $(function () {
            $('#btn').click(function () {
                // 获取ul中索引为4的 li元素
                $('#uu > li:eq(4)').css('backgroundColor', 'red');
                // 获取ul中索引大于4的所有li元素
                $('#uu > li:gt(4)').css('backgroundColor', 'yellow');
                // 获取ul中索引小于4的所有li元素
                $('#uu > li:lt(4)').css('backgroundColor', 'green');
            });
        });
    </script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<ul
</body>
</html>
奇偶选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul{
            list-style-type: none;
            width: 200px;
            position: absolute;
            left: 500px;
        }
        ul li{
            margin-top: 10px;
            cursor: pointer;
            text-align: center;
            font-size: 20px;
        }
    </style>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $('#btn').click(function () {
                // :even 偶数选择器  下标从零开始 页面表现为奇数
                $('#uu > li:even').css('backgroundColor', 'yellow');
                // :odd 奇数选择器
                $('#uu > li:odd').css('backgroundColor', 'red');
            });
        });
    </script>
</head>
<body>
<input type="button" value="隔行变色" id="btn"/>
    <ul id="uu">
        <li>乔峰:降龙十八摸</li>
        <li>张无忌:乾坤大摸姨</li>
        <li>段誉:鳞波微步</li>
        <li>丁棚:天外流星贱</li>
        <li>张三丰:太极掌</li>
        <li>段飞:极乐神功</li>
        <li>云飞扬:天馋功</li>
        <li>杨过:黯然销魂掌</li>
        <li>那谁谁:如来神掌</li>
        <li>孟星魂:流星蝴蝶剑</li>
        <li>楠哥:少女萌萌拳</li>
    </ul>
</body>
</html>
jQuery中一些常见的方法
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $('#btn').click(function () {
                // .text() 没有内容表示获取文本
                console.log($('p').text());
                // .text() 写内容表示设置文本  相当于DOM中的innerText
                console.log($('p').text('content'));

                // .html()  点击按钮新增元素  如果是给body增加 会覆盖之前添加的元素
                $('#div').html('<p>我是新增的内容</p>');
                // .html() 获取整个div文本  相当于DOM中的innerHTML
                console.log($('#div').html());

                // 点击按钮设置文本框中的值  .val('content') 设置元素的value属性
                $('#txt').val('hello world');
                // .val() 没有内容是获取元素的value值  相当于DOM的value
                console.log($('#txt').val());   

                // .css() 如果只是设置一个样式，就传两个参数
                $('#div').css('backgroundColor', 'red');
                // .css() 多个对象 就以键值对的方式 传入
                $('#div').css({'width': '200px', 'height': '100px', 'backgroundColor': 'yellow'});

                // .index()获取当前元素的索引
                $(this).index();

                // .find() 针对当前元素找里面的一些其他元素
                $('#div').find();

                // .siblings() 获取当前元素的所有兄弟元素
                $(this).siblings('input');
            });
        });
    </script>
</head>
<body>
    <input type="button" value="获取内容" id="btn">
    <input type="text" value="这是文本框" id="txt">
    <p>我是一个p</p>
    <div id="div">
        <p></p>
    </div>
</body>
</html>
好友切换面板案例
<!DOCTYPE html>
<html>
<head lang="en">
    <title></title>
    <meta charset="UTF-8">
    <style type="text/css">

        #u1 li {
            margin-bottom: 10px;
            background-color: Orange;
            font-size: 20px;
            font-weight: bolder;
            cursor: pointer;
        }
        #u1 li ul {
            list-style-type: none;
            margin: 0;
            padding: 0;

        }

        #u1 li ul li {
            background-color: pink;
        }
    </style>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $('#u1 > li > ul > li').hide();
            $('#u1 > li').click(function () {
                // 找到id为ul的直接的子元素li,注册鼠标点击的事件
                $(this).siblings('li').children('ul').find('li').hide(500);
                // 当前的li中的ul中的所有的li显示
                $(this).children('ul').find('li').show(500);
            });
        });
    </script>
</head>
<body>

<div style=" width:200px; height:500px; border:1px solid red;">
    <ul id="u1" style=" list-style-type:none; margin:0; padding:0; text-align:center;">
        <li>
            幼儿园同学
            <ul>
                <li>鼻涕虫</li>
                <li>爱哭鬼</li>
                <li>张大胆</li>
            </ul>
        </li>
        <li>小学同学
            <ul>
                <li>张三丰</li>
                <li>张无忌</li>
                <li>乔布斯</li>
            </ul>
        </li>
        <li>
            初中同学
            <ul>
                <li>盖茨</li>
                <li>川普</li>
                <li>奥巴马</li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

jQuery样式操作

操作类样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            height: 100px;
            width: 100px;
            background-color: rebeccapurple;
        }
        .cls {
            background-color: green;
        }
        .cls2 {
            border: 3px solid yellow;
        }
    </style>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $('#btn').click(function () {
                // 添加单个类样式
                $('#div').addClass('cls');

                // 添加多个类样式
                $('#div').addClass('cls cls2');
                $('#div').addClass('cls').addClass('cls2');

                // 是否有类名  true/false
                console.log($('#div').hasClass('cls2'));

                // 删除类样式
                $('#div').removeClass('cls'); // 指定类样式
                $('#div').removeClass(); // 所有类样式
            });
        });
    </script>
</head>
<body>
    <input type="button" value="显示效果" id="btn">
    <div id="div"></div>d
</body>
</html>
网页开关灯案例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .cls {
            background-color: black;
        }
    </style>
    <script src="../jquery-1.12.2.js"></script>
    <script>
        $(function () {
            $('#btn').click(function () {
                if ($(this).val() == '关灯') {
                    $('body').addClass('cls');
                    $(this).val('开灯');
                } else {
                    $('body').removeClass();
                    $(this).val('关灯');
                }
            });

            // 简单的代码
            $('#btn').click(function () {
                // .toggleClass() 切换类样式
                $('body').toggleClass('cls');
                $(this).val() == '关灯' ? $(this).val('开灯') : $(this).val('关灯');
            });
        });
    </script>
</head>
<body>
    <input type="button" value="关灯" id="btn">
</body>
</html>

原文地址：https://www.cnblogs.com/article-record/p/11444194.html

时间： 2024-12-29 07:05:35

02 - jQuery选择器以及样式操作的相关文章

jQuery 选择器和dom操作

JQuery选择器 1.基本选择器 基本选择器是JQuery中最常用的选择器,也是最简单的选择器,它通过元素id.class 和标签名来查找DOM元素.这个非常重要,下面的内容都是以此为基础,逐级提高的. 1).“$(“#id”)”,获取id指定的元素,id是全局唯一的,所以它只有一个成员. 2).“$(“.class”)”,获取class指定的元素,不同的元素可以具有相同的class属性,所以它可能具有多个成员. 3).“$(“element”)”,获取element(元素名,比如div.ta

jQuery选择器和DOM操作——《锋利的jQuery》（第2版）读书笔记1

第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染顶级变量: 出色的浏览器兼容性: 链式操作方式: 隐式迭代: 行为层与结构层的分离: 丰富的插件支持: 完善的文档: 开源. jQuery对象就是通过jQuery包装DOM对象后产生的对象. 在jQuery对象中无法使用DOM对象的任何方法.同样,DOM对象也不能使用jQuery里的方法. jQuery对象和DOM对象的相互转换        如果

jQuery类和样式操作

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="d1">divdivdiividiviiddv</div> <input type="button" id="add_class

【jQuery基础学习】01 jQuery选择器

关于CSS选择器 jQuery选择器涉及到CSS,CSS技术使得网页的结构与表现样式完全分离. 同样CSS也需要找到某个网页的结构才能改变其样式,这就是CSS选择器. 常用的CSS选择器如下: 标签选择器 以文档元素作为选择符 a{ text-decoration:none; } ID选择器 以文档元素的唯一标识符ID作为选择符 #myNameDiv{ font-size:14px; width:120px; } 类选择器 以文档元素的class作为选择符 div.note{ font-size

dom core,html dom,css dom,jquery 中的dom操作

前端开发中为达到某种目的,往往有很多方法:dom core,html dom,jquery; dom core/jquery主要通过函数调用的方式(getAttribute("属性名")/attr("属性名"))获取属性值, html dom一般利用属性的形式(element.属性名)获取对应属性值,形式相对简洁.此外,针对于css相关的对象,还有css dom 前端开发中的节点有三种:元素节点:文本节点和属性节点 js一般对于dom core和html dom都支

jQuery基础（样式篇，DOM对象，选择器，属性样式）

1. $(document).ready 的作用是等页面的文档(document)中的节点都加载完毕后,再执行后续的代码,因为我们在执行代码的时候,可能会依赖页面的某一个元素,我们要确保这个元素真正的的被加载完毕后才能正确的使用. $(document).ready(function() {   内容  }); 1.jQuery对象与DOM对象   jQuery对象与DOM对象是不一样的 普通处理,通过标准JavaScript处理: var p = document.getElementById

JQuery选择器和DOM的操作-入门学习

嘿嘿,今天学习了JQuery,前面的一周都在学习javascript,今天学习了JQuery,虽然javascript的类库有很多个,例如:Prototype,Dojo,JQuery等,javascript库都有着各自的优缺点,同时也有各自的支持者和反对者,但是从JQuery诞生那天起,JQuery已经从其他javascript库中脱颖而出,称为web开发人员的最佳选择,所以这也是我学习JQuery的原因.好啦,总结一下今天学习的JQuery的选择器和对DOM的初步操作. 一.JavaScrip

JavaScript之jQuery-3 jQuery操作DOM(查询、样式操作、遍历节点、创建插入删除、替换、复制)

一.jQuery操作DOM - 查询 html操作 - html(): 读取或修改节点的HTML内容,类似于JavaScript中的innerHTML属性 文本操作 - text(): 读取或修改节点的文本内容,类似于JavaScript中的textContent属性 值操作 - val(): 读取或修改节点的value属性值,类似于 JavaScript 中的value值 属性操作 - attr(): 读取或者修改节点的属性 - removeAttr(): 删除节点的属性 二.jQuery操作

js day43 Jquery入门(回顾js,Jquery选择器,dom操作)

1     Javascript回顾 问题:Javascript能做什么? 1. 获取操作dom <style> .aa{ background:red} .bb{ background:blue} </style> <body> <div id="dv" title="提示信息" class="aa">AAAAAAAAA</div> <button onclick="f