jQuery里面的DOM操作(查找,创建,添加,删除节点)

时间:2022-09-03 21:04:23

一:创建元素节点(添加)

创建元素节点并且把节点作为元素的子节点添加到DOM树上

append(): 在元素下添加元素
用法:$("id").append("定义的节点"); 例如:var li1 = $("<li>橘子</li>");
添加属性节点:var li3 = $("<li class='test'>草莓</li>")

appendTo(): 将元素添加到元素里面
用法: $(li3).appendTo("#box1");

prepend(): 添加节点到元素的最上面

prependTo():将节点添加给指定元素的最上面
用法:$(li3).prependTo("#box1");

before():将节点添加到指定元素的前面(外层)
用法: $("#div1").before(div1);

insertBefore():将新建元素添加到目标节点前面左右目标元素的兄弟元素

after():将节点添加到指定元素的后面(外层)
用法: $("#div1").after(div1);

insertAfer(): 将新建的元素添加到目标节点后面作为兄弟元素
用法:$(element).insertAfter("目标节点")

二:删除节点

remove(): 删除所有匹配到的元素,这个方法能够删除元素的所有子节点
$(element).remove();

empty(): empty原则上来讲它并不是删除元素,它只是清空节点,它能清空指定元素的所有子节点

$(element).empty();

三:修改节点(替换节点,包裹节点,复制节点)

包裹节点:wrap()
用法:$(element).wrap("html")

复制节点:clone(true) 完全复制某一个元素 :true复制元素的同时也复制它的行为,如果不需要复制行为的时候就不加参数
用法:$(element).clone(true);

四:属性操作和样式操作

attr() : 用来获取样式和设置样式和属性
removeAttr() : 用来删除元素样式和属性

addClass() :追加样式
removeClass :移除样式
toggleClass : 切换样式
hasClass :判断是否含有某个样式

五:设置和获取HTML 文本和值

html() :获取元素中html内容
text() :获取元素中文本
val() :获取元素中的值,类似于JavaScript中的value属性

children() :用于取得匹配元素中的子元素集合。
next() :用于取得匹配元素后面紧跟的兄弟元素
prev() :用于取得匹配元素前面紧邻的兄弟元素
siblings() :用于取得匹配元素所有的兄弟元素

...

jQuery里面的DOM操作(查找,创建,添加,删除节点)的更多相关文章

  1. 将原生JS和jquery里面的DOM操作进行了一下整理

    创建元素节点 1.原生: document.createElement("div") 2.jquery: $("<div></div>" ...

  2. jQuery选择器和DOM操作——《锋利的jQuery》(第2版)读书笔记1

    第1章 认识jQuery jQuery有以下优势: 轻量级: 强大的选择器: 出色的DOM操作的封装: 可靠的事件处理机制: 完善的Ajax: 不污染*变量: 出色的浏览器兼容性: 链式操作方式: ...

  3. dir(dict)&vert;字典的创建-添加-删除-修改-判断存在-取值等相关操作

    dir(dict) ####字典操作:创建-添加-删除-修改-判断存在-取值 #(一)创建字典: {} .等号. zip(). [(),()] #1.创建空字典 dict0 = {} #2.等号创建 ...

  4. &lbrack;转&rsqb;jQuery 选择器和dom操作

    居然是12年的总结.... 文章地址: http://www.cnblogs.com/happyPawpaw/articles/2595092.html JQuery选择器 1.基本选择器 基本选择器 ...

  5. 锋利的jQuery ——jQuery中的DOM操作(三)

    一.DOM的操作分类 1>DOM Core   2>HTML-DOM   3>CSS-DOM 二.jQuery中的DOM操作 DOM树 ①查找节点 1)查找元素节点 利用jQuery ...

  6. JQuery中的DOM操作

    JQuery中有很多DOM操作,但是因为之前没有总结过,所以用来用去都是那几个,一写html中的表单交互,尤其是那些复杂的表单交互,就是一大坨的js,我自己看着都费劲. 所以我感觉有必要总结一下 &l ...

  7. jQuery中的DOM操作总结

    jQuery中的DOM操作 DOM是Document Object Medel的缩写,它的意思是文档对象模型,根据W3C的官方说法,DOM是一种跟浏览器,平台以及语言都没有关系的一种规范,也就是一种接 ...

  8. Jquery基础之DOM操作

    转自:http://www.cnblogs.com/bro-ma/p/3063942.html JQuery中的DOM操作主要对包括:建[新建].增[添加].删[删除].改[修改].查[查找][像数据 ...

  9. Jquery:jquery中的DOM操作&lt&semi;一&gt&semi;

    之前两天学习了Jquery强大的选择器,今天学习了一部分Jquery对DOM的操作,下面我将把自己今天的成果分享给大家,那些菜鸟们,你们是否需要巩固之前所学? 首先需要知道,DOM操作分为3个方面:D ...

随机推荐

  1. Spring4学习笔记1-HelloWorld与IOC和DI概述

    1.安装环境 1.1安装eclipse,jdk 1.1安装Spring tool suite(非必要项) 2.spring HelloWorld 2.1 需要的jar包(spring官网下载:http ...

  2. java设计模式--工厂模式

       所谓工厂,就是要造产品,比如一个小型砖瓦厂,只有一个窑,既能造砖又能造瓦,这种叫简单工厂模式.规模稍大一点呢,我多个窑,有的窑专门造砖,有的窑专门造瓦,想造别的,比如瓷砖,我再用个专门的窑,这种 ...

  3. java读取文件批量插入记录

    只是一个例子,方便以后查阅. import ey.db.oracle.OracleHelper; import ey.db.type.*; import java.io.BufferedReader; ...

  4. ASP&period;NET MVC在服务端把异步上传的图片裁剪成不同尺寸分别保存&comma;并设置上传目录的尺寸限制

    我曾经试过使用JSAjaxFileUploader插件来把文件.照片以异步的方式上传,就像"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01- ...

  5. sublime text 2 运行 python时返回EOFError&colon; EOF when reading a line错误

    其主要原因是sublime text 2中python没有与 stdin(标准输入)连接所致,解决方法也很简单,那就是安装sublimeREPL插件,然后 Tools->sublimerepl- ...

  6. Qt 学习之路:QSortFilterProxyModel

    从本章开始,我们将逐步了解有关自定义模型的相关内容.尽管前面我们曾经介绍过 Qt 提供的几个内置模型:QStringListModel和QFileSystemModel,但对于千变万化的需求而言,这些 ...

  7. JAVA insert&lpar;&rpar; 插入字符串 reverse&lpar;&rpar; 颠倒 delete&lpar;&rpar;和deleteCharAt&lpar;&rpar; 删除字符 replace&lpar;&rpar; 替换 substring&lpar;&rpar; 截取子串

    insert() 插入字符串 StringBuffer insert(int index,String str) StringBuffer insert(int index,char ch) Stri ...

  8. 使用Onenote &amp&semi; Evernote &amp&semi; VSC&plus;Markdown构建个人笔记系统

    Onenote & Evernote & VSC+Markdown构建个人笔记系统 umeowbing(转载请注明出处) 1 Why 笔记本太多,全部带着太重,查找起来也很麻烦-- 笔 ...

  9. chan array初始化

    package main import "fmt" func run() { chann[0] <- 1 } var chann = make([]chan int, 2) ...

  10. Fabric架构:抽象的逻辑架构与实际的运行时架构

    Fabric从1.X开始,在扩展性及安全性上面有了大大的提升,且新增了诸多的新特性: 多通道:支持多通道,提高隔离安全性. 可拔插的组件:支持共识组件.权限管理组件等可拔插功能. 账本数据可被存储为多 ...