zoukankan html css js c++ java

jQuery选择器

（重新捡起jQuery）

基本选择器

基本选择器语法
选择器	功能描述	返回值
#id	根据给定的ID匹配一个元素	单个元素
element	根据给定的元素名称匹配所有元素	元素集合
.class	根据给定的类匹配元素	元素集合
*	匹配所有元素	元素集合
selector1，selector2	将每一个选择器匹配到的元素合并后一起返回	元素集合

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jQuery基本选择器</title>
    <meta charset="utf-8" />
    <script src="~/Scripts/jquery-3.1.1.min.js"></script>
    <style type="text/css">
        body {
            font-size:12px;text-align:center
        }
        .clsFrame {
            width:65px;height:100px
        }
        .clsFrame div, span {
            display:none;float:left;width:65px;height:65px;border:1px solid #00ffff;margin:8px
        }
    </style>
    <script type="text/javascript">
        //id选择器
        $(function() {
            $("#divOne").css("display", "block");
        })
        //元素名匹配元素
        $(function () {
            $("div span").css("display", "block");
        })
        //类匹配元素
        $(function () {
            $(".clsFrame .clsOne").css("display", "block");
        })
        //匹配所有元素
        $(function () {
            $("*").css("display", "block");
        })
        //合并匹配的元素
        $(function () {
            $("#divOne,span").css("display", "block");
        })
    </script>
</head>
<body>
    <div class="clsFrame">
        <div id="divOne">ID</div>
        <div class="clsOne">CLASS</div>
        <span>Span</span>
    </div>
</body>
</html>

例子：

层次选择器

层次选择器语法
选择器	功能描述	返回值
ancestor descendant	根据祖先元素匹配所有的后代元素	元素集合
parent>child	根据父元素匹配所有的子元素	元素集合
prev+next	匹配所有紧接在prev元素后的相邻元素	元素集合
prev~siblings	匹配prev元素之后的所有兄弟元素	元素集合

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jQuery层次选择器</title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-3.1.1.min.js"></script>
    <style type="text/css">
        body {
            font-size:12px;text-align:center
        }
        div,span {
            float:left;border:1px solid #ff0000;margin:8px;display:none
        }
        .clsFraA{
            width:65px;height:65px
        }
        .clsFraP {
            width:45px;height:45px;background-color:#ffd800
        }
        .clsFraC {
            width:25px;height:25px;background-color:#0026ff
        }
    </style>
    <script type="text/javascript">
        //匹配后代元素
        $(function () {
            $("#divMid").css("display", "block");
            $("div span").css("display", "block");
        })
        //匹配子元素
        $(function () {
            $("#divMid").css("display", "block");
            $("div>span").css("display", "block");
        })
        //匹配后面元素
        $(function () {
            $("#divMid+div").css("display", "block");
            $("#divMid").next().css("display", "block");
        })
        //匹配所有后面的元素
        $(function () {
            $("#divMid~div").css("display", "block");
            $("#divMid").nextAll().css("display", "block");
        })
    </script>
</head>
<body>
    <div class="clsFraA">Left</div>
    <div class="clsFraA" id="divMid">
        <span class="clsFraP" id="Span1">
            <span class="clsFraC" id="Span2"></span>
        </span>
    </div>
    <div class="clsFraA">Right_1</div>
    <div class="clsFraA">Right_2</div>
</body>
</html>

例子：

简单过滤选择器
选择器	功能描述	返回值
first() 或 :first	获取第一个元素	单个元素
last() 或 :last	获取最后一个元素	单个元素
:not(selector)	获取除给定选择器外的所有元素	元素集合
:even	获取所有索引值为偶数的元素，索引号从0开始	元素集合
:odd	获取所有索引值为奇数的元素。索引号从0开始	元素集合
:eq(index)	获取指定索引值的元素，索引号从0开始	单个元素
:gt(index)	获取所有大于给定索引值的元素，索引号从0开始	元素集合
:lt(index)	获取所有小于给定索引值的元素，索引号从0开始	元素集合
:header	获取所有标题类型的元素，如h1，h2......	元素集合
:animated	获取正在执行动画效果的元素	元素集合

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>jQuery简单过滤选择器</title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-3.1.1.min.js"></script>
    <style type="text/css">
        body {
            font-size:12px;text-align:center;
        }
        div {
            width:241px;height:83px;border:1px,solid,#ff0000;
        }
        h1 {
            font-size:13px;
        }
        ul {
            list-style-type:none;padding:0px;
        }
        .DefClass, .NotClass {
            width:60px;height:23px;
            line-height:23px;float:left;
            border-top:1px solid #ffd800;
            border-bottom:1px solid #4cff00;
        }
        .GetFocus {
            width:58px;border:1px solid #808080;
            background-color:#ff6a00;
        }
        #spnMove {
            width:238px;height:30px;line-height:30px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //增加第一个元素类别
            $("li").first().addClass("GetFocus");
            $("li:first").addClass("GetFocus");
            //增加最后一个元素类别
            $("li:last").addClass("GetFocus");
            $("li").last().addClass("GetFocus");
            //增加除去所有给定选择器匹配的元素类别
            $("li:not(.NotClass)").addClass("GetFocus");
            //增加所有索引值为偶数的元素类别
            $("li:even").addClass("GetFocus");
            //增加所有索引值为基数的元素类别
            $("li:odd").addClass("GetFocus");
            //增加一个给定索引值的元素类别
            $("li:eq(6)").addClass("GetFocus");
            //增加所有大于给定索引值的元素类别
            $("li:gt(4)").addClass("GetFocus");
            //增加所有小于给定索引值的元素类别
            $("li:lt(4)").addClass("GetFocus");
            //增加标题类元素类别
            $("div h1").css("width", "248").css("height","30");
            $(":header").addClass("GetFocus");
            //增加动画效果元素类别
            animateIt();
            $("#spnMove:animated").addClass("GetFocus");
        })
        function animateIt() {
            $("#spnMove").slideToggle("slow", animateIt);
        }
    </script>
</head>
<body>
    <div>
        <h1>基本过滤选择器</h1>
        <ul>
            <li class="DefClass">item 0</li>
            <li class="DefClass">item 1</li>
            <li class="DefClass">item 2</li>
            <li class="DefClass">item 3</li>
            <li class="NotClass">item 4</li>
            <li class="DefClass">item 5</li>
            <li class="DefClass">item 6</li>
            <li class="DefClass">item 7</li>
        </ul>
        <span id="spnMove">Span Move</span>
    </div>
</body>
</html>

例子：

内容过滤选择器
选择器	功能描述	返回值
:contains(text)	获取包含给定文本的元素	元素集合
:empty	获取所有不包含元素或文本的空元素	元素集合
:has(selector)	获取含有选择器所匹配的元素	元素集合
:parent	获取含有子元素或者文本的元素	元素集合

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>使用jQuery内容过滤选择器</title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-3.1.1.min.js"></script>
    <style type="text/css">
        body {
            font-size:12px;text-align:center;
        }
        div {
            float:left;border:1px solid #ff0000;margin:8px;
            width:56px;height:56px;display:none;
        }
        span {
            float:left;border:1px solid #ff0000;margin:8px;
            width:30px;height:30px;background-color:#b6ff00;
        }
    </style>
    <script type="text/javascript">
        $(function() {
            //显示包含给定文本的元素
            $("div:contains('K')").css("display", "block");
            //显示所有空元素
            $("div:empty").css("display", "block");
            //显示含有选择器所匹配的元素
            $("div:has(span)").css("display", "block");
            //显示含有子元素或者文本的元素
            $("div:parent").css("display", "block");
        })
    </script>
</head>
<body>
    <div>AKEKE</div>
    <div><span></span></div>
    <div>Akeke</div>
    <div></div>
</body>
</html>

例子：

可见性选择器
选择器	功能描述	返回值
:hidden	获取所有不可见元素，或者type为hidden的元素	元素集合
:visible	获取所有可见元素	元素集合

这个不多加练习了

属性过滤选择器语法
选择器	功能描述	返回值
[attribute]	获取包含给定属性的元素	元素集合
[attribute=value]	获取等于给定的属性是某个特定值的元素	元素集合
[attribute!=value]	获取不等于给定的属性是某个特定值的元素	元素集合
[attribute^=value]	获取给定的属性是以某些值开头的元素	元素集合
[attribute$=value]	获取给定的属性是以某些值结尾的元素	元素集合
[attribute*=value]	获取给定的属性是为包含某些值的元素	元素集合
[selector1][selector2][selectorN]	获取满足多个条件的复合属性的元素	元素集合

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>属性过滤选择器</title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-3.1.1.min.js"></script>
    <style type="text/css">
        body {
            font-size:12px;text-align:center;
        }
        div {
            float:left;border:1px solid #000000;margin:8px;
            width:75px;height:75px;display:none;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //显示所有含有ID属性的元素
            $("div[id]").show(1000);
            //显示title属性值为A的元素
            $("div[title=A]").show(1000);
            //显示title属性值不是A的元素
            $("div[title!=A]").show(2000);
            //显示所有属性title的值以A开头的元素
            $("div[title^=A]").show(1000);
            //显示所有属性title的值以C结尾的元素
            $("div[title$=C]").show(1000);
            //显示所有属性title值中含有B的元素，且显示属性id值是divAB的元素
            $("div[title*=B][id=divAB]").show();
        })
    </script>
</head>
<body>
    <div id="divID">ID</div>
    <div title="A">Title A</div>
    <div id="divAB" title="AB">ID<br />Title AB</div>
    <div title="ABC">Title ABC</div>
</body>
</html>

例子：

子元素过滤选择器语法
选择器	功能描述	返回值
:nth-child(eq\|even\|odd\|index)	获取每个父元素下的特定位置元素，索引号从1开始	元素集合
:first-child	获取每个父元素下的第一个子元素	元素集合
:last-child	获取每个父元素下的最后一个子元素	元素集合
:only-child	获取每个父元素下的仅有的一个子元素	元素集合

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>子元素过滤选择器语法</title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-3.1.1.min.js"></script>
    <style type="text/css">
        body {
            font-size:12px;text-align:center;
        }
        ul {
            width:241px;list-style-type:none;padding:0px;
        }
        ul li{
             height:23px;width:60px;line-height:23px;
             float:left;border-top:1px solid #4cff00;
             border-bottom:1px solid #4cff00;margin-top:5px;
        }
        .GetFocus {
            width:58px;border:1px solid #ff0000;
            background-color:#0026ff;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //增加每个父元素下的第二个子元素类别
            $("li:nth-child(2)").addClass("GetFocus");
            //增加每个父元素下的第一个子元素类别
            $("li:first-child").addClass("GetFocus");
            //增加每个父元素下的最后一个子元素类别
            $("li:last-child").addClass("GetFocus");
            //增加每个父元素下只有一个子元素类别
            $("li:only-child").addClass("GetFocus");
        })
    </script>
</head>
<body>
    <ul>
        <li>item 1-0</li>
        <li>item 1-1</li>
        <li>item 1-2</li>
        <li>item 1-3</li>
    </ul>
    <ul>
        <li>item 2-0</li>
        <li>item 2-1</li>
        <li>item 2-2</li>
        <li>item 2-3</li>
    </ul>
    <ul>
        <li>item 3-0</li>
    </ul>
</body>
</html>

例子：

表单对象属性过滤器语法
选择器	功能描述	返回值
:enabled	获取表单中所有属性为可用的元素	元素集合
:disabled	获取表单中所有属性为不可用的元素	元素集合
:checked	获取表单中所有被选中的元素	元素集合
:selected	获取表单中所有被选中option的元素	元素集合

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>表单对象属性过滤器选择器</title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-3.1.1.min.js"></script>
    <style type="text/css">
        body {
            font-size:12px;text-align:center;
        }
        div {
            display:none;
        }
        select {
            height:65px;
        }
        .clsIpt {
            width:100px;padding:3px;
        }
        .GetFocus {
            border:1px solid #ffd800;background-color:#ff0000;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#divA").show(3000);
            //增加表单中所有属性为可用的元素类别
            $("#form1 input:enabled").addClass("GetFocus");
            //增加表单中所有属性为不可用的元素类别
            $("#form1 input:disabled").addClass("GetFocus");
            $("#divB").show(2000);
            //增加表单中所有被选中的元素类别
            alert($("#form1 input:checked").val());
            //显示表单中所有被选中的option的元素内容
            $("#divC").show(2000);
            $("#Span2").html("被选中的是"+$("select option:selected").text());
        })
    </script>
</head>
<body>
    <form id="form1" style="400px">
        <div id="divA">
            <input type="text" value="可用文本框" class="clsIpt"/>
            <input type="text" disabled="disabled"
                   value="不可用文本框"  class="clsIpt"/>
        </div>
        <div id="divB">
            <input type="checkbox" checked="checked" value="1"/>选中
            <input type="checkbox" value="0"/>未选中
        </div>
        <div id="divC">
            <select multiple="multiple">
                <option value="0">item 0</option>
                <option selected="selected" value="1">item 1</option>
                <option value="2">item 2</option>
                <option value="3">item 3</option>
            </select>
            <span id="Span2"></span>
        </div>
    </form>
</body>
</html>

例子：

表单选择器语法
选择器	功能描述	返回值
:input	获取所有input、textare、select	元素集合
:text	获取所有单行文本框	元素集合
:password	获取所有密码框	元素集合
:radio	获取所有单选按钮	元素集合
:checked	获取所有复选框	元素集合
:submit	获取所有提交按钮	元素集合
:image	获取所有图像域	元素集合
:rest	获取所有重置按钮	元素集合
:button	获取所有按钮	元素集合
:file	获取所有文件域	元素集合

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>表单选择器语法</title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-3.1.1.min.js"></script>
    <style type="text/css">
        body {
            font-size:12px;text-align:center;
        }
        form {
            width:250px;
        }
        textarea, select, button, input, span {
            display:none;
        }
        .btn {
            border: 1px solid #ff0000;
            padding: 2px;
            margin:3px;
            width: 60px;
            background-color: #cccccc;
            background-image: -moz-linear-gradient(top, #cccccc, #eeeeee);
            background-image: -o-linear-gradient(top, #cccccc, #eeeeee);
            background-image: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#eeeeee));
            background-image: -webkit-linear-gradient(top, #cccccc, #eeeeee);
            background-image: linear-gradient(to bottom, #cccccc, #eeeeee);
        }
        .txt {
            border:1px solid #ff6a00;padding:3px;margin:3px
        }
        .img {
            padding:3px;border:1px solid #b6ff00;width:241px;height:200px;
        }
        .div {
            border:1px solid #00ffff;background-color:#00ffff;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            //显示input类型元素的总数量
            $("#form1 div").html("input类型元素总数量：" + $("#form1 :input").length);
            $("#form1").addClass("div");
            //显示所有单行文本框元素
            $("#form1 :text").show(3000);
            //显示所有密码框
            $("#form1 :password").show(1000);
            //显示所有的单选框按钮对象
            $("#form1 :radio").show();
            $("#Span1").show();
            //显示所有复选框对象
            $("#form1 :checkBox").show(1000);
            $("#Span2").show(1000);
            //显示所有提交按钮
            $("form :submit").show(1000);
            //显示所有图像区域
            $("form :image").show(1000);
            //显示所有重置按钮对象
            $("form :reset").show();
            //显示所有按钮对象
            $("form :button").show(1111);
            //显示所有文件域对象
            $("form :file").show();
        })
    </script>
</head>
<body>
    <form id="form1">
        <textarea class="txt">TextArea</textarea>
        <select><option value="0">Item 0</option></select>
        <input type="text" value="Text" class="txt"/>
        <input type="password" value="123456" class="txt"/>
        <input type="radio"/><span id="Span1">Radio</span>
        <input type="checkbox"/>
        <span id="Span2">CheckBox</span>
        <input type="submit" value="Submit" class="btn"/>
        <input type="image" title="Image" src="5670d8646a4b6.jpg" class="img"/>
        <input type="reset" value="Reset" class="btn"/>
        <input type="button" value="Button" class="txt"/>
        <input type="file" title="File" class="txt"/>
        <div id="divShow"></div>
    </form>
</body>
</html>

练习：

到此，对于jQuery的选择器就学习结束了。

查看全文

相关阅读:
如何在 ASP.NET 中（服务器端）主动清除（HTTP内容响应时）浏览器中的 Cookies 数据
 修复 dji spark 的 micro sd/tf 存储卡里不能正常播放的视频文件
 在 Windows 7 中安装 .NET Framework 时遇到错误：无法建立到信任根颁发机构的证书链
 【转】在 Windows 10 下，配置 Kinect v2 可用于 Windows Hello 验证身份
 安装SQL Server提示“等待数据库引擎恢复句柄失败”
[转]如何禁止 IIS 在 C:WindowsSystem32LogFilesHTTPERR 中生成日志文件
 Kinect v2 记录
 处理 ASP.NET 中的异常：无法在发送 HTTP 标头之后进行重定向。
在 Windows Server 2008 中部署带 SignalR 的网站出错
 (￣▽￣)" 关于河北ETC记账卡的默认密码

原文地址：https://www.cnblogs.com/Akeke/p/6472541.html