jquery常用技术总结(4)_H5之家 - 中国HTML5教程资源分享第一站

parents( [expr] ) 取得一个包含着所有匹配元素的唯一祖先元素的元素集合（不包含根元素）。 prev( [expr] ) 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。 prevAll( [expr] ) 取得一个包含匹配的元素集合中每一个元素的之前所有同辈元素的元素集合。 siblings( [expr] ) 取得一个包含匹配的元素集合中每一个元素的所有同辈元素的元素集合。

andSelf( ) 将前一个匹配的元素集合添加到当前的集合中

取得所有div元素和其中的p元素，添加border类属性。取得所有div元素中的p元素，添加background类属性

$(”div”).find(”p”).andSelf().addClass(”border”);

$(”div”).find(”p”).addClass(”background”);

end( ) 结束当前的操作，回到当前操作的前一个操作

找到所有p元素其中的span元素集合，然后返回p元素集合，添加css属性

$(”p”).find(”span”).end().css(”border”, “2px red solid”);

JQuery Selectors 方法说明

基本选择器

$(”#myDiv”) 匹配唯一的具有此id值的元素

$(”div”) 匹配指定名称的所有元素 $(”.myClass”) 匹配具有此class样式值的所有元素

$(”*”) 匹配所有元素

$(”div,span,p.myClass”) 联合所有匹配的选择器

层叠选择器

$(”form input”) 后代选择器，选择ancestor

$(”#main >*”) 子选择器，选择parent的所有子节点$(”label + input”) 临选择器，选择prev的下一个临节点$(”#prev ~ div”) 同胞选择器，选择基本过滤选择器

$(”tr:first”)

$(”tr:last”) 匹配最后一个选择的元素

$(”input:not(:checked) + span”)从原元素集合中过滤掉匹配selector的所有元素（这里有是一个临选择器）

$(”tr:even”) 匹配集合中偶数位置的所有元素(从0开始)

$(”tr:odd”) (从0开始)

$(”td:eq(2)”) 匹配集合中指定位置的元素(从0开始)

$(”td:gt(4)”) 匹配集合中指定位置之后的所有元素(从0开始)

(从0开始)

$(”:header”) 匹配所有标题

匹配所有正在运行动画的所有元素

内容过滤选择器

$(”div:contains(’John’)”) 匹配含有指定文本的所有元素

$(”td:empty”) 匹配所有空元素(只含有文本的元素不算空元素)

$(”div:has(p)”) 从原元素集合中再次匹配所有至少含有一个selector的所有元素

$(”td:parent”) 匹配所有不为空的元素(含有文本的元素也算)

$(”div:hidden”) 匹配所有隐藏的元素，也包括表单的隐藏域

$(”div:visible”) 匹配所有可见的元素

属性过滤选择器

$(”div[id]”) 匹配所有具有指定属性的元素

$(”input[name=’newsletter’]”) 匹配所有具有指定属性值的元素

$(”input[name!=’newsletter’]”) 匹配所有不具有指定属性值的元素

$(”input[name^=’news’]”) 匹配所有指定属性值以value开头的元素

$(”input[name$=’letter’]”) 匹配所有指定属性值以value结尾的元素 $(”input[name*=’man’]”) 匹配所有指定属性值含有value字符的元素

$(”input[id][name$=’man’]”) 匹配同时符合多个选择器的所有元素

子元素过滤选择器

$(”ul li:nth-child(2)”),

$(”ul li:nth-child(odd)”), 匹配父元素的第n个子元素

$(”ul li:nth-child(3n +1)”)

$(”div span:first-child”) 匹配父元素的第1个子元素

$(”div span:last-child”) 匹配父元素的最后1个子元素

$(”div button:only-child”) 匹配父元素的唯一1个子元素

表单元素选择器

$(”:input”) 匹配所有的表单输入元素，包括所有类型的input, textarea, select 和 button $(”:text”) 匹配所有类型为text的input元素

$(”:password”) 匹配所有类型为password的input

$(”:radio”) 匹配所有类型为radio的input元素

$(”:checkbox”) 匹配所有类型为checkbox的input元素$(”:submit”) 匹配所有类型为submit的input元素

$(”:image”) 匹配所有类型为image的input元素$(”:reset”) 匹配所有类型为reset的$(”:button”) 匹配所有类型为button的input元素$(”:file”) 匹配所有类型为file的input元素

$(”:hidden”) 匹配所有类型为hidden的input元素或表单的隐藏域

表单元素过滤选择器

$(”:enabled”)

$(”:disabled”) 匹配所有不可操作的表单元素

$(”:checked”)

$(”select option:selected”) 匹配所有已选择的元素

css( properties ) 把一个”名/值对”对象设置为所有匹配元素的样式属性。

$(”p”).hover(function () {

$(this).css({ backgroundColor:”yellow”, fontWeight:”bolder” });

}, function () {

var cssObj = {

backgroundColor: “#ddd”,

fontWeight: “”,

color: “rgb(0,40,244)”

}

$(this).css(cssObj);

篇三：jquery心得、技巧、总结

Jquery

? . 开始：

$(document).ready(function() {}); 可缩写成：$(function(){});

选择器：引号中可以有多个一起选择

$(“#id”)要求id唯一

$(“.class”) class名对应的元素

$(“HTML标签”)所有标签元素对象

$(“*”)所有元素

$(“a b”)a元素下的所有子孙b元素

$(“a>b”)a元素下的所有子b元素

$(“a+b”)a元素后的下一个b元素等价于 $(“a”).next(“b”);

$(“a~b”)a元素后的所有b元素等价于 $(“a”).nextAll(“b”);

$(“#a”).siblings(“div”)#a元素的所有同辈div元素

过滤选择器：

:first 第一个元素

:last 最后一个元素

:not(selector) 除selector选择器对应的之外的所有元素

:even 索引为偶数的所有元素（索引从0开始）

dd 索引为奇数的所有元素

:eq(index) 索引等于index的元素

:gt(index) 索引大于index的元素

:lt(index) 索引小于index的元素

:header 所有标题元素(h1~h6)

:animated 正在执行动画的所有元素

:contains(text) 含有文本内容为text的元素

:empty 不包含子元素或文本的空元素

:has(selector) 含有selector选择器所匹配的元素的元素

:parent 含有子元素或者文本的元素

:hidden 所有不可见元素

:visible 所有可见元素

属性过滤选择器：多个可合并

[att] 拥有此属性的元素

[att=val] 属性值为val的元素

[att!=val] 属性值不等于val的元素

[att^=val] 属性值以val开始的元素

[att$=val] 属性值以val结束的元素

[att*=val] 属性值含有val的元素

子元素过滤选择器

:nth-child(index/even/odd/equation)每个父元素下的第index个子元素或者奇偶元素index从1开始也可以是2n…代表2的倍数

:first-child每个父元素的第一个子元素

:last-child每个父元素的最后一个子元素

nly-child每个父元素中只有一个子元素的子元素

表单对象属性过滤选择器

:enabled 所有可用元素

:disabled 所有不可用元素

:checked 所有选中元素（单选、复选）

:selected 所有选中元素（下拉列表）

表单选择器

:input 所有imput，textarea，select，button

:text 所有单行文本框

:password 所有密码框

:radio 所有单选框

:checkbox 所有多选框

:submit 所有提交按钮

:image 所有图像按钮

:reset 所有重置按钮

:button 所有按钮

:file 所有上传域

:hidden 所有不可见元素

? Object.filter(exp)筛选出与exp匹配的元素集合。exp可以是多个选择器的组合

交互处理: 两个function中来回切换调用

Object.hover(enter,leave):鼠标移上，移出事件 Object.toggle(fn1,fn2,…fnN):多次点击事件

例如：Object.toggle(function(){

//显示元素代码

},function(){

//隐藏元素代码

})

? 交互使用class样式：Object.toggleClass(“className”)重复交替使用class

Object.show([time]) time ms时间显示Object对应的元素(宽高和透明度同时)

Object.hide([time]) time ms时间隐藏Ojbect对应的元素(宽高和透明度同时)

若无时间则瞬间

Object.fadeIn();增加不透明度使显示，只改变元素的不透明度

Object.fadeOut();降低不透明度

Object.slideUp();元素由下到上缩短隐藏

Object.slideDown();元素由上至下延伸显示