jQuery 03 DOM操作
来源:互联网 发布:无法连接主机 端口23 编辑:程序博客网 时间:2024/06/14 06:19
一般,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);
});
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);
});
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>之后
});
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); //移动节点
});
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>元素节点后,将它从网页中删除。
});
$("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后,将它从网页中删除。
});
$(function(){
$("ul li").remove("li[title!=菠萝]"); //把<li>元素中属性title不等于"菠萝"的<li>元素删除
});
$("ul li").remove("li[title!=菠萝]"); //把<li>元素中属性title不等于"菠萝"的<li>元素删除
});
当某个节点用remove删除后,该节点的所有后代节点都同时被删除。这个方法返回被删除的节点,可以继续使用
$(function(){
var $li = $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后,将它从网页中删除。
$li.appendTo("ul"); // 把刚才删除的又重新添加到<ul>元素里
//所以,删除只是从网页中删除,在jQuery对象中,这个元素还是存在的,我们可以重新获取它
});
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");
});
$("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>元素节点后,清空此元素里的内容
});
$("ul li:eq(1)").empty(); // 找到第二个<li>元素节点后,清空此元素里的内容
});
复制节点
$(function(){
$("ul li").click(function(){
$(this).clone().appendTo("ul"); // 复制当前点击的节点,并将它追加到<ul>元素
})
});
$("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");
});
$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");
// 同样的实现: $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");
});
包裹节点
$(function(){
$("strong").wrap("<b></b>");//用<b>元素把<strong>元素包裹起来,每个<strong>元素单独包裹
});
$("strong").wrap("<b></b>");//用<b>元素把<strong>元素包裹起来,每个<strong>元素单独包裹
});
得到的结果<b><strong title="选择你最喜欢的水果.">你最喜欢的水果是?</strong></b>
$(function(){
$("strong").wrapAll("<b></b>"); //用<b>元素把所有<strong>元素包裹起来,如果<strong>之间有其他元素 也会被包裹进去
});
$("strong").wrapAll("<b></b>"); //用<b>元素把所有<strong>元素包裹起来,如果<strong>之间有其他元素 也会被包裹进去
});
得到的结果
<b><strong title="选择你最喜欢的水果.">你最喜欢的水果是?</strong>
<strong title="选择你最喜欢的水果.">你最喜欢的水果是?</strong>
</b>
$(function(){
$("strong").wrapInner("<b></b>"); //用<b>元素把<strong>元素的子内容包裹起来
});
$("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");
});
});
//设置<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") )
});
});
//获取样式
$("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("我被点击了!");
});
});
//获取<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("请输入邮箱地址");// 如果符合条件,则设置内容
}
})
});
$("#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"]);
});
});
//设置单选下拉框选中
$("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
<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 );
}
});
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>元素的唯一同辈元素
});
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");
})
});
$(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");
}
});
//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>元素的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>元素的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>元素的高度
$("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();
var scrollTop = $p.scrollTop();
var scrollLeft = $p.scrollLeft();
也可以传入参数,控制元素的滚动条到指定位置 $p.scrollTop("300");
- jQuery 03 DOM操作
- 【jQuery】jQuery操作DOM
- jQuery 的dom操作
- jQuery中的DOM操作
- jQuery中的DOM操作
- jQuery中的DOM操作
- jQuery DOM常见操作
- jQuery DOM操作
- jquery操作dom
- jQuery 的 DOM操作
- JQuery中的DOM操作
- Jquery Dom操作
- jQuery的DOM操作
- JQuery操作DOM
- Jquery操作DOM节点
- Jquery Dom操作
- JQuery的Dom操作
- JQuery操作DOM
- form表单提交时的target问题
- poj 1936 all in all
- 验证视图状态 MAC 失败,解决方法
- 错误描述:fatal error C1010:在查找预编译头时遇到意外的文件结尾。
- ARM中断
- jQuery 03 DOM操作
- Android基础知识学习——界面转换
- iOS: NSObject的方法cancelPreviousPerformRequestsWithTarget:selector:object:
- 最近在折腾VPS(持续完善)
- Unable to add window错误
- ibatis使用3
- haar——nosecascade
- IIS+WAMP配置php + asp开发环境
- What are TCHAR, WCHAR, LPSTR, LPWSTR, LPCTSTR