1. 技术文章
  2. 02 - jQuery选择器以及样式操作

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

由 半腔热情 提交于 2019-11-29 03:32:33
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>
标签
jquery选择器
css选择器
html代码
background
meta
input
cls
jquery
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!