JQuery DOM

JQuery DOM

1 内容操作

   1、文本内容的操作text（）

     作用：获取或设置文本内容 （等价于Dom操作中的innerText属性）

 

错误：jQuery没有导入

   2、Html（）：获取元素中的所有内容（html的标签）；

   3、val（）：数值获取或设置表单中的值；

   4、attr（）；获取或设置元素属性值；

2 元素的添加删除

   1、append（）：在元素的最后添加内容；

可以添加多个内容，这些内容可以是通过Html、jquery、DoM创建的；

$("#btnApp").click(function(){
    var txt1 ="<p>姓名：</p>";
    var txt2 =$("<p></p>").text("电话：")
    var txt3 =document.createElement("p");
    txt3.innerText ="住址：";
    $("#div1").append(txt1,txt2,txt3);
});

   2、prepend（）；在元素的最前面添加内容；

   可以添加多个内容，这些内容可以是通过Html、jQuery、DoM创建的；

3、after（）和before（）

 两组添加的区别：append（）和prepend（）添加后成了其子元素

                  After（）和befo（）添加成为其兄弟元素；

3元素删除

  1、remove（）；删除的是被选元素以及子元素

  2、empty（）；删除的是子元素

  3、remove（）；还有过滤删除的作用，可以指定删除的元素，里面的参数就是指定元素的名字；  代码如下：

$("#deDiv1").click(function(){
    $("p").remove(".p2");
})

这个代码的作用就是，删除所有p标签中class名p2的元素！

4 操作css类

里面的参数都是一样的都是class名

1、添加class类：addclass（）；

2、删除class类：removeclass（）；

3、切换class类：Toggleclass（）；

5操作css（）方法

$("#btnAdd1").click(function(){
    $("p").css("color","green");
});

Css里面传两个参数；第一个参数要设置属性名，第二个参数是设置的属性值；

$("p").css({"color":"green","font-size":"40px"});

Css也可以传多个属性，不同属性用“，”隔开，属性名和属性值用{}括起来；