使用jQuery操作DOM

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

1:样式操作
2:内容及value值操作
3:节点操作

样式操作

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

内容及value值操作

获取元素中的Html代码                 .html();
设置元素中的Html代码                 .html("<h1>我最帅!</h1>");
获取元素中的文本内容                  .text();
设置元素中的文本内容                  .text("我最帅!");
元素失去焦点:                       .blur();
元素获得焦点:                       .focus();
获取元素的value属性值                 .val();
设置元素的value属性值                 .val("设置的属性");

节点操作

获取或创建节点
    工厂函数                        $("")
    通过选择器获取节点:              $("selector");
    把DOM节点转换为jQuery节点:       $("<h1>");
    使用HTML字符串创建jQuery节点:    $("<p>文字</p>");
元素内部追加子节点
    to:到
    将li节点追加到ul节点里            ul.append(li);
    将li节点追加到ul节点里            li.appendTo(ul);
    把li节点追加到ul节点最前          ul.prepend(li);
    把li节点追加到ul节点最前          li.prependTo(ul);
元素外部插入同辈节点
    把li节点插入到ul节点之后          ul.after(li);
    把li节点插入到ul节点之后          li.insertAfter(ul);
    把li节点插入到ul节点之前          ul.before(li);
    把li节点插入到ul节点之前          li.insertBefore(ul);
删除节点:
    删除h1节点                      $("h1").remove();
    清空h2节点                      $("h2").empty();
替换节点:
    将A节点替换为B节点               A.replaceWith(B);
    将A节点替换为B节点               A.replaceAll(B);
克隆节点:
    克隆节点:                      $("selector").clone(true/false)
复制节点,参数为true复制事件,false则不复制事件。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值