jQuery（一）------ 选择器

jQuery的选择器就是帮助我们快速定位到一个或多个DOM节点。

按ID查找

// 查找<div id="abc">:
var div = $('#abc');

按class查找

var a = $('.red'); // 所有节点包含`class="red"`都将返回
// 例如:
// <div class="red">...</div>
// <p class="green red">...</p>

按tag查找

按tag查找只需要写上tag名称就可以了：

var ps = $('p'); // 返回所有<p>节点
ps.length; // 数一数页面有多少个<p>节点

按属性查找

var email = $('[name=email]'); // 找出<??? name="email">
var passwordInput = $('[type=password]'); // 找出<??? type="password">
var a = $('[items="A B"]'); // 找出<??? items="A B">
var icons = $('[name^=icon]'); // 找出所有name属性值以icon开头的DOM
// 例如: name="icon-1", name="icon-2"
var names = $('[name$=with]'); // 找出所有name属性值以with结尾的DOM
// 例如: name="startswith", name="endswith"

 

层级选择器

<!-- HTML结构 -->
<div class="testing">
    <ul class="lang">
        <li class="lang-javascript">JavaScript</li>
        <li class="lang-python">Python</li>
        <li class="lang-lua">Lua</li>
    </ul>
</div>

要选出JavaScript，可以用层级选择器：

$('ul.lang li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>]
$('div.testing li.lang-javascript'); // [<li class="lang-javascript">JavaScript</li>]

子选择器

$('ul.lang>li.lang-javascript'); // 可以选出[<li class="lang-javascript">JavaScript</li>]
$('div.testing>li.lang-javascript'); // [], 无法选出，因为<div>和<li>不构成父子关系

修改Text和HTML

<!-- HTML结构 -->
<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="book">Java &amp; JavaScript</li>
</ul>

分别获取文本和HTML：

$('#test-ul li[name=book]').text(); // 'Java & JavaScript'
$('#test-ul li[name=book]').html(); // 'Java &amp; JavaScript'
'use strict';
var j1 = $('#test-ul li.js');
var j2 = $('#test-ul li[name=book]');
j1.html('<span style="color: red">JavaScript</span>');
j2.text('JavaScript & ECMAScript');

修改CSS

<!-- HTML结构 -->
<ul id="test-css">
    <li class="lang dy"><span>JavaScript</span></li>
    <li class="lang"><span>Java</span></li>
    <li class="lang dy"><span>Python</span></li>
    <li class="lang"><span>Swift</span></li>
    <li class="lang dy"><span>Scheme</span></li>
</ul>
$('#test-css li.dy>span').css('background-color', '#ffd351').css('color', 'red');

注意：jQuery对象的所有方法都返回一个jQuery对象（可能是新的也可能是自身）

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全选、全不选、反选</title>
</head>

<script src="js/jquery-3.3.1.js"></script>
<script>
    $(function(){
        $('.check .btn1').click(function(){//全选
            $('.music :checkbox').prop('checked',true);
        });

        $('.check .btn2').click(function(){//全不选
            $('.music :checkbox').prop('checked',false);
        });

        $('.check .btn3').click(function(){//反选
            $('.music :checkbox').each(function(){
                $(this).prop('checked',!$(this).prop('checked'));
            });
        });
    });
</script>

<body>
<div class="music">
    <input type="checkbox" name="music1" value="小白兔">小白兔<br>
    <input type="checkbox" name="music2" value="小燕子">小燕子<br>
    <input type="checkbox" name="music3" value="哈巴狗">哈巴狗<br>
    <input type="checkbox" name="music4" value="小青蛙">小青蛙<br>
    <input type="checkbox" name="music5" value="数鸭子">数鸭子<br><br>
</div>
<div class="check">
    <button class="btn1">全选</button>
    <button class="btn2">全不选</button>
    <button class="btn3">反选</button>
</div>
</body>
</html>

 

posted @ 2018-09-17 16:40  SYshine  阅读(103)  评论(0)    收藏  举报