jquery 操作DOM

最新推荐文章于 2022-04-22 11:56:18 发布

苦瓜老鬼

最新推荐文章于 2022-04-22 11:56:18 发布

阅读量203

点赞数

分类专栏： HTML

HTML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

DOM操作分类

DOM操作分为三类：

- - CSS-DOM：用于操作CSS，如element.style.color="green"
  - HTML-DOM：用于处理HTML文档，如document.forms
  - DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
- jQuery中的DOM操作

jQuery对JavaScript中的DOM操作进行了封装

jQuery中的DOM操作

1. 样式操作
2. 内容及Value值操作
3. 节点操作
4. 节点属性操作
5. 节点遍历
设置单个属性

css(name,value) ;

或

同时设置多个属性

css({name:value, name:value,name:value…}) ;

示例；$(this).css("border","5px solid #f5f5f5");

或

$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});

获取属性值

css(name)

<style>
        .dd{ border: 1px solid red; width: 50px; height: 70px;}
    </style>
    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        $(function(){
       // $("div").css("border","1px solid red");
//$("div").css({"border":"1px solid red","width":"50px","height":"70px"});
$("div").addClass("dd");
        });
function show(div1){
alert($(div1).css("border"));
}

    </script>
</head>
<body>

<div οnclick="show(this);">
    来打我把
</div>

追加样式

$(selector).addClass(class);

或 $(selector).addClass(class1 class2 … classN);//多个样式之间是空格

示例:

$("h2").mouseover(function() {

$("p").addClass("content border");

});

移除样式

$(selector).removeClass("class") ;

或 $(selector).removeClass("class1 class2 … classN ") ;

示例:

$("h2").mouseout(function() {

$("p").removeClass("text content");

});

切换样式

toggleClass()

模拟了addClass()与removeClass()实现样式切换的过程

语法:

$(selector).toggleClass(class) ;

示例:

$("h2").click(function() {

$("p").toggleClass("content border");

});

判断是否含指定的样式

hasClass( )方法来判断是否包含指定的样式

语法:

$(selector). hasClass(class);

示例:

$("h2").mouseover(function() {

if(!$("p").hasClass("content ")){

$("p").addClass("content ");

}

});

$("h2").mouseout(function() {

if($("p").hasClass("content ")) {

$("p").removeClass("content ");

}

});

内容操作

HTML代码操作

标签内容操作

属性值操作

获取元素中的html代码

$("div.left").html();

设置元素中的html代码

$("div.left").html("<div class='content'>…</div>");

标签内容操作

获取元素中的文本内容

$("div.left").text();

设置元素中的文本内容

$("div.left").text("<div class='content'>…</div>");

html( ) 和text( )方法的区别

html()设置可以包含文本和标签

text() 设置只能是文本

属性值操作

获取元素的value属性值

$(this).val();

设置元素的value属性值

$(this).val(value);

节点操作

jQuery中节点操作

查找节点（前面章节已讲）

创建节点

插入节点

删除节点

替换节点

复制节点

创建节点

var uu="<ul><li>美女</li></ul>";
$("#love").html(uu);

元素内部插入子节点

append(content)

$(A).append(B)表示将B追加到A中

如：$("ul").append($newNode1);

prepend(content)

$(A). prepend (B)表示将B前置插入到A中

如：$("ul"). prepend ($newNode1);

元素外部插入同辈节点

after(content)

$(A).after (B)表示将B插入到A之后

如：$("ul").after($newNode1);

before(content)

$(A). before (B)表示将B插入至A之前

如：$("ul").before($newNode1);

删除节点

remove()：删除整个节点 $(selector).remove([expr]);

empty()：清空节点内容 $(selector).empty();

替换节点

replaceWith()

示例:

var $newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");

$(".gameList li:eq(2)").replaceWith($newNode1);

clone()用于复制某个节点

$(selector).clone([includeEvents]) ;

参数ture或flase, true复制事件处理，flase时反之

属性操作

获取与设置元素属性

删除元素属性

attr()用来获取与设置元素属性

获取属性值

$(selector).attr([name]) ;

设置多个属性的值

$(selector).attr({[name1:value1]…[nameN:valueN]}) ;

示例:

$(".contain img").attr({width:"200",height:"80"});

删除元素属性

removeAttr()用来删除元素的属性

语法:$(selector).removeAttr(name) ;

示例删除元素的alt属性

$(".contain img").removeAttr("alt");

节点遍历

children([expr]) 只考虑子元素而不考虑所有后代元素

each

示例

查找DIV中的每个子元素。

HTML 代码:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:

$("div").children()

结果:

[ <span>Hello Again</span> ]

描述:

在每个div中查找 .selected 的类。

HTML 代码:

<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>

jQuery 代码:

$("div").children(".selected")

结果:

[ <p class="selected">Hello Again</p> ]

next([expr])返回后面那个紧邻的同辈元素

示例

描述:

找到每个段落的后面紧邻的同辈元素。

HTML 代码:

<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>

jQuery 代码:

$("p").next()

结果:

[ <p>Hello Again</p>, ]

描述:

找到每个段落的后面紧邻的同辈元素中类名为selected的元素。

HTML 代码:

<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>

jQuery 代码:

$("p").next(".selected")

结果:

[ <p class="selected">Hello Again</p> ]

  <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
    $(function(){

      /*   var uu="<ul><li>美女</li></ul>";
       $("#love").html(uu);*/
         // var love="<li>我儿子</li>";
        //内部插入
      // $("ul").prepend(love);
        //外部插入
      // var love1="<li>人民币</li>";
       // $("li:first").after(love1);
      // $("li:eq(1)").remove();
       // $("li:eq(1)").empty();
        $("li:eq(1)").replaceWith("<li>紫霞仙子</li>");
        $("li").click(function(){
            alert("我是li");
        });

        var li= $("li:eq(0)").clone(true);
        $("ul").append(li);

    });
   function addLove(){
       $("img").attr("src","images/1.png");
   }
    function deleteLove(){
        $("img").removeAttr("src");
    }

</script>
</head>
<body>
<button οnclick="addLove();">添加的女神</button>
<button οnclick="deleteLove();">干掉女神</button>
<div id="love"></div>
<ul>
    <li >朱茵</li>
    <li>珍珍</li>
    <li>人民币</li>
</ul>
<img >
</body>

苦瓜老鬼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery 操作DOM

DOM操作分类DOM操作分为三类： CSS-DOM：用于操作CSS，如element.style.color="green" HTML-DOM：用于处理HTML文档，如document.forms DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById() jQuery中的DOM操作 jQuery对JavaScript中的...
复制链接

扫一扫