js jq 选择器大杂烩

js原生选择器：

getElementById,

getElementsByName,

getElementsByTagName

getElementsByClassName

querySelector

querySelectorAll

一、getElementById　　

    语法： 　　obj= document.getElementById( sID ) 　　

    参数： 　　sID :　必选项。字符串(String)。 　　

  返回值： 　　obj:　对象(object)。

根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一个。如果无符合条件的对象，则返回 null。

这个方法再简单不过，不过在IE上还是可能会遇到麻烦，那就是id与name混淆的问题请参照IE中id与name的BUG

二、 getElementsByName　　

    语法： 　　objNodeList = document.getElementsById( name ) 　　

    参数： 　　name:　必选项。字符串(String)。 　　

  返回值： 　　objNodeList :　元素数组

存在id与name混淆的问题请参照IE中id与name的BUG

三、getElementsByTagName　　

    语法： 　　objNodeList = document.getElementsByTagName(tagname); 或 

                             = document.getElementById('ID').getElementsByTagName("tagname");

    参数： 　　tagname:　必选项。字符串(String)。 　　

  返回值： 　　objNodeList :　元素数组

四、getElementsByClassName　　

    语法： 　　objNodeList = document.getElementsByClassName(class); 或 

                             = document.getElementById('ID').getElementsByClassName("class");

    参数： 　　class:　必选项。字符串(String)。 　　

  返回值： 　　objNodeList :　元素数组

getElementsByClassName方法在标准浏览器中都已经实现,它的特点与getElementsByTagName。

IE这个怪胎没有这个方法，需要我们自己动手。

五、querySelector和querySelectorAll

    语法： 　　objNodeList = document.querySelectorAll(cssselecter); 或 

  = document.getElementById('ID').querySelectorAll("cssselecter");

    参数： 　　cssselecter:　必选项。字符串(css选择器)。 　　

   返回值： 　　objNodeList :　元素数组

但是也会有问题，baseElement和document没有什么区别，但是……Andrew Dupont 发明了一种方法，在slectors前面加上当前id+‘’即可

jq 选择器

1、利用标签名获取元素

$("标签名")

2、通过ID获取元素

$("#id_name")

3、通过 类名获取元素

$(".className")

4、一次性获取多个元素

$("元素名, 元素名, 元素名 ....")

5、通过指定层次关系获取元素

$("祖先    子孙")

$("父  >  子")

$("前  +  后")

$("兄  ~  弟")

6、根据元素的属性值获取元素

[attribute]

[attribute = value]

[attribute != value]

[attribute ^= value]

[attribute $= value]

[attribute *= value]

7、通过过滤器获取元素

$("元素名：过滤器")

过滤器列表

:first

:last

:not(filter)

:even

:odd

:eq(index)

:lt(index)

:gt(index)

:header

:animated

:contains(text)

:empty

:has(selector)

:parent【注：这个是获取非空元素不是父元素】

8、获取表单元素

$("：表单过滤器名")

获取表单元素的方法

:input

:text

:password

:radio

:checkbox

:submit

:image

:reset

:button

:file

【注：表单标签也是标签，同样可以利用标签名获取，不过有些标签类型多样可以加过滤器加以区分。如：$("input:text")】

9、通过过滤器获取表单元素

:enable    获取可输入状态的元素

:disabled    获取不可输入状态的元素

:checked    获取选中元素的元素

:selected    获取下拉框中选中状态的元素

10、从集合元素中通过指定序号获取元素

$("元素名").eq(index)

11、获取指定条件一致的元素

$("元素名").filter(expr)

12、获取指定范围的元素

$("元素名").slice(start,[end])

13、获取与条件表达式一致的元素

$("元素名").is(expr)

14、获取元素的下一个元素

$("元素名").next([expr])

15、获取元素的前一个元素

$("元素名").prev([expr])

16、获取元素的父元素

$("元素名").parent([expr])

17、获取元素的子元素

$("元素名").children([expr])

//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：这个选择符就是大于号，表示先找到第一个选择符的所有对象，然后在他的子节点（不能是孙节点）中找到所有符合第二个选择符的对象。 
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)> 
匹配所有下拉列表选中元素 

jq获取表单值与赋值代码