javascript之jquery DOM操作

最新推荐文章于 2024-02-28 16:51:01 发布
最新推荐文章于 2024-02-28 16:51:01 发布
阅读量2.1k 收藏
点赞数
分类专栏： jquery javascript javascript 文章标签： jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wcc526/article/details/17023731
版权
javascript 同时被 3 个专栏收录
16 篇文章 0 订阅
订阅专栏
jquery
11 篇文章 0 订阅
订阅专栏
javascript
11 篇文章 0 订阅
订阅专栏

查找节点

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 $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>的父节点

$("ul").append($li_1);        // 添加到<ul>节点中，使之能在网页中显示
$("ul").append($li_2);        // 添加到<ul>节点中，使之能在网页中显示
var $li_1 = $("<li title='香蕉'>香蕉</li>");    //创建一个<li>元素
//包括元素节点,文本节点和属性节点
//其中title='香蕉' 就是创建的属性节点
var $li_2 = $("<li title='雪梨'>雪梨</li>");     //创建一个<li>元素
//包括元素节点,文本节点和属性节点
//其中title='雪梨' 就是创建的属性节点  


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 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 $one_li = $("ul li:eq(1)");             //  获取<ul>节点中第二个<li>元素节点
var $two_li = $("ul li:eq(2)");             //  获取<ul>节点中第三个<li>元素节点
$two_li.insertBefore($one_li);    //移动节点

删除节点

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

var $li = $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。
$li.appendTo("ul");						// 把刚才删除的又重新添加到<ul>元素里
//所以，删除只是从网页中删除，在jQuery对象中，这个元素还是存在的，我们可以重新获取它

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

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

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


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

复制节点

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

$("ul li").click(function(){
        $(this).clone(true).appendTo("ul"); // 注意参数true
        //可以复制自己，并且他的副本也有同样功能。 
        })

替换节点

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

包裹节点

$("strong").wrap("<b></b>");//用<b>元素把<strong>元素包裹起来
$("strong").wrap("<b></b>");
$("strong").wrapAll("<b></b>");
$("strong").wrapAll("<b></b>");
$("strong").wrapInner("<b></b>");

属性操作

//设置<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");
        });

样式操作

//获取样式
$("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,文本和值

//获取<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("我被点击了!");
        });  
$("#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("请输入邮箱地址");// 如果符合条件，则设置内容
        } 
        })

$("#password").focus(function(){
        var txt_value =  $(this).val();
        if(txt_value=="请输入邮箱密码"){
        $(this).val("");
        } 
        });
$("#password").blur(function(){
        var txt_value =  $(this).val();
        if(txt_value==""){
        $(this).val("请输入邮箱密码");
        } 
        })
$("#address").focus(function(){         // 地址框获得鼠标焦点
        var txt_value =  $(this).val();   // 得到当前文本框的值
        if(txt_value==this.defaultValue){  
        $(this).val("");              // 如果符合条件，则清空文本框内容
        } 
        });
$("#address").blur(function(){		  // 地址框失去鼠标焦点
        var txt_value =  $(this).val();   // 得到当前文本框的值
        if(txt_value==""){
        $(this).val(this.defaultValue);// 如果符合条件，则设置内容
        } 
        })

$("#password").focus(function(){
        var txt_value =  $(this).val();
        if(txt_value==this.defaultValue){
        $(this).val("");
        } 
        });
$("#password").blur(function(){
        var txt_value =  $(this).val();
        if(txt_value==""){
        $(this).val(this.defaultValue);
        } 
        })
//设置单选下拉框选中
$("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 option").removeAttr("selected");  //移除属性selected
        $("#single option:eq(1)").attr("selected",true); //设置属性selected
        });
//设置多选下拉框选中
$("input:eq(1)").click(function(){
        $("#multiple option").removeAttr("selected");  //移除属性selected
        $("#multiple option:eq(2)").attr("selected",true);//设置属性selected
        $("#multiple option:eq(3)").attr("selected",true);//设置属性selected
        });
//设置单选框和多选框选中
$("input:eq(2)").click(function(){
        $(":checkbox").removeAttr("checked"); //移除属性checked
        $(":radio").removeAttr("checked"); //移除属性checked
        $("[value=check2]:checkbox").attr("checked",true);//设置属性checked
        $("[value=check3]:checkbox").attr("checked",true);//设置属性checked
        $("[value=radio2]:radio").attr("checked",true);//设置属性checked
        });

遍历节点树

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 $p1 = $("p").next();
alert( $p1.html() );  //  紧邻<p>元素后的同辈元素
var $ul = $("ul").prev();
alert( $ul.html() );  //  紧邻<ul>元素前的同辈元素
var $p2 = $("p").siblings();
alert( $p2.html() );  //  紧邻<p>元素的唯一同辈元素
$(document).bind("click", function (e) {
        $(e.target).closest("li").css("color","red");
        })
//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");
}

CSS-DOM

//获取<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);
        });



wcc526
关注
专栏目录
（22）使用DOM创建元素
虚心求学_一点一滴
07-18 1225
<!-- DOM创建元素，①创建li，②再插入相应的父级中去 -->  window.onload=function () { var oBtn=document.getElementById('btn1'); var oU1=document.getElementById('ul1'); var oTxt=document.getElementById('txt1')
动态创建DOM元素的三种方式
阿甘正传
09-16 9919
动态创建DOM元素的三种方式 document.write(); 不常用，因为容易覆盖原来的页面。 innerHTML = (); 用的比较多。绑定属性和内容比较方便。(节点套节点) document.createElement(); 用得也比较多，指定数量的时候一般用它。 1、方式一： document.write(); 这种方式的好处是：比较随意，想创建就创建，可以直接在wr...
DOM添加
weixin_46505015的博客
02-10 359
document.createElement（） 可以用于创建一个元素节点对象 ,它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回 eg:创建一个 li var li = document.createElement（"li"）; document.createTextNode（） 可以用来创建一个文本节点对象 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回 eg:创建广州文本节点 var gzText = document.cre
JS——DOM操作（普通添加li元素和文件碎片添加li元素）
weixin_30612769的博客
05-23 879
创建10000个li元素案例，把普通方法和碎片化方法进行比较 （1）普通添加li元素案例，代码如下图： 运行结果见链接： https://ytraister.github.io/js-text/js%E4%BB%A3%E7%A0%81%E6%BC%94%E7%A4%BA/JS%E2%80%94%E2%80%94%E6%99%AE%E9%80%9A%E6%B7%BB%E5%8A%A0l...
【JavaScript】DOM
自学前端的小菜鸡的博客
10-17 151
DOM（Document Object Model） - 文档对象模型，通过DOM可以来任意来修改网页中各个内容 - 文档 - 文档指的是网页，一个网页就是一个文档 - 对象 - 对象指将网页中的每一个节点都转换为对象 转换完对象以后，就可以以一种纯面向对象的形式来操作网页了 - 模型 - 模型用来表示节点和节点之间的关系，方便操作页面 节点（Node） - 节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点 - 虽然都是节点，但是节点的类型却是不同的 - 常用的节点
JavaScript之jQuery操作DOM详解
qq_47897078的博客
01-19 931
JavaScript之jQuery操作DOM jQuery的选择器很强大，用起来又简单又灵活，但是搞了这么久，我拿到了jQuery对象，到底要干什么？ 答案当然是操作对应的DOM节点啦！ 回顾一下修改DOM的CSS、文本、设置HTML有多么麻烦，而且有的浏览器只有innerHTML，有的浏览器支持innerText，有了jQuery对象，不需要考虑浏览器差异了，全部统一操作！ 修改Text和HTML jQuery对象的text()和html()方法分别获取节点的文本和原始HTML文本，例如，如下的HTML结
Educoder jQuery DOM操作
m0_65391975的博客
12-05 1910
Educoder jQuery DOM操作 第1关：jQuery获取内容和属性 第2关：jQuery设置内容和属性 第3关：jQuery添加元素 第4关：jQuery删除元素
Jquery操作DOM对象
最新发布
zhoutong2323的博客
02-28 554
HTML代码操作 演示案例 总结
jQuery DOM操作小结与实例
12-07
jQuery的这些DOM操作极大地简化了JavaScript中的DOM操作，提高了开发效率，并且减少了出错的可能性。理解并熟练运用jQuery的DOM操作是提升Web开发能力的关键步骤。通过实例实践，你可以更深入地理解这些概念，并将...
JQueryDOM之样式操作
10-17
以上就是本文对JQuery DOM操作之样式操作的知识点梳理。希望读者在阅读完本文后，能够掌握基本的JQuery样式操作方法，并能根据需要灵活地运用于实际开发中。如果有疑问或者需要进一步探讨，欢迎留言交流，作者也会...
jquery对象和javascript对象即DOM对象相互转换
12-09
在JavaScript的世界里，jQuery库为开发者提供了更便捷的DOM操作方式。jQuery对象和JavaScript对象（DOM对象）虽然在很多方面都是互补的，但它们在功能和使用上有着明显的区别。理解如何在这两者之间进行转换是编写...
jQuery DOM操作实例
01-19
因为它简化了javascript代码，更重要的是它还兼容基本上所有的浏览器，网页开发最头疼的就是这个了，所以jQuery也因此深受码农的喜爱，不过首先你得要记住它才能更好的使用它不是吗，过久了没用的属性方法也会淡忘的...
javascript之jQuery 打造个性网站
wcc526的专栏
12-01 3296
文件结构
javascript之jQuery 性能优化技巧
wcc526的专栏
12-01 2594
使用最新版本的jQuery类库 jQuery 1.7 重构了事件委托,性能节省了一半左右 使用合适的选择器
javascript之jQuery ajax 操作
wcc526的专栏
11-30 2368
ajax不足 1.浏览器的支持度不够,IE 5以后才支持 2.破坏浏览器的前进,后退功能 3.搜索引擎的支持度不同 4.开发调试工具缺乏
javascript 之基本知识
wcc526的专栏
12-01 2334
获取元素 getElementByTagName <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Shopping list p { color: yellow; font-family: "arial", s
javascript之jQuery 插件
wcc526的专栏
11-30 2325
Validation
javascript之jquery基础 选择器
wcc526的专栏
11-28 2207
前言 jQuery已经从其他javascript库中脱颖而出.查看http://www.google.com.hk/trends的结果
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值