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()滚动条距离左端的距离