jquery dom

Posted 2020-08-28 asimpleday

一、元素属性

1、attr(name)

获取元素的属性。

$(".box").attr("title");

 

2、attr(key,value);

设置元素单个属性。

$(".box").attr("title","嘻嘻");

 

3、attr({key1:value1,key2:value2});

设置元素多个属性。

$(".box").attr({"title":"嘻嘻","id":"go"});

 

4、attr(key,function(index));

通过绑定方法设置元素的属性。

$(".box").attr("title",function(){
      var a="嘻嘻";
      return a;  
})    

 

5、removeAttr(name);

删除元素的单个属性。

$(".box").removeAttr("title");

 

6、removeAttr(name1 name2);

删除元素的多个属性。

$(".box").removeAttr("title id");

 

二、元素内容

1、html()

获取元素的html内容。

<div class="box">
    <p class="one">我是第一段文字</p>
    <p class="two">我是第二段文字</p>
</div>

console.log($(".box").html());    //<p class="one">我是第一段文字</p>
        　　　　　　　　　　　　　　　　<p class="two">我是第二段文字</p>

 

2、html(value)

设置元素的html内容。

<div class="box">
    <p class="one">我是第一段文字</p>
    <p class="two">我是第二段文字</p>
</div>

$(".box").html("<p>我只是一个新建的</p>");

<div class="box">          //变成了这样
    <p>我只是一个新建的</p>          
</div>

 

3、text()

获得元素的文本内容。如果该元素有后代元素，则会把后代元素的文本内容一起获得。

<p class="one">我是第一段文字</p>
<p class="two">我是第二段文字</p>

console.log($(".one").text());  //我是第一段文字

 

4、text(value)

设置元素的文本内容。如果该元素有后代元素，则会被清除。

<p class="one">我是第一段文字</p>
$(".box").text("今天星期四");
<p class="one">今天星期四</p>   //现在变成了。

<div class="box">
    <p class="one">我是第一段文字</p>
    <p class="two">我是第二段文字</p>
</div>
$(".box").text("今天星期四");
<p class="one">今天星期四</p>      //子元素节点被清除了。

 

5、val()

获取value

$("input").val();

 

6、val(value);

设置vlaue

$("input").val("请输入您的用户名");

 

三、css

1、css(name,value);

设置单一的css样式。

$(".one").css("background-color","yellowgreen");

 

2、css({name1:value1,name2,value2})

设置多个css样式。

$(".one").css({
    "background-color":"yellowgreen",
    "border":"#000 solid 2px"
});

 

3、addClass(class)

增加一个class，注意，他还会保留原有的class

<p class="one">我是第一段文字</p>

$(".one").addClass("xixi");

<p class="one xixi">我是第一段文字</p>  //现在变成了。

 

4、toggleClass(class)

切换class，有则删除，无则添加。

$(".one").toggleClass("xixi");

 

5、removeClass(class);

删除一个class。

<p id="p" class="one xixi">我是第一段文字</p>
$("#p").removeClass("xixi");
<p id="p" class="one">我是第一段文字</p>   //已经删除了一个class

 

6、removeClass();

删除所有的class。

<p id="p" class="one xixi">我是第一段文字</p>
$("#p").removeClass();
<p id="p" class="">我是第一段文字</p>   //现在变成了

 

7、removeClass(class1 class2);

删除多个class，中间用空格隔开。

<p id="p" class="one xixi haha">我是第一段文字</p>
$("#p").removeClass("xixi haha");
<p id="p" class="one">我是第一段文字</p>  //现在变成了

 

四、节点

1、$(html)

创建节点。

var newP=$("<p>我只是一个新建的</p>"); //这样就创建了一个新节点，并把赋值个变量newP。

 

2、append(content)

插入节点，新建的节点 没有插入是看不到效果的，由父节点调用。

<div class="box">
    <p id="p" class="one">我是第一段文字</p>
</div>

var newP=$("<p>我只是一个新建的</p>");
$(".box").append(newP);

<div class="box">   //结构已经变了
    <p id="p" class="one">我是第一段文字</p>
    <p>我只是一个新建的</p>
</div>

这里还有一种情况，就是上面是我们新建的节点，如果要操作的是页面已有的节点呢。

<div class="box">
    <p class="one">我是第一段文字</p>
    <p class="two">我是第二段文字</p>
</div>

$(".box").append($(".one"));

<div class="box">        //其实就是移动了。        
    <p class="two">我是第二段文字</p>
    <p class="one">我是第一段文字</p>
</div>

 

3、appendTo(content)

这个方法就是颠倒了append的位置，可以理解为插入到，父节点放到括号内，由要插入的节点的调用。

newP.appendTo($(".box"));

 

4、append(function(index,html));

将一个函数作为append方法的参数。

<div class="box">
    <p class="one">我是第一段文字</p>
</div>

$(".box").append(function(){
    return $("<p>我只是一个新建的</p>");
});

<div class="box">         //结构变成了
    <p class="one">我是第一段文字</p>
    <p>我只是一个新建的</p>
</div>

 

5、