精通Jquery，HTML详解及回顾(1)

来源：互联网发布：网络新书排行榜2016 编辑：程序博客网时间：2024/05/19 18:14

HTML元素剖析，HTML的核心是元素，元素将告诉浏览器，HTML文档的每一部分存储什么样的内容。

每个元素都有id属性、class属性、其他属性。

id属性：如果一个元素使用了id属性，则该id必须在当前html中独一无二，以保证该元素唯一（就跟数据库中的主键一样）

class属性：如果一个元素使用了class属性，则不用保证它在当前html中唯一，既多个元素都可以使用同一个class，一个元素可以使用多个class。

当一个元素使用多个class时，需要用空格键将他们分开。

其他属性：其他属性需要根据不同元素具体区分，这里不再描述。

html文档的基本结构：

<!doctype html>：用来告诉浏览器这是一个HTML文档。

<html>：告诉浏览器以下是HTML内容。

<head></head>：告诉浏览器这是HTML中的头部内容，这里存放文档的元数据，即负责描述或处理文档内容的元素，浏览器不会直接显示这些元素。

head中的常用元素：

script元素：告诉浏览器需要从另外一个文件中载入JavaScript代码，引入时需要用type来指定一下脚本类型

注意：引用时需要先引用Jquery，再引用他人的代码，至于为什么，你试试就明白了。

stype元素：用来在html中引入CSS样式表，设置CSS样式表时，一般使用的就是上述的id属性和class属性以及其它。

<body></body>：告诉浏览器这是HTML中的主体内容，body中包含着HTML文档的内容，这些元素将全部显示给浏览器，

也就是说这里面的元素就是元数据元素操作的对象（script和style）。

body中的input、button、等元素不再阐述。

</html>：告诉浏览器HTML的内容结束

HTML中的路径问题：

HTML中区分绝对路径和相对路径，对于初学者来说绝对路径很明确且不会出问题，相对路径比较迷茫且不易明白.

对此我使用url链接和src属性来阐述一下:

浏览器当前页面为www.douyahu.com:80/jquery/example.html;

如果当前html和douya.png在一个文件夹中，且该页面中存在img元素，则要使用src属性对其进行设置（同一层级指的是同一文件夹）：

即douya.png在example.html的同一层级中（同一层级指的是同一文件夹）：

此时src的绝对路径：www.douyahu.com:80/jquery/douya.png

此时src的相对路径：douya.png

如果douya.png在example.html的上一层级（上一层级指的是douya.png与刚才的文件夹同一层级）：

此时src的绝对路径：www.douyahu.com:80/douya.png

此时src的相对路径：/douya.png

如果douya.png在example.html的下一层级中（下一层级指的是douya.png在[与example同一级的文件夹]中）：

此时src的绝对路径：www.douyahu.com:80/jquery/png/douya.png

此时src的相对路径：png/douya.png

html中的元素层次关系：主要为父子关系，祖先-后代关系，兄弟关系。

文档对象模型DOM：DOM实际上就是浏览器在载入HTML文档时，根据文档生成具体的DOM（可以理解为浏览器根据HTML生成了一个页面对象）

DOM是用来表示文档中所有元素的JavaScript对象模型，是一种能让我们与HTML文档交互的机制（可以认为DOM就是JS对象模型）

其实使用DOM就是使用JS，我们之前所讲的元素及其关系就保存在DOM中（我认为这样好理解，之后都这样说）

在JS对象模型中有一个基础的JS对象，即HTMLelement对象，它有以下属性：（一般说为DOM中有一个JS对象HTMLelement）。

className：元素的class名

id：元素的id名

lang：元素的lang属性

tagName：元素的标签名

这个对象的方法和属性对JS对象模型中所有元素都有用（即一个元素有哪些属性，那么在JS对象模型中与其对应的对象就有哪些属性）

可以理解为一个元素就能对应上一个htmlElement对象。

document：他是Document对象的实例，Document表示的是当前浏览器页面正在显示的HTML文档，即document是浏览器显示页面对应的对象。

此时你要明白上面的htmlElement对应的元素其实就是Document中的一个成员。（可以理解为众多htmlElement组成了document）

他也能获取指定ID或者className的元素。

DOM的修改：当用JS或者Jquery修改时，无论是修改CSS还是元素内容，DOM都是实时的，即修改DOM会及时在HTML页面中展现出来。

HTML中如何执行Javascript代码：

浏览器在一个页面中发现javascript代码就会立马执行，即使HTML未加载全他也会执行。

这就会导致JS操作时，HTML却未加载完成的问题（此时DOM未完全创建）。

当然如果将JS代码块写在HTML的最底部，那就不会出现该问题，不过我们一般的都写在head里面，

所以需要设定所要执行的JS代码html加载完成后再执行。

即在head里面写下这个方法，然后在该方法里写出你需要的脚本(你现在不需要看懂，知道就好，我也不打算在这里说)：

<script>$(document).ready(function () {});<script>

Javascript的事件：

事件，是浏览器发送的信号，表示DOM中一至多个元素的状态发生了变化，进而产生了一种事件（不同状态产生不同事件）

JS有一个事件处理函数，用来处理发生的事件对象，而这个对象就是一个Event对象，通常用e表示。

<script>var elements=document.getElementsByTagName('img');for(var i=0;i<=elements.length;i++){elements[i].onmouseover=handleMouseOver;}function handleMouseOver(e){e.target.style.opacity=0.5;}</script>

在上面的代码中，获取了img元素，然后对其设置鼠标触发事件（鼠标在该元素上就会触发），使其透明度变为0.5.

这里你要明白，e对应的是【img元素事件对象】，不是【img元素】，【e.target】对应的是【img元素】

JavaScript的事件流：

一个事件在他的生命周期有3个阶段，捕获、处理目标元素、和冒泡。

捕获阶段：事件发生时，浏览器要找出是哪个元素引发了事件，该元素称为目标元素，然后浏览器会询问body与该元素之间所有的元素，挨个检查是否定有事件处理函数，在执行目标元素的事件前，会先执行目标元素的祖先元素的事件。

处理目标元素阶段：该阶段就是执行元素上的事件处理函数。

冒泡：处理完成过，浏览器往body上行且依次检查每个祖先冒泡，依次询问这些元素是否绑定有非捕获型事件，因为有些事件不支持冒泡。（毕竟一个元素有多种事件，这里不再过多阐述）

阅读全文

0 0