jquery修改html内容 jquery修改属性值的方法 收藏 0

简析JS中Document与CSS

如果你是一名前端人员，你单单的使用jq插件显然不够，js在大多时候比较搁置，但你如果前端技术想要提升，那么js的精通对你显得很重要，本文只是他到js的document与css。

1.Document与Element和TEXT是Node的子类。

Document:树形的根部节点

Element：HTML元素的节点

TEXT：文本节点

>>HtmlElement与HtmlDocument

a:HtmlElement对象表示HTML中的一个个元素。

b:HtmlDocument对象表示 HTML 文档树的根。HTMLDocument 接口对 DOM Document 接口进行了扩展，定义 HTML 专用的属性和方法。

>>HTML的DOM对象

a:DOM Event:Event 对象代表事件的状态。

b:DOM Attribute：Attr 对象表示 HTML 属性。

c:DOM Element：Element 对象表示 HTML 元素，Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

d:DOM Document：每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问

#log span 与 #log>span的区别？

<div id=\”log\”> <span>Span1</span> <span>Span2</span> <span>Span3</span> <div> <span>Span4</span> <span>Span5</span> </div> </div>

#log span的效果：

#log>span的效果：

2.CSS选择器

与CSS选择器的标准化一起的另外一个称做\”选择器API\”的W3C标准定义了获取匹配一个给定选择器的元素的JavaScript方法。该API的关键是Document方法querySelectorAll()。它接收包含一个CSS选择器的字符串参数，返回一个表示文档中匹配选择器的所有元素的NodeList对象。

querySelectorAll()返回的NodeList对象并不是实时的：它包含在调用时刻选择器所匹配的元素，不包括后续的通过JavaScript更改文档的匹配元素。

querySelectorAll()强大到即使在没有其的原生支持的浏览器中依旧可以使用CSS选择器。它是一种终极的选取方法技术。

基于jQuery的Web应用程序使用一个轻便的，跨浏览器的和querySelectorAll()等效的方法，命名为$().

jQuery的CSS选择器匹配代码已经作为一个独立的标准库提出来并发布了，命名为Sizzle。

3.HTML属性作为Element的属性

表示HTML文档元素的HTMLElement对象定义了读写属性，他们映射了元素的HTML属性。

例如：

var image=document.getElementById(\”my_image\”);

var imgurl=image.src;

可以使用<img>元素的HTMLElement对象的src属性.

4.数据集属性

有时候在HTML元素上绑定一些额外的信息。HTML5提供看一种方法。

任意一”data-*“为前缀的小写的属性名字都是合法的。

5.Web浏览器很擅长解析HTML，通常设置innerHTML效率非常高。但是：对innerHTML属性使用”+=“操作符重复追加文本时效率低下，因为它既要序列化又要解析。

插入节点方法：appendChild()与insertBefore()的异同？

6.视口坐标与文档坐标

视口坐标:指的是显式文档内容的那一部分(也即我们在浏览器中能看到的那部分区域)，不包括浏览器的外壳元素，比如菜单栏，工具条等。

文档坐标:指的是包含整个页面的整个部分(也即我们在浏览器中能看的那部分区域以及需要依靠滚动条来滚动查看的区域)。

该书中提供了几个实用的方法：

a:查询窗口滚动条的位置

//查询窗口滚动条的位置

functon getScrollOffsets(w){

w = w || window;

var sLeft,sTop;

if(w.pageXOffset != null) {

sLeft = w.pageXOffset;

sTop = w.pageYOffset;

return {x:sLeft,y:sTop};

}

b:查询窗口的视口尺寸

//查询窗口的视口尺寸

function getViewportSize(w){

w = w || window;

var cWidth,cHeight;

if(w.innerWidth != null){

cWidth = w.innerWidht;

cHeight = w.innerHeight;

return {w:cWidth,h:w.cHeight};

}

if(document.compatMode == \”CSS1Compat\”){

cWidth = document.documentElement.clientWidth;

cHeight = doument.documentElement.clientHeight;

return {w:cWidth,h:w.cHeight};

}else if(document.compatMode == \”BackCompat\”){

cWidth = document.body.clientWidth;

cHeight = doument.body.clientHeight;

return {w:cWidth,h:w.cHeight};

}

}

7.查询元素的几何尺寸

getBoundingClientRect()方法

具体见乱炖中的这篇文章：使用getBoundingClientRect()来获取页面元素的位置

需要注意的是：getBoundingClientRect这个方法不同于getElementByTagName()这样的DOM方法返回的结果是实时的，但是getBoundingClientRect却不是，它类似于一种静态快照。用户滚动的时候，并不会去实时更新。

getBoundingClientRect()与getClientRects()的区别？

8.判断元素在某点

elementFromPoint()能够用来判断判定视口中的指定位置上有什么元素。

传递X与Ｙ坐标（使用视口或窗口坐标而不是文档坐标）

它有一个取代者，那就是target属性。

9.滚动

Window的scrollBy()与scroll()和scrollTo()类似。

只是scrollBy的参数是相对的，并在当前滚动条的偏移量上增加。

如：

scrollIntoView()的使用？

offsetWidth()

offsetHeight()

offsetLeft()

offsetTop()

offsetParent()

clientWidth()

clientHeight()

clientLeft()

clientTop()

scrollWidth()

scrollHeight()

scrollLeft()

scrollTop()

Client他就是Web浏览器客户端-专指它定义的窗口或视口。

10.HTML表单

服务器端程序是基于表单提交动作的

客户端程序是基于事件的

JavaScript的From。

切图网（qietu.com）是一家专门从事web前端开发的公司，专注we前端开发，关注用户体验，欢迎订阅微信公众号：qietuwang

jQuery知识一览

jQuery官网：https://jquery.com/jQuery是一个高效、轻量并且功能丰富的js库。核心在于查询query。jQuery是一个优秀的js函数库，是React/Vue/Angular框架之外中大型项目的首选。jQuery的主旨是write less, do more。

• html元素的选取
• 操作html元素
• css操作
• html事件处理
• 实现js动画效果
• 能够链式调用
• 容易扩展插件
• 封装了ajax

引入jQuery的方式有2种，一种是项目中直接引入jQuery的min.js文件，一种是使用服务器端jQuery文件（使用cdn）脚本标签方式引入。

在官网的：https://jquery.com/download/ 链接下可以下载到完整的代码，放到项目文件的js文件夹下。

在网站：https://www.bootcdn.cn/ 可以获得稳定、快速、免费的cdn加速服务。

• 1.x 版本兼容老版本的IE，文件比较大
• 2.x 版本文件比较小，支持IE8+
• 3.x 版本引入部分新API，提供多个分包的版本，支持IE9+

开发过程中一般使用非min.js文件方便调试，生产环境部署上线时才使用min.js这种压缩文件。

从源码中可以看出，jQuery的整体逻辑可以用以下简单的结构进行描述：

从源码中可以看出，jQuery被定义为一个函数，函数中返回了一个实例对象（看new关键字）。

继续跟踪源码 new jQuery.fn.init( selector, context)，这个函数中调用了makeArray，当然在其他if判断语句中也有返回伪数组对象（比如，定义了length字段，还有[0]的操作），这里拿makeArray作为演示。

查看makeArray函数：

所以这个返回实例对象，是一个伪数组。

从源码中可以看出，将jQuery函数和window.$ 以及window.jQuery绑定赋值，所以使用jQuery和$ 标识符就可以直接使用jQuery。通常在项目中直接使用$标识符，快捷简省。

所以在引入jQuery的项目中：

通常形式为：$(param)

• param为函数：dom加载完成后，执行该回调函数
• param为选择器字符串：查找与该选择器匹配的所有标签，并封装成jQuery对象
• param为dom对象：将该dom对象封装成jQuery对象
• param为标签字符串：创建标签对象并封装成jQuery对象

• jQuery函数返回的是一个伪数组（Object对象），可以使用length和下标。

通过$(param)传入的是selector、element、标签情况下，返回的是包含1个或者多个dom元素对象的伪数组。

直接修改css属性（如果其dom标签存在这个css属性）

清空某标签下的所有dom：

给某标签下添加dom标签：

移除、添加class：

获取dom标签上的属性：

设置标签的属性：

点击：

hover：

监听事件：

post请求：

jQuery HTML代码/文本

html([val|fn]) 返回值:String

取得第一个匹配元素的html内容。这个函数不能用于XML文档。但可以用于XHTML文档。

在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。

如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。

function(index, html) Function

此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值。

返回p元素的内容。

jQuery 代码:

设置所有 p 元素的内容

jQuery 代码:

使用函数来设置所有匹配元素的内容。

jQuery 代码:

text([val|fn]) 返回值:String

val String 用于设定HTML内容的值

function(index, html) Function 此函数返回一个HTML字符串。接受两个参数，index为元素在集合中的索引位置，html为原先的HTML值。

返回p元素的文本内容。

jQuery 代码:

设置所有 p 元素的文本内容

jQuery 代码:

使用函数来设置所有匹配元素的文本内容。

jQuery 代码:

意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法

这段代码等同于用DOM实现代码：

直接获取、编辑内容

在jQuery中，主要是通过html()和text()两种方法来获取和编辑页面内容的。其中html()相当于获取节点的innerHTML属性，

添加参数html(text)时,则为设置innerHTML;而text()则用来获取元素的纯文本，text(content)为设置纯文本。

实例1:

jQuery代码:

HTML代码:

实例2:

jQuery代码:

HTML代码:

<p><b>文本</b>段 落<em>示</em>例</p>

实例3：获取选择框的文本

$().html(); //获得节点包含的信息

$().html(信息); //设置节点包含的内容

$().text(); //获得节点包含的\”文本字符串信息\”内容

$().text(信息); //设置节点包含的内容(有html标签就把\”><\”符号变为符号实体)

注意: DOM操作必须保住DOM节点必须存在, 当然也包括使用css样式display:none隐藏的DOM节点, 否则会导致js语法错误;

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com