整理自撩课学院www.itlike.com

一、jQuery简介&集成

1、JS的问题?

1）onload事件：只能绑定一个函数，会产生事件覆盖
2）容错性差, 如果一行代码报错，则会影响到后续代码的执行
3）api比较繁杂，同样的是选择DOM节点，但是需要根据tagName, 或者ID, 或者className，来使用不同的函数才能获取
4）代码的兼容性差，有时候，需要适配很多浏览器
5）一个特别简单的小功能，比如说缓动动画，都必须使用很多代码实现，使得更多的精力无法专注在业务实现
6）操作多个节点对象，必须使用循环语句，逐一设置
7）如果给某个dom对象设置属性值，必须一个一个设置

2、概念

jQuery是一款优秀的javaScript函数库。jQuery已经集成了JavaScript、CSS、DOM和Ajax于一体的强大功能。jQuery的主旨:write less, do more（以更少的代码,实现更多的功能）

3、特点

轻量级
强大的选择器
出色的Dom封装
可靠的事件处理
浏览器兼容性强
链式操作方式
隐式迭代
插件丰富

4、功能

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

5、集成方式

1）本地集成

第一步：下载jQuery库
第二步: 本地引入地址

2）远程集成
方法一：使用 Google 的 CDN
方法二：使用 Microsoft 的 CDN

3）小经验
通过 Google CDN 来获得最新可用的版本：如果从版本字符串的末尾删除一个数字，谷歌会返回版本系列中最新的可用版本
使用谷歌或微软的 jQuery优势：加载速度比较快（优先加载本地缓存，其次加载临时网络资源）

二、jQuery代码风格

1. 代码风格

在jQuery程序中,不管是页面元素的选择、内置的功能函数的调用,都是美元符号“”就是jQuery当中最重要且独有的 jQuery 函数

2. 基本语法格式

1）$(selector).action()

美元符号 $ 定义 jQuery
选择符（selector）查询HTML 元素：this、标签名称、.类名、#id
jQuery 的 action() 执行对元素的操作
2）$(function () {});
执行一个匿名函数
jQuery(function () {});

3.示例

$('#idName').hide(); 或jQuery('#idName').hide();
让指定的jQuery对象, 执行某个函数
$('#idName');或jQuery('#idName');
选择指定ID的DOM元素

4.注意

jQuery是对JS的封装库, 本质就是JS, 所以, 可以正常写JS代码

三、jQuery加载模式对比

1）javaScript：window.onload

执行时机：所有的DOM节点加载完毕之后调用, 包括资源加载, 比如图片
执行次数：此处是 = 赋值, 所有后面的会覆盖前面的函数内容, 调用多次, 只会执行一次
简写方案：无
2）jQuery：$(document).ready()
执行时机：所有的DOM节点加载完毕之后调用, 不包括资源加载;
（开发实际应用: 做图片轮播器时, 没有必要等待所有的图片加载完成才开始滚动）
执行次数：可以执行多次,第N次都不会被上一次覆盖（ready函数, 会把内部接收到的函数保存到一个数组里面, 等后期统一执行, 所以, 调用多次, 就有多次执行）
简写方案：$(function () { 内容 });

四、jQuery对象与js对象转换

1）概念
jQuery 对象：通过 jQuery 包装DOM对象后产生的对象
js对象：就是DOM对象
2）转换原因

jQuery库提供的方法, 只能是jQuery对象调用
JS对象的一些方法, 只能是JS对象可以调用
两者不可以互相调用对方的方法
3）转换场景
jQuery就是JS的一个扩展库，工具库，提供很多方便快捷的方法，所以将JS对象转换为jQuery对象后，能更方便地操作这个对象。
但是jQuery对象也不是万能的，有一些JS对象有的功能，jQuery对象并没有提供，所以需要转换回JS对象，才能进行操作。
另外一种情况可能是，使用某些第三方库，接口函数只能接受JS对象或者jQuery对象，那么你就需要在这两者之间进行转换。
4）转换方式
JS对象->jQuery对象：$(JS对象)
jQuery对象->JS对象：jQuery对象.get(0)或jQuery对象[0]

原理

五、jQuery操作css-添加&删除&切换类

1）addClass() - 向被选元素添加一个或多个类
2）removeClass() - 从被选元素删除一个或多个类
3）toggleClass() - 对被选元素进行添加/删除类的切换操作

六、jQuery操作css-css()

1）返回 CSS 属性：css("propertyname");
2）设置 CSS 属性：css("propertyname","value");
3）设置多个 CSS 属性：css({"propertyname":"value","propertyname":"value",...});

七、jQuery操作css-尺寸

width()：设置或返回元素的宽度（不包括内边距、边框或外边距）
height()：设置或返回元素的高度（不包括内边距、边框或外边距）
innerWidth()：返回元素的宽度（包括内边距）
innerHeight()：返回元素的高度（包括内边距）
outerWidth()：返回元素的宽度（包括内边距和边框）
outerHeight()：返回元素的高度（包括内边距和边框）
outerWidth(true)：返回元素的宽度（包括内边距、边框和外边距）
outerHeight(true)：
返回元素的高度（包括内边距、边框和外边距）

八、jQuery操作html-获取&设置

1）获得内容

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
2）设置内容
text(参数) - 设置或返回所选元素的文本内容
html(参数) - 设置或返回所选元素的内容（包括 HTML 标记）
val(参数) - 设置或返回表单字段的值
回调函数：
回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回
示例：
text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
})您希望使用的字符串。
3）获取属性：attr()
4）设置属性：
设置单个属性：attr(属性名, 值)
设置多个属性：attr({属性名1:值1, 属性名2:值2})
回调函数
回调函数由两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。
示例：
attr("href", function(i,origValue){
return origValue + "/jquery";
});

九、jQuery选择器

1）简介

jQuery 最核心的组成部分就是:选择器引擎。
它完全继承了 CSS 的风格,可以对 DOM 元素的标签名、属性名、状态等进行快速准确的选择,并且不必担心浏览器的兼容性,写法更加简洁。
jQuery 选择器实现了 CSS1~CSS3 的大部分规则之外,还实现了一些自定义的选择器,用于各种特殊状态的选择。
2）分类
1.基本选择器

基本选择器

2.层级选择器

层级选择器

![层级选择器](https://upload-images.jianshu.io/upload_images/17529342-f02668496f382370.png?imageMogr
2/auto-orient/strip%7CimageView2/2/w/1240)
3.属性选择器

属性选择器

4.筛选选择器

筛选选择器

父子兄弟选择

jQuery基础知识