JavaScript程序设计_读书笔记2

八、级联样式表（CSS）技术

（一、）CSS样式表的特点：

** 将显示格式和文档结构分离

HTML定义文档的结构和各要素的功能，而层叠样式表将定义格式的部分和定义结果的部分分离，能够对页面的布局进行灵活的控制。（将数据结构与显示样式分离）

** 对HTML处理样式的最好补充

HTML对页面布局上的控制很有限，如精确定位、行间距或者字间距等；CSS样式表可以控制页面中的每一个元素，从而实现精确定位，CSS样式表控制页面布局的能力逐步增强

** 体积更小，加快网页下载速度

样式表是简单的文本，文本不需要图像，不需要执行程序，不需要插件。这样CSS样式表就可以减少图像用量、减少表格标签及其他加大HTML体积的代码，从而减少文件尺寸加快网页的下载速度。

** 实现动态更新、减少工作量

定义样式表，可以将站点上的所有网页指向一个独立的CSS样式表文件，只要修改CSS样式表文件的内容，整个站点相关文件的文本就会随之更新，减轻了工作负担。

** 支持CSS的浏览器增多

样式表的代码有很好的兼容性，只要是识别串样式表的浏览器就可以应用CSS样式表。当用户丢失了某个插件时不会发生中断，使用老版本的浏览器代码不会出现乱码的情况。

（二）、样式定义

1、定义CSS的语句形式：selector {property:value; property:value;...}

其中：SELECTOT：选择符。

注：多个对象具有相同的样式定义时，多个对象之间可用逗号分隔，即：selector,selector {property:value; property:value;...}

样式表中的注释应写在“/* */”之间

2、选择符的分类

CSS样式中有3种选择符，分别为：

** HTML选择符

HTML选择符就是HTML的标记符，例如P、BODY、A等

** Class选择符

Class选择符可以分为两种，一种是相关的class selector，它只与一种HTML标记有关系。语法：Tag.Classname {property:value}

另一种是独立Class选择符，它可以被任何HTML标记所应用。语法为：.Classname {property:value}

** ID选择符

功能与独立的Class选择符一样，区别在于语法和用法不同。语法：#IDname {property:value}

（三）、使用样式表的方式

** 嵌入样式表

用<style>标记将样式表嵌入在HTML文件的头部。在<style>标记内定义的前后加上注释符，可以使不支持CSS的浏览器忽略样式表的定义。

注：嵌入样式表的作用范围是在本HTML文件内。

** 链接外部样式表

如果多个HTML文件要共享样式表，可以将样式表定义为一个独立的CSS样式文件。HTML文件在头部用<link>标记链接到CSS样式文件。

例如：<link rel="stylesheet" href="style1.css" type="text/css">

** 引入外部的样式表

这种方式是在HTML文件的头部<style></style>标记之间，用CSS样式表的@import声明引入外部样式表：

格式：<style>

@import URL("外部样式文件名");

...

</style>

注：引用外部样式表与链接到外部样式表的区别：

引入方式在浏览器下载HTML文件时将样式文件的全部内容拷贝到@import关键字文职，以替换该关键字；

而链接到外部的样式表方式仅在HTML文件需要引用CSS样式文件中俄某个样式时，浏览器才链接样式文件，读取需要的内容并不进行替换。

4、CSS样式的优先级

当对同一段文本应用多个层叠样式时，文本中的元素将遵循样式表的作用优先级顺序依次调用样式。

样式表的作用优先顺序遵循以下原则：

** 内联样式中所定义样式的优先级最高

** 其他样式按其在HTML文件中出现或者被引用的顺序，遵循就近原则，靠近文本越近的优先级越高

** 选择符的作用优先顺序：上下文选择符、类选择符、ID选择符，优先级依次降低。

** 未在任何文件中定义的样式，将遵循浏览器的默认样式。

（四）、Style对象

Style元素对象是HTML对象的一个属性。

style元素对象的样式标签属性和样式属性。样式标签属性：是指<style></style>标签之间的属性。样式属性：是指通过document.all(对象名称).style.属性访问的属性。

两者的的比对：

样式标签属性和样式属性基本上是相互对应的，两种属性的用法也基本相同。

区别是用途不同：样式标签属性是用于设置对象的属性值，而样式属性是用于检索或更改对象的属性值。

（五）、CSS属性

1、字体属性

字体属性主要包括字体综合设置、字体族科、字体大小、字体风格、字体加粗、字体英文大小写转换等。

font:设置或者检索对象中文本特性的复合属性

font-family:一个指定的字体名或者一个种类的字体族科

font-size:字体显示的大小

font-style:以3个方式中的一个来显示字体：normal(普通)、italic(斜体)或者oblique(倾斜)

font-weight:使字体加粗或者变细

font-variant:设置英文大小写转换

注：font复合字体属性：

语法：font:font-style || font-variant || font-weight || font-size || line-height || font-family

声明方式中的参数必须按照如上的排列顺序。每个参数仅允许有一个值。忽略的将使用其参数对应的独立属性默认值。

font-family:字体1，字体2，字体3....

按优先级顺序排列，以逗号隔开。如果字体名称包含空格，则应使用引号括起来。

2、文本属性

CSS文本属性主要包括字母间隔、文字修饰、文本排列、行高、文字大小写等。如：

letter-spacing:定义一个附加在字符之间的间隔数量 word-spacing:定义一个附加在单词之间的间隔数量

text-decoration:有5个文本修饰属性，选择其中之一来修改文本 text-align:设置文本的水平对其方式，包括左对齐、右对齐、居中、两端对齐

vertical-align:设置文本的垂直对齐方式，包括垂直向上对齐、垂直向下对齐、垂直居中、文字向上对齐、文字向下对齐等

text-indent:文字的首行缩进 line-height:文本基线之间的间隔值

text-transform:控制英文文字大小写

3、颜色和背景属性

color:设置页面元素的前景色

background-color:设置页面元素的背景色

background-image:设置页面元素的背景图像

background-repeat:设置一个指定的背景图像被重复的方式

background-attachment:设定水平和垂直方向上的位置

background:背景属性的综合设定

4、容器属性

在设计页面时，CSS可将元素放置在一个容器中。容器属性如下：

width:设置元素的宽度 height:设置元素的高度 float:允许文字环绕在一个元素的周围

clear:指定在某个元素的某一边是否允许有环绕的文字或者元素

padding:设定在边框与内容之间插入的空间距离，有4个属性值分别用于设定上下左右的填充距离

margin: 设定一个元素在4个方向与浏览器窗口边界或者上一级元素边界的距离，有4个属性值：top、right、bottom、left,分别控制4个方向

5、列表属性

列表属性用于设置列表标记（ol和ul）的显示特性：

list-style-type:设定引导列表项目的符号类型

list-style-image:选择图像作为项目的引导符号

list-style-position:决定列表项目所缩进的程度

list-style:综合设定列表项目属性

6、鼠标属性

cursor属性值：

hand:手 crosshair:交叉十字 text:文本选择符号

wait:Windows的沙漏形状 default:默认的鼠标形状 help:代问号的鼠标

e-resize:向东的箭头 ne-resize:向东北的箭头 n-resize:向北的箭头

nw-resize:向西北的箭头 w-resize:向西的箭头 sw-resize:向西南的箭头

s-resize:向南的箭头 Se-resize:向东南的箭头

7、定位和显示

CSS提供用于定义元素二维、三维空间定位以及可见性的定位属性。

8、CSS滤镜

使用滤镜属性可以把可视化的滤镜和转换效果添加到一个标准的HTML元素上（例如图片、文本等），从而使页面的视觉效果更加鲜亮。

Alpha: 透明的层次效果 Blur:模糊效果 Chroma:特定颜色的透明效果

Dropshadow:阴影效果 FlipH:沿水平方向翻转效果 FlipV：沿垂直方向翻转效果

Glow:边缘光晕效果 Gray:灰度效果 Invert:将颜色的饱和度及亮度值完全反转

Mask:遮罩效果 Shadow:渐变阴影效果 Wave:波浪变形效果

Xray:X射线效果

九、JavaScript中的XML

（一）、加载XML

1、在IE中创建DOM并载入XML:

Microsoft在JavaScript中引入了用于创建ActiveX对象的ActionXObject类，通过该类可以创建XML DOM对象的实例：

var xmldoc = new ActiveXObject("Microsoft.XMLDOM");

Microsoft在XML DOM有两种载入XML的方法：load()和loadXML().

load()方法的语法格式：xmldoc.load(url) 其中url为XML文件的名称

注：load()方法只可以载入同包含JavaScript的页面存储于同一服务器上的文件；

在载入是还可以采用同步或异步两个模式，默认情况下，文件是按照异步模式载入，如果需要进行同步载入，可以设置async属性为false。

在异步载入文件时，还需要使用readyState属性和onreadystatechange事件处理函数，这样可以保证DOM完全载入后执行其他操作。

loadXML()方法可直接向XML DOM输入XML字符串，例如：xmldoc.loadXML("<root><son/></root>");

2、在Mozilla中创建DOM并载入XML

创建XML DOM对象的实例

DOM标准指出，使用document.implementation对象createDocument()方法可以创建XML DOM对象的实例，代码如下：

var xmldoc = document.implementation.createDocument("", "", null);

createDocument()方法的第一个参数指定文件的命名空间URL,第二个参数指定文件元素的标签名，第三个参数用于指定文档类型对象

载入XML

Mozilla只支持一个载入XML的方法：load()。

Mozilla的XML DOM会在文件完全载入后触发load事件，也就是说必须使用onload事件处理函数来判断DOM何时完全载入。

（二）、读取XML

1、获取XML元素的属性值

通过attributes属性获取到元素的属性集合，然后再应用getNamedItem()方法得到指定属性的值，其中getNamedItem()的参数是属性名称。

2、通过元素名称访问XML文档

通过getElementsByTagName()方法获取指定元素名的元素数组。元素在元素数组中的次序与XML文档中出现的次序一致。

例如：var numberNode = xmldoc.getElementsByTagName("number");// 将获取XML文档中名称为number的所有元素

numberNode(1).firstChild.nodeValue 可获得XML文档中第一个number元素的值。其中firstChild属性是说明要访问元素所包含的文字。

3、通过JavaScript读取XML文档中的数据

4、使用XML DOM对象读取XML文件

5、通过JavaScript操作XML实现分页

通过recordset对象的absoluteposition属性、recordcount属性、movenext()方法和moveprevious()方法实现数据的分页导航功能。

recordset对象的属性和方法说明：

absoluteposition:返回当前记录的记录号

recordcount:返回总记录数

movenext()方法：将记录指针移动到下一条记录

moveprevious()方法：将记录指针向前移动一条记录

十、Ajax技术

Ajax是Asynchronous JavaScript And XML的缩写，即异步JavaScript和XML技术。

Ajax是JavaScript、XML、CSS、DOM等多种技术的组合，它可以实现客户端的异步请求操作。

传统的Web应用模式中，页面中用户的每一次操作都将触发一次返回Web服务器的HTTP请求，服务器进行相应的处理后，返回一个HTML页面给客户端，而Ajax应用中，页面中用户的操作通过Ajax引擎与服务器进行通行，然后将返回结构提交给客户端叶明的Ajax引擎，再由Ajax引擎来决定将这些数据插入到页面的指定位置。

JavaScript程序设计_读书笔记2

（一）、使用Ajax的优点：

* 减轻服务器的负担。Ajax的原则是“按需求获取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担

* 可以把一部分以前由服务器负担的工作转移到客户端，利用客户端闲置的资源进行处理，减轻服务器和带宽的负担，节约空间和带宽租用成本。

* 无刷新更新页面，从而使用户不用再像以前一样在服务器处理数据时，只能在处于处理状态的白屏前焦急的等待。Ajax使用XMLHttpRequest对象发送请求并得到服务器响应，在不需要重新载入整个页面的情况下，就可以通过DOM及时将更新的内容显示在页面上。

* 可以调用XML等外部数据，进一步促进Web页面显示和数据的分类

* 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序

（二）、XMLHttpRequest

XMLHttpRequest，是一个具有应用程序接口的JavaScript对象，能够使用超文本传输协议（HTTP）连接一个服务器，是微软公司为了满足开发者的需要，于1999年在IE 5.0浏览器中率先推出的。

1、XMLHttpRequest的初始化：

**（IE浏览器）var http_request = new ActiveXObject("Msxml2.XMLHTTP");或者var http_request = newActiveXObject("Microsoft.XMLHTTP");

** (Mozilla、Safari等浏览器) var http_request = new XMLHttpRequest();

例如：创建一个跨浏览器的XMLHttpRequest类：

2、XMLHttpRequest对象的常用方法

** open()方法

用于设置进行异步请求目标的URL、请求方法以及其他参数信息。语法如下：

open("method", "URL"[, asyncFlag[,"userName" [, "password"]]])

其中：method用于指定请求的类型，一般为get或post;

URL用于指定请求地址，可以使用绝对地址或者相对地址，并且可以传递查询字符串；

asyncFlag为可选参数，用于指定请求方式，同步请求为true,异步请求为false,默认情况下位true;

userName为可选参数，用于指定请求用户名，没有时可以省略；

password为可选参数，用于指定请求密码，没有时可省略；

** send() 方法

用于向服务器发送请求。如果请求声明为异步，该方法将立即返回，否则将等到接收到响应为止。语法：

send(content)

content用于指定发送的数据，可以是DOM对象的实例、输入流或字符串。如果没有参数需要传递可以设置为null。

** setRequestHeader() 方法

为请求的HTTP头设置值。语法：

setRequestHeader("label", "value")

label用于指定HTTP头；value用于为指定的HTTP头设置值。

** abort()方法

abort()方法用于停止当前异步请求

** getAllResponseHeaders()方法

getAllResponseHeaders()方法用于以字符串形式返回完整的HTTP头信息，当存在参数时，表示以字符串形式返回由该参数指定的HTTP头信息。

3、XMLHttpRequest对象的常用属性

onreadystatechange:每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数

readyState:请求的状态。有以下5个取值：0 = 未初始化 1 = 正在加载 2 = 已加载 3 = 交互中 4 = 完成

responseText 服务器的响应，表示为字符串

responseXML:服务器的响应，表示为XML。这个对象可以解析为一个DOM对象

status:返回服务器的HTTP状态吗，如：200=“成功” 202=“请求被接受，但尚未成功” 400=“错误的请求” 404=“文件未找到” 500=“内部服务器错误”

statusText : 返回HTTP状态码对应的文本

十一、JQuery

（一）、JQuery的介绍

JQuery是一套简洁、快速、灵活的JavaScript脚本库，它是由John Resig于2006年创建的，它帮助简化了JavaScript代码。JavaScript脚本库类似于Java的类库，将一些工具方法或对象方法封装在类库中，方便用户使用。JQuery因为它的简便易用，已被大量的开发人员推崇。

JQuery也是开源的。

JQuery是一个轻量级的JavaScript脚本库，其代码非常小巧，只有几十K

JQuery拥有大量强大的功能函数，能够帮助开发人员快速地实现各种功能，而且会让代码优雅简洁，结构清晰

JQuery具有良好的兼容性，它兼容各大主流浏览器，支持的浏览器包括IE6.0+、Firefox 1.5+ 、Safari 2.0+、Opera 9.0+。

JQuery链式的语法风格，精简了代码量，减少了页面体积，有助于浏览器快速加载页面。

JQuery可以通过插件实现更多的功能。插件种类很多，而且插件将JS代码和HTML代码完全分离，便于维护。

（二）、JQuery的下载与配置

登录JQuery官网：http://jquery.com 。在DownLoad界面下载文件，可以选择“压缩的、产品发布版本”，也可以选择“非压缩的、开发版本”，例如：compressed, production jQuery 3.2.1或uncompressed, development jQuery 3.2.1 。下载后的文件可能是：jquery-3.2.1.min.js 或 jquery-3.2.1.js

将 JQuery库下载到本地计算机后，还需要在项目中配置JQuery库。就是将下载后的文件放置到项目的指定文件夹下，通常放置在JS文件夹中，然后在需要应用JQuery的页面中使用下面的语句，将其引用到文件中。

注意：引用JQuery的<script>标签，必须放在所有的自定义脚本文件的<script>之前，否则在自定义的脚本代码中应用不到JQuery脚本库。

（三）、JQuery插件

JQuery具有强大的扩展能力，允许开发人员使用或是创建自己的JQuery插件来扩展JQuery的功能，这些插件可以帮助开发人员提高开发效率，节约项目成本。

1、插件的使用

JQuery插件的使用比较简单，首先将要使用的插件下载到本地计算机中，然后按照下面的步骤操作，就可以使用插件实现想要的效果了。

（1）把下载的插件包含到<head>标记内，并确保它位于主JQuery源文件之后。

（2）包含一个自定义的JavaScript文件，并在其中使用插件创建或扩展的方法。

（四）、JQuery选择器

JQuery中提供了许多功能强大的选择器帮助开发人员获取页面上的DOM元素，获取到的每个对象都将以JQuery包装集的形式返回。

1、JQuery的工厂函数

JQuery的工厂函数“$”,在JQuery中，无论使用哪种类型的选择符都需要从一个“$”符号和一对“()”开始。在“()”中通常使用字符串参数，参数中可以包含任何CSS选择符表达式。

常见的用法：

** 在参数中使用标记名：$("div") :用于获取文档中全部的<div>。

** 在参数中使用ID $("#username"):用于获取文档中ID属性值为username的一个元素。

** 在参数中使用CSS类名：$(".btn_grey"):用于获取文档中使用CSS类名为btn_grey的所有元素。

2、基本选择器

JQuery基本选择器包括ID选择器、元素选择器、类名选择器、多种匹配条件选择器和通配符选择器。

（1）、ID选择器（#id）

ID选择器#id就是利用DOM元素的id属性值来筛选匹配的选择，并以JQuery包装集的形式返回给对象

ID选择器的使用方法如下：

$("#id");

其中，id为要查询元素的ID属性值。例如，要查询ID属性值为user的元素，可以使用下面的JQuery代码：

$("#user");

JQuery中的ID选择器相当于传统的JavaScript中的document.getElementById()方法，JQuery用更简洁的代码实现了相同的功能。

（2）、元素选择器（element）

元素选择器是根据元素名称匹配相应的元素。通过元素选择器匹配到的元素可能有多个，也可能是一个。

元素选择器的使用方法：$("element");

其中，element为要查询元素的标记名。例如：$("div");

（3）、类名选择器（.class）

类名选择器是通过元素拥有的CSS类的名称查找匹配的DOM元素。在一个页面中，一个元素可以有多个CSS类，一个CSS类又可以匹配多个元素，如果有元素中有一个匹配的类的名称就可以被类名选择器选取到。

类名选择器的使用方法：$(".class");

（4）、复合选择器（selector1, selector2, selectorN）

复合选择器将多个选择器（可以是ID选择器、元素选择器或者类名选择器）组合在一起，两个选择器之间以逗号“，”分隔，只要符合其中的任何一个筛选条件就会被匹配，返回的是一个集合形式的JQuery包装集。

复合选择器的使用方法如下：$(" selector1, selector2, selectorN");

（5）、通配符选择器（*）

所谓的通配符，就是指符号“*”，它代表着页面上的每一个元素，也就是说如果使用$("*")将取得页面上所有的DOM元素集合的JQuery包装集。

3、层级选择器

所谓的层级选择器，就是根据页面DOM元素之间的父子关系作为匹配的筛选条件。

JQUery提供的层级选择器有：Ancestor descendan选择器、parent>child选择器、prev + next选择器和prev~siblings选择器。

（1）ancestor descendan选择器

ancestor descendan选择器中的ancestor代表祖先，descendant代表子孙，用于在给定的祖先元素下匹配所有的后代元素。

ancestor descendan选择器的使用方法：$("ancestor descendant");

其中 ancestor指任何有效的选择器， descendant指用以匹配元素的选择器，并且它是ancestor所指定元素的后代元素。

例如：$("ul li"); // 匹配ul元素下的全部li元素

（2）、parent > child选择器

parent > child选择器中的parent代表父元素， child代表子元素，用于在给定的父元素下匹配所有的子元素。使用该选择器只能选择父元素的直接子元素。

使用方法： $("parent > child"); 例如：$("form > input");

其中：parent指任何有效的选择器， child指用以匹配元素的选择器，并且它是匹配元素的选择器，并且它是parent元素的子元素。

（3）、prev + next选择器

prev + next选择器用于匹配所有紧接着prev元素后的next元素。其中，prev和next是两个相同级别的元素。

prev + next选择器的使用方法如下： $("prev + next");

其中：prev:指任何有效的选择器， next:一个有效选择器并紧接着prev选择器。

例如：匹配<div>标记后的<img>标记： $("div + img");

（4）prev ~ siblings选择器

prev ~ siblings选择器用于匹配prev元素之后的所有siblings元素。其中，prev和siblings是两个相同辈元素。

prev ~ siblings选择器的使用方法如下：$("prev ~ siblings"); 例如：$("div ~ ul");

其中prev:指任何有效的选择器， siblings：指一个有效选择器并紧接着prev选择器的（所有兄弟节点元素）。

4、过滤选择器

过滤选择器包括简单过滤器、内容过滤器、可见性过滤器、表单对象属性过滤器和子元素选择器等。

（1）、简单过滤器

简单过滤器是指以冒号开头，通常用于实现简单过滤效果的过滤器。

JQuery提供的简单过滤器有：

:first // 匹配找到的第一个元素，它是与选择器结合使用的。例如 $("tr:first") // 匹配表格的第一行

:last // 匹配找到的最后一个元素，它是与选择器结合使用的。例如 $("tr:last") // 匹配表格的最后一行

:even // 匹配所有索引值为偶数的元素，索引值从0开始计数。例如 $("tr:even") // 匹配索引值为偶数的行

:odd // 匹配所有索引值为奇数的元素，索引从0开始计数。例如 $("tr:odd") // 匹配索引值为奇数的行

:eq(index) // 匹配一个给定索引值的元素。例如 $("tr:eq(1)") // 匹配第二个div元素

:gt(index) // 匹配所有大于给定索引值的元素例如 $("tr:gt(0)") // 匹配第二个已以上的div元素

:lt(index) // 匹配所有小于给定索引值的元素例如 $("tr:lt(2)") // 匹配第二个及以下的div元素

:header // 匹配如h1, h2, h3 .... 之类的标题元素例如 $(":header") // 匹配全部的标题元素

:not(selector) // 去除所有与给定选择器匹配的元素例如 $("input:not(:checked)") // 匹配没有被选中的input元素

:animated // 匹配所有正在执行动画效果的元素例如 $(":animated") // 匹配所有正在执行的动画

（2）、内容过滤器

内容过滤器就是通过DOM元素包含的文本内容以及是否含有匹配的元素进行筛选。内容过滤器包括：contains(text)、:empty、:has(selector)和:parent 4种

:contains(text)匹配包含给定文本的元素。例如：$(li:contains('DOM')) // 匹配含有“DOM”文本内容的li元素

:empty 匹配所有不包含子元素或者文本的空元素。例如：$("td:empty") // 匹配不包含子元素或者文本的单元格

:has(selector) 匹配含有选择器所匹配元素的元素。例如：$("td:has(p)") // 匹配表格的单元格中含有<p>标记的单元格

:parent 匹配含有子元素或者文本的元素。例如：$("td:parent") // 匹配不为空的单元格，即在该单元格中还包括子元素或者文本

（3）、可见性过滤器

元素的可见状态有两种，分别是隐藏状态和显示状态。可见性过滤器就是利用元素的可见状态匹配元素的。

:visible过滤器匹配所有可见的元素

:hidden过滤器匹配所有不可见元素

注：在应用:hidden过滤器时，display属性是none以及input元素的type属性为hidden的元素都会被匹配到。

（4）、表单对象的属性过滤器

表单对象的属性过滤器通过表单元素的状态属性（例如选中、不可用等状态）匹配元素，包括 :checked过滤器、:disabled过滤器、:enabled过滤器和:selected过滤器 4种

:checked 匹配所有选中的被选中元素，例如 $("input:checked") // 匹配checked属性为checked的input元素

:disabled 匹配所有不可用元素，例如$("input:disabled") // 匹配disabled属性为disabled的input元素

:enabled 匹配所有可用的元素，例如$("input:enabled") // 匹配enabled属性为enabled的input元素

:selected 匹配所有选中的option元素，例如$("select option:selected") // 匹配select元素中被选中的option

（5）、子元素选择器

子元素选择器就是筛选给定某个元素的子元素，具体的过滤条件由选择器的种类而定。JQuery的子元素选择器如下：

:first-child :匹配所有给定元素的第一个子元素，例如$("ul li:first-child") // 匹配ul元素中的第一个子元素li

:last-child:匹配所有给定元素的最后一个子元素，例如$("ul li:last-child") // 匹配ul元素中的最后一个子元素li

:only-child:匹配元素中唯一的子元素，例如$("ul li:only-child") // 匹配只含有一个li元素的ul元素中的li

:nth-child(index/even/odd/equation) , 匹配其父元素下的第N个子或奇偶元素，index从1开始，而不是从0开始，例如$("ul li:nth-child(even)") // 匹配ul中索引值为偶数的li元素

// $("ul li:nth-child(3)") // 匹配ul中第3个li元素

5、属性选择器

属性选择器就是通过元素的属性作为过滤条件进行筛选对象。JQuery提供的属性选择器如下：

[attribute] 匹配包含给定属性的元素。例如$("div[name]") // 匹配含有name属性的div元素

[attribute=value] 匹配给定的属性是某个特定值的元素，例如 $("div[name=‘test’]") // 匹配name属性是test的div元素

[attribute!=value]匹配所有含有指定的属性，但属性值不等于特定值的元素，例如$("div[name!='test']") // 匹配name属性值不是test的div元素

[attribute*=value] 匹配给定的属性是以包含某些值的元素，例如$("div[name*='test']") // 匹配name属性中含有test值的div元素

[attribute^=value]匹配给定的属性是以某些值开始的元素。例如$(“div[name^='test']”) // 匹配name属性以test开头的div元素

[attribute$=value]匹配给定的属性是以某些值结尾的元素。例如$("div[name$='test']") // 匹配name属性以test结尾的div元素

[selector1][selector2][selectorN] 复合属性选择器，需要同时满足多个条件时使用。例如$("div[id][name^='test']") // 匹配具有id属性并且name属性是以test开头的div元素。

6、表单选择器

表单选择器是匹配经常在表单内出现的元素。但是匹配的元素不一定在表单中。表单选择器如下：

:input 匹配所有的input元素。例如 $(":input")。// 匹配所有的input元素 ; $("form : input") // 匹配<form>标记中的所有input元素，注意：在form和:之间有一个空格。

:button 匹配所有的普通按钮，即type="button"的input元素。例如：$(":button") // 匹配所有的普通按钮

:checkbox 匹配所有的复选框，例如：$(":checkbox") // 匹配所有的复选框

:file 匹配所有的文件域，例如：$(":file") // 匹配所有的文件域

:hidden 匹配所有的不可见元素，或者type为hidden的元素。例如$(":hidden") // 匹配所有的隐藏域

:image 匹配所有的图像域，例如$(":image") // 匹配所有的图像域

:password 匹配所有的密码域，例如$(":password") // 匹配所有的密码域

:radio 匹配所有的单选按钮，例如$(":radio") // 匹配所有的单选按钮

:reset 匹配所有的重置按钮，即type="reset"的input元素。例如$(":reset") // 匹配所有的重置按钮

:submit 匹配所有的提交按钮，即type="submit"的input元素。例如$(":submit") // 匹配所有的提交按钮

:text 匹配所有的单行文本框，例如 $(":button") // 匹配所有的单行文本框

（五）、JQuery控制页面

1、对元素内容和值的操作

JQuery提供了对元素的内容和值进行操作的方法。其中，元素的值是元素的一种属性，大部分元素的值都对应value属性。

元素的内容是指定义元素的起始标记和结束标记中间的内容，又可分为文本内容和HTML内容。

例如<div> <p>测试内容</p> </div> 。其中div元素的文本内容是“测试内容”；div元素的HTML内容是指“<p>测试内容</p>”。

**1、对元素文本内容的操作

JQuery提供了text()和text(val)两个方法用于对文本内容操作。其中text()用于获取全部匹配元素的文本内容，text(val)用于设置全部匹配元素的文本内容。

**2、对HTML内容操作

JQuery提供了html()和html(val)两个方法用于对HTML内容操作，其中html()用于获取第一个匹配元素的HTML内容，html(val)用于设置全部匹配元素的HTML内容。

注：html()和html(val)不能用于XML文档，但是可以用于XHTML文档。

**3、对元素值操作

JQuery提供了3种对元素值操作的方法：

var():用于获取第一个匹配元素的当前只，返回值可能是一个字符串，也可能是一个数组。例如当select元素有两个选中值时，返回结果就是一个数组。

示例：$("#username").val(); // 获取id为username的元素的值

var(val):用于设置所有匹配元素的值。示例：$("input:text").val("新值") // 为全部文本框设置值

var(arrVal) : 用于为check、select和radio等元素设置值，参数为字符串数组。示例：$("select").val(['列表项1','列表项2']) // 为下拉列表框设置多选值。

2、对DOM节点进行操作

**1、查找节点

通过“JQuery的选择器”实现查找节点

**2、创建节点

创建节点包括两个步骤，一是创建新元素，二是将新元素插入到文档中（即父元素中）。

**3、插入节点

JQuery中，插入节点可以分为在元素内部插入和在元素外部插入两种。

在元素内部插入就是向一个元素中添加子元素和内容。

append(content) : 为所有匹配的元素的内部追加内容。示例：$("#B").append("<p>A</p>"); // 向id为B的元素中追加一个段落

appendTo(content):将所有匹配元素添加到另一个元素的元素集合中。示例：$("#B").appendTo("#A"); // 将id为B的元素追加到id为A的元素后面，也就是将B元素移动到A元素的后面。

prepend(content): 为所有匹配的元素的内部前置内容。示例：$("#B").prepend("<p>A</p>"); // 向id为B的元素内容前添加一个段落

prependTo(content):将所有匹配元素前置到另一个元素的元素集合中。示例：$("#B").prependTo("#A"); // 将id为B的元素添加到id为A的元素的前面，也就是将B元素移动到A元素的前面。

在元素外部插入

在元素外部插入就是将要添加的内容添加到元素之前或元素之后。

after(content) : 在每个匹配的元素之后插入内容，示例：$("#B").after("<p>A</p>"); // 向id为B的元素的后面添加一个段落

insertAfter(content):将所有匹配的元素插入到另一个指定元素的元素集合的后面。示例：$("<p>test</p>").insertAfter("#B"); // 将要添加的段落插入到id为B的元素的后面

before(content):在每个匹配的元素之前插入内容，示例：$("#B").before("<p>A</p>"); // 向id为B的元素内容前添加一个段落

insertBefore(content):把所有匹配的元素插入到另一个指定元素的元素集合的前面；示例：$("#B").insertBefore("#A"); // 将id为B的元素添加到id为A的元素的前面，也就是将B元素移动到A元素的前面

** 4、删除、复制与替换节点

--- 删除节点

empty():用于删除匹配的元素集合中所有的子节点，并不删除该元素

remove([expr])：用于从DOM中删除所有匹配的元素。

---复制节点

clone():用于复制匹配的DOM元素并且选中这些复制的副本。

clone(flag): flag为true时表示复制匹配的元素以及其所有的事件处理并且选中这些复制的副本，flag为false时，表示不复制元素的事件处理。

--- 替换节点

replaceAll(selector): 用于使用匹配的元素替换掉所有selector匹配到的元素

replaceWith(content):用于将所有匹配的元素替换成指定的HTML或DOM元素。

3、对元素属性进行操作

对元素属性操作的方法：

-- attr(name) : 获取匹配的第一个元素的属性值（无值时返回undefined）。示例：$("img").attr(‘src’); // 获取页面中第一个img元素的src属性的值

-- attr(key,value):为所有匹配的元素设置一个属性值（value是设置的值）。示例：$("img").attr("title", "草莓")； // 为图片添加一个标题属性，属性值为“草莓”。

-- attr(key, fn):为所有匹配的元素设置一个函数返回的属性值（fn代表函数）。示例：$("#fn").attr("value", function(){ reutrn this.name;}); // 将元素的名称作为其value属性值。

-- attr(properties):为所有匹配元素以集合（{名:值，名:值}）形式同时设置多个属性。示例：$("img").attr({src:"test.gif", title:"图片示例"}); // 为图片同时添加两个属性，分别是src和title

-- removeAttr(name) : 为所有匹配元素删除一个属性。示例：$("img").removeAttr("title"); // 移除所有图片的title属性。

4、对元素的CSS样式操作

在JQuery中，对元素的CSS样式操作可通过CSS类或者CSS的属性来实现。

*** 通过修改CSS类实现

JQuery中用于修改CSS类的方法：

addClass(class) : 为所有匹配的元素添加指定的CSS类名，示例：$("div").addClass("blue line"); // 为全部div元素添加blue和line两个CSS类。

removeClass(class)：从所有匹配的元素中删除全部或者指定的CSS类。示例：$("div").removeClass("line"); // 删除全部div元素中添加的lineCSS类。

toggleClass(class)：如果存在（不存在）就删除（添加）一个CSS类。示例：$("div").toggleClass("yellow"); // 当匹配的div元素中存在yellow CSS类，则删除该类，否则添加该CSS类

toggleClass(class, switch) : 如果switch参数为true则加上对应的CSS类，否则就删除，通常switch参数为一个布尔型的变量。示例：$("img").toggleClass("show", false); // 为img元素删除CSS类show

*** 通过修改CSS属性实现

css(name): 返回第一个匹配元素的样式属性。示例：$("div").css("color"); // 获取第一个匹配的div元素的color属性值

css(name, value) : 为所有匹配元素的指定样式设置值。示例：$("img").css("border", "1px solid #000000"); // 为全部img元素设置边框样式

css(properties):以{属性：值，属性:值，....}的形式为所有匹配的元素设置样式属性。示例：$("tr").css({"background-color":"#0A65F3", "font-size":"14px", "color":"#FFFFFF"});

（六）、JQuery的事件处理

传统的JavaScript中内置了一些事件响应的方式，但是JQuery增强、优化并扩展了基本的事件处理机制。

1、页面加载响应事件

$(document).ready()方法，该方法是在获取文档就绪的时候被调用。

书写格式为：

$(document).ready(function() { // 在这里写代码

});

可以简写为：

$().ready(function() { // 在这里写代码

});

注：$()不带参数时，默认的参数就是document,所以$()是$(document)的简写形式。

JQuery中的$(document).ready()方法与JavaScript中的window.onload()方法的比较：

** 在一个页面上可以无限制地使用$(document).ready()方法，各个方法间并不冲突，会按照在代码中的顺序依次执行。而一个页面中只能使用一个window.onload()方法。

** 在一个文档完全下载到浏览器时（包括所有关联的文件，例如图片、横幅等）就会响应window.onload()方法。而$(document).ready()方法是在所有的DOM元素完全就绪以后就可以调用，不包括关联的文件。（因此说，$(document).ready()方法优于window.onload()方法）。

2、JQuery中的事件

在不同浏览器中事件名称是不同的，但JQuery帮助我们统一了所有时间的名称。JQuery中的事件如下：

blur() : 触发元素的blur事件

blur(n):在每一个匹配元素的blur事件中绑定一个处理函数，在元素失去焦点时触发，既可以是鼠标行为也可以是使用<Tab>键离开的行为

change():触发元素的change事件

change(fn):在每个匹配元素的change事件中绑定一个处理函数，在元素的值改变并失去焦点时触发

click:触发元素的click事件

click(fn):在每个匹配元素的click事件中绑定一个处理函数，在元素上单击时触发

dbclick():触发元素的dblclick事件

dblclick(fn):在每个匹配元素的dblclick事件中绑定一个处理函数，在某个元素上双击触发

error():触发元素的error事件

error(fn):在每个匹配元素的error事件中绑定一个处理函数，当JavaScript发生错误时，会触发error()事件

focus():触发元素的focus事件

focus(fn):在每个匹配元素的focus事件中绑定一个处理函数，当匹配的元素获得焦点时触发，通过鼠标点击或者<Tab>键触发

keydown():触发元素的keydown事件

keydown(fn):在每个匹配元素的keydown事件中绑定一个处理函数，当键盘按下时触发

keyup():触发元素的keyup事件

keyup(fn):在每个匹配元素的keyup事件中绑定一个处理函数，会在按键释放时触发

keypress():触发元素的keypress事件

keypress(fn):在每个匹配元素的keypress事件中绑定一个处理函数，敲击按键时触发（即按下并抬起同一个按键）

load(fn):在每个匹配元素的load事件中绑定一个处理函数，匹配的元素内容完全加载完毕后触发

mousedown(fn):在每个匹配元素的mousedown事件中绑定一个处理函数，鼠标在元素上点击后触发

mousemove(fn):在每个匹配元素的mousemove事件中绑定一个处理函数，鼠标在元素上移动时触发

mouseout(fn):在每个匹配元素的mouseout事件中绑定一个处理函数，鼠标从元素上离开是触发

mouseover(fn):在每一个匹配元素的mouseover事件中绑定一个处理函数，鼠标移入对象时触发

mouseup(fn):在每个匹配元素的mouseup事件中绑定一个处理函数，鼠标点击对象释放时触发

resize(fn):在每个匹配元素的resize事件中绑定一个处理函数，当文档窗口改变大小时触发

scroll(fn):在每个匹配元素的scroll事件中绑定一个处理函数，当滚动条发生变化时触发

select():触发元素的select()事件

select(fn):在每个匹配元素的select事件中绑定一个处理函数，当用户在文本框（包括input和textarea）选中某段文本时触发

submit():触发元素的submit事件

submit(fn):在每个匹配元素的submit事件中绑定一个处理函数，表单提交时触发

unload(fn):在每个匹配元素的unload事件中绑定一个处理函数，在元素卸载时触发该事件

3、事件绑定

在JQuery中，事件绑定通常可以分为为元素绑定事件、移除绑定和绑定一次性事件处理3种情况。

*** 为元素绑定事件

在JQuery中，为元素绑定事件可以使用bind()方法，该方法的语法结构如下：

bind(type, [data], fn)

其中，type:事件类型。data:可选参数，作为event.data属性值传递给事件对象的额外数据对象。（大多数的情况下不使用该参数）；fn:绑定的事件处理程序。

例如：为普通按钮绑定一个单击事件，用于在单击该按钮时，弹出提示对话框，可以使用下面的代码：$("input:button").bind("click", function(){alert(‘单击了按钮’)；})；

*** 移除绑定

在JQuery中，为元素移除绑定事件可以使用unbind()方法，该方法的语法结构如下：

unbind([type], [data])

其中，type:可选参数，用于指定事件类型； data:可选参数，用于指定要从每个匹配元素的时间中反绑定的时间处理函数。

注：如果unbind()方法不填参数，将会删除匹配元素上所有绑定的事件

例如：$("input:button").unbind("click"); // 移除为普通按钮绑定的单击事件。

*** 绑定一次性事件处理

在JQuery中，为元素绑定一次性事件处理可以使用one()方法，定义如下：

one(type, [data], fn)

其中，type:用于指定事件类型；data:可选参数，作为event.data属性值传递给事件对象的额外数据对象；fn:绑定到每个匹配元素的事件上面的处理函数。

例如：当用户第一次单击匹配的div元素时，弹出提示对话框显示div元素的内容：

$("div").one("click", function() { alert( $(this).text() ); // 在弹出的提示对话框中显示div元素的内容

});

4、模拟用户操作

在JQuery中提供了模拟用户的操作触发事件、模仿悬停事件和模拟鼠标连续单击事件等3种模拟用户操作的方法。

(1)、模拟用户的操作触发事件

在JQuery中一般常用triggerHandler()方法和trigger()方法来模拟用户的操作触发事件。triggerHandler()方法不会导致浏览器同名的默认行为被执行，而trigger()方法会导致浏览器同名的默认行为的执行。

例如：在页面载入完成时执行按钮的click事件：

$(document).ready(function() {$("input:button").bind("click", function(event, msg1, msg2){

alert(msg1 + msg2); // 弹出提示对话框

}).trigger("click", ["欢迎访问", "明日科技"]); // 页面加载触发单击事件

});

(2)、模仿悬停事件

模仿悬停事件是指模仿鼠标移动到一个对象上面又从该对象上面移出的事件，可以通过JQuery提供的hover(over, out)方法实现。hover()方法的结构如下：

hover(over, out)

其中，over:用于指定当鼠标在移动到匹配元素上时触发的函数；out:用于指定当鼠标在移出匹配元素上时触发的函数。

例如：模拟隐藏超链接地址：

$("a.main").hover(function() {

window.status = "http://www.mrbccd.com"; return true; // 设定状态栏文本

}, function() {

window.status="完成"; return true; // 设定状态栏文本

});

(3)、模拟鼠标连续单击事件

模拟鼠标连续单击事件实际上是为每次单击鼠标时设置一个不同的函数。从而实现用户每次单击鼠标时，都会得到不同的效果。通过toggle()方法实现。

toggle()方法的语法格式：toggle(odd, even)

其中，odd:用于指定奇数次单击按钮时触发的函数； even:用于指定当偶数次单击按钮时触发的函数。

even:用于指定当偶数次单击按钮时触发的函数。

5、事件捕获与事件冒泡

事件捕获和事件冒泡都是一种事件模型。DOM标准规定应该同时使用这两个模型：首先事件从根元素到子元素进行捕获，然后再通过事件冒泡返回到根元素。

在标准事件模型中，事件处理程序既可以注册到事件捕获阶段，也可以注册到事件冒泡阶段，但是并不是所有的浏览器都支持标准的事件模型，大部分浏览器默认都把事件注册在事件冒泡阶段，所以JQuery始终会在事件冒泡阶段注册事件处理程序。

（1）、什么是事件捕获和事件冒泡？

假设，div元素、p元素、span元素是嵌套的元素，div元素是最外层元素、span元素是最内层元素。如果三个元素都有mouseover事件响应，那么当鼠标移动到span元素上时，三个元素的mouseover事件都会响应，在IE中最先响应的将是span元素的事件，其次是p元素、最后为div元素，这种事件响应顺序，就叫做事件冒泡。另一种相反的响应策略是：事件捕获，最先响应事件的是最外层元素。示意图如下：

（2）、阻止事件冒泡

事件冒泡会经常导致一些令开发人员头疼的问题，所以必要的时候，需要阻止事件冒泡。方法是：通过事件对象提供的stopPropagation()方法，可以阻止事件冒泡；

示例：

$(".test1").mouseover(function(event) {
$(".test1").addClass("redBorder");
event.stopPropagation();
});

（3）、阻止浏览器默认行为

在表单验证的时候，表单的某些内容没有通过验证，但是在单击了提交按钮以后表单还是会提交（浏览器的默认操作）。这时就需要阻止浏览器的默认操作。JQuery中，应用preventDefault()方法可以阻止浏览器的默认行为。

在事件处理程序中加入如下代码就可以阻止默认行为：

event.preventDefault() // 阻止浏览器默认操作

如果想同时停止事件冒泡和浏览器默认行为，可以在事件处理程序中返回false.即

return false; // 阻止事件冒泡和浏览器默认操作。

这是同时调用stopPropagation()和preventDefault()方法的一种简要写法。

（七）、JQuery的动画效果

1、基本的动画效果

基本的动画效果就是元素的隐藏和显示。

JQuery中提供了两种控制元素隐藏和显示的方法，一种是分别隐藏和显示匹配元素，另一种是切换元素的可见状态。

(1)、 ** 隐藏匹配元素

使用hide()方法可以隐藏匹配的元素。语法格式：

其一：hide()

示例：$("img").hide(); // 隐藏页面中的全部图片

其二：hide(speed, [callback])

参数：speed:用于指定动画的时长，可以数字（单位毫秒），表示指定毫秒数后完全隐藏，也可以是默认参数slow(600毫秒)、normal(400毫秒)和fast(200毫秒)。

参数：callback:可选参数，用于指定隐藏完成后要触发的回调函数。

(2)、** 显示匹配元素

与hide()对应，也有两种形式show() 和show(speed, [callback])

(3)、切换元素的可见状态

使用toggle()方法可实现切换元素的可见状态。

语法格式：toggle()

2、淡入淡出的动画效果

JQuery中提供的实现淡入淡出动画效果的方法如下：

fadeIn(speed, [callback]) // 通过增大不透明度实现匹配元素淡入的效果 // 示例： $("img").fadeIn(300); // 淡入效果

fadeOut(speed, [callback]) // 通过减小不透明度实现匹配元素淡出的效果 // 示例： $("img").fadeOut(300); // 淡出效果

fadeTo(speed, [callback]) // 将匹配元素的不透明度以渐进的方式调整到指定的参数 // 示例： $("img").fadeTo(300， 0.15); // 在0.3秒内将图片淡入淡出至15%不透明。

3、滑动效果

JQuery中,可以通过slideDown()、slideUp()、slideToggle()方法来显示滑动效果。

(1)、slideDown()方法

用来滑动显示匹配的元素。

语法格式：slideDown(speed, [callback])

(2)、slideUp()方法

用来滑动隐藏匹配的元素

语法格式：slideUp(speed, [callback])

(3)、slideToggle()方法

通过高度的变化动态切换元素的可见性

语法格式：slideToggle(speed, [callback])

4、自定义的动画效果

在JQuery中实现自定义动画效果，主要通过animate()方法创建自定义动画，通过stop()方法停止动画。

animate()方法的基本语法格式是：animate(params, speed, callback)

其中，params:表示一个包含属性和值的映射，可以同时包含多个属性。

speed:表示动画运动的速度

callback:表示一个回调函数，当动画效果运行完毕后执行该回调函数。可选参数

注意：使用animate()方法时，必须设置元素的定位属性position为relative或absolute,元素才能动起来。否则它们只会静止不动。

使用stop()方法停止动画

stop()方法的语法格式如下：stop(clearQueue, gotoEnd)

其中，clearQueue:表示是否清空尚未执行完的动画队列（值为true时表示清空动画队列）。

gotoEnd:表示是否让正在执行的动画直接到达动画结束时的状态（值为true时表示直接到达动画借宿时状态）。

十二、JavaScript实用技巧与高级应用

1、建立函数库

在实际的网页设计与制作过程中，往往会重复地应用一些JavaScript函数，一般应将这些常用的函数存储在一个外置的独立的JavaScript文件中，作为网页制作的JavaScript函数库。在应用时，直接调用该函数库文件即可。

函数库中的函数一般可以分为以下6种类型：

* 用于简化程序的函数。例如，根据元素id获取元素对象的getName()函数。

* 用于校验用户输入的函数。例如，判断表单中的主要元素是否为空及类型是否匹配，以及用来验证E-mail地址、验证网址和验证身份证号码的函数。

* 用于取值与设置值的函数。例如，查询许愿字条并设置字条显示特征的函数。

* 用于字符串处理的函数。

* 用于列表处理的函数。

* 用于网页元素显示的函数。例如，单击许愿字条显示特效，使其至顶。

2、识别浏览器

使用JavaScript脚本可以识别出浏览器。通过navigator对象自动识别浏览器的相关信息。代码如下：

3、弹出窗口

（1）、应用SUBMIT弹出新窗口

在开发网页的过程中，可以不用window.open的方法打开一个窗口。而是通过应用SUBMIT弹出新窗口。例如，具体方法如下：

document.write("<form action=‘test.html’ target='mywindow'>");

document.write("<input type='submit' value='登录音乐网' name='submit'>");

document.write("</form>");

</SCRIPT>

(2)、应用target属性更换窗口内容

例如，应用传统的方法打开一个窗口，然后通过单击右面的超链接将一个新的内容写入到这个弹出的窗口中，代码如下：

function openwin() {

window.open("test.html", "mywindow");

}

</script>

<a href="student.html" target="mywindow"> 学习JavaScript的窍门</a>

(3)、弹出图片窗口

弹出图片窗口主要应用window对象的open方法实现，在本实例中，通过该方法弹出一个窗口，并显示一张图片。

<form>

</form>

(4)、定位窗口

使用screen对象和window对象的moveTo()方法，可以控制窗口在屏幕中的位置。

screen对象的常用属性：

width : 用户整个屏幕的水平尺寸，以像素为单位

height:用户整个屏幕的垂直尺寸，以像素为单位

pixelDepth:显示器的每个像素的位数

colorDepth:返回当前颜色设置所用的位数，1代表黑白；8代表256色；16代表增强色；24/32代表真彩色

availHeight:返回窗口内容区域的垂直尺寸，以像素为单位

availWidth:返回窗口内容区域的水平尺寸，以像素为单位

4、在网页中加入菜单

** 收缩式导航菜单

** 自动隐藏的弹出式菜单

** 半透明背景的下拉菜单设计

** 树状目录

5、用JavaScript实现动画导航菜单

秒客网

JavaScript程序设计_读书笔记2

相关文章