DOM 操作的分类:
dom core: getElementById() getElementsByTagName() getAttribute() setAttribute()
html-dom : document.forms element.src (这些属性只能用来处理web文档)
css-dom : element.style.color="red"
jQuery 中的dom操作:
创建节点:
var li1 = $('<li></li>');
$('ul').append(li1);
插入节点:
append var li1 = $('<li></li>'); $('p').append(li1); ==>像p标签中加入li标签
appendTo var li1 = $('<li></li>'); li1.appendTo('p'); ==>像p标签中加入li标签
after() var li1 = $('<li></li>'); $('p').after(li1); ==>像p标签的后面加入li标签
insertAfter()var li1 = $('<li></li>'); $('p').insertAfter(li1); ==>颠倒了after的操作 li在前面 p在后面
before() 作用跟after 相反
insertBefore() 作用跟before 相反
删除节点:
remove()==> var li1 = $('ul li:eq(1)').remove(); li1 为删除的节点的保留
empty() ==> var li1 = $('ul li:eq(1)').empty(); empty 不是删除节点而是清空节点

复制节点:

clone: 里面有个参数 true/false 这个是表示是否复制功能此例子中是单击事件
$('ul li').click(function(){
$(this).clone().appendTo('ul');
})
替换节点:
replaceWith():将匹配的元素替换成指定的html 或者dom元素 $('p').replaceWith('<strong>frute</strong>');==>将所有的p标签替换成strong标签
replaceAll(): 此方法跟replaceWith操作作用相同,只是颠倒了操作==>$('<strong>frute</strong>').replaceAll('p');
包裹节点:
wrap():$('p').wrap('<b></b>')// 得到的结果为b把p包裹起来<b><p></p></b>
wrapAll():$('p').wrapAll('<b></b>')// 得到的结果为b把所有的p包裹起来<b><p></p><p></p></b>
wrapInner():$(strong).wrapInner('<b></b>');//用b标签把strong内部的内容包裹起来 <strong><b>水果</b></strong>
属性操作:
attr() : $('p').attr('title');/$('p').attr('title','sab') 添加 或者获取属性
removeAttr :$('p').removeAttr('title');
样式操作:
$('p').attr('css','myClass');
$('p').addClass('another');
$('p').removeClass('another one');以空格的形式删除多个样式

$('p').toggle(function(){},function(){})==>此处的toggle 交替执行一组动作
$('p').toggleClass('another');
$('p').hasClass('another');
$('p').html();
$('p').text();
$('input').val();
遍历节点:
children() 找到节点的子元素 而不考虑任何其他的后代元素
next() 取得匹配元素后面紧邻的同辈元素
prev() 取得前面紧邻的同辈元素
siblings() 取得匹配元素前后所有的同辈元素
closest() 取得最近的匹配元素
$(document).bind('click',function(e){
$(e.target).closest('li').css('color','red');
})//获取离点击目标最近的li元素并且添加颜色

jQuery -- DOM节点的操作的更多相关文章

  1. Jquery Dom节点常用操作

    select 标签 form提交的时候 提交select标签选中的value值 1. 添加项 $("#select_id").append("<option val ...

  2. 第一百六十七节,jQuery,DOM 节点操作,DOM 节点模型操作

    jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...

  3. dom节点的操作

    dom节点的操作 -- jQuery 内部插入 1.(结尾)append 方法 . appendto方法(为了方便链式操作) (开头)prepend方法           $('#div1').ap ...

  4. js、jquery对节点的操作(增、删)

    js对节点的操作方法 一.获取 1.父节点的获取 某节点的parentNode属性值即为该节点的父节点.示例: var parent = document.getElementById("o ...

  5. JS中的DOM— —节点以及操作

    DOM操作在JS中可以说是非常常见了吧,很多网页的小功能的实现,比如一些元素的增删操作等都可以用JS来实现.那么在DOM中我们需要知道些什么才能完成一些功能的实现呢?今天这篇文章就先简单的带大家入一下 ...

  6. jQuery DOM/属性/CSS操作

    jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...

  7. jQuery自学笔记(四):jQuery DOM节点操作

    获得和设置内容:text( ).html( ) 以及 val( ) text( ) - 设置或返回所选元素的文本内容 html( ) - 设置或返回所选元素的内容(包括 HTML 标记) val( ) ...

  8. jQuery(Dom节点操作)

  9. DOM 节点实例操作

    涉及知识点包括节点的所有知识 目的: 自动为文档创建一个目录表 自动创建目录

随机推荐

  1. C++ 应用处理异常崩溃(转载)

    有时,在我们的程序运行的时候,会遇到一些崩溃问题,尤其是概率出现的时候,如果能捕获其异常,那么对于我们快速定位bug是很有帮助的 这里借用网上搜寻回来的函数,记录一下: 头文件及库: #include ...

  2. 有关宏定义的bug

    #define max(a,b) a>b?a:b 这个宏有诸多缺点:当调用比如max(3,2)*2时会出现不想要的结果.按理来说,我们想要得到的结果是:3*2=6,但是由于优先级的问题,得到的结 ...

  3. go排序

    补注: 近来又看 go 的排序, 发现以前对 go 的排序理解的有点浅了. go 的排序思路和 c 和 c++ 有些差别. c 默认是对数组进行排序, c++ 是对一个序列进行排序, go 则更宽泛一 ...

  4. mysql操作查询结果case when then else end用法举例

    Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex          WHEN '1' THEN '男'          WHEN '2' THEN ...

  5. android Glide图片加载框架的初探

    一.Glide图片加载框架的简介 谷歌2014年开发者论坛会上介绍的图片加载框架,它让我们在处理不管是网路下载的图片还是本地的图片,减轻了很多工作量, 二.开发步骤: 1.添加链接库 compile ...

  6. Entity framework在用于WCF时创建数据模型的问题

    众所周知,WCF的传输对象,在创建时需要在类名上标识[DataContract]以及在属性上标识[DataMember],当我们在使用Entity framework时(不考虑Code first的情 ...

  7. 前端MV*框架的意义

    经常有人质疑,在前端搞MV*有什么意义?也有人提出这样的疑问:以AngularJS,Knockout,BackBone为代表的MV*框架,它跟jQuery这样的框架有什么区别?我jQuery用得好好的 ...

  8. 解决:Redis:java.util.NoSuchElementException: Unable to validate object at

    在Java使用Redis的过程中遇见了一个问题, redis.clients.jedis.exceptions.JedisConnectionException: Could not get a re ...

  9. JAV07接口与继承之动手动脑问题解决

    动手动脑:请自行编写代码测试以下特性:在子类中,若要调用父类中被覆盖的方法,可以使用super关键字. 1.源代码: package Work; class A{ public A(){ System ...

  10. 建站随手记:about server stack

    建站需要,随手记: Server Stack: ----------- 标准的mezzanine的Stack设置 前端:Nginx wsgi:gunicorn cms tool: mezzanine ...