【JavaScript】使用jQuery操作DOM

最新推荐文章于 2024-05-16 04:04:41 发布

ProBeginner

最新推荐文章于 2024-05-16 04:04:41 发布

阅读量2.3k

点赞数

分类专栏： JavaScript笔记文章标签： javascript jquery css 遍历 dom

本文链接：https://blog.csdn.net/mjianglei/article/details/53353465

版权

JavaScript笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本章需要掌握的技能目标

1、使用jQuery操作css样式。
2、使用jQuery操作文本与属性值内容
3、使用jQuery操作DOM节点
4、使用jQuery遍历DOM节点
5、使用jQuery操作CSS-DOM

一、样式操作

1、直接样式操作
    语法：
    css(name,value);   //设置单个属性
    css({name:value,name:value,....}) //同时设置多个属性，大括号包裹、冒号分割name与value，不同属性之间用逗号分隔


2、追加样式和移除样式
    语法：
    addClass("class") //追加单个样式
    addClass("class1 class2 ...")  //追加多个样式，同空格分隔

3、移除样式
    语法：
    removClass("class")  //移除单个样式
    removClass("class1 class2") //移除多个样式，有空格分隔

//示例
<script type="text/javascript">
$(document).ready(function(){

//触发button的单击事件时，移除p标签的intro样式
  $("button").click(function(){
    $("p").removeClass("intro");
  });
});
</script>
<style type="text/css">
.intro
{
font-size:120%;
color:red;
}
</style>
</head>

<body>
<h1 id="h1">This is a heading</h1>
<p class="intro">This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>从第一个段落中删除类</button>
</body>

4、切换样式

    使用toggle()方法可以切换元素的可见状态，而使用toggleClass()方法可以切换不同元素的类样式。
    语法：
    toggleClass("class");


//示例
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){

    //触发单击事件时，切换为main样式，再次单击，回到原来样式
    $("p").toggleClass("main");
  });
});
</script>
<style type="text/css">
.main
{
font-size:120%;
color:red;
}
</style>
</head>

<body>
<h1 id="h1">This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">切换段落的 "main" 类</button>

内容操作

1、HTML代码操作

    语法：
    html(["content"]);

    定义和用法
    html() 方法返回或设置被选元素的内容 (inner HTML)。
    如果该方法未设置参数，则返回被选元素的当前内容。

    返回元素内容
    当使用该方法返回一个值时，它会返回第一个匹配元素的内容。

    //示例
    <script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    //未设置参数，返回p元素的值：This is a paragraph.
    alert($("p").html());
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">改变 p 元素的内容</button>
</body>

设置元素内容
当使用该方法设置一个值时，它会覆盖所有匹配元素的内容。

//示例
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    //所有p元素的值被修改为 Hello World!
    $("p").html("Hello <b>world!</b>");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">改变 p 元素的内容</button>
</body>

使用函数来设置元素内容

使用函数来设置所有匹配元素的内容。

    语法：
    $(selector).text(function(index,oldcontent))
    描述：
    必需。规定返回被选元素的新文本内容的函数。
    index - 可选。接受选择器的 index 位置。
    oldcontent- 可选。接受选择器的当前内容。

    //示例
<script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $("p").html(function(n,oldcontent){

        //可以获得选择器的当前内容（这是一个段落、这是另一个段落）
         alert(oldcontent); 

        //返回新的内容（这个p元素的index是0，这个p元素的index是1）
        return "这个 p 元素的 index 是：" + n;
        });
      });
    });
</script>
</head>
<body>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <button>改变 p 元素的内容</button>
</body>

2.标签内容操作
    语法：text([content]);

    text() 方法设置或返回被选元素的文本内容。（content为空时返回，有值时设置）

a.返回文本内容

当该方法用于返回一个值时，它会返回所有匹配元素的组合的文本内容（会删除 HTML 标记）。

//示例
$(document).ready(function(){
  $(".btn1").click(function(){

    //返回所有匹配的p标签内容（This is a paragraph.、This is another paragraph.）
    alert($("p").text());
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">获得 p 元素的文本内容</button>
</body>

设置文本内容
当该方法用于设置值时，它会覆盖被选元素的所有内容。

//示例
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
   //将所有匹配的p元素的值设置为Hello world!
    $("p").text("Hello world!");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">改变所有 p 元素的文本内容</button>
</body>

htnl()与text()方法的区别
语法格式	参数说明	功能描述
html()	无参数	用于获取第一个匹配元素的HTML内容或文本内容
html([content])	content参数为元素的HTML内容	用于设置所有匹配元素的HTML内容或文本内容
text()	无参数	用于设置所有匹配元素的文本内容
text([content])	content参数为元素的文本内容	用于设置所有匹配元素的文本内容

3.属性值操作

在jQuery中，除了可以使用html()方法和text()方法获取与设置元素内容外，还提供了获取元素value属性值的方法val()。该方法非常常用，多用于操作表单的<input>元素。

语法：
    val([value]);

val() 方法返回或设置被选元素的值。
元素的值是通过 value 属性设置的。该方法大多用于 input 元素。
如果该方法未设置参数，则返回被选元素的当前值。
1、返回 Value 属性
返回第一个匹配元素的 value 属性的值。

//示例
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    //返回第一个匹配元素的value属性的值：Bill
    alert($("input:text").val());
  });
});
</script>
</head>
<body>
Firstname: <input type="text" name="fname" value="Bill" /><br />
Lastname: <input type="text" name="lname" value="Gates" /><br /><br />
<button>获得第一个文本域的值</button>
</body>

2、设置 Value 属性的值

//示例
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    //将value值设置为Bill Gates
    $("input:text").val("Bill Gates");
    //意外发现：input:text 等同于 input[type=text]
    //$("input[type=text]").val("Bill Gates");
  });
});
</script>
</head>
<body>
<p>Name: <input type="text" name="user" /></p>
<button>设置文本域的值</button>
</body>

3.使用函数设置 Value 属性的值

//示例
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("input:text").val(function(n,c){ //n是获取元素的index，c是返回值
      return c + " Gates";
    });
  });
});
</script>
</head>
<body>
<p>Name: <input type="text" name="user" value="Bill" /></p>
<button>设置文本域的值</button>
</body>

htnl()、text()、val()共同点：

1、都包含无参方法，等于无参方法时，返回各自的value

2、都包含有参方法，等于有参方法时，设置各自的value

3、都可以用函数设置value，其中，函数包含两个值，index和oldvalue，index是匹配元素的索引，oldvalue是匹配元素当前的value，都可以省略。

二：节点与属性操作

1:节点操作

在jQuery中，节点操作主要分为查找、创建、插入、删除、替换和复制6种操作方式。其中，查找、创建、插入、删除和替换节点是日常开发中使用最多，也是最重要的。


a、查找节点

    想要对节点进行操作，即增、删、改和复制，首先必须找到要操作的元素。
    所以，查找的语法示例：
    $("h1").hide();   
    查找h1的元素，并将其隐藏。
    其实，查找元素，就是通过选择器获取元素。


b、创建节点元素

    在之前的文章中，讲解过函数$()。该函数就是用于将匹配的DOM元素转换为jQuery对象的，它就好像一个零件的生产工厂，所以被形象地称为工厂函数。
    $()语法：
    $(selector) //选择器。使用jQuery选择器匹配元素
    $(element)  //DOM元素。以DOM元素来创建jQuery对象
    $(html)     //HTML代码，使用HTML字符串创建jQuery对象

HTML代码创建jQuery对象示例：
    var $newNode1 = $("<li></li>")  //创建空的li元素节点
    var $newNode2 = $("<li>HTML</li>") //创建包含文本的li元素节点
    var $newNode3 = $("<li title="标题">HTML</li>") //创建包含文本与属性的li元素节点



c、插入节点

插入节点方法
插入方式	方法	描述
内部插入	appen(content)	向所选的元素内部插入内容，即(A).append(B)表示将B追加到A中。如 (“ul”).append($newNode2);追加的位置在元素的最后
	appendTo(content)	把所选择的元素追加到另一个指定的元素集合中，既(A).appendTo(B)，表示把A追加到B中，如($newNode2).appendTo(“ul”); 与append的唯一区别是语法顺序相反
	prepend(content)	向每个选择的元素内部前置内容，即(A).prepend(B)表示将B追加到A中，如(“ul”).perpend($newNode2);
	prependTo(content)	将所有匹配元素前置到指定元素中。该方法仅颠倒了常规prepend()插入元素的操作，即$(A).perpendTo(B)表示将A前置到B中，如(newNode2).prependTo(“ul”)
外部插入	after(content)	在每个匹配元素之后插入内容，即(A).after(B)表示将B插入到A之后，如(“ul”).after($newNode2);
	insertAfter(content)	将所有匹配的元素插入到指定元素的后面。该方法颠倒了常规after()插入元素的操作，$(A).insertAfter(B)表示将A插入到B之后，如(newNode2).insertAfter(“ul”);
	before(content)	向所选择的元素外面前面插入元素，即$(A).before(B)表示将B插入至A之前，如(“ul”).before(newNode2);
	insertBefore(content)	将所匹配的元素插入到指定元素的前面，该方法仅是颠倒了常规before()插入元素的操作，即$(A).insertBefore(B)表示将A插入至B之前，如(newNode2).insertBefore(“ul”);

注意：每个语句之前都需要添加$符号。

d、删除节点
    语法：(selector).remove([expr]);
    参数expr为可选参数，如果接受参数，则该参数为筛选元素的jQuery表达式，通过该表达式获取指定元素，并进行删除。

    示例：$("ul li:eq(1)").remove();

    定义和用法
    remove() 方法移除被选元素，包括所有文本和子节点。
    该方法不会把匹配的元素从 jQuery 对象中删除，因而可以在将来再使用这些匹配的元素。
    但除了这个元素本身得以保留之外，remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与 detach() 不同。

更多解说，查看这里

语法：$(selector).empty()
empty() 方法从被选元素移除所有内容，包括所有文本和子节点。

更多解说，查看这里

语法：$(selector).detach();
detach() 方法移除被选元素，包括所有文本和子节点。
这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。
detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。

更多解说，查看这里

e、替换节点
使用的方法：
    replaceWith()方法和replaceAll()方法
示例：
    $("ul li:eq(1)").replaceWith($newNode2);
    $($newNode2).replaceAll("ul li:eq(1)");

    两种方法的作用相同，只是颠倒了顺序。

f、复制节点

    语法：$(selecrot).clone([includeEvents]);
    includeEvents为可选值，为布尔值，规定是否复制元素的所有事件处理。true复制，flase不复制。

//示例
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    //复制第一个p元素，包括事件处理，然后添加到body中。
    $("body").append($("p:first").clone(true));
  });
  $("p").click(function(){
    $(this).animate({fontSize:"+=1px"});
  });
});
</script>
</head>
<body>

<p>点击本段落可以增加文本的大小。事件处理器同样被复制到新的段落。</p>
<button>复制每个 p 元素，然后追加到 body 元素</button>

</body>

三：节点遍历

a.在jQuery中，遍历子元素的方法只有一个，即children()方法。
语法：$(childred).children([expr])

expr可选，用于过滤子元素的表达式

children() 方法返回被选元素的所有直接子元素。

该方法只会向下一级对 DOM 树进行遍历。
示例：
//p.c用于过滤子元素
$("div").children("p.c").css({"color":"red","border":"2px solid red"});

更多信息，查看这里1，查看这里2

b.遍历同辈元素

遍历同辈元素的方法说明
方法	描述
next([expr])	用于获取紧邻匹配元素之后的元素。参数expr可选，用于过滤同辈元素的表达式，如$(“li:eq(1)”).next().css(“color”,”red”);
prev([expr])	用于获取紧邻匹配元素之前的元素。参数expr可选，用于过滤同辈元素的表达式，如$(“li:eq(1)”).prev().css(“color”,”red”);
siblings([expr])	用于获取紧邻匹配元素前面和后面的所有同辈元素。参数expr可选，用于过滤同辈元素的表达式，如$(“li:eq(1)”).siblings().css(“color”,”red”);

c.遍历前辈元素
用与遍历父辈元素的方法主要有parent()和parents()。

parent()方法和parents()方法的参数说明
方法	描述
parent([selector])	参数可选。获取当前匹配元素集合中每个元素的父级元素
parents([selector])	参数可选。获取当前匹配元素集合中每个元素的祖先元素

注意：除了以上介绍的节点遍历方法之外，jQuery中还有许多遍历的方法，如each()、find()、filter()等，查看更多

三：CSS-DOM操作

CSS-DOM相关操作方法说明
参数	描述	示例
css()	设置或返回匹配元素的样式属性	$(“#box”).css(“color”,”red”)
heigh([value])	参数可选。设置或返回匹配元素的高度。如果没有规定长度单位，则使用默认px作为单位	$(“#box”).heigh(180)
width([value])	参数可选。设置或返回匹配元素的宽度。如果没有规定长度单位，则使用默认px作为单位	$(“#box”).width(180)
offset([value])	返回以像素为单位的top和left坐标。此方法仅对可见元素有效	$(“#box”).offset()
offsetParent([value])	返回最近的已定位的祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素	$(“#box”).offsetParent()
scrollLeft([position])	参数可选。设置或返回匹配元素相对滚动条左侧的偏移	$(“#box”).scorllLeft(20)
scrollTop([posttion])	参数可选。设置或返回匹配元素相对滚动条顶部的偏移	$(“#box”).scrollTop(120)

此外，注意，选取元素的高度除了可以使用height()方法之外，还能使用css()方法，其获取高度值的代码为$("#box").css("height")。两者的区别在于使用css获取元素高度与样式设置有关，可能会得到“auto”，也可能得到“60px”之类的字符串；而height()方法获取的高度值则是元素在页面中的实际高度，与样式的设置无关，且不带单位。获取元素宽度的方式也是同理。

更多介绍，查看这里

完。

以上内容来源与课本与w3School，如有错误，欢迎指出。

ProBeginner

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】使用jQuery操作DOM

本章需要掌握的技能目标1、使用jQuery操作css样式。2、使用jQuery操作文本与属性值内容3、使用jQuery操作DOM节点4、使用jQuery遍历DOM节点5、使用jQuery操作CSS-DOM
复制链接

扫一扫

专栏目录