jquery 伪元素如何实现覆盖

转载

mob64ca140eb362 2024-07-18 23:08:44

文章标签 jquery 伪元素如何实现覆盖 css jQuery 选择器 文章分类 jQuery 前端开发

Q：a标签伪类的顺序？

A：顺序应该是：

:link
:visited
:hover
:avtice

原因：link和visited是a标签的常态属性，hover和active是a标签的即时状态。

Q:jQuery选择器？如何准确快速的选择出想要的元素？

A: 在用jQuery的时候，一个很重要的用法，就是要快速选择出自己想要的元素。把常用的选择记录下来：

基本选择器

ID选择器

$("#id").css("width","120px");

Class选择器

$(".class").css("width","120px");

Element选择器

$("p").css("width","120px");

*选择器

//遍历form下的所有元素，将宽度设置为120px
$("form *").css("width","120px");

并列选择器

$("p,div").css("width","120px");

层次选择器

直系子元素 parent > child

//选取div下的第一代span元素，并将字体颜色设置为红色
$("div > span").css("color","#FF0000");

//只有第一个span会变色
<div>
    <span>123</span>
    <p>
        <span>456</span>
    </p>
</div>

下一个兄弟元素 prev + next

//选class为item的下一个兄弟元素
$(".item + div").css("color","#FF0000");
//等价代码
$(".item").next('div').css('color','#FF0000');

//下面代码只有123和789会变色

<p class="item"></p>
<div>123</div>
<div>456</div>
<span class="item")</span>
<div>789</div>

兄弟元素 prev ~ siblings

//选取class为inside之后的所有div兄弟元素
$(".inside ~ div").css('color','#ff0000');
//等价代码
$(".inside").nextAll('div').css("color","#ff0000");

//下面的代码，G2和G4会变色
<div class="inside">G1</div>
<div>G2</div>
<span>G3</span>
<div>G4</span>

过滤选择器

基本过滤选择器

:first 和 :last

// 取第一个元素或最后一个元素
$("span : first").css("color","#ff0000");
$("span : last").css("color","#ff0000");

//G1和G3会变色
<span>G1</span>
<span>G2</span>
<span>G3</span>

:not

//取非元素
$("div:not(.wrap)").css("color","#ff0000");

//G1会变色
<div>G1</div>
<div class="wrap">G2</div>

//G1和G2都会变色
<div>G1
    <div class="wrap">G2</div>
</div>

:even 和 :odd

//偶数行
$("li:even").css("color","#ff0000");
//奇数行
$("li:odd").css("color","#00ff00");

//A、C列颜色为#ff0000  B、D列颜色为#00ff00
<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>

:eq(x)

//第三行
$("li:eq(2)").css("color","#00ff00");

//第三行颜色改变
<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>

:gt(x) 和 :lt(x)

//取大于x索引或小于x索引的元素
$('ul li:gt(2)').css('color', '#FF0000');
$('ul li:lt(2)').css('color', '#0000FF');

L3 L4会是红色，L1 L2会是蓝色
<ul>
    <li>L1</li>
    <li>L2</li>
    <li>L3</li>
    <li>L4</li>
    <li>L5</li>
</ul>

:header

//取h1~h6标签
 $(':header').css('background', '#EFEFEF');

内容过滤器

:contains(text)

//取包含text文本的元素
//dd元素种包含"jQuery"文本的会变色
 $('dd:contains("jQuery")').css('color', '#FF0000');

//第一个dd会变色
<dl>
    <dt>技术</dt>
    <dd>jQuery, .NET, CLR</dd>
    <dt>SEO</dt>
    <dd>关键字排名</dd>
    <dt>其他</dt>
    <dd></dd>
</dl>

:empty

//取不包含子元素或文本为空的元素
$("dd:empty").html("none");

//第三个dd会显示“none”
<dl>
    <dt>技术</dt>
    <dd>jQuery, .NET, CLR</dd>
    <dt>SEO</dt>
    <dd>关键字排名</dd>
    <dt>其他</dt>
    <dd></dd>
</dl>

:has(selector)

//取选择器匹配的元素
 // 为包含span元素的div添加边框
 $('div:has(span)').css('border', '1px solid #000');

//即使span不是div的直系子元素，也会生效
<div>
    <h2>
        A
        <span>B</span>
    </h2>
</div>

:parent

//取包含子元素或文本的元素
$('ol li:parent').css('border', '1px solid #000');

//下面的代码，A和D所在的li会有边框
<ol>
    <li></li>
    <li>A</li>
    <li></li>
    <li>D</li>
</ol>

可见性过滤选择器

:hidden

//取不可见的元素
$("div:hidden").show(500);

//先弹出“hello”对话框，然后hid-1会显示，hid-2仍然不可见

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <style type="text/css">
        div
        {
            margin: 10px;
            width: 200px;
            height: 40px;
            border: 1px solid #FF0000;
            display:block;
        }
        .hid-1
        {
            display: none;
        }
        .hid-2
        {
            visibility: hidden;
        }
    </style>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('div:hidden').show(500);
            alert($('input:hidden').val());
        });
    </script>
</head>
<body>
    <div class="hid-1">display: none</div>
    <div class="hid-2">visibility: hidden</div>
    <input type="hidden" value="hello"/>
</body>
</html>

Demo

:visible

//取可见的元素
$("div:visibility").css("background","red");

//最后一个div会有背景色

<script type="text/javascript">
    $(document).ready(function() {
        $('div:visible').css('background', '#EEADBB');
    });
</script>
<div class="hid-1">display: none</div>
<div class="hid-2">visibility: hidden</div>
<input type="hidden" value="hello"/>
<div>
    jQuery选择器大全
</div>

属性过滤选择器

[attribute]

//取拥有attribute属性的元素
$('a[title]').css('text-decoration', 'none'); 
//最后一个a标签仍然有下划线
    <ul>
        <li><a href="#" title="DOM对象和jQuery对象" class="item">DOM对象和jQuery对象</a></li>
        <li><a href="#" title="jQuery选择器大全" class="item-selected">jQuery选择器大全</a></li>
        <li><a href="#" title="jQuery事件大全" class="item">jQuery事件大全</a></li>
        <li><a href="#" title="基于jQuery的插件开发" class="item">基于jQuery的插件开发</a></li>
        <li><a href="#" title="Wordpress & jQuery" class="item">Wordpress & jQuery</a></li>
        <li><a href="#" class="item">其他</a></li>
    </ul>

[attribute = value]和[attribute != value]

//取attribute属性值等于value或不等于value的元素
$("a[class=item]").css("color","#FF99CC");
$("a[class1=item]").css("color","#FF6600");

//class=item的颜色为#FF99CC  class!=item的颜色为#FF6600
    <ul>
        <li><a href="#" title="DOM对象和jQuery对象" class="item">DOM对象和jQuery对象</a></li>
        <li><a href="#" title="jQuery选择器大全" class="item-selected">jQuery选择器大全</a></li>
        <li><a href="#" title="jQuery事件大全" class="item">jQuery事件大全</a></li>
        <li><a href="#" title="基于jQuery的插件开发" class="item">基于jQuery的插件开发</a></li>
        <li><a href="#" title="Wordpress & jQuery" class="item">Wordpress & jQuery</a></li>
        <li><a href="#" class="item">其他</a></li>
    </ul>

[attribute ^= value]和[attribute $= attribute]和[attribute *= value]

//attribute属性值以value开始，以value结束，或包含value值
$("a[title^=jQuery]").css("font-size","12px");
$("a[title$=jQuery]").css("font-size","24px");
$("a[title*=jQuery]").css("font-size","36px");

[select1][select2]

//复合型过滤器，同时符合多个条件
 $('a[title^=jQuery][class=item]').hide();

子元素过滤选择器

:first-child 和 :last-child

// !!!注意
// div:first返回的是整个DOM文档中的第一个div元素，div:first-child返回的是所有div元素下的第一个元素合并后的集合
$("div:first-child").length
$("div:last-child").length

//len1 和 len2显示都是3
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var len1 = $('div:first-child').length;
        var len2 = $('div:last-child').length;
     });
    </script>
</head>
<body>
<div>
    <div>
        <div></div>
    </div>
</div>
</body>
</html>

:only-child

//当某个元素有且仅有一个子元素时，only-child才会生效
$("div:only-child").css('border","1px solid #fff");

:nth-child

//第几个孩子，从1开始计数
//:nth-child有三种用法：
//1) :nth-child(x)，获取第x个子元素 
//2) :nth-child(even)和:nth-child(odd)，从1开始，获取第偶数个元素或第奇数个元素 
//3) :nth-child(xn+y)，x>=0，y>=0。例如x = 3, y = 0时就是3n，表示取第3n个元素（n>=0）。实际上xn+y是上面两种的通项式。（当x=0,y>=0时，等同于:hth-child(x)；当x=2,y=0时，等同于nth-child(even)；当x=2,y=1时，等同于:nth-child(odd)）

$("tr:nth-child(even)").css("background","red");
$("tr:nth-child(odd)").css("background","yellow");
$("tr:nth-child(3n)").css("background","blue");

表单对象属性过滤选择器

:enabled 和 :disabled

//:enabled 和 :disabled的匹配范围包括input,select,textarea
$(":enabled").css("border","1px solid #FF0000");
$(":disabled").css("border","1px solid #00FF00");

:checked

//  仅在IE下有效 选中的单选框或复选框
$(":checked").css("background","#ff0000");

:selected

//取下拉列表被选中的元素
$(":select").val();

表单选择器

:input
:text
:radio
:checkbox
:submit
:reset
:button
:file
:hidden

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：linux 删除镜像后磁盘空间没有释放

下一篇：android 指定位置不让截图安卓不允许截屏

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

jquery 伪元素如何实现覆盖

jquery 伪元素如何实现覆盖

Q：a标签伪类的顺序？

Q:jQuery选择器？如何准确快速的选择出想要的元素？

51CTO博客