web前端基础—jquery选择器与css样式设计

1.1 第一个简单的jQuery程序：

 2.  jQuery选择器

3. jQuery设置元素及内容

3.1 利用jQuery进行CSS样式设计：

1.jQuery概述

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

jQuery 作为 JavaScript 封装的库，他的目的就是为了简化开发者使用 JavaScript。

主要功能有以下几点：

1.像 CSS 那样访问和操作 DOM

2.修改 CSS 控制页面外观

3.简化 JavaScript 代码操作

4.事件处理更加容易

5.各种动画效果使用方便

6.让 Ajax 技术更加完美

7.基于 jQuery 大量插件

8.自行扩展功能插件

jQuery 最大的优势，就是特别的方便。比如模仿 CSS 获取 DOM，比原生的 JavaScript

要方便太多。并且在多个 CSS 设置上的集中处理非常舒服，而最常用的 CSS 功能又封装到

单独的方法，感觉非常有心。最重要的是 jQuery 的代码兼容性非常好，你不需要总是头疼

着考虑不同浏览器的兼容问题。

1.1 第一个简单的jQuery程序：

 2.  jQuery选择器

在使用 jQuery 选择器时，我们首先必须使用“$()”函数来包装我们的 CSS 规则。而

CSS 规则作为参数传递到 jQuery 对象内部后，再返回包含页面中对应元素的 jQuery 对象。

随后，我们就可以对这个获取到的 DOM 节点进行行为操作了。

#box { //使用 ID 选择器的 CSS 规则

color:red; //将 ID 为 box 的元素字体颜色变红

}

那么除了 ID 选择器之外，还有两种基本的选择器，分别为：元素标签名和类(class)：

选择器	CSS 模式	jQuery 模式	描述
元素名标签	div {}	$('div')	获取所有 div 元素的 DOM 对象
ID	#box {}	$('#box')	获取一个 ID 为 box 元素的 DOM 对象
类	. box{}	$('.box')	获取所有class为box的所有DOM对象

jQuery规则：（类比于css规则记以）

$('#box').css('color', 'red');    //ID 选择器，返回单个元素

$('.box').css('color', 'red');      //类(class)选择器，返回多个元素

 /为了证明 ID 返回的是单个元素，而元素标签名和类(class)返回的是多个，我们可以采

用 jQuery 核心自带的一个属性 length 或 size()方法来查看返回的元素个数。

alert($('div').size()); //3 个

alert($('#box').size()); //1 个，后面两个失明了

alert($('.box').size()); //3 个

同理，你也可以直接使用 jQuery 核心属性来操作：

alert($('#box').length); //1 个，后面失明了

警告：有个问题特别要注意，ID 在页面只允许出现一次，我们一般都是要求开发者要

遵守和保持这个规则。但如果你在页面中出现三次，并且在 CSS 使用样式，那么这三个元

素还会执行效果。但如果，你想在 jQuery 这么去做，那么就会遇到失明的问题。所以，开

发者必须养成良好的遵守习惯，在一个页面仅使用一个 ID。

我们在之前的代码一直在使用$(function () {});这段代码进行首尾包裹，那么为什么必须

要包裹这段代码呢？原因是我们jQuery库文件是在body元素之前加载的，我们必须等待所

有的DOM元素加载后，延迟支持DOM操作，否则就无法获取到。

在延迟等待加载，JavaScript提供了一个事件为load，方法如下：

（1）window.onload = function () {};          //JavaScript等待加载,为了延迟支持DOM操作

（2）$(document).ready(function () {});     //jQuery等待加载

 $(document).ready(function () {})的简写形式：$(function () {}) 

在实际应用中，我们都很少直接去使用window.onload，因为他需要等待图片之类的大

型元素加载完毕后才能执行JS代码。所以，最头疼的就是网速较慢的情况下，页面已经全

面展开，图片还在缓慢加载，这时页面上任何的JS交互功能全部处在假死状态。并且只能

执行单次在多次开发和团队开发中会带来困难。

3. jQuery设置元素及内容

在 jQuery 中，已经将最常用的 DOM 操作方法进行了有效封装，并且不需要考虑浏览器的兼容性。

1.D 表示的是页面文档 Document、O 表示对象，即一组含有独立特性的数据集合、M

表示模型，即页面上的元素节点和文本节点。

2.DOM 有三种形式，标准 DOM、HTML DOM、CSS DOM，大部分都进行了一系列的

封装，在 jQuery 中并不需要深刻理解它。

3.树形结构用来表示 DOM，就非常的贴切，大部分操作都是元素节点操作，还有少部

分是文本节点操作。

我们通过前面所学习的各种选择器、过滤器来得到我们想要操作的元素。这个时候，我们就可以对这些元素进行 DOM 的操作。那么，最常用的操作就是对元素内容的获取和修改。

方法名	描述
html()	获取元素中 HTML 内容
html(value)	设置元素中 HTML 内容
text()	获取元素中文本内容
text(value)	设置原生中文本内容
val()	获取表单中的文本内容
val(value)	设置表单中的文本内容

演示： 

对上面程序稍加改动： 

结果： 

 在常规的 DOM 元素中，我们可以使用 html()和 text()方法获取内部的数据。html()方法

可以获取或设置 html 内容，text()可以获取或设置文本内容。

$('#box').html(); //获取 html 内容

$('#box').text(); //获取文本内容，会自动清理 html 标签

$('#box').html('<em>www.li.cc</em>'); //设置 html 内容

$('#box').text('<em>www.li.cc</em>'); //设置文本内容，会自动转义 html 标签

注意：当我们使用 html()或 text()设置元素里的内容时，会清空原来的数据。而我们期

望能够追加数据的话，需要先获取原本的数据。

除了对元素内容进行设置和获取，通过 jQuery 也可以对元素本身的属性进行操作，包括获取属性的属性值、设置属性的属性值，并且可以删除掉属性。attr()和 removeAttr()

方法名	描述
attr(key)	获取某个元素 key 属性的属性值
attr(key, value)	设置某个元素 key 属性的属性值
attr({key1:value2, key2:value2...})	设置某个元素多个 key 属性的属性值
attr(key, function (index, value) {})	设置某个元素 key 通过 fn 来设置

元素样式操作包括了直接设置 CSS 样式、增加 CSS 类别、类别切换、删除类别这几种

操作方法。而在整个 jQuery 使用频率上来看，CSS 样式的操作也是极高的，所以需要重点

掌握。

3.1 利用jQuery进行CSS样式设计：

方法名	描述
css(name)	获取某个元素行内的 CSS 样式
css([name1, name2, name3])	获取某个元素行内多个 CSS 样式
css(name, value)	设置某个元素行内的 CSS 样式
css(name, function (index, value) )	设置某个元素行内的 CSS 样式
css({name1 : value1, name2 : value2})	设置某个元素行内多个 CSS 样式
addClass(class)	给某个元素添加一个 CSS 类
addClass(class1 class2 class3...)	给某个元素添加多个 CSS 类
removeClass(class)	删除某个元素的一个 CSS 类
removeClass(class1 class2 class3...)	删除某个元素的多个 CSS 类
toggleClass(class)	来回切换默认样式和指定样式
toggleClass(class1 class2 class3...)	同上
toggleClass(class, switch)	来回切换样式的时候设置切换频率
toggleClass(function () {})	通过匿名函数设置切换的规则
toggleClass(function () {}, switch)	在匿名函数设置时也可以设置频率
toggleClass(function (i, c, s) {}, switch)	在匿名函数设置时传递三个参数

在 CSS 获取上，我们也可以获取多个 CSS 样式，而获取到的是一个对象数组，如果用

传统方式进行解析需要使用 for in 遍历。

3.2 几个例子分析： 

 运行：