愈来愈少人用JQuery，但你就不学了吗？（2）

时间 2020-07-14

原文原文链接

如须要跟多资料请点击下方图片⬇（扫码加好友→备注66）

Jquery选择器

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

jQuery 选择器按照功能主要分为"选择"和"过滤"。而且是配合使用的，具体分类以下。基础选择器掌握便可 ,其余用到再查阅。css

基础选择器

选择器	名称	举例
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")；<br />注意：会匹配全部的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>