第一章jQuery基础

Posted 2020-11-20 sfha

一.jQuert简介

1.什么是jQuery

jQuery是javascript的程序库之一，它是javaScript对象和实用函数的封装。

jQuery是继Prototype之后又一个优秀的javaScript库，是由美国人 Johh  Resig于2006年创建的开源项目。

jQuery只是javaScript的程序库，只相当于它的一个子集，并不能完全取代javaScript。

2.为什么要使用jQuery

与javaScript相比，使用jQuery制作交互特效的语法更为简单，代码量大大减少，不存在浏览器兼容性的问题。

3. jQuery与其他javascript库

按照使用占比，几大javaScript库占比如下：

1. jQuery      (62%)
2. Bootstrap         (22%)
3. Zepto        (6%)
4. Ext   (5%)
5. YUI   (5%)

 

4. jQuery的用途

1）  访问和操作DOM元素

使用jQuery可以很方便的获取和修改页面中的制定元素，无论是删除、移动还是复制元素，jQuery都提供了一套方便快捷的方法。

2）  控制页面样式

通过引入jQuery，开发人员可以很快捷的控制页面的CSS文件。

3）  对页面事件的处理

引入jQuery后，可以使页面的表现层与功能开发分离，开发者更多的关注于程序的逻辑与功效；页面设计者则侧重于页面的优化与用户的体验。

通过事件绑定机制，可以很轻松的实现两者的结合。（比如鼠标的点击事件）

4）  方便使用jQuery插件

引入jQuery后，可以使用大量的jQuery插件来完善页面的功能和效果，如jQuery UI插件库，Form插件，Validate插件等。使得原来使用javaScript代码实现起来非常困难的功能通过jQuery插件可以轻松的实现。例如：3D幻灯片就是由jQuery的Slicebox插件来实现的。

5）  与Ajax技术的完美结合

利用Ajax异步读取服务器数据的方法，极大的方便了程序的开发，增强了页面的交互，提升了用户的体验，引入jQuery后，通过内部对象或函数，加上几行代码就可以实现复杂的功能。

6）  处理了与浏览器兼容性的问题

在jQuery库里帮我们写了兼容性的代码。

5. jQuery的优势

1）  轻量级。jQuery的体积小，压缩之后，约等于100KB。

2）  强大的选择器。jQuery支持几乎所有的CSS选择器，以及jQuery有自定义特有的选择器。

3）  出色的DOM封装。jQuery封装了大量的DOM操作，使的开发者在编写DOM操作相关程序时更加得心用手。

4）  可靠的事件处理机制。jQuery的事件处理机制吸收了javaScript中事件处理函数的精华，非常的可靠。

5）  出色的浏览器兼容性。

6）  隐式迭代。使用jQuery查找相同名称（类名、表签名等）时，会返回一个结果集合，无需用户一一遍历，并且有快捷的查找所匹配的值的方法，简化了编程。

7）  丰富的插件支持。jQuery的易扩展性，吸引了来自全球的开发者来编写jQuery的扩展插件，目前已有成百上千的官方支持的插件。

6. jQuery的版本及配置

1. 获取jQuery的最新版本

进入jQuery的官方网站（http://jquery.com）,在页面右侧的 Download  jQuery区域下载最新的版本。

1. jQuery类库说明

jQuery类库一个插件分为两个版本：开发版（完整无压缩）和发布版（GZIP压缩过的版本）。

版本号为1.开头的jQuery插件才能支持IE6~IE8的兼容性。推荐的版本是：jquery-1.8.3.min.js和jquery-1.12.4.js

1. jQuery的引用方式
   1. 页面引用（引用本地）
   2. 引用网络存储的，引用地址实用网络存储的绝对地址。

 

二.jQuery语法

1.jQuery的加载

$(document).ready(function() {

         //执行的代码；

})；

这种语法等同于javaScript代码：

Window.onload=function(){

         //执行代码；

}；

Window.onload于$(document).ready()的对比
	Window.onload	$(document).ready()
执行时机	必须等到页面中的所有元素（图片，Flash,视频等）加载完毕后才能执行	页面中的所有DOM对象绘制完毕后立刻执行。
编写的个数	同一个页面不能编写多个 就算写入多个，也只会有一个效果	同一个页面可以编写多个 编写N个则有N次效果
简化写法	没有	$(document).ready(function() {          //执行的代码； })； 可以简写成 $(function(){    //执行代码 }

2.jQuery的语法结构

jQuery语句主要包含三大部分：$()、document和ready();它们在jQuery中分别称为：工厂函数、选择器和方法。

语法：$(selector).action();

 

1.工厂函数$()

在jQuery中，美元符号“$”等价于jQuery,即S()=jQuery()。

$()的作用是将DOM对象转换为jQuery对象，只有将DOM对象转换为jQuery对象后，才能使用jQuery的方法。

 

 

2.选择器selector

语法：$(selector);

3.方法action()

jQuery中提供了一系列的方法。在这些方法中，一类重要的方法就是事件处理方法，如许多基础的事件：鼠标事件、键盘事件和表单事件等，都可以通过事件方法进行绑定。

CSS样式操作的方法：

1）  为元素添加新的样式

语法：jQuery 对象.addClass([样式名])；

注意：样式名不用带“.”类符号，区别于选择器

2）  设置新的CSS样式属性

     语法：jQuery 对象.css (“属性”,”属性值”)；

                jQuery 对象.css (｛“属性1”：”属性1值”，”属性N ”:”属性N的值”｝)；

3）  显示/隐藏元素

        语法：$(selector).show();     //显示元素

                      $(selector).hide ();     //隐藏元素

3.jQuery的代码风格

1.“$”的使用

         在jQuery程序中，使用最多的是“$”，无论是页面元素的选择器，还是功能函数的前缀，都 必须使用该符号。它“$”等同于jQuery。

1. 链式操作

对一个对象进行多重操作，而只调用一个对象。

写法：

$(“h1”).mouseover(function(){

        //代码1；

}).mouseout(function(){

        //代码2；

})；

1. 隐式迭代

在jQuery中获取一个集合后，会默认遍历内部的所有元素。

1. 添加注释

A） 开发阶段：为代码添加注释，增加代码的可读性

B） 维护阶段：把关键的模块形成开发文档，便于后期的维护

C） 产品正式发布：建议删除注释，减少文件的大小，加快下载速度，提高用户的体验度。

三.jQuery对象和DOM对象

1.DOM对象

直接使用javaScript获取的节点对象就是DOM对象。

在javaScript中，使用getElementsByTagName()或getElementById()来获取元素的节点，通过该方式得到的DOM元素都是DOM对象。

 

2. jQuery对象

jQuery对象就是通过jQuery包装后的DOM对象后产生的对象。它能够使用jQuery的方法。

 

3. jQuery与DOM对象的相互转换

jQuery对象无法直接使用DOM对象的任何方法。

DOM对象也无法直接使用jQuery对象的方法。

jQuery对象名前缀带有“$”

1. jQuery对象转换成DOM对象

1）  jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象

var  $text=$(“text”);       //jQuery对象

var  text=$text[0];           //DOM对象

2）  通过get(index)方法得到相应的DOM对象

var  $text=$(“text”);       //jQuery对象

var  text=$text.get[0];             //DOM对象

 

2.DOM对象转换jQuery对象

对于一个DOM对象，只需要使用$()函数将DOM对象包装起来，酒可以获得一个jQuery对象。

var  text=document.getElementById(“text”);                //DOM对象

var  $text=$(text);                                                                           //jQuery对象

本章总结：

1. 要使用jQuery的功能，需要首先引用jQuery库文件，首先引入jQuery插件文件，再引用自己的.js文件。否则可能无法识别或编译。
2. 在一个页面中使用了多个库文件，变量冲突：使用jQuery.noConflict()方法解决对变量$的jQuery的控制权，即释放jQuery对$变量的控制权。
3. 使用next()方法可以获得当前元素的下一个同胞元素。