jQuerySelector选择器⼩结
//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()中的元素
// $(""); // 表⽰css选择中的class=not的元素 $(".CLSS")为全⽂档匹配
// $("#orderedlist2 li"); // 表⽰id=orderedlist 所有⼦元素且包括所有⼦元素的⼦元素
/
/ //alert($("#orderedlist ~ li").length);
// $("#orderedlist,.buttons,li"); //匹配 css选择符的元素
jquery在一个元素后追加标签
//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：这个选择符就是⼤于号，表⽰先到第⼀个选择符的所有对象，然后在他的⼦节点（不能是孙节点）中到所有符合第⼆个选择符的对象。
prev + next：这个选择符就是加号，表⽰先到第⼀个选择符的所有对象，然后和他同级的紧跟着
的下⼀个节点同时符合第⼆个选择符的对象。
prev ~ siblings：这个选择符就是~号，表⽰先到第⼀个选择符的所有对象，然后和他同级的以后所有节点⾥⾯同时符合第⼆个选择符的对象。
基础过滤符：
:first：匹配多个对象中的第⼀个对象
: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)>
匹配所有下拉列表选中元素
*/

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。