JQuery对DOM的操作【三】

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

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

2. 示例:获取"张三",获得"标题标签"的文本,获得mydiv的标签体内容





//设置/获取值、文本
$("#b1").click(function(){
    //得到文本
    //alert($("#mydiv").text());
    $("#mydiv").text("我们是米虫");
    //得到值
    //alert($("#myinput").val());
});
            
//设置/获取HTML和text
$("#b2").click(function(){
    //alert($("#mydiv").html());
    $("#mydiv").html("我们是害虫");
});

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

2. 示例:

  • 北京

  • 天津




//获取北京节点的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. 语法:
创建标签: $("
我们是米虫
")
append():  将一个元素追加成另一个元素的最后一个子元素(父子元素)
prepend():将一个元素追加成另一个元素的第一个子元素(父子元素)
before():将一个元素添加到另一个元素的前面(兄弟元素)
after(): 将一个元素添加到另一个元素的后面(兄弟元素)

2. 示例:

  • 北京

  • 天津

  • 重庆


 

  • 反恐

  • 星际


 
//将反恐放置到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"));
        });

//创建一个广州的节点,加到城市中:
  • 广州

  •   $("#b5").click(function(){
                $("#city").append($("
  • 广州
  • "));
            });


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

    2. 示例:

    • 北京

    • 天津

    • 重庆


    你可能感兴趣的:(前端,Jquery)