用jQuery操作DOM

第八章:使用jQuery操作DOM
    jQuery对javascript中的DOM操作进行封装jQuery中的DOM操作
    1:样式操作
    2:内容及value的操作
    3:节点操作
    4:节点属性操作
    5:节点便利
    6:css Dom操作

样式操作
    设置单个样式css:  .css("属性名称","属性值")
    设置多个样式css:  .css({"属性名称1":"属性值1","属性名称2":"属性值2"})
    获取样式值:       .css("属性名称")
    添加类样式:       .addClass("属性名称")
    移出类样式:       .removeClass("属性名称")
    切换类样式:       .toggleClass("属性名称")
    判断元素是否包含指定的样式       .hasClass("类样式名称")

内容及value值操作
    获取元素中的html代码或文本代码   .html()
    设置元素中的html代码或文本代码   .html(”******“)
    获取元素中的文本内容            .text()
    设置元素中的文本内容            .text(”******“)
    元素失去焦点                  .blur()
    元素获得焦点                  .focus()
    获取元素的value属性值          .val()
    设置元素的value属性值          .val(”*******“)


节点操作
        获取和创建节点
        工厂函数                            $("")
        通过选择器获取节点:                  $("selector")
        把DOM节点转换为jQuery节点:          $("<p>")
        使用HTML字符串创建jQuery节点         $("<p>文字</p>")
 元素内部追加子节点
    将A节点追加到B节点里                      ul.append(li);
    将A节点追加到B节点里                      li.appendTo(ul);
    把A节点追加到B节点最前                    ul.prepend(li)
    把A节点追加到B节点最前                    li.prependTo(ul)
 元素外部插入到同辈节点
    把A节点插入到B节点之后                    B.After(A)
    把A节点插入到B节点之后                    A.insertAfter(B)
    把A节点插入到B节点之前                    B.before(A)
    把A节点插入到B节点之前                    A.insertBefore(A)
 删除节点
    删除h1节点              $("h1").remove()
    清空h2节点              $("h1").empty()
 替换节点
    将A节点替换为B节点        span.replaceWith(div)
    将A节点替换为B节点        div.replaceAll(span)
 克隆节点:
    克隆节点                $("selector").clone(true/false)
    复制节点    参数为true复制事件     false不复制



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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、付费专栏及课程。

余额充值