越来越少人用JQuery但你就不学了吗2

1次阅读

共计 4902 个字符，预计需要花费 13 分钟才能阅读完成。

和使用 js 操作 Dom 一样，获取文档中的节点对象是很频繁的一个操作，在 jQuery 中提供了简便的方式供我们查找 | 定位元素，称为 jQuery 选择器，选择器可以说是最考验一个人 jQuery 功力的地方，通俗的讲, Selector 选择器就是 ” 一个表示特殊语意的字符串 ”。只要把选择器字符串传入上面的方法中就能够选择不同的 Dom 对象并且以 jQuery 包装集的形式返回。

jQuery 选择器按照功能主要分为 ” 选择 ” 和 ” 过滤 ”。并且是配合使用的，具体分类如下。基础选择器掌握即可 , 其他用到再查阅。

选择器	名称	举例
id 选择器	#id	$(“#testDiv”) 选择 id 为 testDiv 的元素
元素名称选择器	element	$(“div”) 选择所有 div 元素
类选择器	.class	$(“.blue”) 选择所有 class=blue 的元素
选择所有元素	*	$(“*”) 选择页面所有元素
组合选择器	selector1,selector2,selectorN	$(“#testDiv,span,.blue”) 同时选中多个选择器匹配的元素

<style type="text/css">
    .blue{background: blue;}
</style>

<body>
    <div id="mydiv1">id 选择器 1 <span>span 中的内容 </span></div>
    <div id="mydiv2" class="blue"> 元素选择器 </div>
    <span class="blue"> 样式选择器 </span>
</body>

<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    // id 选择器
    console.log("======id====");
    var idSelecter = $('#mydiv1');
    console.log(idSelecter.html());
    console.log(idSelecter.text());    
    // 元素选择器
    console.log("======name====");
    var nameSe = $('div'); // 有多个 div 元素
    nameSe.each(function(){// this 是 dom 对象，$(this) 是 jquery 对象
        console.log($(this).text());
    });
    // 类选择器，class
    console.log("======class====");
    var classSe = $('.blue'); // 有多个 class=blue 的元素
    classSe.each(function(){console.log($(this).text());
    });
    // 通用选择器：*
     console.log("====== 所有元素 ====");
     var all = $("*");
     console.log(all.length);
    // 组合选择器
    console.log("====== 组合 ====");
    var unionSe = $('span, .blue,div');
    unionSe.each(function(){console.log($(this).text());
    });
</script>

选择器	名称	举例
后代选择器	ancestor descendant	$(“#parent div”) 选择 id 为 parent 的元素的所有 div 元素
子代选择器	parent > child	$(“#parent>div”) 选择 id 为 parent 的直接 div 子元素
相邻选择器	prev + next	$(“.blue + img”) 选择 css 类为 blue 的下一个 img 元素
同辈选择器	prev ~ sibling	$(“.blue ~ img”) 选择 css 类为 blue 的之后的 img 元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 层次选择器 </title>
        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
        <style type="text/css">
            .testColor{background: green;}
            .gray{background: gray;}
        </style>
    </head>
    <body>
        <div id="parent"> 层次择器
            <div id="child" class="testColor"> 父选择器
                <div class="gray"> 子选择器 </div>
                <img src="http://www.baidu.com/img/bd_logo1.png" 
                      width="270" height="129" />
                <img src="http://www.baidu.com/img/bd_logo1.png" 
                      width="270" height="129" />
            </div>    
            <div>
                选择器 2 <div> 选择器 2 中的 div</div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        console.log("========= 后代选择器 - 选择所有后代 =====");
        var ancestorS = $('#parent div');
        ancestorS.each(function(){console.log($(this).text());
        });
        
        console.log("========= 子代选择器 - 选择儿子辈 =====");
        var child = $('#parent>div');
        child.each(function(){console.log($(this).text());
        });
        
        console.log("========= 相邻选择器 =====");
        var pre_next = $(".gray + img");
        console.log(pre_next.length);
        
        console.log("========= 同辈选择器, 其后，（弟弟）=====");
        var pre_siblings = $(".gray ~ img");
        console.log(pre_siblings.length);
    </script>
</html>

Forms	名称	举例
表单选择器	:input	查找所有的 input 元素：$(“:input”)；注意：会匹配所有的 input、textarea、select 和 button 元素。
文本框选择器	:text	查找所有文本框：$(“:text”)
密码框选择器	:password	查找所有密码框：$(“:password”)
单选按钮选择器	:radio	查找所有单选按钮：$(“:radio”)
复选框选择器	:checkbox	查找所有复选框：$(“:checkbox”)
提交按钮选择器	:submit	查找所有提交按钮：$(“:submit”)
图像域选择器	:image	查找所有图像域：$(“:image”)
重置按钮选择器	:reset	查找所有重置按钮：$(“:reset”)
按钮选择器	:button	查找所有按钮：$(“:button”)
文件域选择器	:file	查找所有文件域：$(“:file”)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title> 表单验证 </title>
        <script src="js/jquery-3.4.1.js" type="text/javascript"></script>
    </head>
    <body>
        <form id='myform' name="myform"  method="post">        
            <input type="hidden" name="uno" value="9999" disabled="disabled"/>
            姓名:<input type="text" id="uname" name="uname" /><br />
            密码:<input type="password" id="upwd" name="upwd" value="123456" /><br />
            年龄:<input type="radio" name="uage" value="0" checked="checked"/> 小屁孩
                 <input type="radio" name="uage" value="1"/> 你懂得  <br /> 
            爱好:<input type="checkbox" name="ufav" value="篮球"/> 篮球
                 <input type="checkbox" name="ufav" value="爬床"/> 爬床
                 <input type="checkbox" name="ufav" value="代码"/> 代码 <br />
            来自:<select id="ufrom" name="ufrom">
                    <option value="-1" selected="selected"> 请选择 </option>
                    <option value="0"> 北京 </option>
                    <option value="1"> 上海 </option>
                </select><br />
            简介:<textarea rows="10" cols="30" name="uintro"></textarea><br />
            头像:<input type="file"  /><br />
            <input type="image" src="http://www.baidu.com/img/bd_logo1.png" 
                   width="20" height="20"/>
            <button type="submit" onclick="return checkForm();"> 提交 </button>
            <button type="reset" > 重置 </button>        
            
        </form>
    </body>
</html>
<script type="text/javascript">
    function checkForm(){
        // 获取 所有的表单元素
        $(":input").each(function(){// console.log($(this)[0]);
            console.log($(this)[0].tagName);
        })
        console.log("------+++++++++++++++++++++--------")
        // 获取 text
        console.log("text-->" + $(":text").length); // 1
        // 获取 password
        console.log("password-->" + $(":password").length); // 1
        // 获取 radio
        console.log("radio-->" + $(":radio").length); // 2
        // 获取 checkbox
        console.log("checkbox-->" + $(":checkbox").length); // 3
        // 获取 file
        console.log("file-->" + $(":file").length); // 1
        // 获取按钮
        console.log("button-->" + $(":button").length); // 2
        // 获取 submit 按钮
        console.log("submit-->" + $(":submit").length); // 1
        // 获取 image 按钮
        console.log("image-->" + $(":image").length); // 1
        // 获取 reset 按钮
        console.log("reset-->" + $(":reset").length); // 1
        return false;        
    }
</script>