美高梅网址:使用jQuery层次选择器选择元素,j
分类:计算机网络

复制代码 代码如下:

<html xmlns=";
<head>

复制代码 代码如下:

<html xmlns=";
<head>
<!--
1.等级次序选用器: 通过DOM成分间的层系关系获得成分,其主要性的等级次序关系包罗后代、老爹和儿子、相邻、兄弟关系,通过内部基类关系能够方便急迅地稳固成分
jQuery选取器详解
据书上说所获得页面中元素的不等,能够将jQuery选拔器分为:基本选拔器、档期的顺序选取器、过滤采纳器、表单采纳器四大类。在那之中,在过滤选拔器中有能够分成:不痛苦滤选取器、内容过滤选拔器、可知性过滤选拔器、属性过滤选取器、子成分过滤选取器、表单对象属性过滤选择器6种
注:ancestor descendant与parent>child所选拔的因素集合是分裂的,后边二个的档次关系是祖先与儿孙,而前者是老爹和儿子关系;其它,prev+next能够使用.next()代替,而prev~siblings能够采取nextAll()代替。
-->
<title></title>
<!-- 使用jQuery档次选拔器选用成分:在页面中,设置4块<div>标识,个中第二块<div>中,增多1个<span>标识,在该<span>标志中又新扩展1个<span>标识,全体因素早先值均为隐匿,然后通过jQuery档次选取器,展现相应的页面标识。-->
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
body{font-size:12px;text-align:center;}
div,span{float:left;border:solid 1 px #ccc;margin:8px;display:none}
.clsFraA{width:65px;height:65px}
.clsFraP{width:45px;height:45px;background-color:#eee}
.clsFraC{width:25px;height:25px;background-color:#ddd}
</style>
<script type="text/javascript">
$(function () {
$('#divMid').css('display', 'block');
$('div span').css('display', 'block'); //展现div中持有的<span>标志
})
$(function () {
$('#divMid').css('display', 'block');
$('div>span').css('display', 'block'); //显示<div>中子<span>标记
})
$(function () {
$('#divMid+div').css('display', 'block'); //展现ID为divMid成分后的下八个<div>
$('#divMid').next().css('display', 'block');
})
$(function () {
$('#divMid ~ div').css('display', 'block'); //展现ID为divMid成分后的兼具<div>
$('#divMid').nextAll().css('display', 'block');
})
$(function () {
$('#divMid').siblings('div').css('display','block'); //展现ID为divMid成分的享有相邻<div>
})
/* siblings()方法与采纳器prev~siblings 不一样在于,前面一个获取全体的邻座元素,不分前后,而后面一个仅收获标志前面全体周围成分,不能够获得尾部*/
</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>

    <!--

<html xmlns=";
<head>
<!--
1.主导选拔器:是jQuery中运用最频仍的采取器,它由成分Id、Class、元素名、三个采纳符组成,通过骨干选取器能够完成好多页面成分的追寻
jQuery选用器详解
依附所获取页面中元素的不等,能够将jQuery选取器分为:基本选用器、等级次序选拔器、过滤选取器、表单选用器四大类。在这之中,在过滤选用器中有可以分成:不哀痛滤选拔器、内容过滤选拔器、可知性过滤选取器、属性过滤选取器、子元素过滤选用器、表单对象属性过滤选拔器6种
-->
<title></title>
<!--使用jQuery基本选拔器选拔成分:二个页面包涵多个<div>标记,在这之中叁个用于安装ID属性,另二个用来安装Class属性;大家再追加多少个<span>标识,全部成分起头值均为遮蔽,然后经过jQuery基本采纳器展现相应的页面标识。-->
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
body{font-size:12px;text-align:center;}
.clsFrame{width:300px;height:100px}
.clsFrame div,span{display:none;float:left;width:65px;height:65px;border:solid 1px #ccc;margin:8px}
.clsOne{background-color:#eee}
</style>
<script type="text/javascript">
$(function () { //ID相配成分
$('#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>

您或然感兴趣的小说:

  • jquery之Document成分选取器篇
  • 原生的html成分接纳器类似jquery选取器
  • jQuery表单成分选择器代码实例
  • jQuery采取器之表单成分选拔器详解
  • jQuery成分选取器用法实例
  • jQuery接纳器之子成分采取器详解
  • jQuery成分选取器实例代码
  • jquery接纳器排除有些DOM成分的主意(实例演示)
  • jquery 属性选拔器(相称具有钦定属性的因素)
  • jQuery选取器计算之常用成分查找方法
  • jquery基本选项器相配几个成分的贯彻方式
  • jQuery七月素接纳器(element)简单用法示例

1.档期的顺序接纳器: 通过DOM元素间的档案的次序关系得到成分,其重要的层系关系富含后代、老爹和儿子、相邻、兄弟关系,通过内部基类关系能够方便飞速地牢固成分

代码如下: html xmlns="" head !-- 1.为主选择器:是jQuery中央银行使最频仍的选拔器,它由成分Id、Class、成分名、多个...

jQuery选择器详解

依照所获得页面中元素的两样,可以将jQuery选拔器分为:基本选拔器、等级次序采取器、过滤采用器、表单采取器四大类。其中,在过滤选取器中有能够分为:不忧伤滤选取器、内容过滤采纳器、可见性过滤采用器、属性过滤选用器、子成分过滤选取器、表单对象属性过滤选用器6种

注:ancestor descendant与parent>child所选用的元素集结是例外的,前面八个的层系关系是祖上与儿孙,而后人是老爹和儿子关系;别的,prev+next能够使用.next()取代,而prev~siblings可以选择nextAll()代替。
-->
    <title></title>
    <!-- 使用jQuery档案的次序采纳器接纳成分:在页面中,设置4块<div>标志,个中第二块<div>中,增多1个<span>标识,在该<span>标识中又新扩张1个<span>标志,全部成分最早值均为隐匿,然后通过jQuery档案的次序采用器,显示相应的页面标识。-->
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <style type="text/css">
    body{font-size:12px;text-align:center;}
    div,span{float:left;border:solid 1 px #ccc;margin:8px;display:none}
    .clsFraA{width:65px;height:65px}
    .clsFraP{width:45px;height:45px;background-color:#eee}
    .clsFraC{width:25px;height:25px;background-color:#ddd}
    </style>
    <script type="text/javascript">
        $(function () {
            $('#divMid').css('display', 'block');
            $('div span').css('display', 'block');   //显示div中具备的<span>标志
        })
        $(function () {
            $('#divMid').css('display', 'block');
            $('div>span').css('display', 'block');      //显示<div>中子<span>标记
        })
        $(function () {
            $('#divMid+div').css('display', 'block');     //呈现ID为divMid成分后的下三个<div>
            $('#divMid').next().css('display', 'block');
        })
        $(function () {
            $('#divMid ~ div').css('display', 'block');     //显示ID为divMid成分后的有着<div>
            $('#divMid').nextAll().css('display', 'block');
        })
        $(function () {
            $('#divMid').siblings('div').css('display','block');  //展现ID为divMid成分的全数相邻<div>
        })
 
/* siblings()方法与选用器prev~siblings 不一致在于,前面贰个获取全体的隔壁成分,不分前后,而后面一个仅得到标志后边全体相邻成分,不能够获得尾巴部分*/

    </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>

xmlns= head !-- 1.等级次序选拔器: 通过DOM成分间的层系关系获取成分,其重大的档次关系满含后代、老爹和儿子、相邻、兄弟关...

本文由美高梅网址发布于计算机网络,转载请注明出处:美高梅网址:使用jQuery层次选择器选择元素,j

上一篇:jquery数组之存放checkbox全选值示例代码,方便实用 下一篇:js实现图片轮换效果代码,图片轮换效果实现代码
猜你喜欢
热门排行
精彩图文