一,核心
jQuery对象访问
1.each(callback)
以每一个匹配的元素作为上下文来执行一个函数
callback 对于每一个匹配的元素所要执行的函数
2.size()
jQuery 对象中元素的个数。
计算文档中所有图片数量
事例<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").size();.结果为2
3.length
jQuery 对象中元素的个数。
<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").length;结果2
4.selector
返回传给jQuery()的原始选择器
确定查询选择器
5.context
返回传给jQuery()的原始的DOM节点内容,即jQuery()的第二个参数。如果没有指定,那么context指向当前的文档(document)。
检测使用的文档内容
可以与selector一起使用,用于精确检测选择器查询情况。这两个属性对插件开发人员很有用。
6.get([index])
取得其中一个匹配的元素。 num表示取得第几个匹配的元素。
<img src="test1.jpg"/> <img src="test2.jpg"/>
$("img").get(0);[ <img src="test1.jpg"/> ]
选择文档中所有图像作为元素数组,$("img").get();
7.index([selector|element])
搜索匹配的元素,并返回相应元素的索引值,从0开始计数。
数据缓存
1.data([key],[value])
如果jQuery集合指向多个元素,那将在所有元素上设置对应数据。 这个函数不用建立一个新的expando,就能在一个元素上存放任何格式的数据,而不仅仅是字符串。
在一个div上存取名/值对数据
$("div").data("test", { first: 16, last: "pizza!" });
$("div").data("test").first //16;
$("div").data("test").last //pizza!;
2.removeData([name|list])
在元素上移除存放的数据
与$(...).data(name, value)函数作用相反
3.jQuery.data(element,[key],[value])
在元素上存放数据,返回jQuery对象。这是一个底层方法。你应当使用.data()来代替。
队列控制
1.queue(element,[queueName])
显示或操作在匹配元素上执行的函数队列、
2.dequeue([queueName])
从队列最前端移除一个队列函数,并执行他。
3.clearQueue([queueName])
清空对象上尚未执行的所有队列
如果不带参数,则默认清空的是动画队列。这跟stop(true)类似,但stop()只能清空动画队列,而这个可以清空所有通过 .queue() 创建的队列。
queue() 添加函数时,我们应当确保最终调用了 .dequeue(),这样下一个排队的函数才能执行。
$(document.body).click(function () {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
$("div").queue(function () {
$(this).addClass("newcolor");
$(this).dequeue();
});
$("div").animate({left:'-=200'},500);
$("div").queue(function () {
$(this).removeClass("newcolor");
$(this).dequeue();
});
$("div").slideUp();
});
属性
1.attr(name|properties|key,value|fn)
返回文档中所有图像的src属性值。
$("img").attr("src");
为所有图像设置src属性。
$("img").sttr("src","text.jpg")
2.removeAttr(name)
从每一个匹配的元素中删除一个属性
将文档中图像的src属性删除
<img src="test.jpg"/>.$("img").removeAttr("src");
3.prop(name|properties|key,value|fn)
获取在匹配的元素集中的第一个元素的属性值
选中复选框为true,没选中为false
$("input[type='checkbox']").prop("checked");
禁用页面上的所有复选框。
$("input[type='checkbox']").prop({disabled: true});
$("input[type='checkbox']").prop("checked", true);选中
4.removeProp(name)
用来删除由.prop()方法设置的属性集
CSS类
1.addClass(class|fn)
为每个匹配的元素添加指定的类名
2.removeClass([class|fn])
从所有匹配的元素中删除全部或者指定的类
3.toggleClass(class|fn[,sw])
如果存在(不存在)就删除(添加)一个类
HTML
1.html([val|fn])
取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。
2.text([val|fn])
取得所有匹配元素的内容。
3.val([val|fn|arr])
获得匹配元素的当前值。
CSS
1.css(name|pro|[,val|fn])
访问匹配元素的样式属性。
$("p").css({ color: "#ff0011", background: "blue" });
.位置
1.offset([coordinates])
获取匹配元素在当前视口的相对偏移。
2.position()
获取匹配元素相对父元素的偏移。
3.scrollTop([val])
获取匹配元素相对滚动条顶部的偏移。
此方法对可见和隐藏元素均有效
4.scrollLeft([val])
获取匹配元素相对滚动条左侧的偏移。
此方法对可见和隐藏元素均有效。
.尺寸
1.height([val|fn])
取得匹配元素当前计算的高度值(px)。
2.innerHeight()
获取第一个匹配元素内部区域高度(包括补白(padding)、不包括边框)。
3.outerHeight([options])
获取第一个匹配元素外部高度(默认包括补白和边框)。
此方法对可见和隐藏元素均有效。
二.选择器
基本
1.#id
根据给定的ID匹配一个元素。
$("#myDiv");
2.element
根据给定的元素名匹配所有元素
<div>DIV1</div>
$("div");
3.class
根据给定的类匹配元素。
<div class="myClass">div class="notMe"</div>
$(".myClass");
4.*
匹配所有元素
div>DIV</div>
<span>SPAN</span>
<p>P</p>
$("*")
结果[ <div>DIV</div>, <span>SPAN</span>, <p>P</p> ]
5.返回值:Array<Element(s)>selector1,selector2,selectorN
将每一个选择器匹配到的元素合并后一起返回。
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
$("div,span,p.myClass")
层级
1.ancestor descendant
ancestor 任何有效的选择器
descendant 用以匹配元素的选择器,并且它是第一个选择器的后代元素
找到表单中所有的 input 元素
$("form input")
2.parent > child
在给定的父元素下匹配所有的子元素
匹配表单中所有的子级input元素。$("form > input")
3.prev + next
匹配所有紧接在 prev 元素后的 next 元素
匹配所有跟在 label 后面的 input 元素
$("label + input")
prev任何有效选择器
next一个有效选择器并且紧接着第一个选择器
4.prev ~ siblings
匹配 prev 元素之后的所有 siblings 元素
siblings一个选择器,并且它作为第一个选择器的同辈
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
$("form ~ input")结果[ <input name="none" /> ]
基本
1.:first
获取第一个元素
$('li:first');
2.:last()
获取最后个元素
$('li:last')
3.:not(selector)
查找所有未选中的 input 元素
<input name="flower" checked="checked" />
$("input:not(:checked)")
4.:even
匹配所有索引值为偶数的元素,从 0 开始计数
查找表格的1、3、5...行(即索引值0、2、4...)
5.:odd
匹配所有索引值为奇数的元素,从 0 开始计数
查找表格的2、4、6行(即索引值1、3、5...)
6.:eq(index)
匹配一个给定索引值的元素
index从 0 开始计数
$("tr:eq(1)")
7.gt(index)
匹配所有大于给定索引值的元素
查找第二第三行,即索引值是1和2,也就是比0大
8.:lt(index)
匹配所有小于给定索引值的元素
查找第一第二行,即索引值是0和1,也就是比2小
9.:header
匹配如 h1, h2, h3之类的标题元素
给页面内所有标题加上背景色
$(":header").css("background", "#EEE");
10.:animated
匹配所有正在执行动画效果的元素
只有对不在执行动画效果的元素执行一个动画特效
$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);} );
11.:focus
触发每一个匹配元素的focus事件。
当页面加载后将 id 为 'login' 的元素设置焦点:
$("#login:focus");
内容
1.:contains(text)
匹配包含给定文本的元素
$("div:contains('John')")
2.:empty
匹配所有不包含子元素或者文本的空元素
3.:has(selector)
匹配含有选择器所匹配的元素的元素
$("div:has(p)").addClass("test");
4.:parent
匹配含有子元素或者文本的元素
$("td:parent")
:empty跟:parent相反
可见性
1.:hidden
匹配所有不可见元素,或者type为hidden的元素
$("tr:hidden") $("input:hidden")
2.:visible
匹配所有的可见元素
$("tr:visible")
属性
1.[attribute]
匹配包含给定属性的元素
查找所有含有 id 属性的 div 元素
$("div[id]")
2.[attribute=value]
匹配给定的属性是某个特定值的元素
查找所有 name 属性是 newsletter 的 input 元素
$("input[name='newsletter']").attr("checked", true);
3.[attribute!=value]
匹配所有不含有指定的属性,或者属性不等于特定值的元素
查找所有 name 属性不是 newsletter 的 input 元素
$("input[name!='newsletter']").attr("checked", true);
4.[attribute^=value]
匹配给定的属性是以某些值开始的元素
查找所有 name 以 'news' 开始的 input 元素
$("input[name^='news']")
5.[attribute$=value]
匹配给定的属性是以某些值结尾的元素
查找所有 name 以 'letter' 结尾的 input 元素
$("input[name$='letter']")
6.[attribute*=value]
匹配给定的属性是以包含某些值的元素
查找所有 name 包含 'man' 的 input 元素
$("input[name*='man']")
7.[selector1][selector2][selectorN]
复合属性选择器,需要同时满足多个条件时使用。
找到所有含有 id 属性,并且它的 name 属性是以 man 结尾的
$("input[id][name$='man']")
子元素
1.:nth-child
匹配其父元素下的第N个子或奇偶元素
$("ul li:nth-child(2)")
2.:first-child
匹配第一个子元素
$("ul li:first-child")
3.:last-child
匹配最后一个子元素
$("ul li:last-child")
4.:only-child
如果某个元素是父元素中唯一的子元素,那将会被匹配
<ul>
<li>Glen</li>
</ul>
$("ul li:only-child")
表单
1.:input
匹配所有 input, textarea, select 和 button 元素
查找所有的input元素,下面这些元素都会被匹配到。
$(":input")
2.:text
匹配所有的单行文本框
查找所有文本框
$(":text")
.......
表单对象属性
1.:enabled
匹配所有可用元素
查找所有可用的input元素
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:enabled")
结果[ <input name="id" /> ]
2.:disabled
匹配所有不可用元素
查找所有不可用的input元素
$("input:disabled")
3.:checked
匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)
查找所有选中的复选框元素
$("input:checked")
4.:selected
匹配所有选中的option元素
$("select option:selected")
浙公网安备 33010602011771号