jQuery

jQuery简介

JavaScript库的概念

JavaScript开发的过程中，处理浏览器的兼容很复杂而且很耗时，于是一些封装了这些操作的库应运而生。这些库还会把一些常用的代码进行封装。

把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js）

常见的JavaScript 库 - jQuery、Prototype、MooTools。其中jQuery是最常用的一个

jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发，其实就是一个加强版的common.js，因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。

jQuery的优点好处

jQuery设计的宗旨是'Write Less，Do More'，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的操作，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器。
极大地简化了 JavaScript 编程。

jQuery的版本

jQuery版本有很多，分为1.x 2.x 3.x1.x版本：能够兼容IE678浏览器
2.x版本：不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。
3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）国内多数网站还在使用1.x的版本

jQuery官网

体验jQuery

案例：让div显示与设置内容

使用JavaScript开发过程中，有许多不便之处

-查找元素的方法太少，麻烦。
-遍历伪数组很麻烦，通常要嵌套一大堆的for循环。
-有兼容性问题。
-想要实现简单的动画效果，也很麻烦
-代码冗余。

$(document).ready(function () {$('#btn1').click(function () {// 隐式迭代：偷偷的遍历，在jQuery中，不需要手动写for循环了，会自动进行遍历。$('div').show(200);});$('#btn2').click(function () {$('div').text('我是内容');});
});

优点总结：

-查找元素的方法多种多样，非常灵活
-拥有隐式迭代特性，因此不再需要手写for循环了。
-完全没有兼容性问题。
-实现动画非常简单，而且功能更加的强大。
-代码简单、粗暴。

jQuery中顶级对象

jQuery中的顶级对象是$或jQuery

获取jQuery对象
入口函数
高级功能

注意：jQuery中的$和JQuery关键字本身为同一对象；

jQuery中页面加载事件

使用jQuery的三个步骤：

引入jQuery文件
入口函数
功能实现

关于jQuery的入口函数：

// 第一种写法
$(document).ready(function() {});
// 第二种写法
$(function() {});

jQuery入口函数与window.onload的对比

JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

jQuery对象和DOM对象

jQuery对象和DOM对象的区别

DOM对象

用原生JavaScript获取的DOM对象通过document.getElementById()  反馈的是元素(DOM对象)
通过document.getElementsByTagName()获取到的是什么？伪数组(集合)，集合中的每一个对象是DOM对象

jQuery对象

jQuery对象用$()的方式获取的对象
jQuery对象又可以叫做包装集(包装的DOM对象的集合)

区别

jQuery对象不能使用DOM对象的成员，DOM对象不能使用jQuery对象的成员

// DOM对象
var box = document.getElementById('box');
// 错误
box.text('hello');
// 正确
box.innerText = 'hello';// jQuery对象，jQuery对象加前缀$，用以区分DOM对象
var $box = $('#box');
// 错误
$box.innerText = 'hello';
// 正确
$box.text('hello');

jQuery对象和DOM对象的相互转换

jQuery对象转换成DOM对象：   jQuery对象.get(索引值); jQuery对象[索引值] jQuery对象是包装集(集合)，从集合中取数据可以使用索引的方式
DOM对象转换成jQuery对象：   $(DOM对象) 只有这一种方法;

案例

// 仅仅演示对象之间的转换，代码不推荐这么写
jQuery(document).ready(function () {// 获取元素；var inpArr = document.getElementsByTagName('input');// 获取第一个按钮，然后绑定事件；$(inpArr[0]).click(function () {// 设置body的背景色$('body')[0].style.background = '#fff';});// 获取第二个按钮，然后绑定事件；$(inpArr[1]).click(function () {// 设置body的背景色$('body').get(0).style.background = '#000';});
});

短暂介绍到这里，谢谢浏览。
还想了解？
看这里jQuery选择器总结以及用法介绍
什么？
你是大佬？看这里jQuery中的DOM操作通过jQuery源代码分析（1.11.3）

啥？
你想看看其他的？
也有：
JS的设计模式——观察者设计模式

JS中遍历DOM树

四个问题彻底学会JS中“闭包”

jQuery介绍及各版本介绍（适合新手查看）相关推荐

Ubuntu版本介绍
转自Ubuntu版本介绍经常有人问起Ubuntu的版本选择问题,论坛中虽有帖子提及,但不是很详细,不集中,我就尝试把Ubuntu上的这点东东翻译一下,供大家参考,水平有限,敬请包涵.指正. Ubu ...
jQuery选择器引擎和Sizzle介绍
jQuery选择器引擎和Sizzle介绍首先介绍一下什么是Sizzle: Sizzle是一个纯javascript CSS选择器引擎.jquery1.3开始使用sizzle,Sizzle一反传统采取 ...
《springcloud超级入门》Spring Cloud是什么？Spring Cloud版本介绍《二》
Spring cloud是一系列框架的有序集合.它利用 Spring Boot 的开发便利性,巧妙地简化了分布式系统基础设施的开发,如服务注册.服务发现.配置中心.消息总线.负载均衡.断路器.数据监控 ...
Delphi历史版本介绍（二)从Delphi8到DelphiXE3
Delphi历史版本介绍(二)从Delphi8到DelphiXE3 Delphi 8 Delphi8是一个短命的版本,有点像微软的vista的感觉,没有很好的超越7,后来用被2005取代,很多人都是直 ...
mysql的三种engine_MySQL 学习之-三种安装方式与版本介绍
MYSQL版本介绍 mysql分alpha,beta,rc,GA四个版本. alpha 暗示这是一个以展示新特性为目的的版本,存在比较多的不稳定因素,还会向代码中添加新新特性 beta 以后的bet ...
阿里云装mysql选择版本_mysql学习之-三种安装方式与版本介绍
MYSQL版本介绍 mysql分alpha,beta,rc,GA四个版本. alpha 暗示这是一个以展示新特性为目的的版本,存在比较多的不稳定因素,还会向代码中添加新新特性 beta 以后的bet ...
linux常见版本介绍
linux常用版本介绍 linux发行版和内核的关系 linux主要发行版:Fedora Core.Debian.Mandrake.Ubuntu.Red Hat Linux.SuSE.Linux Mi ...
Win10各版本介绍及区别:
Win10各版本介绍及区别: 1.Win10家庭版,主要是面向消费者和个人PC用户的电脑系统版本,适合个人或者家庭电脑用户推荐. 2.Win10专业版也是面向个人电脑用户,相比家庭版要稍微好些,并且W ...
HTTP协议版本介绍以及使用Wireshark工具针对HTTP进行抓包分析详解
一.http协议版本介绍 http:Hyper Text Transfer Protocol 超文本传输协议,是互联网应用最为广泛的一种网络协议,主要用于Web服务.通过计算机处理文本信息,格式为HT ...
Eclipse版本介绍
进入eclipse的下载官网 http://www.eclipse.org/downloads/ 发现,会有多种版本提供下载. 对于刚接触Java开发的初学者,在下载eclipse时,对官网上面提 ...

jQuery介绍及各版本介绍（适合新手查看）