jquery对象以及方法总结

                                                             jquery对象以及方法总结

1.定义：jQuery对象就是通过jQuery包装DOM对象后产生的对象，jQuery对象无法使用DOM对象的所有方法。

2.window.onload与$(document).ready()的比较

window.onload:必须要等待网页中所有内容加载完毕后（包括图片）才能执行。

$(document).ready(function(){}):网页中所有DOM结构绘制完毕后就执行，可能相关联的东西没有加载完。

3.$是jQuery的简写形式，如$("#div1")与jQuery("#div1")是等价的。

4.jQuery对象转换成DOM对象

var $cr=$("#cr");//jQuery对象

var cr=$cr[0];//DOM对象

var cr=$cr.get(0);//DOM对象

var cr=document.getElementById("cr");//DOM对象

var $cr=$(cr);

5.jQuery方法总结

(1)创建元素节点

$(html)

如：var $li_1=$("<li title='香蕉'>你好</li>");

var $ul=$("ul");

$("ul").append($li_1);

(2)插入节点方法

append()     向每个匹配的元素内部追加内容。

appendTo()   将内容追加到匹配元素中去。

prepend()      向每个匹配的元素内部前置内容。

prependTo()   将内容追加到匹配元素内部前置去。

after()          在每个匹配元素之后插入内容，如：$("p").after("<b>你好</b>")

insertAfter()    如$("<b>你好</b>").insertAfter("p");

before()

insertBefore()

(3).删除节点

var $li=$("ul li:eq(1)").remove();//删除ul中第二个li，并返回其引用

detach()   与remove不同的是所有绑定的事件，附加的数据都会保留下来。

empty()  清空节点

(4).复制节点

clone(true)  true:为复制元素的同时复制元素中所绑定的事件，如：$(this).clone(true).appendTo("body");复制当前元素到body中。

(5)替换节点

replaceWith()  $("p").replaceWith("<strong>替换</strong>")    将<p></p>替换为<strong></strong>

replaceAll()    与replaceWith()对应

(6)包裹节点

$("strong").wrap("<b></b>"); //用b标签将strong标签包裹起来，每个strong上一个<b></b>   

$("strong").wrapAll("<b></b>")//将所有的strong标签用一个b标签包裹  

$("strong").wrapInner("<b></b>");将strong标签内的子内容用<b></b>标签包裹

(7)属性操作

attr()获取属性或者改变属性值  如$("p").attr("class","high");设置p的class为high，改变原来的class,第一次使用不会创建，则没有执行

removeAttr()删除属性

addClass()给元素追加class,第一次使用会创建class属性

removeClass()  如：$("p").removeClass("high");移出class名为high

toggleClass()如：$("p").toggleClass("high")第一次执行添加class为high第二次执行移除

$("p").toggle(function(){},function(){})在两个函数切换

$("p").hasClass(''another'')判断是否有Class为another

(8)设置和获取HTML.文本和值

html().类似于js的innerHTML属性。获取或设置html内容，如：$("p").html()获取p标签内的html内容。

text()类似js的innerText属性,获取或者设置文本内容。

val()类似于js的value属性

(9)移入与移出

focus()获得焦点,与js的onfocus()对应

blur()失去焦点,与js的onblur()对应

(10)遍历节点

children()获取子节点

next()取得匹配元素后面邻近的同辈元素

prev()取得匹配元素前面邻近的同辈元素

siblings()取得匹配元素前后所有的同辈元素

closest()取得最近的匹配元素，从自己开始，如果不匹配则向上查找父元素，$("ul").closest("div").css("color","red")找距离ul最近的div元素设置颜色

parent()从指定的父节点开始找，找到一个值停止

parents()从指定的父节点开始找，找到一个不停止，继续最后返回多个值

find();方法获得当前元素集合中每个元素的后代.

children();find()和 .children() 方法类似，不过后者只沿着 DOM 树向下遍历单一层级。

each(function(index,element));

         index:选择器的index位置。

          element当前元素也可用this选择器

（11）css-DOM

css()  $('p').css("color","red");改变p的颜色为红色。

height()   $('p').height(100);

width()

offset()获取元素在当前视窗的相对偏移，返回top,left两个属性

position()相对于最近的设置了position属性的元素的偏移

scrollTop()滚动条距离顶端的距离

scrollLeft()滚动条距离左端的距离