JQuery对DOM的操作【三】

一.jQuery的DOM操作方法
所有方法的特点:既可以设置属性,又可以获取属性

二. html代码/文本/值:html()、text()、val()
1. 语法:
1) html() js对象中的innerHTML
2) text() 类似于js对象中innerText
3) val() 相于js对象中的value

2. 示例:获取"张三",获得"标题标签"的文本,获得mydiv的标签体内容
<input id="myinput" type="text" name="username" value="张三" /><br />
<div id="mydiv"><p><a href="#">标题标签</a></p></div>
<input type="button" id="b1" value="设置值、文本" />
<input type="button" id="b2" value="设置HTML" />
//设置/获取值、文本
$("#b1").click(function(){
    //得到文本
    //alert($("#mydiv").text());
    $("#mydiv").text("我们是米虫");
    //得到值
    //alert($("#myinput").val());
});
            
//设置/获取HTML和text
$("#b2").click(function(){
    //alert($("#mydiv").html());
    $("#mydiv").html("<font color='red'>我们是害虫</font>");
});

三. html属性操作:attr()、removeAttr()/   prop()、removeProp()
1. 语法:
1) attr()的作用:用于设置属性值,得到属性值
2) 选用attr()或是prop(): 如果要操作属性返回的是boolean类型,使用prop()
3) removeAttr()/removeProp(): 删除属性

2. 示例:
<ul>
<li id="gz" name="beijing" xxx="yyy">北京</li>
<li id="tj" name="tianjin">天津</li>
</ul>
<input type="checkbox" id="hobby"/>

//获取北京节点的name属性值
    $("#b1").click(function(){
        alert($("#bj").attr("name"));
    });

//设置北京节点的name属性的值为dabeijing
    $("#b2").click(function(){
        $("#bj").attr("name","dabeijing");
    });     

//新增北京节点的discription属性 属性值是didu
   $("#b3").click(function(){
        $("#bj").attr("discription","didu");
    });     


//删除北京节点的name属性
$("#b4").click(function(){
        $("#bj").removeAttr("name");
    });   

//获得hobby的选中状态
$("#b5").click(function(){
    //prop方法返回true/false
        alert($("#hobby").prop("checked"));
    });   


四. html的class属性操作:addClass()、removeClass()、toggleClass()
1. 语法:
1) 相当于:attr("class","类样式名")
2) addClass(类样式名)   添加一个类样式
3) removeClass(类样式名)  删除一个类样式
4) toggleClass(类样式名) 添加/删除类样式

五. html的样式的操作:css()
1. 语法:
1) 相当于:设置style样式,行内样式
2) 在CSS中和JS中样式名的写法:
"background-color"或"backgroundColor"

2. 示例:
// 采用属性增加样式(改变id=one的样式),样式名为second
$("#b1").click(function(){
    $("#one").attr("class","second");
});

// addClass
$("#b2").click(function(){
            $("#one").addClass("second");
        });
        
// removeClass
$("#b3").click(function(){
            $("#one").removeClass("second");
        });
        
// 切换样式
$("#b4").click(function(){
            $("#one").toggleClass("second");
        });
   
// 通过css()获得id为one背景颜色
$("#b5").click(function(){
           //alert( $("#one").css("background-color"));
           alert( $("#one").css("backgroundColor"));
        });
        
  // 通过css()设置id为one背景颜色为绿色
  $("#b6").click(function(){
           $("#one").css("background-color","green");
        });

六. html的创建和插入:append() 、prepend()
1. 语法:
创建标签: $("<div id='a'>我们是米虫</div>")
append():  将一个元素追加成另一个元素的最后一个子元素(父子元素)
prepend():将一个元素追加成另一个元素的第一个子元素(父子元素)
before():将一个元素添加到另一个元素的前面(兄弟元素)
after(): 将一个元素添加到另一个元素的后面(兄弟元素)

2. 示例:
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
  <ul id="love">
<li id="fk" name="fankong">反恐</li>
<li id="xj" name="xingji">星际</li>
</ul>
 
//将反恐放置到city的后面
$("#b1").click(function(){
    //父子关系
    $("#city").append($("#fk"));
});

//将反恐放置到city的最前面
$("#b2").click(function(){
            //父子关系
            $("#city").prepend($("#fk"));
        });

//将反恐放在天津前面
$("#b3").click(function(){
            //兄弟关系
            $("#tj").before($("#fk"));
        });

//将反恐放在天津后面
$("#b4").click(function(){
            //兄弟关系
            $("#tj").after($("#fk"));
        });

//创建一个广州的节点,加到城市中:<li id="gz" name="guangzhou">广州</li>
  $("#b5").click(function(){
            $("#city").append($("<li id=\"gz\" name=\"guangzhou\">广州</li>"));
        });


七. html元素的删除操作:remove(),empty()
1. 语法:
remove(): 删除自己,自杀
empty():删除所有的子元素,他杀

2. 示例:
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li id="tj" name="tianjin">天津</li>
<li id="cq" name="chongqing">重庆</li>
</ul>
<script type="text/javascript">
   //从city中删除<li id="bj" name="beijing">北京</li>节点
   $("#b1").click(function(){
       $("#bj").remove();
   });
   
   //删除city中所有的子节点,观察city本身有没有删除
    $("#b2").click(function(){
           $("#city").empty();
       });
</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值