您的位置：首页 > Web前端 > JQuery

jQuery 03 DOM操作

2015-06-04 00:00 731 查看
一般，DOM操作分为3个方面，DOM Core，HTML-DOM和CSS-DOM

DOM Core，并不专属于Javascript，任何一种支持DOM的语言都可以使用。Javascript中的getElementById(),getElementByTagName(),

getAttribute(),setAttribute()等都是DOM Core。

HTML-DOM，提供了更加简明的记号来描述各种HTML元素，如document.forms,element.src

CSS-DOM，针对CSS的操作。
element.style.color = 'red';

查找元素节点

$(function(){

var $para = $("
p"); // 获取<p>节点

var $li = $("
ul li:eq(1)"); // 获取第二个<li>元素节点

var p_txt = $para.
attr("title"); // 输出<p>元素节点属性title

var ul_txt = $li.
attr("title"); // 获取<ul>里的第二个<li>元素节点的属性title

var li_txt = $li.
text(); // 输出第二个<li>元素节点的text

alert(ul_txt);

alert(li_txt);

alert(p_txt);

});

创建节点

$(function(){

var $li_1 =

$("<li></li>"); // 创建第一个<li>元素

var $li_2 =

$("<li></li>"); // 创建第二个<li>元素

var $parent = $("ul"); // 获取<ul>节点。<li>的父节点

$parent.
append($li_1); // 添加到<ul>节点中，使之能在网页中显示

$parent.
append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);

});

插入节点

append向元素内部追加内容$ul.append("<li>雪梨</li>");
appendTo将内容追加到符合元素中$("<li>雪梨</li>").appendTo('ul');
prepend向元素内部前置内容
prependTo
after()在每个元素之后插入内容
insertAfter()
before()
insertBefore()
$(function(){

var $li_1 = $("<li title='香蕉'>香蕉</li>"); // 创建第一个<li>元素

var $li_2 = $("<li title='雪梨'>雪梨</li>"); // 创建第二个<li>元素

var $li_3 = $("<li title='其它'>其它</li>"); // 创建第三个<li>元素

var $parent = $("ul"); // 获取<ul>节点，即<li>的父节点

var $two_li = $("ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点

$parent.
append($li_1); // append方法将创建的第一个<li>元素添加到父元素的最后面

$parent.
prepend($li_2); // prepend方法将创建的第二个<li>元素添加到父元素里的最前面

$li_3.
insertAfter($two_li); // insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后

});

$(function(){

var $one_li = $("ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点

var $two_li = $("ul li:eq(2)"); // 获取<ul>节点中第三个<li>元素节点

$two_li.
insertBefore($one_li); //移动节点

});

删除节点

$(function(){

$("ul li:eq(1)").
remove(); // 获取第二个<li>元素节点后，将它从网页中删除。

});

$(function(){

$("ul li").
remove("
li[title!=菠萝]"); //把<li>元素中属性title不等于"菠萝"的<li>元素删除

});

当某个节点用remove删除后，该节点的所有后代节点都同时被删除。这个方法返回被删除的节点，可以继续使用

$(function(){

var $li = $("ul li:eq(1)").
remove(); // 获取第二个<li>元素节点后，将它从网页中删除。

$li.
appendTo("ul"); // 把刚才删除的又重新添加到<ul>元素里

//所以，删除只是从网页中删除，在jQuery对象中，这个元素还是存在的，我们可以重新获取它

});

$(function(){

$("ul li").click(function(){

alert( $(this).html() );

})

var $li = $("ul li:eq(1)").
detach(); // 获取第二个<li>元素节点后，将它从网页中删除。

$li.appendTo("ul");

});

detach和remove的区别是，使用detach之后再添加，节点可以保留原来的绑定事件和附加数据

empty可以清空节点内容

$(function(){

$("ul li:eq(1)").
empty(); // 找到第二个<li>元素节点后，清空此元素里的内容

});

复制节点

$(function(){

$("ul li").click(function(){

$(this).
clone().appendTo("ul"); // 复制当前点击的节点，并将它追加到<ul>元素

})

});

使用clone方法复制的节点并不具有任何行为，如果需要新元素也具有功能，可以用：

$(this).
clone(
true).appendTo("ul");

替换节点

replaceWith()作用是将所有匹配的元素都替换成指定的HTML或DOM元素,
replaceAll 的作用相同只是颠倒了操作对象。注意已绑定的事件在替换后会消失

$(function(){

$("p").
replaceWith("<strong>你最不喜欢的水果是?</strong>");

// 同样的实现： $("<strong>你最不喜欢的水果是?</strong>").
replaceAll("p");

});

包裹节点

$(function(){

$("strong").
wrap("<b></b>");//用<b>元素把<strong>元素包裹起来，每个<strong>元素单独包裹

});

得到的结果
<b><strong title="选择你最喜欢的水果.">你最喜欢的水果是?</strong>
</b>

$(function(){

$("strong").
wrapAll("<b></b>"); //用<b>元素把所有<strong>元素包裹起来，如果<strong>之间有其他元素 也会被包裹进去

});

得到的结果

<b><strong title="选择你最喜欢的水果.">你最喜欢的水果是?</strong>

<strong title="选择你最喜欢的水果.">你最喜欢的水果是?</strong>

</b>

$(function(){

$("strong").
wrapInner("<b></b>"); //用<b>元素把<strong>元素的子内容包裹起来

});

得到的结果<strong title="选择你最喜欢的水果.">
<b>你最喜欢的水果是?
</b></strong>

属性操作

attr()或全球和设置元素属性,
removeAttr()删除元素属性

$(function(){

//设置<p>元素的属性'title'

$("input:eq(0)").click(function(){

$("p").
attr("title","选择你最喜欢的水果.");

});

//获取<p>元素的属性'title'

$("input:eq(1)").click(function(){

alert( $("p").
attr("title") );

});

//删除<p>元素的属性'title'

$("input:eq(2)").click(function(){

$("p").
removeAttr("title");

});

});

样式操作

$(function(){

//获取样式

$("input:eq(0)").click(function(){

alert( $("p").
attr("class") );

});

//设置样式

$("input:eq(1)").click(function(){

$("p").
attr("class","high");

});

//追加样式

$("input:eq(2)").click(function(){

$("p").
addClass("another");

});

//删除全部样式

$("input:eq(3)").click(function(){

$("p").
removeClass();

});

//删除指定样式

$("input:eq(4)").click(function(){

$("p").
removeClass("high");

});

//重复切换样式

$("input:eq(5)").click(function(){

$("p").
toggleClass("another");

});

//判断元素是否含有某样式

$("input:eq(6)").click(function(){

alert( $("p").
hasClass("another") )

alert( $("p").
is(".another") )

});

});

设置和获取HTML,文本和值

$(function(){

//获取<p>元素的HTML代码

$("input:eq(0)").click(function(){

alert( $("p").
html() );

});

//获取<p>元素的文本

$("input:eq(1)").click(function(){

alert( $("p").
text() );

});

//设置<p>元素的HTML代码

$("input:eq(2)").click(function(){

$("p").
html("<strong>你最喜欢的水果是?</strong>");

});

//设置<p>元素的文本

$("input:eq(3)").click(function(){

$("p").
text("你最喜欢的水果是?");

});

//设置<p>元素的文本

$("input:eq(4)").click(function(){

$("p").
text("<strong>你最喜欢的水果是?</strong>");

});

//获取按钮的value值

$("input:eq(5)").click(function(){

alert(

$(this).val()
);

});

//设置按钮的value值

$("input:eq(6)").click(function(){

$(this).val("我被点击了!");

});

});

$(function(){

$("#address").
focus(function(){ // 地址框获得鼠标焦点

var txt_value =

$(this).val(); // 得到当前文本框的值

if(txt_value=="请输入邮箱地址"){

$(this).val(""); // 如果符合条件，则清空文本框内容

}

});

$("#address").
blur(function(){ // 地址框失去鼠标焦点

var txt_value =

$(this).val(); // 得到当前文本框的值

if(txt_value==""){

$(this).val("请输入邮箱地址");// 如果符合条件，则设置内容

}

})

});

$(function(){

//设置单选下拉框选中

$("input:eq(0)").click(function(){

$("#single").
val("选择2号");

});

//设置多选下拉框选中

$("input:eq(1)").click(function(){

$("#multiple").
val(["选择2号", "选择3号"]);

});

//设置单选框和多选框选中

$("input:eq(2)").click(function(){

$(":checkbox").
val(["check2","check3"]);

$(":radio").
val(["radio2"]);

});

});

<select id="single">

<option>选择1号</option>

<option>选择2号</option>

<option>选择3号</option>

</select>

<select id="multiple" multiple="multiple" style="height:120px;">

<option selected="selected">选择1号</option>

<option>选择2号</option>

<option>选择3号</option>

<option>选择4号</option>

<option selected="selected">选择5号</option>

</select>

<br/><br/>

<input type="checkbox" value="check1"/> 多选1

<input type="checkbox" value="check2"/> 多选2

<input type="checkbox" value="check3"/> 多选3

<input type="checkbox" value="check4"/> 多选4

<br/>

<input type="radio" value="radio1"/> 单选1

<input type="radio" value="radio2"/> 单选2

<input type="radio" value="radio3"/> 单选3

遍历节点

$(function(){

var $body = $("body").
children();

var $p = $("p").
children();

var $ul = $("ul").
children();

alert( $body.
length
); // <body>元素下有2个子元素

alert( $p.
length
); // <p>元素下有0个子元素

alert( $ul.length ); // <p>元素下有3个子元素

for(var i=0;i< $ul.length;i++){

alert(

$ul[i].innerHTML
);

}

});

$(function(){

var $p1 = $("p").
next();

alert( $p1.html() ); // 紧邻<p>元素后的同辈元素

var $ul = $("ul").
prev();

alert( $ul.html() ); // 紧邻<ul>元素前的同辈元素

var $p2 = $("p").
siblings();

alert( $p2.html() ); // 紧邻<p>元素的唯一同辈元素

});

closest 取得最近的匹配元素，首先检查当前元素是否匹配，如果匹配 则直接返回元素本身。如果不匹配则向上查找父元素。逐级向上，如果没找到返回一个空的jQuery对象。

$(function(){

$(document).bind("click", function (e) {

$(e.target).
closest("li").css("color","red");

})

});

$(function(){

//parent

$("input:eq(0)").click(function(){

resetStyle();

$('.item-1').
parent().css('background-color', 'red');

});

//parents

$("input:eq(1)").click(function(){

resetStyle();

$('.item-1').
parents('ul').css('background-color', 'red');

});

//closest

$("input:eq(2)").click(function(){

resetStyle();

$('.item-1').
closest('ul').css('background-color', 'red');

});

function resetStyle(){

$("*").removeAttr("style");

}

});

jQuery还有很多遍历节点的方法：
find(),filter(),nextAll(),prevAll()

CSS-DOM操作

CSS-DOM技术简单来说就是读取和设置style对象的各种属性。

$(function(){

//获取<p>元素的color

$("input:eq(0)").click(function(){

alert( $("p").
css("color") );

});

//设置<p>元素的color

$("input:eq(1)").click(function(){

$("p").
css("color","red")

});

//设置<p>元素的fontSize和backgroundColor

$("input:eq(2)").click(function(){

$("p").
css({"fontSize":"30px" ,"backgroundColor":"#888888"})

});

//获取<p>元素的高度

$("input:eq(3)").click(function(){

alert( $("p").
height() );

});

//获取<p>元素的宽度

$("input:eq(4)").click(function(){

alert( $("p").
width() );

});

//获取<p>元素的高度

$("input:eq(5)").click(function(){

$("p").
height("100px");

});

//获取<p>元素的宽度

$("input:eq(6)").click(function(){

$("p").
width("400px");

});

//获取<p>元素的的左边距和上边距

$("input:eq(7)").click(function(){

var offset = $("p").
offset();

var left =

offset.left;

var top =

offset.top;

alert("left:"+left+";top:"+top);

});

});

设置透明度可以用 $("p").
css("opacity","0.5");

获取元素的滚动条距顶端和左侧的距离

var $p = $("p");

var scrollTop = $p.scrollTop();

var scrollLeft = $p.scrollLeft();

也可以传入参数，控制元素的滚动条到指定位置 $p.scrollTop("300");
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  jQuery
相关文章推荐
新的分享
章节导航