大发体育娱乐在线-大发体育娱乐官方网站-大发体育娱乐登录网址
做最好的网站

Selector选择器小结

来源:http://www.dfwstonefabricators.com 作者:关于计算机 人气:142 发布时间:2019-09-19
摘要://jQuery 选择器 $ //$(expression,[context]) return jQuery //Unit One //expression 之 CSS 定义符 正是以CSS语法表示所要选择的因素 // $("*"); // 表示页面全数因素标签 // $("th, td") // 代表具备thtd成分标签

//jQuery 选择器 $
//$(expression,[context]) return jQuery
//Unit One
//expression 之 CSS 定义符 正是以CSS语法表示所要选择的因素

// $("*"); // 表示页面全数因素标签
// $("th, td") // 代表具备<th><td>成分标签
// $("a") // 代表全体<a>成分标签
// $("div#onlydiv"); // 表示CSS选择中id=onlyidv的元素 $("#ID")为全文书档案相配
// $("#rating"); // 表示id=rating的元素
// $("#orderedlist > li"); // 表示id=orderedlist 全数子成分,但不包涵子成分下的子成分
// $("#orderedlist li:last"); // 表示id=orderedlist 中li最终三个要素
// $("#orderedlist li:first"); // 表示id=orderedlist 中li第一个要素
// $("#orderedlist li:nth- child(0)"); //表示id=orderedlist 中li第(N)个成分 n为数组下标
// $("button:only-child"); //表示 css选拔中的它为父容器独一的因素
// $(".stuff:empty"); // 表示css选拔中的空成分
// $(".buttons:enabled"); // 表示css选用中的通常启用的要素
// $(".buttons:disabled"); // 表示css选拔中的非启用成分
// $("input:checked"); // 表示css采用中的选中的成分
// $("button:not(.not)"); // 表示css选用中的去除not()中的成分
// $("button.not"); // 表示css采纳中的class=not的要素 $(".CLSS")为全文书档案匹配
// $("#orderedlist2 li"); // 表示id=orderedlist 全体子成分且包括具有子成分的子成分
// //alert($("#orderedlist ~ li").length);
// $("#orderedlist,.buttons,li"); //相配 css采取符的成分

//expression 之 根据成分属性接纳
// alert($("button[@class]").length); // 表示有class属性的要素
// alert($("button[@class=not").length); // 表示有class属性且值等于not的要素
// alert($('button[@class^=not').length); // 表示有class属性且值开首相称not的要素
// alert($('button[@class$=not').length); // 表示有class属性且值结尾相配not的要素
// alert($('button[@class*=not').length); // 表示有class属性且值中相称not的成分
//expression 之 XPATH 过滤器 XPATH语法来代表须求选拔的页面成分
//$("ol[@id^='orderedlist']").find("li:contains('First')").each(function(i) {
//// $(this).html( $(this).html() + " BAM! " + i );
// $(this).mouseover(function(){
// $(this).css("color","red");
// });
// $(this).mouseout(function(){
// $(this).css("color","#000");
// });
// });
//查找ol标签且属性 id=orderedlist的装有因素,这里有三种写法
//ol[@id='orderedlist'] 定位父成分 直接用each 迭代
//ol[@id='orderedlist']/* 全体父成分下的子成分 使用find('child- element').each()迭代

//Unit two
///$( html, [ownerDocument]) return jQuery
//那些函数允许传入html成分文本,构造器会爆发那几个HTML文本所创立的jQuery对象,那一个指标能够是原来未有的,也但是原本页面上设有的
//$('<p>hello</p>').appendTo("h2"); //生成五个标识文本 并扩张到页面h2标签内
//也得以 将原来页面成分抽出追加
//$("input",this).appendTo("h2"); //注意,这里收取的页面成分,是移动!实际不是复制

///$(elements) return jQuery
//这些函数允许直接传入DOM
//$(document.forms[0].elements).appendTo("h2"); // 能够参照DOM文书档案
//$(callback) return jQuery

//以下是selector一些注解
/*
基础:

#id:依据指标的id属性获取对象。
element:相称某一HTML标签的具备目的
.class:依据指标的class属性获取对象
*:获取具有的指标
selector1, selector2, selectorN:获取三个采纳符的合集,不剔出双重项

层级选用符:
ancestor descendant:那些接纳符正是空格,表示先找到第三个选用符的富有目的,然后在他的子孙节点中找到全体符合第四个采纳符的对象。
parent > child:这些选取符便是出乎号,表示先找到第一个选用符的具有指标,然后在她的子节点(不能够是孙节点)中找到所有符合第2个采纳符的靶子。
prev + next:这几个选拔符正是加号,表示先找到第三个选取符的持有目的,然后找和他同级的尾随的下二个节点同一时候符合第三个选用符的对象。
prev ~ siblings:那一个采纳符即是~号,表示先找到第一个选取符的具有指标,然后找和她同级的之后全数节点里面还要合乎第三个选拔符的靶子。

基本功过滤符:
:first:匹配三个对象中的第1个对象
:last:相称三个目的中的最终四个指标
:not(selector):相称去除了not后边选拔符中内容的项
:even:相配全部指标中的第偶数个
:odd:相配全体指标中的第奇数个
:eq(index):相配某一下表的单身某成分
:gt(index):相称大于某一下标的享有因素
:lt(index):相配小于某一下标的有所因素
:header:匹配全数的header成分,举个例子 h1,h2,h3,h4,h5,h6
:animated:相配所有有动画效果的成分

文件过滤符:
:contains(text):相配内部装有该文本成分的目的,富含直接有用的状态
:empty:相配全体未有子成分的靶子
:has(selector):相配全部至少含有三个子选取符的靶子
:parent:匹配全体的父对象,父对象包涵那个只包罗文本的对象

可知性过滤符:
:hidden:相配全体掩盖对象,大概input中的hidden类型
:visible:相配全部可知的指标

本性过滤符:
[attribute]:匹配具备某一性子的具有目的
[attribute=value]:相配具备某一性质和值的靶子
[attribute!=value]:相称具备某一质量,且不是某一值的对象
[attribute^=value]:相配具有某一质量,且以某一值发轫的对象
[attribute$=value]:相配具备某一属性,且以某一值结尾的指标
[attribute*=value]:相配具有某一属性,且含有某一值的靶子
[selector1] [selector2][selectorN]:相称同期合乎多少个属性采纳符的靶子

子过滤符:
:nth- child(index/even/odd/equation):相配子成分中的某一下标/偶数/奇数/等式的靶子,:eq(index)只好合营某单一对象的子成分特征,而那几个办法能够合作八个目的的某一子成分共同特性
:first-child:相配第二个子成分
:last- child:相称最终贰个子成分
那么些相称符也得以对三个父对象的持有子成分举办相称操作
:only-child:假若叁个父成分独有一个子成分,就非凡那一个子成分

表单过滤符
Name Type

:input Returns: Array<Element(s)>
相配表单内input成分

:text Returns: Array<Element(s)>
相称表单内 input type为text的成分

:password Returns: Array<Element(s)>
相称表单内input type为password的要素

:radio Returns: Array<Element(s)>
相称表单内input type为radio的因素

:checkbox Returns: Array<Element(s)>
相称表单内input type为checkbox的元素

:submit Returns: Array<Element(s)>
相称表单内input type为submit的成分

:image Returns: Array<Element(s)>
匹配表单内image的要素

:reset Returns: Array<Element(s)>
相称表单内 input type为reset的因素

:button Returns: Array<Element(s)>
相配表单内input type为button的成分

:file Returns: Array<Element(s)>
相称表单内input type为file的元素.

:hidden Returns: Array<Element(s)>
相配表单内input type为hidden的因素大概hidden区域

:enabled Returns: Array<Element(s)>
相配全体启用成分

:disabled Returns: Array<Element(s)>
万分全部非启用成分

:checked Returns: Array<Element(s)>
协作全数入选成分

:selected Returns: Array<Element(s)>
相配全部下拉列表选七月素

*/

您只怕感兴趣的文章:

  • JQuery 中多少个类选取器的简便利用介绍
  • jQuery类选用器用法实例
  • 选择jquery选取器怎么着获得父级成分、同级成分、子成分
  • jquery接纳器之性质过滤接纳器详解
  • jquery 中多规格选拔器,相对采用器,档案的次序选拔器的区别
  • Jquery选拔器中选取变量达成动态选拔例子
  • JQuery中$之选取器用法介绍
  • Jquery颜色选拔器ColorPicker达成代码
  • jQuery过滤选拔器:not()方法运用介绍
  • jquery 属性选用器(相称具备内定属性的要素)
  • jquery采用器大全 周密详解jquery采取器
  • jQuery中的类名选用器(.class)用法轻易示例

本文由大发体育娱乐在线发布于关于计算机,转载请注明出处:Selector选择器小结

关键词:

最火资讯