zoukankan      html  css  js  c++  java
  • jQuery选择器

    jQuery选择器分为:基本选择器、层次选择器、过滤选择器、表单选择器

    其中过滤选择器又分为:简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器

    基本选择器

    基本选择器由元素ID,class,元素名,多个选择符组成,可以完成大多数页面元素的查找

    <script type="text/javascript">
    	var div = $("div");
    	//通过元素名选择页面的div元素对象
    	var wra = $("#wrapper");
    	//通过ID选择对应的ID为wrapper的元素
    	var box = $(".box");
    	//通过类名选择对应的class为box的元素
    	var boxs = $("#wrapper .box");
    	//多个选择符组成
    </script>
    <div id="wrapper">
    	<div class="box">
    
    	</div>
    </div>
    

    层次选择器

    通过DOM元素间的层次关系获取元素,主要的层次关系包括:后代、父子、相邻、兄弟关系

    <script type="text/javascript">
    	var ap = $("div p");
    	// 选择div元素后面的所以后代p元素
    	var p = $(".box>p");
    	// 选择.box的子元素p
    	var next = $(".box>p").next();
    	//  选择.box的子元素p的下一个元素
    	var nextall = $(".box>p").nextAll();
    	//  选择.box的子元素p的后面的所有元素
    	var li = $(".ts").siblings();
    	//  选择ul下面的不含.ts样式的li元素
    </script>
    <div id="wrapper">
    	<div class="box">
    		<p class="t">
    			选择器测试
    		</p>
    		<p>
    			选择器测试
    		</p>
    		<p>
    			选择器测试
    		</p>
    		<ul>
    			<li class="ts">
    				1
    			</li>
    			<li>
    				2
    			</li>
    			<li>
    				3
    			</li>
    		</ul>
    		<div class="p">
    			<p>
    				今天心情不错
    			</p>
    		</div>
    	</div>
    </div>
    

    简单过滤选择器

    过滤选择器根据某过滤规则进行元素的匹配,书写时都已 “:” 开头

    • first()或:first ------选择第一个元素 ------返回单个元素

    • last()或:last ------选择最后一个元素 ------返回单个元素

    • not(selector) ------选择除了给定选择器外的所有元素 ------返回元素集合

    • even ------选择所有索引值为偶数的元素,索引号从0开始 ------返回元素集合

    • odd ------选择所有索引值为奇数的元素,索引号从0开始 ------返回元素集合

    • eq(index) ------选择指定索引值的元素,索引号从0开始 ------返回单个元素

    • gt(index) ------选择所有大于给定索引值的元素,索引号从0开始 ------返回元素集合

    • lt(index) ------选择所有小于给定索引值的元素,索引号从0开始 ------返回元素集合

    • header ------选择所有标题类型的元素,如h1,h2.... ------返回元素集合

    • animated ------选择所有正在执行动画的元素 ------返回元素集合

    内容过滤选择器

    根据元素中的文字内容或包含的子元素特征获取元素

    • contains(text) ------选择包含给定文本的元素 ------返回元素集合

    • empty ------获取所有不包含子元素或者空文本的元素 ------返回元素集合

    • has(selector) ------获取所有选择器所匹配的元素的元素 ------返回元素集合

    • parent ------获取含有子元素或包含文本的元素 ------返回元素集合

    可见性过滤选择器

    • hidden ------获取所有不可见的元素 ------返回元素集合

    • visible ------获取所有可见的元素 ------返回元素集合

    属性过滤选择器

    • [arrtibute] ------获取包含给定属性的元素 ------返回元素集合

    • [arrtibute=value] ------获取等于给定的属性是某各特定值的元素 ------返回元素集合

    • [arrtibute!=value] ------获取不等于给定的属性是某各特定值的元素 ------返回元素集合

    • [arrtibute^=value] ------获取给定的属性是某些值开始的元素 ------返回元素集合

    • [arrtibute$=value] ------获取给定的属性是某些值结尾的元素 ------返回元素集合

    • [arrtibute*=value] ------获取给定的属性是包含某些值的元素 ------返回元素集合

    • [selector1][selector2][selectorn] ------获取满足多个条件的复合属性的元素 ------返回元素集合

    子元素过滤选择器

    • nth-child(eq/even/odd/index) ------获取每个父元素下的特定位置元素,索引从0开始 ------返回元素集合

    • first-child ------获取每个父元素下的第一个子元素 ------返回元素集合

    • last-child ------获取每个父元素下的最后一个子元素 ------返回元素集合

    • only-child ------获取每个父元素下的仅有一个子元素 ------返回元素集合

    表单对象属性过滤选择器

    • enabled ------获取表单中所有属性为可用的元素 ------返回元素集合

    • disabled ------获取表单中所有属性为不可用的元素 ------返回元素集合

    • checked ------获取表单中所有被选中的元素 ------返回元素集合

    • selected ------获取表单中所有被选中option的元素 ------返回元素集合

    表单选择器

    • input ------获取所有input、textarea、select ------返回元素集合

    • text ------获取所有单行文本框 ------返回元素集合

    • password ------获取所有密码框 ------返回元素集合

    • radio ------获取所有单选按钮 ------返回元素集合

    • checkbox ------获取所有复选框 ------返回元素集合

    • submit ------获取所有提交按钮 ------返回元素集合

    • image ------获取所有图象域 ------返回元素集合

    • reset ------获取所有重置按钮 ------返回元素集合

    • botton ------获取所有按钮 ------返回元素集合

    • file ------获取所有文件域 ------返回元素集合

  • 相关阅读:
    codeforces1191B Tokitsukaze and Mahjong 哈希+思维
    洛谷P1608 路径统计 最短路变种 dijkstra算法
    自考新教材-p90_5(4)
    自考新教材-p90_5(3)
    自考新教材-p90_5(2)
    自考新教材-p90_5(1)
    自考新教材-p89_3
    自考新教材-p88_4(2)
    自考新教材-p88_4(1)
    自考新教材-p87_3
  • 原文地址:https://www.cnblogs.com/xinxinjs/p/4730082.html
Copyright © 2011-2022 走看看