组件化网页开发——jQuery
目录
jQuery入门
jQuery的作用
jQuery的版本
jQuery的优势
jQuery的使用
jQuery的引入
$符号
jQuery的书写格式
原始格式
缩写格式
jQuery选择器
基本选择器
#id
element
.class
*
多项选择器
层级选择器
祖先后代选择器 $('ancestor descendant')
直接后代选择器 $('parent > child')
相邻选择器 $('prev + next')
$('prev ~ siblings')
属性选择器
过滤器
child系列
type系列
过滤器参数
表单相关
表单元素
表单状态
查找和过滤
find(expr | object | element)
children([expr])
parent([expr])
next([expr])、prev([expr])
eq(index | -index)
siblings([expr])
filter(expr | object | element | fn)
参数
jQuery事件
事件类型
鼠标事件
键盘事件
其它事件
事件参数
event
事件绑定与取消
on(events,[selector],[data],fn)
off(events,[selector],fn)
one(type,[data],fn)
jQuery扩展
动画原理
自定义动画
animate()
delay()
动画函数
show/hide
toggle()
fadeIn/fadeOut
fadeToggle()
slideUp/slideDown
slideToggle()
计时器
setTimeout
setInterval
JSON与AJAX基础
什么是Ajax？
Ajax的优点
Ajax的缺点
XMLHttpRequest对象
什么是XMLHttpRequest
XMLHttpRequest的作用
如何使用Ajax
创建XMLHttpRequest对象
创建新的HTTP请求
设置响应HTTP请求状态变化的函数
发送HTTP请求
获取异步调用返回的数据
渲染数据到页面中（使用JavaScript和DOM实现局部刷新 ）
JSON
什么是JSON
JSON的语法规则
JSON对象的两个方法
JSON对象总结
jQuery的ajax方法
$.ajax()
$.get()
$.post()
$.getJson()
跨域
什么是同源策略
什么是跨域
如何解决跨域
什么是JSONP
JSONP的组成
JSONP的原理
jQuery的跨域解决方案
jQuery入门
jQuery是一个快速、小巧其功能丰富的JavaScript库。它使JTML文档的遍历和操作、事件处理、动画和AJAX等操作变得简单，并提供了一个易于使用的API，可以跨多种浏览器工作。jQuery集多功能性和可扩展性于一身，改变了数百万人编写JavaScript的方式。
//通过ID获取一个HTML元素
//JavaScript
var obj=document.getElementById('IdValue');
//jQuery
var obj=$('IdValue');
//将一个HTML元素隐藏
//JavaScript
document.getElementById('IdValue').style.display;
//jQuery
$('IdValue').hide();
//将一个HTML元素隐藏
//JavaScript
document.getElementById('IdValue').style.Width='200px';
//jQuery
$('IdValue').css('width','200px')jQuery的作用
- HTML元素选取
- HTML元素操作
- CSS操作
- HTML事件函数
- JavaScript特效和动画
- HTML DOM 遍历和修改
- AJAX
- Utilities
jQuery的版本
版本分类：jQuery1.x.x/jQuery2.x.x/jQuery3.x.x
注意：Internet Explorer 6/7/8兼容最高版本是jQuery1.9.1
jQuery的优势
- 轻量级
- 强大的选择器
- 出色的DOM操作及其封装
- 可靠的事件处理机制
- 完善的AJAX
- 不污染顶级变量
- 出色的浏览器兼容性
- 链式操作方式
- 隐式迭代
- 行为层和结构层的分离
- 丰富的插件支持
jQuery的使用
jQuery的引入
常规引入
使用jQuery只需要在页面的
中引入jQuery文件即可
...
...
$符号
jQuery把所有功能全部封装在一个全局变量jQuery中，而$也是一个合法的变量名，它是变量jQuery的别名。
jQuery = function jQuery(agr) {
alert(agr);
}
$ = window.jQuery = jQuery;
//以下两句等价
$(agr);
jQuery(agr);
$===jQuery //true
typeof($) //function
绝大多数时候，我们直接用$，若$变量已被占用，且不能改， 就只能使用jQuery这个变量
jQuery的书写格式
jQuery的宗旨是用什么选什么
$; //jQuery(selector,context)
jQuery; //jQuery(selector,context)
//example
$('div').addClass('div'); //给div添加class名，名为div
jQuery('div').addClass('div'); //与上一句等价原始格式
$(document).ready(function() {
$('div').addClass('div');
});
//ready意为准备就绪，加载完成就运行函数体里面的代码
//原本浏览器读取完jQuery时并没有读取到div这个元素，从而会报错
//但用ready()方法就会在读取完所有元素后才去执行函数体中的代码，这时就不会出错缩写格式
$().ready(function() {
$('div').addClass('div');
});
//document可以不写
$(function() {
$('div').addClass('div');
});
//ready也可以不写
//相当于原生格式
window.onload=function(){
...
}
注意：不建议用缩写格式
jQuery选择器
选择器是jQuery的核心，一个选择器写出来类似$('#dom-id')
返回的对象是jQuery对象，类似数组，每个元素都是一个引用了DOM节点的对象。
不会返回undefined或者null，而会返回一个空数组，因此不必在下一行判断if(div===undefined)
基本选择器
#id
根据给定的id匹配一个元素（唯一、精确、效率快）
$(document).ready(function() {
var first = $('#first');
console.log(first);
var second = $('#second');
console.log(second);
var third = $('#third');
console.log(third);
});element
根据给定的元素标签名匹配所有元素
$(document).ready(function() {
var div = $('div');
console.log(div);
});.class
根据给定的css类名匹配元素
$(document).ready(function() {
var div = $('.div');
console.log(div);
var first = $('.first');
console.log(first);
var second = $('.second');
console.log(second);
var third = $('.third');
console.log(third);
});*
匹配所有元素（慎用）
$(document).ready(function() {
var all = $('*');
console.log(all);
});
多项选择器
将每一个选择器匹配到的元素合并后一起返回，可以指定任意多个选择器，并将匹配到的元素合并到一个结果内
$('selactor1,selector2,selectorN'); 多项选择器用逗号分隔
多项选择器
First div element.
First after and Second before.
Second div element.
Second after and Third before.
Third div element.
$(document).ready(function() {
var firstAndThird = $('#first, .third');
console.log(firstAndThird);
var objs = $('#first, div, .third');
console.log(objs);
var objs = $('#first, div, .second');
console.log(objs);
});说明
- 多项选择器匹配到的多个元素排列顺序同元素在html中的顺序是一致的
- 会把匹配到的所有元素去掉重复项拼接在一起
层级选择器
祖先后代选择器 $('ancestor descendant')
在给定的祖先元素下匹配所有的后代元素
$(document).ready(function() {
var summaries = $('aside summary'); //祖先元素aside 子孙元素summary
console.log(summaries);
});
注意：后代选择器会选中所有后代，效率比较低
直接后代选择器 $('parent > child')
在给定的父元素下匹配所有的子元素
$(document).ready(function() {
var details = $('aside > details');
console.log(details);
});
相邻选择器 $('prev + next')
匹配所有紧接在prev元素后的next元素
$(document).ready(function() {
var uls = $('summary + ul');
console.log(uls);
var details = $('summary + details'); //紧跟summary的details才会被选中，并且要是同一级别的
console.log(details);
});
$('prev ~ siblings')
匹配prev元素之后的所有sibling元素
$(document).ready(function() {
var uls = $('summary ~ ul');
console.log(uls);
var details = $('summary ~ details'); //summary后面所有details都会被选中，并且要是同一级别的
console.log(details);
});
属性选择器
属性名选择器 [attribute]
属性值选择器 [attribute=value]
非属性值选择器 [attribute!=value]
属性值开头选择器 [attribute^=value]
属性值结尾选择器 [attribute$=value]
属性值包含选择器 [attribute*=value]
多属性选择器 [attribute1][attribute2]
$(document).ready(function() {
var all = $('[class]'); //属性名是class
console.log(all);
var tool = $('[class=tool]'); //属性名是class并且值是tool
console.log(tool);
var notool = $('[class!=tool]'); //属性名是class并且值不是tool
console.log(notool);
var tools = $('[class^=tool_]'); //属性值以tool_开头
console.log(tools);
var vs = $('[class$=vs]'); //属性值以vs结尾
console.log(vs);
var vses = $('[class*=vs]'); //属性值包含vs
console.log(vses);
var scripts = $('[type][src]'); //多个条件同时满足
console.log(scripts);
var jq = $('[class][class*=lang][class$=y]');
console.log(jq);
});
过滤器
child系列
第一个孩子 :first-child
最后一个孩子 :last-child
第X个孩子 :nth-child(n | even | odd | formula)
倒数第X个孩子 :nth-last-child(n | even | odd | formula)
独生子 :only-child
$(document).ready(function() {
var first = $('details > p:first-child'); //details的第一个子标签要是p
console.log(first);
var last = $('details > p:last-child'); //details的最后一个子标签要是p
console.log(last);
var nthF = $('details > p:nth-child(2)'); //details的第二个子标签要是p
console.log(nthF);
var nthL = $('details > p:nth-last-child(2)'); //details的倒数第二个子标签要是p
console.log(nthL);
var only = $('details > p:only-child'); //details唯一的子标签要是p
console.log(only);
});
type系列
第一个某类型 :first-type
最后一个某类型 :last-type
第X个某类型 :nth-type(n | even | odd | formula)
倒数第X个某类型 :nth-last-type(n | even | odd | formula)
唯一的某类型 :only-type
$(document).ready(function() {
var first = $('details > p:first-of-type'); //强调类型，找到details下的第一个p标签
console.log(first);
var last = $('details > p:last-of-type'); //强调类型，找到details下的最后一个p标签
console.log(last);
var nthF = $('details > p:nth-of-type(2)'); //强调类型，找到details下的第二个p标签
console.log(nthF);
var nthL = $('details > p:nth-last-of-type(2)'); //强调类型，找到details下的倒数第二个p标签
console.log(nthL);
var only = $('details > p:only-of-type'); //强调类型，找到details下的唯一一个p标签
console.log(only);
});过滤器参数
- n 匹配子元素序号。必须为整数，从1开始
- even 匹配所有偶数元素
- odd 匹配所有奇数元素
- formula 使用特殊公式如（an+b）进行选择
$(document).ready(function() {
var ps = $('p:nth-of-type(3n)'); //找到所有是父元素的第3n个子元素的p标签（先满足3n再满足p）
console.log(ps);
});
//3n：3,6,9……
//2n+1:3,5,7,9……表单相关
表单元素
:input
可以选择，