JQuery——DOM操作总结

原创 2015年07月09日 21:35:45

一.创建节点
1.创建元素

$( function(){
    var $div = $("<div></div>");   //创建div元素
    $("body").append($div);  //添加到body下
})

2.输入文本

$(function(){
    var $div = $("<div>DOM</div>");
    $("body").append($div);
})
//js下用
var txt = document.createTextNode("DOM");
div.appendChild(txt);...执行效率高

3设置属性

$(function(){
    var $div = $("<div title="盒子"></div>");
    $("body").append($div);
})
//可见jQuery简便,但效率低

二.插入内容
1.内部:

  • append():每个元素内部加内容content
  • appendTo():append用法的颠倒
  • prepend():每个元素内部前置内容
  • prependTo():prepend的颠倒

2.外部:

  • after():元素后面
  • before():元素前面
  • insertAfter():所有元素插入到另一个指定的元素集合后面
  • insertBefore():。。。前面

3.删除:

  • remove():从DOM中删除元素(不保留数据)
  • empty():删除所有匹配的元素的子元素
  • detach():从DOM中删除所有匹配元素(会保留数据,再移回DOM时用这个)

三.克隆内容

$(function(){
    $("b").click(function(){
        $(this).toggleClass("off");
    });
    $("b").clone(true).insertAfter("p");
})
//clone(true)复制<b>标签,并把它复制到<p>后,同时保留该标签默认的事件处理函数

四.替换内容

$(function(){
    $("button").click(function(){
        $(this).replaceWith("<div>"+$(this).text()+"</div>");
    });
})
//把当前按钮换成div元素+按钮
//replaceAll和replaceWith操作相反

五.包裹内容
1.外包:

$(function(){
    $("a").wrap("<li></li>");
})_
//<a>被一个<li>元素包裹

2.内包:

$(function(){
    $("a").wrap("<li></li>");
    $("body").wrapInner("<ul></ul>");
})_
//<a>被一个<li>元素包裹

3.卸包:

$(function(){
    $("button").toggle(function(){
         $("a").wrap("<li></li>");
    },function(){
            $("a").unwrap();
    });
})

六.设置属性
1.prop

$(function(){
    $("input").prop({
        disabled:true
     });
})
//prop大多用于设置disabled和checked等是或否的属性

2.attr

$(function(){
    $("img").attr("src",function(index){
        return "images/icon("+(index+1)".png";
    })
})

3.删除属性:
removeProp、removeAttr

七.类操作

  • addClass()、removeClass()
  • 切换类:toggleClass(…)
  • 判断类:hasClass(…)

八.读写文本和值

1.读写html

$(function(){
    var s = $("div").html();
    $("p").html(s);
})
//s保存div的值,再传给p

2.读写文本
(function(){  
    var s =
(“div”).text();
$(“p”).text(s);
})
//访问div内容,写入到p中

3.读写值

$(function(){
    $("input").focus(function(){
         if($(this).val()=="请输入文本")$(this).val("");
    })
})
//如果文本的值是。。。就设为空“”

九.定位:

offset就对定位
position相对定位

var o1 = $("div").eq(0).position();
//获取o1的相对偏移位置
版权声明:本文为博主原创文章,未经博主允许不得转载。

打杂之WEB前端(一) jQuery 操作DOM总结,DOM Core操作

jQuery操作DOM的总结分享,个人学习笔记!分享的总结不一定很详细,不会每个方法的用法及详细描述及说明,只是一个概述!...
  • xiaohai798
  • xiaohai798
  • 2016年05月23日 10:50
  • 484

【JavaScript】使用jQuery操作DOM

本章需要掌握的技能目标 1、使用jQuery操作css样式。 2、使用jQuery操作文本与属性值内容 3、使用jQuery操作DOM节点 4、使用jQuery遍历DOM节点 5、使用jQuery操作...
  • mjianglei
  • mjianglei
  • 2016年11月26日 22:43
  • 856

jQuery中的DOM操作整理

1.创建元素节点例如,创建两个元素节点,并加入到中 首先创建元素节点var $li_1=$(""); var $li_2=$(""); 然后蒋新创建的节点插入文档中$("ul").append($...
  • wangyun_www
  • wangyun_www
  • 2016年08月18日 10:48
  • 2823

jQuery的DOM操作之添加元素和删除元素

添加元素: .append()——在目标元素之后添加元素; .prepend()——在目标元素之前添加元素; .after()——在目标元素之后换行添加元素; .before()——在目标元素...
  • bboyjoe
  • bboyjoe
  • 2015年08月10日 16:27
  • 2493

js与jQuery的DOM操作比较(一)

js与jQuery的DOM操作比较(一) 最近才开始学jQuery,它的代码简单,操作起来方便,jQuery库的功能特别强大。jQuery作为一种JavaScript库,继承并优化了JavaScri...
  • h_cjj
  • h_cjj
  • 2016年04月16日 15:56
  • 883

JQuery的DOM操作+事例

1.DOM节点的创建通过JavaScript原生接口创建节点,在处理上是非常复杂与繁琐的。我们可以通过使用jQuery来简化了这个过程创建元素节点:可以有几种方式,后面会慢慢接触。常见的就是直接把这个...
  • u012396955
  • u012396955
  • 2017年02月23日 20:18
  • 464

jQuery性能优化--循环时的DOM操作

jQuery性能优化--循环时的DOM操作
  • comeonstone
  • comeonstone
  • 2014年08月12日 16:54
  • 1430

jQuery的DOM事件总结

一 摘要在这里,不管你学过还是没学过,给大家总结一下jQuery的DOM事件操作.二 具体内容1. js页面载入事件(原生方式)第一种内嵌写法:第二种以匿名函数方式写法2. jQuery页面载入事件第...
  • BaiHuaXiu123
  • BaiHuaXiu123
  • 2016年07月17日 16:31
  • 1324

JS 基础 —— JS 与 jQuery 操作DOM 对比

对于新手,学的东西多了、杂了,难免混淆,例如PHP 中数据类型数字对应有int与float,而JS 中只有number,故在此记录笔记对比JS 与jQUery操作DOM 的区别。 一、设置/获取内...
  • qq_19865749
  • qq_19865749
  • 2016年10月13日 11:38
  • 316

jQuery基础教程之DOM操作-遍历节点-find()方法

.find(selector) 此方法用于在匹配元素的后代元素中按照选择器表达式进行筛选。 记住:使用此方法必须得传入选择器表达式参数,不然是获取不到任何元素的,也就失去了使用此方法的意义了。 ...
  • wql19881207
  • wql19881207
  • 2012年04月01日 15:41
  • 2578
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JQuery——DOM操作总结
举报原因:
原因补充:

(最多只允许输入30个字)