浅谈jQuery 选择器和dom操作(3)

wrap():将指定节点用其他标记包裹起来。该方法对于需要在文档中插入额外的结构化标记非常有用, 而且不会破坏原始文档的语义。如,“$("p").wrap("<div></div>");”。每个p元素被包裹到<div>中。

wrapAll():将所有匹配的元素用一个元素来包裹。而wrap()方法是将所有的元素进行单独包裹。如,“$("p").wrapAll("<div></div>");”,将所有p元素包裹到<div>中。

wrapInner():将每一个匹配的元素的子内容(包括文本节点)用其他结构化标记包裹起来。如,“$("p").wrapInner("<b></b>");”, <b>被每一个p元素包裹。

8.属性设置

attr():获取属性和设置属性。

当为该方法传递一个参数时,即为某元素的获取指定属性。如,“$("img").attr("src");”,获取img元素的src属性值。

当为该方法传递两个参数时,即为某元素设置指定属性的值。如,“$("img").attr("src","test.jpg");”,设置img元素的src属性值为test.jsp。

jQuery 中有很多方法都是一个函数实现获取和设置。如:attr(),html(),text(),val(),height(),width(),css()等。

removeAttr():删除指定元素的指定属性。

9.样式操作

可以通过“attr()”设置或获取css样式。

追加样式:addClass() 。如,“$("p").addClass("selected");”,向所有P元素中追加“selected”样式。

移除样式:removeClass() --- 从匹配的元素中删除全部或指定的class。如,“$("p").removeClass("selected");”,删除所有P元素中的“selected”。

切换样式:toggleClass() --- 控制样式上的重复切换。如果类名存在则删除它,如果类名不存在则添加它。如,“$("p").toggleClass("selected");”,所有的P元素中,如果存在“selected”样式就删除“selected”样式,否则就添加“selected”样式。

判断是否含有某个样式:hasClass() --- 判断元素中是否含有某个 class,有返回 true; 否则返回 false。如,“$(this).hasClass("protected")”,判断当前节点是否有“protected”样式。

10.设置或获取HTML、文本和值

读取和设置某个元素中的 HTML 内容: html(),该方法可以用于 XHTML,但不能用于 XML 文档。

读取和设置某个元素中的文本内容:text(),该方法既可以用于 XHTML 也可以用于 XML 文档。

读取和设置某个元素中的值:val(),该方法类似 JavaScript 中的 value 属性。对于文本框,下拉列表框,单选框该方法可返回元素的值(多选框只能返回第一个值)。如果为多选下拉列表框,则返回一个包含所有选择值的数组。

11.常用遍历节点的方法

取得匹配元素的所有子元素组成的集合:children()。该方法只考虑第一层子元素而不考虑任何后代元素。

取得匹配元素后面紧邻的兄弟元素的集合(但集合中只有一个元素):next()。

取得匹配元素前面紧邻的兄弟元素的集合(但集合中只有一个元素):prev()。

取得匹配元素前后所有的兄弟元素: siblings()。

12.CSS-DOM操作

获取和设置元素的样式属性:css()。

获取和设置元素透明度:opacity()属性。

获取和设置元素高度,宽度:height(),width()。在设置值时,若只传递数字,则默认单位是px。如需要使用其他单位则需传递一个字符串,例如 “$(“p:first”).height(“2em”)”;

获取元素在当前视窗中的相对位移:offset()。它返回的对象包含了两个属性:top,left。该方法只对可见元素有效。

五、JQuery中的事件

1.加载DOM

在页面加载完毕后,浏览器会通过 JavaScript 为 DOM 元素添加事件。在常规的 JavaScript 代码中,通常使用 window.onload 方法,在JQuery 中使用$(document).ready() 方法。JQuery中的简化写法“$()”。在window.onload中注册事件时,只能在一个window.onload体中注册。但使用JQuery,可以在多个$(document).ready()或$()中注册。

2.事件绑定

对匹配的元素对指定的事件绑定。
如,昨天我们在window.onload中绑定事件的方法:

“$("p").onclick(function(){
alert( $(this).text() );

});”    

在JQuery的$(document).ready()
中可以这样绑定:
“$("p").click(function(){ alert( $(this).text() );
});”

使用bind(),可以这样绑定:

$("p").bind("click", function(){
alert( $(this).text() );

});
 

3.合成事件

hover():模拟光标悬停时间。当光标移动到元素上时,会触发指定的第一个函数,当光标移出这个元素时,会触发指定的第二个函数。

如,悬停效果:
$("td").hover( function ()
{$(this).addClass("hover");},
function ()
{$(this).removeClass("hover");});

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzspww.html