JQuery基本操作

323 阅读1分钟

JQuery中选择器的通用语法:$(selector)

$("#id"):ID选择器。

$(".class"):类选择器。

$("p:odd"):几乎所有的标签都可以使用":odd"或者":even"来实现奇偶的选择。

$("td:nth-child(1)"):所有表格行的第一个单元格,就是第一列。

$("li>a"):子选择器,返回<li>标记的所有子元素<a>,不包括孙元素。

1.1属性选择器:

$("a[title]"):选择超链接中的属性。

$("a[href$=pdf]"):选择所有超链接,并且超链接的href属性是以"pdf"结尾的。

$("a[href^=http://]"):选择所有超链接,并且超链接是以"http://"开头的。

$("a[href$=html]"):选择所有超链接,并且超链接是以"html"结尾的。

$("a[href*=abc]"):选择所有超链接,并且超链接中包含"abc"的。

1.2包含选择器:

$("li:has(a)"):包含超链接的所有<li>标记。

$("ul li ul li:has(a)").addClass("myClass"):选中二级项目列表中所有包含超链接的<li>标记。

1.3位置选择器

例:

$("p:first-child"):选择所有的p标记,并且这些p标记是其父标记的第一个子标记。

$("p:eq(4)").addClass("myClass");选择p列表中的第5个,从0开始的。

选择器说明:

":first"第一个元素,如div p:first,选择div中的第一个p

":last"最后一个元素,如div p:last,选择div中的最后一个p

":first-child"第一个子元素。

":only-child"没有兄弟的元素,该父节点只有一个子元素。

":nth-child(n)"第n个子元素,如li:nth-child(2),选择所有的li元素,且改li元素为父元素的第2个子元素。

":nth-child(odd|even)"所有奇数或者偶数号子元素,如li:nth-child(odd),选择所有的li元素,且这些li元素为父元素的第奇数个子元素。

":nth-child(nX+Y)"利用公式来计算子元素的位置。如li:nth-child(5n+1),选择所有的li元素,且这些li元素为父元素的第5n+1个子元素(0,6)。

":odd或者:even"整个页面的奇数号或者偶数号。

"eq(n)"页面第n个元素(从0开始)。

"gt(n)"页面中第n个元素子后的所有元素(不包括n本身)。

"lt(n)"页面中第n个元素子前的所有元素(不包括n本身)。

1.4过滤选择器

":animated"所有处于动画中的元素。

":button"所有按钮,包括input[type=button],input[type=submit],input[type=reset]<button>标记。

":checkbox"所有复选框,等同于input[type=checkbox]

":contains(foo)"选择所有包含了文本"foo"的元素。

":disabled"页面中被禁用的元素。

":enabled"页面中没有被禁用的元素。

":file"上传文件的元素,等同input[type=file]

":header"所有的标题元素,h1-h6。

":hidden"页面中被隐藏的元素。

":image"图片提交按钮,等同于input[type=image]

":input"表单元素,<input><select><textarea><button>

":not(filter)"反向选择。

":parent"选择所有拥有子元素(包括文本)的元素,空元素不算。

":password"密码文本。

":radio"单选按钮。

":rest"重置按钮,包括input[type=rest]button[byte=rest]

":selected"下拉菜单中的被选中项。

":submit"提交按钮.包括input[type=submit]button[byte=submit]

":text"文本输入框.input[type=text]

":visible"页面中的所有可见元素。

1.5选择说明

"*"所有标记。

"E"所有名称为E的标记。

"EF"所有名称为F的标记,并且是E的子标记(包括孙、重孙)。

"E>F"所有名称为F的标记,并且是E的子标记(不包括孙标记)。

"E+F"所有名称为F的标记,并且该标记紧跟是E的子标记。

"E~F"所有名称为F的标记,并且该标记前有一个E标记。

"E:has(F)"所有名称为E的标记,并且该标记包含F标记。

"E.C"所有名称为E的标记,属性类别为C,如果去掉E,则是类选择器。

"E#I"所有名称为E的标记,id为I,如果去掉E,则是id选择器。

"E[A]"所有名称为E的标记,并且设置了属性A。

"E[A=V]"所有名称为E的标记,并且属性A的值等于V。

"E[A^=V]"所有名称为E的标记,并且属性A的值以V开头。

"E[A$=V]"所有名称为E的标记,并且属性A的值以V结尾。

"E[A*=V]"所有名称为E的标记,并且属性A的值包含V。

  1. 管理选择结果2.1 size()get()index()

$("img").size()获取元素的个数。

$("img")[1]获取某个元素,等同于$("img").get(1)或者是$(“img”).eq(1)

$(“img”).eq(1).html()

get(index)方法可以获取指定位置的元素。

index(element)方法可以查找element所在的位置。

var iNum=$("li").index($("li[title=aaa]"));获取<li title="aaa">标记在整个li标记列表中所处的位置。

2.2 not()

$("img[alt]").add("img[title]"),选择所有设置了alttitleimg,等同于$("img[alt],img[title]")。

$("img[title]").not("[title*=iss]"),选择所有设置了titleimg,不包括title中包含iss的标记。

not()方法所接受的参数都不能包含特定的元素,只能是通用表达式。

$("li[title]").not("img[title*=iss]")为错误。

$("li[title]").not("[title*=iss]")才是正确的。

2.3filter()方法:

一种与not()一样,接受通用表达式。

$("li").filter("[title*=iss]")等同$("li[title*=iss]")

二:主要应用在jQuery语句的链接

$("div").addClass("myClass1").filter("[class*=middle]").addClass("myClass2")

所有的div中添加样式1,类中包含Middle的多添加样式2。

注意:在filter()的参数中,不能直接用(=)来匹配,值能使用(^=),($=)或者(*=)。

三:参数为函数,要求返回是布尔值。

2.4 find()

查询过滤新元素集合:

$("p").find("span"),在所有p中搜索span标记,等同于$("span",$("p"))