常用方法(Common Method)
类名
方法
addClass(className)
className是css类名,为该对象指定或增加一个类名,返回该对象。
removeClass(className)
className是css类名,移除参数指定的类名,返回该对象。
hasClass(className)
className是css类名,测试该对象是否含有参数指定的类名。
toggleClass(className)
className是css类名,该对象的类名在原来的类名与参数指定的类名之间切换,一般用在事件里。
//事件每触发一次,span的类名就会在spanColor和spanRelColor之间切换 var JQueryObj = $(‘input‘); var span = $(‘.spanColor‘); JQueryObj.click(function () { span.toggleClass(‘spanRelColor‘) }) .spanColor {color:Red;} .spanRelColor {color:Green;} <span class=‘spanColor‘>hello</span> <input type="button" value=‘click‘/>
表单
方法
val(x)
x是可选的值,获取或设置该对象的值,此方法用于获取或设置输入框、下拉列表、单选多选框的值。
距离
属性
pageY
鼠标对象的属性 获取鼠标离客户区顶部的高度。
pageX
鼠标对象的属性 获取鼠标离客户区左边的长度。
方法
offset
返回一个对象,包含了left和top属性,分别表示该对象离客户区的左边距和顶边距
$(‘div‘).offset( ).left
height
获取对象的高度。
innerHeight
获取对象的高度+补白。
outerHeight(x)
获取对象的高度+补白+边框。默认x=false,x=true时,获取对象的高度+补白+边框+边距。
scrollTop(x)
x是可选的表示距离的值,设置或获取出现滚动条的JQuery对象其滚动条从该对象顶部开始位置滚动了多少距离。
scrollLeft(x)
x是可选的表示距离的值,设置或获取出现滚动条的JQuery对象其滚动条从该对象左部开始位置滚动了多少距离。
position
返回一个对象,该对象包含了left和top属性,分别表示该对象离其父元素的左边距和顶边距。
样式
方法
css (x)
x是匿名对象,指定了css属性名与值的键值对,设置或获取该对象的css样式。
height(x)
设置或获取该对象的高度,获取的值不包括padding和border。x可以是高度值或匿名函数,匿名函数内部会自动生成两个参数index(该DOM对象在JQuery数组对象中的索引)和height。
width(x)
设置或获取该对象的宽度,获取的值不包括padding和border。x可以是高度值或匿名函数,匿名函数内部会自动生成两个参数index(该DOM对象在JQuery数组对象中的索引)和width。
innerHeight
获取该对象的内部高度,即不包括border的值,但包括padding的值。
innerWidth
获取该对象的内部宽度,即不包括border的值 但包括padding的值。
outerHeight(x)
获取第一个匹配元素的外部高度,包括border、padding。x是可选的布尔值,如果为true,获取会包括margin。
outerWidth(x)
获取第一个匹配元素的外部宽度,包括border、padding。x是可选的布尔值,如果为true,获取会包括margin。
节点
创建节点
$(htmlCode)
htmlCode是节点的html代码,节点必须小写,创建一个节点并将其包装为JQuery对象返回。
$(document).ready(function () { var html = "<div>hello</div>";//创建元素节点和文本节点 html += "<p/>";//单闭合节点可以写成<p/>或<p></p> var div = $(html); $(document.body).append(div)//插入body里 var div = $("<div id=‘box‘ style=‘width:200px;background:red‘>hello</div>") })
方法
获取
parent
获取该对象的父节点。
parents(x)
x是选择器,获取该对象的由x指定的祖先节点。
$("div").parents(".box")
attr(x,y)
x是属性名,y是可选的属性值,获取或设置该对象的属性值。
//使用匿名对象来同时设置多个属性 var JQueryObj = $(‘span‘); JQueryObj.attr ( { ‘title‘ : ‘spanBox‘ , ‘class‘ : ‘spanBox‘ } );
children (x ,y)
x是可选的子元素html标签名,y是可选的JQuery选择器。获取该对象全部的子节点或只获取参数指定的节点,返回一个JQuery对象。
var tr = $("#tr"); tr.children("td:eq(1)") //获取该tr的索引为1的td节点
next
获取紧靠该对象的下一个兄弟节点。
nextAll (x)
x是选择器,获取该对象后边的所有兄弟节点或x指定的节点。
$("#box").nextAll("a[id=10]")//选择ID为box的节点,然后选择它的兄弟节点,该兄弟节点的id=10
nextUntil(x)
x是选择器,获取该对象后边的每一个兄弟节点,直到遇到选择器给出的节点时停止(不包括选择器给出的节点)。
<body> <div id="box"></div> <div></div> <div></div> <div></div> <div id="4"></div> <script> $(document).ready(function () { var len = $("#box").nextUntil("div[id=4]").length; alert(len);//print 3 }) </script> </body>
prev
获取紧靠该对象的上一个兄弟节点。
prevAll(x)
x是选择器,获取该对象前边的所有兄弟节点或x指定的节点。
prevUntil(x)
x是选择器,获取该对象前边的每一个兄弟节点,直到遇到选择器给出的节点时停止(不包括选择器给出的节点)。
siblings(x)
x是选择器,获取该对象前后的所有兄弟节点。
插入
append(x)
在该对象所包含的后代节点的最后一个位置后插入x指定的节点。 x=html代码片段,x=纯文本,x=JQuery对象。
prepend(x)
将x指定的节点插入该对象所包含的后代节点的首位。x=html代码片段,x=纯文本,x=JQuery对象。
before(x)
在该对象之前插入x指定的节点。x=html代码片段,x=纯文本,x=JQuery对象。
after(x)
在该对象之后插入x指定的节点。x=html代码片段,x=纯文本,x=JQuery对象。
appendTo(x)
将该对象插入x节点所包含的末位。x=html代码片段,x=纯文本,x=JQuery对象。
<script> $(document).ready(function () { var div = $("<div style=‘background:red;width:100px;height:40px;‘></div>"); var p = $("<p>test</p>"); p.appendTo(div); div.appendTo(document.body); }) </script>
prependTo(x)
将该对象插入x节点所包含的首位。x=html代码片段,x=纯文本,x=JQuery对象。
insertBefore(x)
将该对象插入x节点之前。x=html代码片段,x=纯文本,x=JQuery对象。
insertAfter(x)
将该对象插入x节点之后。x=html代码片段,x=纯文本,x=JQuery对象。
wrap(x)
将该对象分别用参数指定的节点包裹。x=html代码片段,x=纯文本,x=JQuery对象。
var JQueryObj = $(‘span‘); JQueryObj.wrap(‘<b></b>‘); <span>hello</span> <span>hello</span> <!--得到结果如下:--> <b><span>hello</span></b> <b><span>hello</span></b>
wrapAll(x)
将该对象用参数指定的节点包裹。x=html代码片段,x=纯文本,x=JQuery对象。
var JQueryObj = $(‘span‘); JQueryObj.wrapAll(‘<b></b>‘); <span>hello</span> <span>hello</span> <!--得到结果如下:--> <b> <span>hello</span> <span>hello</span> </b>
wrapInner(x)
将该对象所包含的文本用x指定的节点包裹起来。x=html代码片段,x=纯文本,x=JQuery对象。
var JQueryObj = $(‘span‘); JQueryObj.wrapInner("$(‘<b></b>‘)"); <span>hello</span> <span>hello</span> <!--结果如下:--> <span><b>hello</b></span> <span><b>hello</b></span>
text(x)
x是文本,获取该元素所包含的文本(包括后代节点的文本),如果提供了x,则用x替换该对象所包含的所有内容(包括html标签) 并返回一个JQuery对象。
html(x)
x是html代码,获取该元素包含的所有后代的html)代码和文本(不包括自身)。如果提供了x,则用x替换该对象所包含的所有内容(包括html标签) 并返回一个JQuery对象。
查找
index(x)
x是选择器,在该对象里查找x过滤出的节点的索引。
var index = $(".tabMenuLinkBox li").index($("#firstLi"));
删除
remove
删除该对象,包括其后代节点并返回删除的JQuery对象。
//获取类名为fatherBox的节点,从中过滤出索引为奇数的span节点 var deleteJQueryObj = $(‘.fatherBox span:odd‘); //删除 deleteJQueryObj.remove();
empty
删除该对象的所有后代节点(不包括自身)并返回删除的JQuery对象。
removeAttr(x)
x是属性节点,删除该对象的属性节点并返回删除的JQuery对象。
替换
replaceWith(x)
将该对象替换为参数指定的节点,x=html代码片段,x=纯文本,x=JQuery对象。
replaceAll(x)
将参数指定的节点替换为该对象,x=html代码片段,x=纯文本,x=JQuery对象。
复制
clone(x)
克隆该对象,x是可选的布尔值,如果x=true,会额外克隆该对象已注册的事件。
迭代
each(x)
x是函数,在函数里迭代该对象。
$(document).ready(function () { var childNodes = $(document.body).children(); childNodes.each(function () { ADS.log.write(this.nodeName); }); });