第75天:jQuery中DOM操作
一、基础操作
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/>替换br2.替换所有节点$('<br/>').replaceAll('hr'); //调用者也得是选择器选择到的元素。用<br/>元素替换所有的hr3.包裹节点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操作的更多相关文章
- jQuery学习笔记(二)jQuery中DOM操作
目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...
- [置顶] Jquery中DOM操作(详细)
Jquery中的DOM操作 为了能全面的讲解DOM操作,首先需要构建一个网页. HTML代码: <%@ page language="java" import="j ...
- jQuery中DOM操作
1 定义:jquery中对DOM的操作就是对DOM元素进行增删查改操作 2 分类: 1)DOM Core(核心):用途广泛 支持多种编程语言 2)HTML DOM:代码简短 只用于处理web ...
- JQuery中DOM操作(一)
节点操作 1.插入节点,在JQuery中插入的节点方法很多,可以满足各种不同的节点插入的情况,根据不同的插入方式分为:增加环绕节点.节点内部插入和外部插入三种方式 今天我们要讲的是增加环绕节点,它有三 ...
- jQuery笔记(二)jQuery中DOM操作
前言 本篇主要介绍DOM操作,在说DOM操作之前,首先我们应该熟悉DOM树,以一个例子为例来说明DOM树.首先看这段HTML代码.(本文后面的代码如果没有特别指出,都是针对下述HTML代码进行操作) ...
- js,jQuery和DOM操作的总结(二)
jQuery的基本操作 (1)遍历键值对和数组 , , , , , ]; $.map(arr, function (ele, index) { alert(ele + '===' + index); ...
- jQuery的DOM操作详解
DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...
- 解密jQuery内核 DOM操作
jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...
- 第3章 jQuery的DOM操作
一. DOM 分为DOM核心,HTML-DOM和CSS-DOM 1.DOM核心 不专属与javascript. 获取对象:document.getElementsByTagName('div') 获 ...
随机推荐
- 20155222 2016-2017-2 《Java程序设计》第4周学习总结
20155222 2016-2017-2 <Java程序设计>第4周学习总结 教材学习内容总结 子类会继承父类的private成员,但是无法直接存取,必须通过父类提供的方法. 多态就是使用 ...
- 20155229 2016-2017-2 《Java程序设计》第四周学习总结
20155229 2016-2017-2 <Java程序设计>第四周学习总结 教材学习内容总结 第六章: extends:继承某个类,继承之后可以使用父类的方法,也可以重写父类的方法,只要 ...
- 【课堂实践】Myod
实验内容 编写MyOD.java 用java MyOD XXX实现Linux下od -tx -tc XXX的功能 实验代码 od.java 截图 遇到的问题及解决办法 一开始想的方向是将得出的功能结果 ...
- Postgresql 远程连接配置
原文地址:http://blog.chinaunix.net/uid-20684384-id-1895247.html 1. 设置远程访问认证机制 编辑 $POSTGRES/data/pg_hba.c ...
- HBase——使用Put迁移MySql数据到Hbase
先上code: /** * 功能:迁移mysql上电池历史数据到hbase * Created by liuhuichao on 2016/12/6. */ public class MySqlToH ...
- XAF-如何改变列表点击时的默认行为
在 Windows 窗体应用程序中,按下回车或双击列表会打开默认的详细视图. 在 ASP.NET Web 应用程序中,单击对象时执行此操作. 这一行为是由 ListViewProcessCurrent ...
- MES与ERP的区别(转)
MES和ERP有很大的不同,主要体现在以下几个方面: 1.管理的目标不同 ERP的重点在于财务,也就是从财务的角度出发来对企业的资源进行计划,相关的模块也是以财务为核心的展开,最终的管理数据也是集中到 ...
- The filename 未命名.ipa in the package contains an invalid character(s). The valid characters are: A-Z, a-z, 0-9, dash, period, underscore, but the name cannot start with a dash, period, or underscore
The filename 未命名.ipa in the package contains an invalid character(s). The valid characters are: A-Z ...
- html面试题总结
1.请描述一个网页从开始请求到最终显示的完整过程? 1).在浏览器中输入网址: 2).发送至DNS服务器并获得域名对应的WEB服务器的IP地址: 3).与WEB服务器简历TCP连接: 4).浏览器向W ...
- Qt 将字符串转成16进制显示
最近项目用到了需要将字符串转换成16进制显示.这玩意折腾了一上午. 首先,数据块内容 struct UserData { char Head[3] = {'X','J','J'}; char Flag ...