整理自撩课学院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库
- 第二步: 本地引入地址
<script type="text/javascript" src="jquery.js"></script>
2）远程集成 - 方法一：使用 Google 的 CDN
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> - 方法二：使用 Microsoft 的 CDN
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-3.3.1.min.js"></script>
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.层级选择器
层级选择器
3.属性选择器
属性选择器
4.筛选选择器
筛选选择器
父子兄弟选择
