组件化网页开发JQuery
2020-04-29 15:51:41 0 举报AI智能生成
个人前端学习
作者其他创作
大纲/内容
选择器
jQuery选择器简介
A.概述
（1）选择器是jQuery的核心
（2）①返回的对象是jQuery对象，类似数组，每个元素都是一个引用了DOM节点的对象
②不会返回undefined或者null，返回的是一个空数组
A.概述
（1）选择器是jQuery的核心
（2）①返回的对象是jQuery对象，类似数组，每个元素都是一个引用了DOM节点的对象
②不会返回undefined或者null，返回的是一个空数组
基本选择器
1、id选择器
#id 根据给定的ID匹配一个元素，如$(“#container”)
#id 根据给定的ID匹配一个元素，如$(“#container”)
2、标签选择器【也称为标签重定义】
element 根据给定元素的标签名匹配所有元素，返回的是一个类数组
$('div')
可以通过隐式迭代$(this).index()找到当前点击元素的索引，也可以通过$('div')[index]这种数组的方式来操作相应元素
element 根据给定元素的标签名匹配所有元素，返回的是一个类数组
$('div')
可以通过隐式迭代$(this).index()找到当前点击元素的索引，也可以通过$('div')[index]这种数组的方式来操作相应元素
3、class选择器
.class 根据给定的css类名匹配元素
$('.div')
a、class同名，将全部选中，以数组的形式返回；
b、class异名，则将其单独选中；var div=$(".first")，返回的类数组只有一个值。
.class 根据给定的css类名匹配元素
$('.div')
a、class同名，将全部选中，以数组的形式返回；
b、class异名，则将其单独选中；var div=$(".first")，返回的类数组只有一个值。
选择器的选择建议：
①如果要通过class来选取多个元素的话，尽可能使用element选择器【通过标签名选择】，因为这样更方便，可以减少属性来减少HTML的量；
②如果要专门选择某个元素，就看它是否有一个独特的class值，如果有就用class直接来选择；如果没有，就给它加一个class或加一个id，因为id的优先级相对class比较高。如果我们只是选中一个元素但优先级过高的话有的时候会做到不好控制。
①如果要通过class来选取多个元素的话，尽可能使用element选择器【通过标签名选择】，因为这样更方便，可以减少属性来减少HTML的量；
②如果要专门选择某个元素，就看它是否有一个独特的class值，如果有就用class直接来选择；如果没有，就给它加一个class或加一个id，因为id的优先级相对class比较高。如果我们只是选中一个元素但优先级过高的话有的时候会做到不好控制。
4、$('*')
返回结果如图所示，所有的元素都在里面
尽量不用，效率太低
一般在css里面用一次
返回结果如图所示，所有的元素都在里面
尽量不用，效率太低
一般在css里面用一次
多项选择器
$("selector1,selector2,selectorN");
将每一个选择器匹配到的元素合并后一起返回。
可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。每一个选择器的类型可以不同，id选择器、element选择器、class选择器都可以混合使用。
将每一个选择器匹配到的元素合并后一起返回。
可以指定任意多个选择器，并将匹配到的元素合并到一个结果内。每一个选择器的类型可以不同，id选择器、element选择器、class选择器都可以混合使用。
1) 以数组的形式返回；
2) 当选择器的选择结果有重复时相应元素不会重复返回；
3) 数组中各项的顺序是按照html结构中原来的顺序排列，不会破坏原有结构，HTML中是什么顺序返回的结果就是什么顺序。
2) 当选择器的选择结果有重复时相应元素不会重复返回；
3) 数组中各项的顺序是按照html结构中原来的顺序排列，不会破坏原有结构，HTML中是什么顺序返回的结果就是什么顺序。
层级选择器
1、祖先后代选择器
$('ancestor descendant');
在给定的祖先元素下匹配所有的后代元素。
找出来的选择器，结构会遵循html的结构
$('ancestor descendant');
在给定的祖先元素下匹配所有的后代元素。
找出来的选择器，结构会遵循html的结构
2、直接后代选择器【子选择器】
$('parent > child');
在给定的父元素下匹配所有的子元素（即，只会选中儿子，孙子及以下不会被选中）
比后代选择器的效率更高，更精准
$('parent > child');
在给定的父元素下匹配所有的子元素（即，只会选中儿子，孙子及以下不会被选中）
比后代选择器的效率更高，更精准
3、$('prev+next')选择器
$('prev + next');
匹配所有紧接在prev元素后的next元素（只一个）。他们必须是在同一层级中
$('prev + next');
匹配所有紧接在prev元素后的next元素（只一个）。他们必须是在同一层级中
4、兄弟选择器 $('prev~siblings')
$('prev~siblings');
匹配prev元素之后的所有sublings元素，他们必须是在同一层级中
$('prev~siblings');
匹配prev元素之后的所有sublings元素，他们必须是在同一层级中
属性选择器
1、属性名选择器
$('[class]') 选择所有 包含属性名为class的属性 的元素
$('[class]') 选择所有 包含属性名为class的属性 的元素
2、属性值选择器
$('[class=tool]')找到所有包含 为tool的class值的class属性 的元素
$('[class=tool]')找到所有包含 为tool的class值的class属性 的元素
3、非属性值选择器[attribute!=value]
$('[class!=tool]')返回所有class的属性值不为tool的元素组成的类数组，没有设置class属性的元素当然也包括在返回结果中
$('[class!=tool]')返回所有class的属性值不为tool的元素组成的类数组，没有设置class属性的元素当然也包括在返回结果中
4、[attribute^=value]属性选择器
匹配属性值是以value值为开头的attribute（属性）的元素；
匹配属性值是以value值为开头的attribute（属性）的元素；
5、[attribute$=value]属性选择器
选择属性值以value值结尾的attribute的所有元素
选择属性值以value值结尾的attribute的所有元素
6、 包含属性值选择器
[attribtute*=value]包含value值的属性值选择器
只要某个元素的attribtute的属性值里面包含这个value值就返回这个元素
[attribtute*=value]包含value值的属性值选择器
只要某个元素的attribtute的属性值里面包含这个value值就返回这个元素
7、多个属性选择器
[selector1][selector2][selectorN]：多个属性选择器同时满足条件来选择元素。
[selector1]、[selector2]、[selectorN]都是单独的一个属性选择器，他们可以是任意类型的属性选择器，只有某个元素同时满足这几个选择器的条件才会被选择。
[selector1][selector2][selectorN]：多个属性选择器同时满足条件来选择元素。
[selector1]、[selector2]、[selectorN]都是单独的一个属性选择器，他们可以是任意类型的属性选择器，只有某个元素同时满足这几个选择器的条件才会被选择。
过滤器
过滤器之child系列
: first-child 第一个元素
【$('details > p:first-child') == $('details > p:nth-child(1)');
p标签必须是details下面的第一个子元素，返回这个p标签。下同。】
【$('details > p:first-child') == $('details > p:nth-child(1)');
p标签必须是details下面的第一个子元素，返回这个p标签。下同。】
就是所有p必须是它所在父标签里的第一个子元素才生效
：last-child 最后一个元素
: nth-child (n | even | odd | formula ) 第n个元素，下标从1开始
: nth-last-child ( n | even | formula ) 倒数第n个元素，下标从1开始
过滤器之type系列
:first-of-type
:last-of-type
:nth-of-type(n|even|odd|formula)
:nth-of-last-type(n|even|odd|formula)
:only-of-type
:last-of-type
:nth-of-type(n|even|odd|formula)
:nth-of-last-type(n|even|odd|formula)
:only-of-type
type先找的是符合标签类型的元素，再找该元素中的第几个；child先找的是第几个子元素再看该元素标签类型是否符合
nth-child()选择器来选取属于其父元素的不限类型的第 n 个子元素的所有元素。
nth-of-type()选择器选取属于其父元素的特定类型的第 n 个子元素所有元素。
nth-of-type()选择器选取属于其父元素的特定类型的第 n 个子元素所有元素。
3、过滤器参数
n:匹配子元素序号。必须为整数,从1开始。
even:匹配所有偶数元素。
odd:匹配所有奇数元素。
formula:使用特殊公式如(an+b)进行选择，n从0开始。【其中只能用n，不能换为其他字母】【（an+ b）,描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。这里的n是从0开始的】
even:匹配所有偶数元素。
odd:匹配所有奇数元素。
formula:使用特殊公式如(an+b)进行选择，n从0开始。【其中只能用n，不能换为其他字母】【（an+ b）,描述：a代表一个循环的大小，N是一个计数器（从0开始），以及b是偏移量。这里的n是从0开始的】
表单相关选择器、筛选器
1、表单元素
$('input')和$(':input')的区别是： $('input')只选择input标签， $(':input')选择所有的表单元素，包括input、textarea、select、button等标签对象。一般实际项目中， 如果只选择input标签可以使用$('input')， 如果需要选择所有的表单元素， 可以使用$(':input')
2、表单状态
注意:checked也可以选中select下拉列表下面的状态为selected的option元素
选择下拉框中的option元素尽量用 :selected
选择下拉框中的option元素尽量用 :selected
查找与过滤
1、find（）：全部子孙都找
find(expr | object | element) 搜索所有与指定表达式匹配的元素
$("aside").find(".javascript")；查找aside的后代中所有类名为javascript的元素 （子、孙、曾孙等）
find(expr | object | element) 搜索所有与指定表达式匹配的元素
$("aside").find(".javascript")；查找aside的后代中所有类名为javascript的元素 （子、孙、曾孙等）
2、children（）： 只找儿子
children（[expr]） 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
$("aside").chilren("detalis") -->只可匹配到子元素，再下一层级的元素（孙元素）无法匹配到。
children（[expr]） 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。
$("aside").chilren("detalis") -->只可匹配到子元素，再下一层级的元素（孙元素）无法匹配到。
这个[]是表示可选的意思。 也就是说在使用children方法时可以传递参数也可以不传递参数。
（1）传递参数时，表示选择指定的子元素。
（2）不传递参数时，表示选择所有的子元素。
（1）传递参数时，表示选择指定的子元素。
（2）不传递参数时，表示选择所有的子元素。
3、parent（）：
parent([expr]) 取得一个包含着所有元素的唯一父元素的集合
parent([expr]) 取得一个包含着所有元素的唯一父元素的集合
4、next() 方法返回被选元素的下一个同胞元素。prev() 方法返回被选元素的上一个同胞元素。
next([expr])、prev([expr]) 取得一个包含匹配的元素集合中每一个元素紧邻的后面（前面）同层级元素的元素集合。
next([expr])、prev([expr]) 取得一个包含匹配的元素集合中每一个元素紧邻的后面（前面）同层级元素的元素集合。
nextAll() 方法返回被选元素的所有跟随的同胞元素。prevAll()方法返回被选元素的所有之前的同胞元素。.prevUntil()获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。
5、eq（index | -index）
获取当前链式操作中第N个jQuery对象。
n是正数的话就是正数第n个元素，n是负数的话就是倒数第n个元素
获取当前链式操作中第N个jQuery对象。
n是正数的话就是正数第n个元素，n是负数的话就是倒数第n个元素
6、siblings() 方法返回被选元素的所有同胞元素。
siblings（[expr]） 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。
siblings（[expr]） 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。
7、filter（expr|object|element|fn) 筛选出与指定表达式匹配的元素集合
参数分析：
expr：字符串值，包含供匹配当前元素集合的选择器表达式
object：现有的jQuery对象，以匹配当前的元素
element：一个用于匹配元素的DOM元素
fn：一个函数用来作为测试元素的集合【图中最后是示例。index是filter方法的默认参数，表示当前元素的索引值，所以可以输出索引值。】
expr：字符串值，包含供匹配当前元素集合的选择器表达式
object：现有的jQuery对象，以匹配当前的元素
element：一个用于匹配元素的DOM元素
fn：一个函数用来作为测试元素的集合【图中最后是示例。index是filter方法的默认参数，表示当前元素的索引值，所以可以输出索引值。】
动画
自定义动画
jQuery 中animate自定义动画参数参数样式的使用：
1、如果属性值是数值，可以不添加引号，如果属性值中有字符，需要添加引号，否则报错不能生效
2、想要元素发生什么样的改变，就设置什么样的样式，不是设置改变了多少的值
1、如果属性值是数值，可以不添加引号，如果属性值中有字符，需要添加引号，否则报错不能生效
2、想要元素发生什么样的改变，就设置什么样的样式，不是设置改变了多少的值
1、animate（{styles},speed,easing,callback）
可以实现任意动画效果，参数一般是DOM元素最终的状态和时间（1000毫秒=1秒）。
可以实现任意动画效果，参数一般是DOM元素最终的状态和时间（1000毫秒=1秒）。
参数：
{styles}：必需。规定产生动画效果的一个或多个 CSS 属性/值。是一个对象。
speed ：可选。规定动画的持续时间。（毫秒、"slow"、"fast"）
easing：可选。规定在动画的不同点中元素的速度。默认值是 "swing"。（"swing" - 在开头/结尾移动慢，在中间移动快
"linear" - 匀速移动）
callback：可选。animate 函数执行完之后，要执行的函数。
{styles}：必需。规定产生动画效果的一个或多个 CSS 属性/值。是一个对象。
speed ：可选。规定动画的持续时间。（毫秒、"slow"、"fast"）
easing：可选。规定在动画的不同点中元素的速度。默认值是 "swing"。（"swing" - 在开头/结尾移动慢，在中间移动快
"linear" - 匀速移动）
callback：可选。animate 函数执行完之后，要执行的函数。
2、stop（）： 【示例是图中选中代码的上面】
结束当前动画，然后开始后面的执行过程。防止出现动画排队【比如滑过了好几个a标签只用了1s，而每个的动画时间就有1s，滑过以后动画还没全部播放完毕】的现象。
结束当前动画，然后开始后面的执行过程。防止出现动画排队【比如滑过了好几个a标签只用了1s，而每个的动画时间就有1s，滑过以后动画还没全部播放完毕】的现象。
3、delay（）： 【示例是图中选中的代码】
可以实现动画暂停 （延迟）。
可以实现动画暂停 （延迟）。
自定义动画说明
1.时间可写可不写，不写会有默认时间；
2. 链式动画
例如：.stop（ ）.animate({css样式}，时间毫秒）.delay(时间毫秒)
可实现一些复杂的动画效果
例如：.stop（ ）.animate({css样式}，时间毫秒）.delay(时间毫秒)
可实现一些复杂的动画效果
动画函数
以下动画函数控制改变宽、高、透明度
1.show(单位：时间毫秒/fast/normal/slow) ：显示DOM元素
2.hide(单位：时间毫秒/fast/normal/slow)：隐藏DOM元素
3.建议动画之前+.stop()结束其他动画
4.toggle(单位：时间毫秒/fast/normal/slow)：为show（）与hide（）方法结合，根据当前状态决定是show（）和hide（）【作用于同一元素】
只控制透明度
fadein( 单位：时间毫秒/fast/normal/slow)：淡入
fadeout(单位：时间毫秒/fast/normal/slow)：淡出
fadeToggle(单位：时间毫秒/fast/normal/slow):根据元素是否可见决定下一步动作
只控制改变透明度、高度 --> 窗帘效果，常用于下拉菜单
slideUp()：垂直方向逐渐展开 --> 消失
slideDown()：垂直方向逐渐收缩 --> 显示
slideToggle()：以上两者结合，根据元素是否可见来进行下一步操作；【作用于同一元素、百叶窗效果】
计时器
1.setTimeout(fn,时间毫秒） 只执行一次，时间为多少毫秒后开始执行;
结果返回返回ID值，通过ID值来清除
timer=setTimeout(fn,时间毫秒）
clearTimeout(timer）--清除定时器
结果返回返回ID值，通过ID值来清除
timer=setTimeout(fn,时间毫秒）
clearTimeout(timer）--清除定时器
2.setInerval(fn,时间毫秒）每隔多长时间执行一次（循环），从第一次开始也要等待时间执行；
结果返回返回ID值，通过ID值来清除
timer=setInterval(fn,时间毫秒）
clearInterval(timer）--清除定时器
结果返回返回ID值，通过ID值来清除
timer=setInterval(fn,时间毫秒）
clearInterval(timer）--清除定时器
json
JSON（JavaScript object notation），全称为 JavaScript 对象表示法，
它是【一种数据交换的文本格式】，而不是一种编程语言，用于读取结构化数据，目的是取代繁琐笨重的 XML 格式 。
它是【一种数据交换的文本格式】，而不是一种编程语言，用于读取结构化数据，目的是取代繁琐笨重的 XML 格式 。
语法规则，可以表示以下三种类型的值
一、简单值——
使用与 JavaScript 相同的语法，可以在 JSON 中表示字符串、数值、布尔值和null；
字符串【必须使用双引号表示】，不能使用单引号。
数值必须以【十进制】表示且【不能使用 NaN 和 Infinity 】；
JSON 【不支持】 JavaScript 中特殊值 【undefined 】；
使用与 JavaScript 相同的语法，可以在 JSON 中表示字符串、数值、布尔值和null；
字符串【必须使用双引号表示】，不能使用单引号。
数值必须以【十进制】表示且【不能使用 NaN 和 Infinity 】；
JSON 【不支持】 JavaScript 中特殊值 【undefined 】；
二、对象——
作为一种复杂数据类型，表示的是一组有序的键值对，而每个键值对中的值可以是简单值，也可以是复杂数据类型的值 ；
JSON 中对象的键名必须放在双引号里面（“ ”），因为 JSON 不是JavaScript 语句，所以没有末尾的分号；
同一个对象中不应该出现两个同名属性；
ps：JavaScript 原生写对象时，键或属性是无需添加引号
作为一种复杂数据类型，表示的是一组有序的键值对，而每个键值对中的值可以是简单值，也可以是复杂数据类型的值 ；
JSON 中对象的键名必须放在双引号里面（“ ”），因为 JSON 不是JavaScript 语句，所以没有末尾的分号；
同一个对象中不应该出现两个同名属性；
ps：JavaScript 原生写对象时，键或属性是无需添加引号
三、数组——
也是以一种复杂数据类型，表示一组有序的值的列表，可以通过数值索引来访问其中的值。
//ps：数组或对象最后一个成员的后面，不能加逗号 ；
也是以一种复杂数据类型，表示一组有序的值的列表，可以通过数值索引来访问其中的值。
//ps：数组或对象最后一个成员的后面，不能加逗号 ；
JSON对象的两个方法
parse()
语法：JSON.parse()
功能：用于将JSON字符串转化成对象
语法：JSON.parse()
功能：用于将JSON字符串转化成对象
stringify()
语法：JSON.stringify()
功能：用于将一个值转为字符串，该字符串应该符合JSON格式，并且可以被JSON.parse()方法还原
语法：JSON.stringify()
功能：用于将一个值转为字符串，该字符串应该符合JSON格式，并且可以被JSON.parse()方法还原
JSON对象总结
JSON之所以流行，是因为可以把JSON数据结构解析为有用的javascript对象
JSON对象的stringify（）和parse（）这两个方法可以分别用于把JavaScript对象序列化为JSON字符串和把JSON字符串解析为原生JavaScript值
JavaScript的eval（）类似于JSON.parse()方法，可以将json字符串转换为json对象，但是，eval()可以执行不符合JSON格式的代码，有可能会包含恶意代码，所以尽量少用
使用jQUery
1、jQuery的引入
a、常规引入
使用jQuery只需要在页面的<head>中引入文件即可
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
先加载jQuery文件，再加载js文件，才能识别jQuery;
b、非常规的引入：
npm、node、yarn也可以引入JQuery
a、常规引入
使用jQuery只需要在页面的<head>中引入文件即可
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>
先加载jQuery文件，再加载js文件，才能识别jQuery;
b、非常规的引入：
npm、node、yarn也可以引入JQuery
2.$符号
jQuery把左右功能全部封装在一个全局变量jQuery中，而$也是一个合法的变量名，它是变量jQuery的别名
jQuery把左右功能全部封装在一个全局变量jQuery中，而$也是一个合法的变量名，它是变量jQuery的别名
事件
1、鼠标事件
点击事件
只有左键可以
click() 单击时触发
dblclick() 双击 ，双击是两个单击组成的，会触发单击事件
左右键都可以
mousedown：鼠标按下时触发
click 事件不能触发mousedown和mouseup事件
mousedown + mouseup =click
mousedown + mouseup =click
mouseup：按下的鼠标松开时触发
鼠标移动事件
只有它本身
鼠标移入事件：mouseenter
鼠标移出事件：mouseleave
hover（[over,]out）
鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave
鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave
$("a").hover( function(){...} , function( ){...} )
第一个函数 鼠标进入(可省略，如果省略 进入和移出效果相同)
第二个函数 鼠标移出
第一个函数 鼠标进入(可省略，如果省略 进入和移出效果相同)
第二个函数 鼠标移出
影响包括子元素
mouseover 鼠标进入指定元素及其子元素时触发
mouseout 鼠标移出指定元素及其子元素时触发
mousemove（[data],fn） 在DOM内部移动时，会发生mousemove事件；在DOM外部移动时就不会触发
scroll([[data],fn])当滚动指定的元素时，会发生scroll事件
滚动鼠标滚轮或者拖动滚动条都算滚动
滚动鼠标滚轮或者拖动滚动条都算滚动
2、键盘事件
keydown([data],fn) 当键盘或按钮【例如收银员使用的机器，总的来说就是指按键】被按下时，发生keydown事件
键盘事件 keydown 传event参数，key会获取按下的值，keycode是指值的编码。
按a键和shift+a键返回的key分别是'a'和'A'，但是keycode都是65，而且后者还会返回shift键的相关信息。
按a键和shift+a键返回的key分别是'a'和'A'，但是keycode都是65，而且后者还会返回shift键的相关信息。
keyup([data],fn) 当按钮松开时，发生keyup事件。它发生在当前获得焦点的元素上。
keypress([data],fn) 当键盘或按钮被按下时，发生keypress事件
keypress和keydown的区别在于（1）keypress只有真正输入东西才响应，比如说中文输入法还没打出字时就不响应（2）keypress 对有些特殊按键无法记录（如左右键）。keydown 对所有按键都可以记录下来
3、其他事件
1) ready(fn)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数
三种写法
$(document).ready(functin(){
//代码部分
})
//代码部分
})
$().ready(function(){
代码块
})
代码块
})
$(function(){
代码块
})
代码块
})
2) resize([data],fn)当调整浏览器窗口的大小时，发生resize事件
document使用无效，要使用window
document使用无效，要使用window
3) focus([data],fn) blur([data],fn)
当元素 获得（失去） 焦点时触发focus（blur）事件
当元素 获得（失去） 焦点时触发focus（blur）事件
4、change([data],fn)
当元素的值（value）发生改变时，会发生change事件
①input值发生改变触发change事件，是一段时间检测。不是实时更新，输入的过程中不会触发
②type为number类型的input标签在输入内容时不会发生改变，监测为键盘事件，除非通过上下按钮改变input值
③input输入框在输入内容的时候不会检测，而是外界刺激的时候，才会检测
当元素的值（value）发生改变时，会发生change事件
①input值发生改变触发change事件，是一段时间检测。不是实时更新，输入的过程中不会触发
②type为number类型的input标签在输入内容时不会发生改变，监测为键盘事件，除非通过上下按钮改变input值
③input输入框在输入内容的时候不会检测，而是外界刺激的时候，才会检测
5、select([[data],fn])
当 textarea 或文本类型的input元素中的文本被选择时，会发生select事件
当 textarea 或文本类型的input元素中的文本被选择时，会发生select事件
type为text或number的input标签和textarea标签，输入的内容被选中【图中那样的蓝色部分】时，select事件会触发，但是input的type为date或者checkbox时不行，日期和复选框不行。
无法编辑的文字，如div或者a标签中的文字，被选中也无法触发select事件。
这里的select是指输入框可编辑的文本内容被选择时触发的事件，不是下拉框。
无法编辑的文字，如div或者a标签中的文字，被选中也无法触发select事件。
这里的select是指输入框可编辑的文本内容被选择时触发的事件，不是下拉框。
6、submit（[[data],fn]）
当提交表单时，会发生submit事件
当提交表单时，会发生submit事件
submit事件的用途
1、提交表单
$('input[type=button]').click(function(){
$('form').submit();
});
【submit()是表单要提交时所触发的事件，所以要放在点击事件中】
【type为submit的input标签和button标签不需要绑定点击事件就可以触发submit事件。
一般情况下其它的标签需要先绑定点击事件去触发提交事件。
$('input[type=button]').click(function(){
$('form').submit();
});
【submit()是表单要提交时所触发的事件，所以要放在点击事件中】
【type为submit的input标签和button标签不需要绑定点击事件就可以触发submit事件。
一般情况下其它的标签需要先绑定点击事件去触发提交事件。
2、阻止表单提交
$('form').submit(function(){
return false;
});
【return false时 表单不会被提交】
$('form').submit(function(){
return false;
});
【return false时 表单不会被提交】
3、提交表单时做一些我们所需要做的事情（多用于表单验证）
4、事件参数
1、event
有些事件，如mousemove和keypress，我们需要获取鼠标位置和按键的值，否则监听这些事件就没有什么意义了。所有事件都会传入event对象作为参数，可以从event对象上获取到更多的信息。
有些事件，如mousemove和keypress，我们需要获取鼠标位置和按键的值，否则监听这些事件就没有什么意义了。所有事件都会传入event对象作为参数，可以从event对象上获取到更多的信息。
5、事件绑定与取消
事件绑定
on（events,[selector],[date],fn）
在选择元素上绑定一个或多个事件的事件处理函数
在选择元素上绑定一个或多个事件的事件处理函数
events：事件类型，比如mouseenter、keypress，要用引号包起来
[selector]：选择器，和使用$获取元素时的使用方式一样要加上引号
[date]：相当于传给事件的值
fn：要执行的操作
至少要传入两个参数：events和fn
[selector]：选择器，和使用$获取元素时的使用方式一样要加上引号
[date]：相当于传给事件的值
fn：要执行的操作
至少要传入两个参数：events和fn
1.同一元素绑定多个事件：
$(document).on({'事件类型': fn}, {'事件类型': fn});
$(document).on({'事件类型': fn}, {'事件类型': fn});
2.多个元素绑定多个事件--使用add添加元素 如图：
$("a").add(document).on({'事件类型': fn}, {'事件类型': fn});
$("a").add(document).on({'事件类型': fn}, {'事件类型': fn});
（1）多个参数是对象{}的形式写的，对象中属性名加不加引号都是可以的，所以一个事件的时候加引号，多个事件（对象形式）的时候加不加引号都可以。
（2）add() 方法把元素添加到已存在的元素组合中。意思也就是a和document都会绑定on事件中的方法。
（3）如果写的是一个对象，没有办法添加可选参数[selector]和[data]了。
（2）add() 方法把元素添加到已存在的元素组合中。意思也就是a和document都会绑定on事件中的方法。
（3）如果写的是一个对象，没有办法添加可选参数[selector]和[data]了。
one(type,[data],fn)
为每一个匹配元素的特定事件（比如click）绑定一个一次性的事件处理函数。
为每一个匹配元素的特定事件（比如click）绑定一个一次性的事件处理函数。
type：触发one的特定事件
data：绑定事件的对象
fn：要绑定的事件
data：绑定事件的对象
fn：要绑定的事件
事件取消
off(event,[selector],[fn]) 在选择元素上移除一个或多个事件的事件处理函数。
off(event,[selector],[fn]) 在选择元素上移除一个或多个事件的事件处理函数。
events：事件类型
selector： 选择取消绑定事件的元素
fn : 取消绑定事件的函数
selector： 选择取消绑定事件的元素
fn : 取消绑定事件的函数
1、show() ：显示元素。
2、fadeOut() ：使用淡出效果来隐藏元素。
语法：$(selector).fadeOut(speed,callback);
参数：speed 可选。规定元素从可见到隐藏的速度。默认为 "normal"。还有其他值：具体数字，'slow'，'fast'等。
callback 可选，是fadeOut 函数执行完之后要执行的函数。
2、fadeOut() ：使用淡出效果来隐藏元素。
语法：$(selector).fadeOut(speed,callback);
参数：speed 可选。规定元素从可见到隐藏的速度。默认为 "normal"。还有其他值：具体数字，'slow'，'fast'等。
callback 可选，是fadeOut 函数执行完之后要执行的函数。
event.stopPropagation() 阻止事件冒泡
AJAX基础、JQuery中的AJAX
AJAX基础
AJAX介绍
全称是 Asynchronous JavaScript and XML（即异步的 JavaScript 和 XML），它并不是一种新的编程语言，而是几种原有技术的结合体。Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术！
优点
1、通过异步模式，提升了用户体验 ；
2、优化了浏览器和服务器之间的传输，减少了不必要的数据往返，减少了宽带占用 ；
3、Ajax 引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载 ；
2、优化了浏览器和服务器之间的传输，减少了不必要的数据往返，减少了宽带占用 ；
3、Ajax 引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载 ；
ps：
jQuery 是单线程，意味着所有的任务需要排队，等上一个结束才能进行下一个任务。
任务队列由同步或异步。
Ajax 是在页面内部进行通信的
jQuery 是单线程，意味着所有的任务需要排队，等上一个结束才能进行下一个任务。
任务队列由同步或异步。
Ajax 是在页面内部进行通信的
缺点
1、不支持浏览器 back 按钮 ；
2、安全问题 Ajax 暴露了与服务器交互的细节；
3、对搜索引擎的支持比较弱 ；
2、安全问题 Ajax 暴露了与服务器交互的细节；
3、对搜索引擎的支持比较弱 ；
XMLHttpRequest 对象
1、XMLHttpRequest 是一种支持异步请求的技术，它是 Ajax 的核心 ；
2、作用：
可以向服务器提出请求并处理响应，而不阻塞用户，可以在页面加载以后继续页面的局部更新 ；
可以向服务器提出请求并处理响应，而不阻塞用户，可以在页面加载以后继续页面的局部更新 ；
3、使用 Ajax，实现完整一个 Ajax 的异步调用和局部刷新，由以下步骤 ：
创建 XMLHttpRequest 的对象，也就是创建一个异步调用对象 ；
创建一个新的 HTTP 请求并指定该 HTTP 请求的方法及URL ；
设置响应 HTTP 请求状态变化的函数 ；
创建一个新的 HTTP 请求并指定该 HTTP 请求的方法及URL ；
设置响应 HTTP 请求状态变化的函数 ；
步骤①——创建 XMLHttpRequest 的对象，也就是创建一个异步调用对象
1、封装通用的 xhr 对象兼容各个版本 ；
2、判断浏览器是否将 XMLHttpRequest 作为本地对象实现，针对 IE7，firfox、opera 等 ；
3、将可能出现的所有 ActiveXObject 版本放在一个数组中 ；
4、遍历创建 XMLHttpRequest 对象 ； //获取长度， for循环 ，
5、使用try 创建 XMLHttpRequest 对象 ，用于判断哪种版本是支持可以运行，所以不推荐 if （真假）；
2、判断浏览器是否将 XMLHttpRequest 作为本地对象实现，针对 IE7，firfox、opera 等 ；
3、将可能出现的所有 ActiveXObject 版本放在一个数组中 ；
4、遍历创建 XMLHttpRequest 对象 ； //获取长度， for循环 ，
5、使用try 创建 XMLHttpRequest 对象 ，用于判断哪种版本是支持可以运行，所以不推荐 if （真假）；
步骤②，创建HTTP请求
语法：open（method,url,async）
功能：创建HTTP请求，规定请求的类型，URL及是否异步处理请求
功能：创建HTTP请求，规定请求的类型，URL及是否异步处理请求
参数说明：
method：请求类型，GET或POST
url：文件在服务器上的位置
async：true（异步）或false（同步）
method：请求类型，GET或POST
url：文件在服务器上的位置
async：true（异步）或false（同步）
参数详解
1、 URL参数是open()方法中唯一一个必须要指定的参数，用来设置服务器上文件的地址，该文件可以是任何类型的文件，如：.txt和.xml，或者服务器脚本文件，如：.asp和.php(在传回响应之前，能够在服务器上执行任务)
2、GET与POST的区别：
默认的请求方式是GET。
与POST相比，GET更简单也更快，并且在大部分情况下都能用，然而，在以下情况中，必须使用POST请求
(1)无法使用缓存文件(更新服务器上的文件或数据库)
(2)想服务器发送大量数据(POST是没有数据量限制)
(3)发送包含未知字符的用户输入时，POST比GET更稳定也更可靠
默认的请求方式是GET。
与POST相比，GET更简单也更快，并且在大部分情况下都能用，然而，在以下情况中，必须使用POST请求
(1)无法使用缓存文件(更新服务器上的文件或数据库)
(2)想服务器发送大量数据(POST是没有数据量限制)
(3)发送包含未知字符的用户输入时，POST比GET更稳定也更可靠
3、同步与异步的区别：
同步：提交请求——>等待服务器处理——>处理完毕返回，这个期间客户端浏览器不能干任何事
异步：请求通过事件触发——>服务器处理(这时浏览器仍然可以做其他事情)——>处理完毕
同步：提交请求——>等待服务器处理——>处理完毕返回，这个期间客户端浏览器不能干任何事
异步：请求通过事件触发——>服务器处理(这时浏览器仍然可以做其他事情)——>处理完毕
4.async参数：
async是一个布尔值，默认的是异步（true）。如果是异步通信方式（true），客户机就不等待服务器的响应；如果是同步方式（false），客户机就要等到服务器返回消息后才去执行其他操作。
async是一个布尔值，默认的是异步（true）。如果是异步通信方式（true），客户机就不等待服务器的响应；如果是同步方式（false），客户机就要等到服务器返回消息后才去执行其他操作。
注意事项：
open方法不会向服务器发送真正的请求，它相当于初始化请求并准备发送只能向同一个域中使用相同协议或端口的URL发送请求，否则会因为安全原因报错。而send是发送数据的开始过程。
open方法不会向服务器发送真正的请求，它相当于初始化请求并准备发送只能向同一个域中使用相同协议或端口的URL发送请求，否则会因为安全原因报错。而send是发送数据的开始过程。
步骤3，设置响应http请求状态变化的函数
1.onreadystatechange是一个事件，当 readyState 改变时，就会触发 onreadystatechange 事件。
2.readyState是XMLHttpRequest 的状态，通俗的理解就是请求的一个状态。readyState总共有5个状态值，分别为0~4，每个值代表了不同的含义。具体如下
0：初始化，XMLHttpRequest对象还没有完成初始化
1：载入，XMLHttpRequest对象开始发送请求
2：载入完成，XMLHttpRequest对象的请求发送完成
3：解析，XMLHttpRequest对象开始读取服务器的响应
4：完成，XMLHttpRequest对象读取服务器响应结束
1：载入，XMLHttpRequest对象开始发送请求
2：载入完成，XMLHttpRequest对象的请求发送完成
3：解析，XMLHttpRequest对象开始读取服务器的响应
4：完成，XMLHttpRequest对象读取服务器响应结束
3.status就是状态码 ，常见的状态码是200和400。
200 表示请求成功
400表示 未找到页面
200 表示请求成功
400表示 未找到页面
步骤4，发送请求
send() 方法将请求送往服务器，当使用get时，open中的url拼好参数，send中不传参数，那么代码是这样的：xmlHttp.send(null); 当使用post时，open中不带参数，send中传入参数
如何添加HTTP头
1·如果需要像HTML表单那样POST数据，需要使用setRequestHeader()
来添加HTTP头，然后在send()方法中规定希望发送的数据
2·语法：xmlhttp.setRequestHeader(header,value)
3·使用：xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
来添加HTTP头，然后在send()方法中规定希望发送的数据
2·语法：xmlhttp.setRequestHeader(header,value)
3·使用：xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
步骤5，获取服务器端返回的数据
设置响应HTTP请求状态变化的函数
在收到响应后响应数据会填充到XHR对象的属性，有四个相关属性会被填充：
在收到响应后响应数据会填充到XHR对象的属性，有四个相关属性会被填充：
responseText——从服务器进程返回数据的字符串形式
responseXML——从服务器进程返回的DOM兼容的文档数据对象
status——从服务器返回的数字代码，如404（未找到）和200（已就绪）
status Text——伴随状态码的字符串信息
responseXML——从服务器进程返回的DOM兼容的文档数据对象
status——从服务器返回的数字代码，如404（未找到）和200（已就绪）
status Text——伴随状态码的字符串信息
步骤6，将数据渲染到DOM中，实现局部更新
总体步骤：
一、创建XMLHttpRequest对象xhr
二、创建请求（open方法） 注意三个参数：请求方式、url地址、是否同步/异步（true/false）
三、设置响应状态请求变化的函数readystatechange()
四、发送请求（send方法），注意如果是post方法，传递的参数要写在send括号中，同时设置头部信息
五、获取信息（在readystatechange()函数内部获得服务器返回的数据），使用xhr.responseText属性，并通过JSON.parse()方法将其转换为对象
六、将数据渲染到DOM中，实现局部更新
一、创建XMLHttpRequest对象xhr
二、创建请求（open方法） 注意三个参数：请求方式、url地址、是否同步/异步（true/false）
三、设置响应状态请求变化的函数readystatechange()
四、发送请求（send方法），注意如果是post方法，传递的参数要写在send括号中，同时设置头部信息
五、获取信息（在readystatechange()函数内部获得服务器返回的数据），使用xhr.responseText属性，并通过JSON.parse()方法将其转换为对象
六、将数据渲染到DOM中，实现局部更新
JQuery中的AJAX
1)$.ajax( )：是jQuery封装好的使用ajax的方法，减少了原生方法步骤中代码的书写，
$.ajax 的使用主要是传入一个对象：声明传递的方式type（post还是get），地址url，async同步异步，数据格式dataType“json”，请求成功success或失败后执行的函数
$.ajax 的使用主要是传入一个对象：声明传递的方式type（post还是get），地址url，async同步异步，数据格式dataType“json”，请求成功success或失败后执行的函数
2)$.get( )
3)$.post( )
4)$.getJson( )
$.ajax( )如图：省略掉创建XMLHttpRequest对象
jQuery.each() 函数用于遍历指定的对象和数组，也可以写为$.each()
语法：$.each( object, function(index,value){} )
Object 类型，指定需要遍历的数据
function(index,value){}：指定用于循环执行的函数。
*index 数组索引或者对象属性名
*value 数组项或者对象属性值
注意：遍历的数据通常是数组，json，DOM 等
jQuery.each() 函数用于遍历指定的对象和数组，也可以写为$.each()
语法：$.each( object, function(index,value){} )
Object 类型，指定需要遍历的数据
function(index,value){}：指定用于循环执行的函数。
*index 数组索引或者对象属性名
*value 数组项或者对象属性值
注意：遍历的数据通常是数组，json，DOM 等
跨域
指从一个域名的网页去请求另一个域名的资源，严格一点的定义是：只要域名、协议、端口有任何一个的不同，就被当做是跨域；
同源策略：域名、协议、端口均相同；
同源策略：域名、协议、端口均相同；
解决跨域4种方法
跨域资源共享（CORS）
使用JSONP(常用）——JSONwith padding
1、概念：
是JSON with Padding（填充式JSON）的简写，是应用JSON的一种新方法，也是一种【跨域解决方案】
是JSON with Padding（填充式JSON）的简写，是应用JSON的一种新方法，也是一种【跨域解决方案】
2、JSONP的组成：
由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。
由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。
3、JSONP的原理：
直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。
直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。
修改document.domain
使用window.name
跨域封装
跨域封装 ①——
href 和 src 都能导入域名路径并载入
JSON 的接口就是一个 JSON 数据的格式 //eg. [{uesr：1},{id：4},{code：1}]
JSONP 的接口 //add（[{uesr：1},{id：4},{code：1}]） ；
在地址栏后面添加 ？，若已经有了 ？则使用 & （ Ajax 里多个参数隔开），调用 function getJSONP 时是要调用 URL 地址的，此时需要添加一个参数，因为添加了一个参数 callback（命名无所谓） = def （后续 JS 需要写的函数名 ），服务器端会获取 callback 参数，值为 def ，才能塞入 def（）
href 和 src 都能导入域名路径并载入
JSON 的接口就是一个 JSON 数据的格式 //eg. [{uesr：1},{id：4},{code：1}]
JSONP 的接口 //add（[{uesr：1},{id：4},{code：1}]） ；
在地址栏后面添加 ？，若已经有了 ？则使用 & （ Ajax 里多个参数隔开），调用 function getJSONP 时是要调用 URL 地址的，此时需要添加一个参数，因为添加了一个参数 callback（命名无所谓） = def （后续 JS 需要写的函数名 ），服务器端会获取 callback 参数，值为 def ，才能塞入 def（）
跨域封装2——
声明数组用于生成随机的函数名
随机下标 ： Math . random（）*a.length //random 随机生成 0-1，不含1的浮点数 ；
随机索引 ：Math.floor（Math . random（）*10）//floor 返回小于等于x的最大整数:
随机生成的函数名 ： name=‘getABC’+a[ r1 ]+a[ r2 ]+a[ r3 ]；
cbname = ‘getJSONP.’+name； //服务端传回来的 ，即引号内容要与 封装 function函数的命名一致
声明数组用于生成随机的函数名
随机下标 ： Math . random（）*a.length //random 随机生成 0-1，不含1的浮点数 ；
随机索引 ：Math.floor（Math . random（）*10）//floor 返回小于等于x的最大整数:
随机生成的函数名 ： name=‘getABC’+a[ r1 ]+a[ r2 ]+a[ r3 ]；
cbname = ‘getJSONP.’+name； //服务端传回来的 ，即引号内容要与 封装 function函数的命名一致
跨域URL处理
1.getJSONP执行完后，它里面定义的变量和函数都会自动销毁。但是getJSONP[name]是getJSONP上的一个方法（方法也叫做属性），getJSONP是全局的函数是不会自动销毁的，它的属性也不会自动销毁，所以需要手动删除一下。
2. 属性和变量不一样 ，变量设置为null ，就会回收了。getJSONP[name]属性设置为null ，只是说属性值变为null ，但是它还是存在的。
3.callbackFn && callbackFn(result);这个是一个逻辑与表达式，逻辑与中当第一个操作数转换为布尔值为true ，表达式就会返回第二个操作数，如果第一个为false，就不会执行第二个操作数了。
2. 属性和变量不一样 ，变量设置为null ，就会回收了。getJSONP[name]属性设置为null ，只是说属性值变为null ，但是它还是存在的。
3.callbackFn && callbackFn(result);这个是一个逻辑与表达式，逻辑与中当第一个操作数转换为布尔值为true ，表达式就会返回第二个操作数，如果第一个为false，就不会执行第二个操作数了。
跨域调用
0 条评论
下一页
为你推荐
查看更多
