一、基础操作

1.html()

使用html()方法读取或者设置元素的innerHTML

就是相当于javascript里头的innerHTML。

2.text()

使用text()方法读取或者设置元素的innerText。

就是相当于javascript里头的innerText。

3.attr()

使用attr()方法读取或者设置元素的属性,对于jQuery没有封装的属性(所有浏览器没有差异的属性)用attr进行操作。

4.removeAttr

使用removeAttr删除属性。删除的属性在源代码中看不到,这是和清空属性的区别。attr(‘name’,’’)

二、动态创建Dom节点

1.$(html字符串)

使用$(html字符串)创建Dom节点,并且返回一个jQuery对象。

然后调用可以append等方法将新创建的节点添加到Dom中。

$()创建的就是一个jQuery对象,完全可以进行操作。

2.小经验

使用$(‘<input  name=“gender”/>’);,而不要在创建好后通过attr(‘name’,’gender’).

//通过attr()设置name,在IE6下有问题。我用的版本是这样,新版本我不晓得。

还有就是,我说的是name属性,上面例子中的 type属性,是可以用attr的。

三、追加(父元素.append(子元素))

1.添加小儿子  append

append方法用来在元素的末尾追加元素(最后一个子节点)。增加元素末尾(儿子)

2.添加大儿子  prepend

prepend,在元素的开始添加元素(第一个子节点)。增加元素开始(儿子)

3.添加弟弟  after

after,在元素之后添加元素(添加兄弟)增加元素后面(兄弟)

4.添加哥哥  before

before:在元素之前添加元素(添加兄弟)增加元素前面(兄弟)

四、将自己追加到某元素(子元素.appendTo(父元素))

1.成为小儿子  appendTo

子元素.appendTo(父元素);//主动巴结!到最后一个

2.成为大儿子  prependTo

子元素.prependTo(父元素);//主动巴结到第一个。

3.成为弟弟  insertBefore

(*)A.insertBefore(B);将A加到到B的前面,等同于B.before(A);

4.成为哥哥  insertAfter

(*)X.insertAfter(Y);将X加到到Y的后面,等同于Y.after(X);

五、删除节点

1.empty() 清空
清空某元素下的所有子节点
内部实现:
while(ele.firstChild){
   ele.removeChild(ele.firstChild);
}//不同版本可能不一样。
2.remove(selector)
删除当前元素,返回值为被删除的元素。
还可以继续使用被删除的节点。比如重新添加到其他节点下:

六、节点操作

1.替换节点
$("br").replaceWith("<hr/>");
用<hr/>替换br
2.替换所有节点
$('<br/>').replaceAll('hr'); //调用者也得是选择器选择到的元素。
用<br/>元素替换所有的hr
3.包裹节点
wrap()方法用来将所有元素逐个用指定标签包裹:
wrapAll()
wrapInner()//在内部围绕

七、样式操作

1.attr()
1)获取样式 attr("class")
2)设置样式attr("class","myclass")
/*注意:一个参数是获取,两个参数是设置*/
2.追加样式
追加样式addClass("myclass")(不影响其他样式)
这里说的样式,是css中写好的。myclass是css的选择器名
3.移除样式
移除样式removeClass("myclass"),
4.切换样式
切换样式(如果存在样式则去掉样式,如果没有样式则添加样式)
toggleClass("myclass")。
5.判断
判断是否存在样式:hasClass("myclass")

第75天:jQuery中DOM操作的更多相关文章

  1. jQuery学习笔记(二)jQuery中DOM操作

    目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...

  2. [置顶] Jquery中DOM操作(详细)

    Jquery中的DOM操作 为了能全面的讲解DOM操作,首先需要构建一个网页. HTML代码: <%@ page language="java" import="j ...

  3. jQuery中DOM操作

    1 定义:jquery中对DOM的操作就是对DOM元素进行增删查改操作 2 分类:      1)DOM Core(核心):用途广泛 支持多种编程语言 2)HTML DOM:代码简短 只用于处理web ...

  4. JQuery中DOM操作(一)

    节点操作 1.插入节点,在JQuery中插入的节点方法很多,可以满足各种不同的节点插入的情况,根据不同的插入方式分为:增加环绕节点.节点内部插入和外部插入三种方式 今天我们要讲的是增加环绕节点,它有三 ...

  5. jQuery笔记(二)jQuery中DOM操作

    前言 本篇主要介绍DOM操作,在说DOM操作之前,首先我们应该熟悉DOM树,以一个例子为例来说明DOM树.首先看这段HTML代码.(本文后面的代码如果没有特别指出,都是针对下述HTML代码进行操作) ...

  6. js,jQuery和DOM操作的总结(二)

    jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...

  7. jQuery的DOM操作详解

    DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...

  8. 解密jQuery内核 DOM操作

    jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...

  9. 第3章 jQuery的DOM操作

    一.  DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...

随机推荐

  1. EXCEL 处理重复数据名字后面追加值

    近期要用 EXCEL 处理重复数据名字后面追加值的,如图: 先排序,再根据条件追加 [公式]=+B6&IF(COUNTIF($B$6:B6,B6)-1>0,"_" & ...

  2. WPF DataGrid使用简介

    1)自动生成列 <DataGrid AutoGenerateColumns="True" Name="datagrid" CanUserAddRows=& ...

  3. 面试之HTTP基础(不断完善中)

    目录 1. HTTP状态码 2.Cookie和Session Cookie Session 3.短连接与长连接 4.HTTPs 加密 5.Http和https的区别 6.HTTP/1.0 与 HTTP ...

  4. DeepLearning - Overview of Sequence model

    I have had a hard time trying to understand recurrent model. Compared to Ng's deep learning course, ...

  5. C语言—栈

    栈的操作:进栈和出栈 #include "stdafx.h" #include "stack.h" #define maxsize 20 typedef int ...

  6. golang笔记1

    golang笔记1 go代码是用包来组织的,每个包有一个或多个go文件组成,这些go文件文件放在一个文件夹中 每个源文件开始都用一个package声明,指明本源文件属于哪个包 pakage声明后紧跟这 ...

  7. 《Learning scikit-learn Machine Learning in Python》chapter1

    前言 由于实验原因,准备入坑 python 机器学习,而 python 机器学习常用的包就是 scikit-learn ,准备先了解一下这个工具.在这里搜了有 scikit-learn 关键字的书,找 ...

  8. 剑指Offer66题的总结、目录

    原文链接 剑指Offer每日6题系列终于在今天全部完成了,从2017年12月27日到2018年2月27日,历时两个月的写作,其中绝大部分的时间不是花在做题上,而是花在写作上,这个系列不适合大神,大牛, ...

  9. 关于js中一个对象当做参数传递是按值传递还是按引用传递的个人看法

    在<JavaScript高级程序设计>这本书中有这样一段话:有很多开发人员错误的认为:在局部作用域中修改的对象会在全局作用域中反映出来,就说明参数是按引用传递的.换句话说,尼古拉认为当一个 ...

  10. Java 学习笔记 ------第一章 Java平台概论

    本章学习目标: Java版本迁移简介 认识Java SE.Java EE.Java ME 认识JDK规范与操作 了解JVM.JRE与JDK 下载与安装JDK 一.Java版本迁移简介 书上已经表达得非 ...