JQuery操作DOM

本文详细介绍了使用jQuery进行网页元素操作的方法,包括属性、内容、值、样式等的获取与设置,以及如何创建和删除节点元素。

一.属性的操作:

1.获取元素的属性:attr(property_name)

     例子:$("img").attr("src")

2.设置元素的属性: attr(property_name, property_value)

    例子:$("img).attr("src", "path");

3.一次性设置元素的多个属性值:attr({key0:value0,  key1:value1})

    例子:$("img").attr({src:"path", title:"tips"});

4.删除元素的属性:removeAttr(name)

   例子:$("img"). removeAttr("src");

二.元素内容的操作

1.html()

2.html(value)

3.text()

4.text(value)

无参数的是获取值, 有参数的是设置值

三.获取或设置元素的值。

1.val():获取元素的值。这个标签是用于有value属性的html标签。

2.val(value):设置元素值。

四.元素样式的操作

1.css(name, value)

例子: $("p").css("color", "red")

2.addClass(class class1 class2 ...)

例子:$("p").addClass("class1");  $("p").addClass("class1 class2")

3.toggleClass(class)

例子:toggleClass("class");

4.removeClass(class);

例子:removeClass("class")

5.removeClass()

删除所有类别

五.创建节点元素 

1.语法:$(html).

例子:

var div_ = $("<div title='jquery theory'>write less do more</div>");

$("body").append(div_);

六.删除元素
1.remove()
2.empty():清空后代元素


jQuery是一个流行的JavaScript库,它简化了对DOM元素的操作。下面是一些常见的jQuery操作DOM的示例: 1. 选择元素: 使用jQuery选择器可以方便地选择DOM元素。例如,要选择id为"myElement"的元素,可以使用以下代码: ```javascript var element = $("#myElement"); ``` 2. 操作样式: 使用jQuery可以轻松地添加、删除或修改元素的样式。例如,要将元素的背景颜色设置为红色,可以使用以下代码: ```javascript element.css("background-color", "red"); ``` 3. 操作内容: jQuery提供了许多方法来操作元素的内容。例如,要获取或设置元素的文本内容,可以使用以下代码: ```javascript var text = element.text(); // 获取文本内容 element.text("Hello, World!"); // 设置文本内容 ``` 4. 操作属性: 使用jQuery可以方便地获取或设置元素的属性。例如,要获取或设置元素的href属性,可以使用以下代码: ```javascript var href = element.attr("href"); // 获取href属性值 element.attr("href", "https://www.example.com"); // 设置href属性值 ``` 5. 添加和删除元素: 使用jQuery可以在DOM中添加或删除元素。例如,要在一个元素内部添加一个新的子元素,可以使用以下代码: ```javascript element.append("<div>New element</div>"); // 添加新的子元素 ``` 这些只是jQuery操作DOM的一些基本示例,jQuery还提供了许多其他强大的功能,如事件处理、动画效果等。你可以查阅jQuery的文档以了解更多信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值