JQuery选择器1

最新推荐文章于 2020-05-31 15:08:22 发布

猿猿网页设计(yywyss365)

最新推荐文章于 2020-05-31 15:08:22 发布

阅读量704

点赞数

本文链接：https://blog.csdn.net/u011955860/article/details/17244235

版权

JQuery基本选择器
根据给定的id匹配一个元素[$(#(id值))]；
根据给定的元素名匹配所有元素$("(li,div等标签)")(获取所有的li,div等)；相当于js中的document.getElementsByTagName();
根据给定的类匹配元素$(".(class值)")；
根据给定的组合匹配元素$("#id",".class")。
JQuery的层次选择器
1、根据父级元素查找子集元素
a)parent child 返回值为元素集合
例子：
$(#divMid 'span').css('display', 'block')：设置id为'divMid'的层里面的所有span元

素可见，无论有几级嵌套
b)parent>child 返回值为元素集合
例子：
$('div>span').css('display', 'block')：设置id为'divMid'的层里面的第一级span元素

可见，此span元素里面的span元素不可见
2、查找同级元素
a)prev+next 返回值为元素集合
例子：
$('#divMid+div').css('display','block')：设置id为'divMid'的层后面的第一个div可见
$('#divMid+span').css('display', 'block')：设置id为'divMid'的层后面的第一个span

可见
与下面的效果相同，但处理的元素不同
$('#divMid').next().css('display','block'):设置id为'divMid'的层后面的第一个元素

可见,无论是什么元素
b)prev~next 返回值为元素集合
例子：
$('#divMid~div').css('display', 'block')：设置id为'divMid'的层后面的所有div元素

可见，必须是平级的。
$('#divMid~span').css('display','block');：设置id为'divMid'的层后面的所有span元

素可见，必须是平级的。
与下面的效果相同，但处理的元素不同
$('#divMid').nextAll().css('display', 'block')：设置id为'divMid'的层后面的所有元

素可见，无论是什么元素，
必须与divMid平级，平级元素里面的嵌套元素不可见
JQuery简单过滤选择器

例子：
<head runat="server">
    <title></title>
    <script src="Jquery1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                //增加第一个元素的样式
                //$('li:first').css("background-color", "green");

//增加最后一个元素的样式
//$('li:last').css("background-color", "green");

//增加第二个元素的样式
//$('li:first').next().css("background-color", "green");

                //增加除指定类别外的所有选择器的类别，参数为样式名称
                //$('li:not(.class2)').css("background-color", "green");
                //增加除指定类别外的所有选择器的类别，参数为元素id
                //$('li:not(#myid)').css("background-color", "green");

//增加所有索引为偶数的元素的样式,记住索引值从0开始哟
//$('li:even').css("background-color", "green");

//增加所有索引为奇数的元素的样式,记住索引值从0开始哟
//$('li:odd').css("background-color", "green");

//增加指定索引处的样式
//$('li:eq(1)').css("background-color", "green");

//增加大于指定索引处的项目的值
//$('li:gt(1)').css("background-color", "green");

//增加小于指定索引处的项目的值
//$('li:lt(3)').css("background-color", "green");

                //增加标题元素的样式
                $(':header').css("background-color", "green");
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h1>林氏名人</h1>
        <ul>
            <li class="class1">林心如</li>
            <li class="class1" id="myid">林志玲</li>
            <li class="class2">林志颖</li>
            <li class="class1">林黛玉</li>
        </ul>
    </div>
    <input type="button" id="btn" value="点我" />
</body>
    </form>

JQuery内容过滤选择器

例子：
<head runat="server">
    <title></title>
    <script src="Jquery1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                //为div元素中所有文本包括A的元素添加样式，包括嵌套元素
                //$('div:contains(A)').css("background-color", "green");

                //为div元素中所有不包括子元素或者文本的元素添加样式
                //$('div:empty').css("background-color", "green");
                //为div元素中所有包含span元素的元素设置样式，不包含span元素
                //$('div:has(span)').css("background-color", "green");

                //为所有包含子元素或者文本的元素设置样式
                $('div:parent').css("background-color", "green");
            })
        })
    </script>
</head>
<body>
    <form id="form1" >
    <div>ABCD</div>
    <div><span></span></div>
    <div>EACH</div>
    <div></div>
    <div><div>CAD</div></div>
    <div><span></span></div>
    <input type="button" id="btn" value="点我" />
    </form>
</body>

JQuery可见性过滤选择器

例子：
<head runat="server">
    <title></title>
<style type="text/css">
        .class1
        {
            background-color: Aqua;
        }
    </style>

                //$('div:visible').addClass('class1');
                $('div:visible').addClass('class1');
            })
        })
    </script>
</head>
<body>
    <form id="form1">
    <div>
        第一层</div>
    <span style="display: none;">Hidden</span>
    <input type="button" id="btn" value="显示" />
    </form>
</body>
.show():如果被选元素已被隐藏，则显示这些元素;如果元素已经是完全可见，则该效果不

产生任何变化，除非规定了 callback 函数。
该效果适用于通过 jQuery 隐藏的元素，或在 CSS 中声明 display:none 的元素（但不适

用于 visibility:hidden 的元素）。

JQuery属性过滤选择器

例子：
<head runat="server">
    <title></title>
    <style type="text/css">
    div{ float:left; border:solid 1px #ccc; width:64px; height:64px;

display:none;}
    </style>
    <script src="Jquery1.7.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                //为所有具有id属性的元素设置样式,动画效果
                //$('div[id]').css("background-color", "green");
                //$('div[title=t2]').css("background-color", "green");
                //$('div[title!=t2]').css("background-color", "green");
                //属性值以t开头
                //$('div[title^=t]').css("background-color", "green");
                //属性值以c结束
                //$('div[title$=2]').css("background-color", "green");
                //$('div[id*=2]').css("background-color", "green");
                //id值以d开始，title值以3结束
                $('div[id^=d][title$=3]').css("background-color", "green");
            })
        })
    </script>
</head>
<body>
    <form id="form1" action="属性过滤选择器.aspx">
   <div title="t1">第一层</div>
   <div id="div2" title="t2">第二层</div>
   <div id="div3" title="t3">第三层</div>
   <div id="div4" title="t4">第四层</div>
   <input type="button" id="btn" value="click" />
    </form>
</body>

猿猿网页设计(yywyss365)

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery选择器1

JQuery基本选择器根据给定的id匹配一个元素[$(#(id值))]；根据给定的元素名匹配所有元素[$(li,div等标签)（获取所有的li,div等）]；根据给定的类匹配元素[$(.(class值))]；根据给定的组合匹配元素[$(#id,.class)]。JQuery的层次选择器1、根据父级元素查找子集元素a)parent child 返回值为元素集合例子：
复制链接

扫一扫