js和jq文档操作
JS文档操作
一、dom树结构
1.元素节点
2.文本节点
3.属性节点
不属于元素节点的子节点
4.文档节点(document)
二、处理元素节点
method
1.document.getElementById(); //根据ID
2.document.getElementsByTagName(); //根据标签名
返回名为NodeList的DOM对象,使用时建议先通过length属性检查其长度。
获取节点有两种可选:
a. 使用item方法
b. 使用数组下标
3.document.getElementsByClassName(); //根据Class,作为新成员,浏览器支持情况暂不太好
4.querySelector()、querySelectorAll(); //通过CSS选择器,亦为新成员
前者返回第一个匹配的元素,后者返回NodeList。
e.g document.querySelector("#header");
三、处理属性节点
method:
1.getAttribute(); //获取属性
建议先使用hasAttribute();
e.g document.getElementById("pl").getAttribute("class");
2.setAttribute(); //设置属性
3.removeAttribute(); //移除属性
建议先使用hasAttribute();
4.hasAttribute();
四、处理文档节点
直接通过innerHTML属性
e.g
a.document.getElementById("pl").innerHTML;
b.document.getElementById("pl").innerHTML("<p>hello world</p>");
五、遍历DOM
method:
1.parentNode;
e.g document.getElementById("pl").parentNode.setAttribute("class","liu");
2.previousSibling;
3.nextSibling;
4.firstChild;
5.lastChild;
访问首尾两个子节点时,由于空白的原因,往往未必返回预期的子元素
六、DOM中动态添加移除节点
method
1.createElement();
2.createTextNode();
3.appendChild();
4.removeChild();
新增元素
1.创建元素
2.填充内容
3.放入DOM
e.g
var tar=document.getElementById("pl");
var p=document.createElement("p");
var tex=p.createTextNode("hello world");
tar.appendChild(tex);
移除元素
e.g
var tar=document.getElementById("pl");
var t=document.getElementById("pll");
tar.removeChild("t");
七、修改元素样式
1.用JS修改标签的 class 属性值:
更改一个标签的 class 属性的代码是:
document.getElementById( id ).className = 字符串;
className 是 DOM 对象的一个属性,它对应于标签的 class 属性。另外你也可以用上述的setAttribute()方法修改
2.用JS修改标签的 style 属性值:
style 属性也是在标签上引用样式表的方法之一,它的值是一个CSS样式表。
更改一个标签的 CSS 属性的代码是:
document.getElementById( id ).style.属性名 = 值;
style 是 DOM 对象的一个属性,它本身也是一个对象。属性名 是 Style 对象的属性名,它和某个CSS属性是相对应的。
JQuery文档操作
一、jQuery 文档操作方法
(1)html() 方法
a.定义和用法
html() 方法返回或设置被选元素的内容 (inner HTML)。
如果该方法未设置参数,则返回被选元素的当前内容。
语法: $(selector).html(content)
e.g
$("#userName").html(userData.username)
b.使用函数来设置元素内容
使用函数来设置所有匹配元素的内容。
语法: $(selector).html(function(index,oldcontent))
(2)关于jquery中html()、text()、val()的区别
.html()用为读取和修改元素的HTML标签--对应js中的innerHTML
.html()是用来读取元素的HTML内容(包括其Html标签),.html()方法使用在多个元素上时,只读取第一个元素
.text()用来读取或修改元素的纯文本内容--对应js中的innerText
.text()用来读取元素的纯文本内容,包括其后代元素;.text()方法不能使用在表单元素上
.val()用来读取或修改表单元素的value值
.val()是用来读取表单元素的"value"值,.val()只能使用在表单元素上
关于三者的区别
1. val()方法和.html()相同,如果其应用在多个元素上时,只能读取第一个表单元素的"value"值,但是.text()和他们不
一样,如果.text()应用在多个元素上时,将会读取所有选中元素的文本内容。
2 .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。
js和jq文档操作的更多相关文章
- (20)jQuery的文档操作(创建,添加、设置样式和删除等)
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>jq ...
- 2018-06-27 jq文档处理与jq对象属性操作
jQ文档处理: 内部插入 A.append(B) ->把B后追加到A内部中 B.appendTo(A) ->把B后追加到A内部中 A.prepend(B) ->把B后追加到A内部中 ...
- jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法
原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp 实例 使用 noConflict() 方法为 jQuery 变量规定新 ...
- 前端(十八)—— jQuery高级操作:选择器、文本属性与类、事件、文档操作、动画、结构关系
JQ选择器.文本属性与类.事件.文档操作.动画.结构关系 可参考jQuery的API文档 一.选择器 1.css语法匹配 标签 | 类 | id | 交集 群组 | 后代 | 兄弟 伪类 | 属性 $ ...
- jQuery文档操作
jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...
- 06-jQuery的文档操作
之前js中咱们学习了js的DOM操作,也就是所谓的增删改查DOM操作.通过js的DOM的操作,大家也能发现,大量的繁琐代码实现我们想要的效果.那么jQuery的文档操作的API提供了便利的方法供我们操 ...
- 06-jQuery的文档操作(重点)
之前js中咱们学习了js的DOM操作,也就是所谓的增删改查DOM操作.通过js的DOM的操作,大家也能发现,大量的繁琐代码实现我们想要的效果.那么jQuery的文档操作的API提供了便利的方法供我们操 ...
- Jquery----对文档操作
jquery对css操作: 1.CSS .css() - .css("color") -> 获取color css值 - .css("color", &q ...
- python 全栈开发,Day54(jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作)
昨日内容回顾 jQuery 宗旨:write less do more 就是js的库,它是javascript的基础上封装的一个框架 在前端中,一个js文件就是一个模块 一.用法: 1.引入包 2.入 ...
随机推荐
- PHP中的MySQLi扩展学习(五)MySQLI_STMT对象操作
就像 PDO 中的 PDO_Statment 对象一样,MySQLI_STMT 对象也是一个预处理语句所形成的对象,专门用来操作 MySQLi 所生成的预处理语句的.其实操作方式之类也都比较相似,不外 ...
- deecms栏目页调用自定义字段方法
{dede:arclist addfields='suoxu_jifen,shichang_jiage' typeid='13' row='15' channelid='3'} <li>& ...
- python json格式化打印
编写python脚本,调试的时候需要打印json格式报文,直接打印看不出层次,可以使用json.dumps格式化打印 import json import requests def test_json ...
- [原创]配置php+nginx 时遇到的”file not found","access denied"奇怪问题的解决过程
在centos 7中按照我的随笔转载文章"[转载]CentOS 下安装LEMP服务(Nginx.MariaDB/MySQL和PHP)"安装好后,结果无法显示phpinfo()信息, ...
- 好未来数据中台 Node.js BFF实践(一):基础篇
好未来数据中台 Node.js BFF实践系列文章列表: 基础篇 实战篇(TODO) 进阶篇(TODO) 好未来数据中台的Node.js中间层从7月份开始讨论可行性,截止到9月已经支持了4个平台,其中 ...
- Node.js躬行记(12)——BFF
BFF字面意思是服务于前端的后端,我的理解就是数据聚合层.我们组在维护一个后台管理系统,会频繁的与数据库交互. 过去为了增删改查会写大量的对应接口,并且还需要在Model.Service.Router ...
- 憋了很久,终于弄懂什么是IOC(控制反转)
导航 共享充电宝 IOC思想 复杂的依赖关系 IOC定义 Spring中的IOC IOC与工厂模式 IOC容器的技术剖析 结语 参考 本节是摘自<Spring Boot 实战纪实>的第 ...
- Stream之高级函数
上回文说到了有关Stream一些数学函数的用法.今天来说下Stream一些高级的函数用法,这些函数在日常工作中也是必不可少的,测试数据还是引用上一篇的数据. Map 这个方法我个人称之为转换函数,把一 ...
- CEF使用过程问题合集
CEF使用过程问题合集 1.Couldn't mmap icu data file 解决方案:检查程序执行目录下是否有icudtl.dat文件,如果没有请从cef的Resources文件夹中复制一份. ...
- FastAPI 学习之路(五)
系列文章: FastAPI 学习之路(一)fastapi--高性能web开发框架 FastAPI 学习之路(二) FastAPI 学习之路(三) FastAPI 学习之路(四) 我们之前的文章分享了 ...