jQuery

最新推荐文章于 2022-01-22 15:10:28 发布

晓凤凤

最新推荐文章于 2022-01-22 15:10:28 发布

阅读量266

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

23 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

jQuery作为JavaScript封装的类库，目的就是为了简化开发者使用JavaScript变得更加方便，

优势：

1.让开发者像css那样访问和操作dom

2.修改css

3.简化JavaScript代码操作

4.事件处理变得简单

5.各种动画效果使用方便

6.让Ajax技术使用方便

7.基于jQuery大量插件

8.自行扩展功能插件

jQuery最大的优势就是方便，比如让开发者像css操作dom一样，比原生的js方便太多，提高效率非常明显，他还解决了浏览器兼容性问题，让开发者不需要考虑浏览器兼容性问题了

其他主流JavaScript库

1.YUI 雅虎公司开发的

2.Prototype最早成形的库之一

3.Dojo 提供一些其他库没有的方法比如离线存储、图标组件

2013发布的jQuery2.0宣布不再支持IE678

目前大部分主流大型网站都不支持IE6，部分功能受限不支持

一个项目为了兼容上的考虑：

1.成本控制

一个项目本来1个月就可以上线，但为了兼容花了一年半载这样是不现实的，这就会导致项目胎死腹中

2.用户选择

3D游戏的高质量用户和低质量用户

新闻站他要考虑到所有用户

3.项目侧重点

新闻、企业站交互比较少所以还是要照顾到低版本浏览器的

4.用户体验

有大量的交互和Ajax操作的项目，如果兼容低版本用户那么高版本的用户体验就会差

5.数据支撑

做一个项目的时候肯定是要去做数据分析的，分析自己项目的用户是高质量还是低质量，进行有效的取舍

6.教育用户

对于低质量的用户就不需要去迎合他了，应该牢牢的粘住中高质量的用户，提示安装高版本浏览器，或者直接不让他访问，或者让他访问但是提示部分功能受限

是否兼容那就需要从以上考虑，到达平衡

Ajax：全称异步JavaScript和xml，是一种创建网站交互的技术，用于创建快速动态网页，在无需加载整个网页的前提下更新部分网页，通过在后台与服务器进行少量的数据交换，使网页实现异步更新，

这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

// 1.代码风格 $===jQuery$ 是一个jQuery对象，其整体也是一个jQuery对象

// alert($);//返回值是一个内部方法

// alert($());//返回值是一个jQuery对象

// alert($(‘#id’));//返回值是一个jQuery对象

// alert($(‘#id’).css(‘color’,’red’));//返回值是一个jQuery对象

// alert($(‘#id’).css(‘color’,’red’).css(‘font-size’,’200px’).css(‘font-weight’,’bold’));//返回值是一个jQuery对象,css连缀功能

// $(function(){})//执行一个立即执行函数

// $(‘#id’)//id元素选择，选中id是id的元素

// $(‘#id’).css(‘color’,’red’);//css是一个功能函数，添加一个行间样式属性color值是red

// 2.加载模式 js代码如果放在head里面正常都是先下载js执行完毕后再执行后面的代码

// 原生js提供的方法window.onload = function(){}方法会在页面全部加载完成后执行,而且只能执行一次，重复功能会被覆盖

// jQuery提供的方法$(document).ready(function(){})方法会在dom树构建完成后执行，可以执行多次，不会被覆盖

// $(document).ready(function(){})简写就是$ (function(){})

// 3.对象互换

// // alert($(‘#id’));//返回值是一个jQuery对象

// alert(document.getElementById(‘id’));//返回原生js的dom对象

// alert($(‘#id’).get(0));//也可以返回原生js的dom对象，get()里面的参数是index索引

// alert($(document.getElementById(‘id’));//jQuery对象和DOM对象的互换

// 4.多个库之间的冲突

// 当一个项目引入多个第三方的库时，由于没有命名空间的约束，就会产生冲突，比如Prototype库也是

// 使用 $作为起始符，那么到底这个$ 谁呢，那就会产生冲突，但是不相同的方法还是可以同时使用的，规定是这样的，后面的引用覆盖前面的

// 如果想要两个共容的解决办法

// 方法1：

// <script src=”js/jquery-1.10.1.js”></script>

// <script src=”js/prototype.js”></script>

// var $$ = jQuery;

// $(function(){

// alert( $('#id').get(0));//目前$ 归prototype所有，这样执行就会报错，解决办法就是使用$$或者jQuery代替$

// alert($(‘#id’).ge(0));

// });

// 方法2：当jQuery库在后面时，此时 $归jQuery所有，如果想把$ 给prototype库，

// jQuery提供了一个自行了断 $的方法jQuery.noConflict();运行此方法后$ 就不是jQuery的了，属于prototype的，

// 此时也还可以指定一个符号给jQuery例如var $$ = jQuery;

// <script src=”js/prototype.js”></script>

// <script src=”js/jquery-1.10.1.js”></script>

// $(function(){

// alert( $('#id').ge(0));//此时运行会报错，目前$ 是jQuery的

// alert($(‘#id’).get(0));//正常运行

// });

</script>

常规选择器包括简单选择器、进阶选择器、高级选择器

1.jQuery最核心的组成部分就是选择器引擎，他继承了css的语法，可应对dom元素属性标签状态进行选择

还不需要考虑兼容性的问题jQuery实现了css-css3的大部分规则，也有一些自定义的选择器用于特殊状态的选择

2.简单选择器

#id选择器只能一个元素页面中只允许一个id，如果有多个id，css会全部执行样式，但是jQuery只会执行第一个

标签选择器可以多个元素

class选择器可以多个元素，一次选中多个 $('.class').size()方法返回个数，$ (‘.class’).eq(1).css(‘color’,red);选中class里面的第二个，从0开始

3.jQuery提供了一个size方法用于返回页面中class相同的个数，标签选择器个数，id只返回一个

4.jQuery提供了一个length属性用于返回页面中class相同的个数，标签选择器个数，id只返回一个

5.jQuery的css设置叫做添加一个行为，找个行为添加了一个行间样式

6.css里面的子选择器 #box > p 标准的子节点选择器，不包括孙子节点#box p 包括孙子节点和子节点 IE6里面没有这两个选择器，

但jQuery里面兼容了这个方法$(‘#box > p’)在IE依然好使

7.jQuery存在一个容错的功能，比如页面中不存在你选中的id他不会报错，而在原生js里面如果选中的id元素不存在就会报错

8.$(‘.demo’)jQuery的选择器返回值应该是一个类数组，他有get(索引)方法用于返回原生js的DOM对象，所以get()也可以换成[]

9.进阶选择器群组选择器、后代选择器、通配选择器

1.css的群组选择器多个元素一起选

div,p,span,.box,#box{

color:red;

}

jQuery的群组选择器类似，$(‘div,p,span,.box,#box’).css(‘color’,’red’)

2.css后代选择器<div><p><span></span></p></div>

div p span{

color : red;

}

jQuery的后代选择器类似，$(‘div p span’).css(‘color’,’red’)

3.css通配符选择器* 选择的是页面中所有标签，在全局使用它会大量消耗资源

padding: 0;

margin: 0;

}

jQuery的通配符选择器类似， $('*').css('color','red')$ (‘ul li *’)选出ul下面所有li元素

4.*一般少使用，会浪费资源，因为他会选出很多无效的元素

5.标签的限定选择器 css里面 <div class=”demo”></div> 用于选择div标签带demo的class标签

div.demo{}

6.多class选择器 <div class=”demo1 demo2”></div>

.demo1.demo2{}

jQuery的类似$(‘.demo1.demo2’)

7.选择器选择应该遵循短，准选择，选择器过长选择慢，id选择器最快

10.高级选择器早期的IE6浏览器不支持css高级选择器但是在jQuery都支持从IE7后部分高级选择器开始支持

1.层次选择器

1.后代选择器$(‘div p’).css(‘color’,red);支持IE6

2.jQuery还有一个后代选择find()方法例 $('div').find('p').css('color',red);跟$ (‘div p’).css(‘color’,red);是等价的

3.子选择器和后代选择器是有区别的$(‘div > p’).css(‘color’,red);选不到孙子，只能选到子元素

4.jQuery也提供了一个子选择器方法children如$(‘div’).children(‘p’).css(‘color’,red);

5.next选择器+ 只获取后一个节点而且是同级DOM对象 div+p{} $(‘div+p’) 此方法只能是div后面立马跟了一个p不然是无效的

6.jQuery也提供了一个next选择器方法next() $(‘div’).next(‘p’)

7.nextAll选择器~ 获取后面所有的指定的DOM对象 div~p{} $(‘div~p’) 可以获取后面所有的同级的指定元素

6.jQuery也提供了一个nextAll选择器方法nextAll() $(‘div’).nextAll(‘p’)

7.next和nextAll选择器必须是选中元素的后一个或者后N个，

8.find() children() next() nextAll() 这几个方法如果不传参那么默认是*

9.jQuery还提供了几个更加丰富的方法来选择元素

1.prev()方法用于选择同级的上一个元素

2.prevAll()方法用于选择同级的上N个元素

3.sibling()方法用于兄弟节点所有指定的元素，包括前后，是nextUntil和prevUntil的结合

4.nextUntil()方法用于选择同级后非指定元素，遇到指定元素就停止选择

5.prevUntil()方法用于选择同级前非指定元素，遇到指定元素就停止选择

2.属性选择器 a标签用的多标签的属性为条件进行选择

1.$(‘a[title]’).css()//选择属性是title的a标签

2.$(‘a[title=num1]’).css()//选择属性是title=num1的a标签

3.$(‘a[title^=num]’).css()//选择属性是title=num…的以num开头的值的a标签

4. $('a[title$ =num]’).css()//选择属性是title=…num的以num结尾的值的a标签

5.$(‘a[title!=num1]’).css()//选择属性是title不等于num1的a标签，jQuery独有

6.$(‘a[title|=num]’).css()//选择属性是title等于num-..的a标签

7.$(‘a[title~=num]’).css()//选择属性是title等于num aaa bbb满足列表的的a标签

8.$(‘a[title*=num1]’).css()//选择属性是title包含num字符的a标签

9.多属性选择器$(‘a[][]’).css

11.各选择器方法取舍速度性能优势讨论

1.理论上jQuery提供的find() children() next() nextAll()方法都是快于高级选择器的，因为他没有高级选择器的复杂

2.选择器快慢分析最快是find()方法，最慢是高级选择器

1.$(‘#demo’).find(‘p’);//这条最快，他会调用原生的js方法是最快的，getElementById、ByTagName、ByClassName

2. $('p','#demo')等同于$ (‘#demo’).find(‘p’)只是速度慢一点而已，慢百分之五

3. $('#demo').children('p');快于$ (‘#demo > p’);高级选择器在jQuery里面都会使用Sizzle引擎，一个元素一个元素进行遍历完

4. $('#demo p');也比较慢，推荐使用$ (‘#demo’).find(‘p’);

1.css3里面的伪类选择器

a:link 未访问的链接

a:visited 已经访问的链接

a:hover 鼠标移上去

a:active 被选中的

a:focus 向拥有键盘输入焦点的元素添加样式。

2.伪元素属于行级元素

:after

:before

过滤选择器类似css3里面的伪类选择器，但jQuery可以让不支持css3的浏览器也能使用过滤器都以:开头

1.基本过滤器

$(‘li:first’).css(‘background’,’red’);选取第一个li元素

$(‘ul:first li:last’).css(‘background’,’red’);选取第一个ul里面的最后一个li元素

$(‘li:not(.class)’).css(‘background’,’red’);选取所有类名不是class的li元素

:even选中偶数项，从0开始

:odd选中奇数项

:eq(第几项) 从0开始，可以是负数，那就是倒着来，选中该项进行操作

:gt(第几项) 从0开始，选中该项之后所有项进行操作

:lt(第几项) 从0开始，选中该项之前所有项进行操作

h1:header h1-h6标题选择器

:focus一般用于表单焦点但表单需要初始化一下,默认加上焦点，一出来就有焦点

示例：

$(‘input’).get(0).focus();

$(‘:focus’).css(‘background’,’red’);

2.内容过滤器

div:contains(text);标签div的内容包含text文本的标签，jQuery里面单引号里面用双引号，双引号里面用单引号

div:empty;标签div无内容的，没有子元素，没有内容，完完整整的空

ul:has(.red)选取的是ul，限定条件是ul里面的子元素是否含有class=“red”

div:parent;有内容的，跟empty相反

jQuery还提供一个方法has示例$(‘div’).has(‘.demo’).css();

jQuery提供的parent()方法，选择当前元素的父元素

jQuery提供的parents()方法，选择当前元素的父元素及祖先元素

jQuery提供的parentsUntil(‘html’)方法，选择当前元素的父元素及祖先元素,遇到HTML标签就停止，

3.可见性过滤器

li:hidden选取所有不可见的li元素

li:visible选取所有可见的li元素

hidden选择器一般包括input里面的hidden和display的none

4.子元素过滤器

$(‘li:first-child’);先返回li元素的父元素，然后给父元素的第一个元素li进行操作。第一个元素必须是li，如果是有其他元素就无效

$(‘li:last-child’);先返回li元素的父元素，然后给父元素的最后一个元素li进行操作。最后一个元素必须是li元素，如果是有其他元素就无效

$(‘li:only-child’);只有一个子元素li的

$(‘li:nth-child(even)’);选中li元素的父元素下面的li的偶数项，项数从1开始

$(‘li:nth-child(odd)’);选中li元素的父元素下面的li的奇数项，项数从1开始

$(‘li:nth-child(2)’);参数还可以是索引，选中li元素的父元素下面的第2个li元素，从1开始

$(‘li:nth-child(2n+1)’);参数还可以是索引2n+1，选中li元素的父元素下面的第2n+1个li元素，从1开始，n是1.2.3..

5.其他方法

1.is()方法，参数可以是选择器，DOM，jQuery对象，返回值是布尔值

示例$(‘.red’).is(‘li’);检查class名是red的元素是不是li

$('.red').is($ (‘li’).eq(2));检查class名是red的元素是不是li,$(‘li’).eq(2)也是jQuery对象

$('.red').is($ (‘li’));检查class名是red的元素是不是li，$(‘li’)是jQuery对象

$('.red').is($ (‘li’).get(2));检查class名是red的元素是不是li,而且限制li是第三个DOM元素

$(‘.red’).is(function(){

return $(this).attr(‘title’)==’列表3’

})

$(‘li’).eq(2).hasClass(‘red’)

$(‘li’).slice(1,3);从第一位开始选到第三位，不包括第三位，位数从0开始

$(‘li’).slice(2);从第二位开始选择后面的所有

$(‘li’).slice(2,-2);从第二位开始选择到倒数第二位

$(‘#demo’).next().end().css();end()方法的作用是找到前一个状态

contents()方法是获取到标签元素和文本节点

filter()方法，可以允许多个过滤器写到一起示例$(‘li’).filter(‘.red,:first,:last’)

filter()方法还可以写一个function

示例：$(‘li’).filter(function(){

return $(this).

})

基础DOM和css操作

1.DOM是一种文档对象模型，方便开发者对HTML元素进行展示和修改，在元素js里面DOM操作比较复杂，而且对各浏览器的兼容性

也存在着很多问题，但在jQuery里面把我们常用的DOM操作进行了有效的封装，让我们不用考虑浏览器的兼容性问题

D就是页面文档Document

O对象，一切标签都是对象

M model页面元素节点和文本节点

2.设置元素及内容操作

前面学习的选择器，过滤器就是对元素进行精确地选择

各方法介绍如果各方法写入了参数，那么他就会返回一个对象

html() 获取元素中的HTML内容

text() 获取元素中的文本内容，html代码会自动清理

html(‘内容参数，可以是html代码’) 会替换掉里面的HTML标签内容，html代码正常解析

保留之前的内容追加新内容 $('div').html($ (‘div’).html()+’新内容’)

还可以传函数进去达到实现保留之前的内容追加新内容

$(‘div’).html(function(index,value){

return return value + ‘新内容’

})

text(‘内容参数’) 会替换掉里面的文本，内容参数不支持html代码，如果有HTML代码会被当做文本展示

val() 获取value值，如果有参数就是修改value值

val()方法还有一个特殊功能，如果参数传一个数组进去，数组内容是某元素的value值，一般是多选或者单选，就会被设置为选中状态checked

3.元素属性操作 attr()方法元素的class不建议使用attr设置

$(‘#demo’).attr(‘id’)获取id

$(‘#demo’).attr(‘title’,’什么鬼’)给元素设置一个属性title，值是什么鬼

attr({}) 还可以用对象为参数，用于多个属性设置

attr() 还可以是函数 index参数是索引，value是原来的title的值 return返回的是修改后title的值

$(‘div’).attr(title,function(index,value){

return

})

删除属性的方法removeAttr(‘属性名’)此方法不能传函数作为参数

一般也可以使用attr创建id但不建议使用，容易混乱

4.元素样式操作获取的时候如果元素无该属性那么返回元素的默认属性值

$(‘div’).css(‘属性’);一个参数就是获取该属性，color属性IE浏览器获取的原文本，其他浏览器获取的是rgb

$(‘div’).css(‘属性’,’属性值’);两个参数就是设置元素属性

获取多个属性，就需要使用对象数组，也就是类数组$(‘div’).css([‘color’,’width’,height]);返回值是个对象,需要看里面的内容需要使用for-in

for-in是js原生方法用于遍历对象的

jQuery提供的方法是each()遍历对象

示例：

var temp = $(‘div’).css([‘color’,’width’,height]);

$.each(temp,function(attr,value){

alert(value);

})

each()方法还可以遍历获取元素时得到的多个元素对象

示例：

$(function(){

$(‘div’).each(function(index,element){

alert(index+’:’+element);

});

})

还可以传递一个对象，用于设置多个css样式

css({

‘color’:’red’,

‘background’:’yellow’

});

还可以传一个函数

css(‘width’,function(index,value){

})

5.元素className设置

$(‘div’).addClass(”);

$(‘div’).addClass(‘多个class’);

$(‘div’).removeClass(‘class’);

$(‘div’).removeClass(‘多个class’);

6.toggle样式切换，有无切换，样式可以多个，还有第二个参数可以通过运算规则来设置频率，用的少

$(‘div’).toggle(‘bg color’)

7.实现多个颜色之间的来回切换

方法1参考：多个颜色之前来回切换.html

方法2直接使用toggle()传函数参数进去实现

示例

$(‘div’).click(function(){

$(this).toggle(function(){

if($(this).hasClass(‘red’)){

$(this).removeClass(‘red’);

return ‘green’;

}else{

$(this).removeClass(‘green’);

return ‘red’;

}

});

8.jQuery自己封装的一些css方法

width()方法获取元素宽度 $('div').width()比$ (‘div’).css(‘height’);方便

$(‘div’).css(‘height’);返回值是一个string类型

$(‘div’).width();返回值是一个number类型

width(1000);传参数设置1000px，内部直接会转化成1000px字符串，很智能

width();参数还可以是function

width(function(index,width){

return width+100;

})

height的用法跟width一样

width()和height()方法获取的元素宽度不包括padding

innerWidth();包含padding

outerWidth();包含边框

outerWidth(true);包含边框和外边距

9.获取元素偏移方法

1.元素

offset()有两个配套属性left和top，相对于视口是距离,只是用于获取不能设置

position()有两个配套属性left和top,相对于相对点的距离，只是用于获取不能设置

2.滚动条的方法，滚动条属于window

$(window).scrollTop();滚动条垂直方向滚动距离，如果传参进去就是设置移动距离

$(window).scrollleft();滚动条水平方向滚动距离，如果传参进去就是设置移动距离

DOM节点操作

1.创建节点动态创建，源代码里面看不到

var temp = $(‘<div>123</div>’);创建节点，存在于内存里面

$(‘body’).append(temp);

2.元素插入研究

$(‘body’).append(temp);append插入规则是插入到body内部，如果body内部本身有元素，追加到原有元素的后面

$(‘div’).append(function(index,html){

return ‘<div>123</div>’+index;

});有多个div的时候参数index就变得很有用了，用于计算,参数html是获取原本div里面的内容

appendTo();剪切操作，将已存在的元素剪切到某个元素后面

prepend();插入到内部的前面，跟append相反

$(‘div’).after(‘<div>123</div>’);插入到同级元素的后面

after(function(index,html){

})方法也可以传函数,index参数是索引，html是原内容

$(‘div’).before(‘<div>123</div>’);插入到同级元素的前面

insertAfter();方法，剪切到同级后面

insertBefore();方法，剪切到同级前面

3.包裹节点操作

1.wrap() 被包裹 <div>就会被strong包裹在里面，还可以是多个包裹wrap(‘<strong><em></em></strong>’)

示例$(‘div’).wrap(‘<strong></strong>’);

第二种写法，单标签会被自动转换成双标签$(‘div’).wrap(‘<strong />’);

2.wrap()参数还可以是js原生DOM对象

$('div').wrap($ (‘strong’).get(0));获取到页面中的strong然后用strong去包裹div

js原生方法创建元素$(‘div’).wrap(document.createElement(‘strong’));然后用strong包裹div

3.warp()参数还可以是function

wrap(function(){

return ‘<strong></strong>’

});

4.unwrap() 移除外层标签，直接就是一个方法，直接使用

$(‘div’).unwrap();移除一个外层标签，执行几次就移除几次

5.wrapAll(‘strong’)把所有选中的元素作为一个个体，然后用strong去包裹这个整体，而wrap()是把选中的元素作为一个单独个体，一个一个进行操作

6.wrapAll(document.createElement(‘strong’)) 第二种写法，功能一样

7.$(‘div’).wrapInner(‘<strong></strong>’);给div元素内部的内容进行包裹，参数也可以是function

4.jQuery还提供了一些常规的节点操作：复制，替换，删除节点

1.clone()方法复制

$(‘div’).clone();克隆复制一份到了内存

$(‘div’).clone().appendTo(‘body’);插入到页面中

clone()还有一个参数，true或者false 如果是true那么复制的时候会把元素的事件也复制一份，

false就不复制元素事件，默认是false

2.remove()方法删除节点这个删除是剪切操作，剪切到了内存中，但事件行为已经永远不存在了

$('div').remove();remove的参数还可以包含精确选择，$ (‘div’).remove(‘.demo’);删除div并且该div的class名是demo

3.detach()方法也是删除节点，这个删除也是剪切操作，但会保留事件行为

4.empty();作用是清空节点里面的内容，原标签会保留，里面内容包括其他标签都会删除

5.$(‘div’).replaceWith(<strong>666</strong>)方法替换节点 div里面的内容和标签都会被替换，事件也会移除

6.$(‘<strong>666</strong>’).replaceAll(‘div’)跟上面的替换方法效果一样

表单选择器常规的选择器可以选择表单，jQuery还提供了一些方法专门选择表单的选择器

<form>

</form>

常规选择器选择方法$(‘input[name=username]’).val();

表单选择器跳过伪类的方式实现

:input 选择所有input元素如input textarea select button

用表单选择器选择$(‘:input[name=username]’)

还可以使用$(‘:text’) 选择type是text的input元素

还可以使用$(‘:password’) 选择type是password的input元素

推荐还是加个form作为限制条件$(‘form :input[name=username]’)

表单过滤器

:enable 选择所有可用元素元素有个disabled和enabled属性，设置后元素变成可用或者不可用状态，默认都是enabled元素

:checked 判断是否处于选定状态，适用于radio和checkbox，可用选中已经处于checked的元素

:selected 判断是否有下拉菜单元素且下拉菜单的option已被选中，第一个option默认被选中

基础事件

js中常用事件：click dblclick mousedown mouseup mousemove mouseover=mouseenter mouseout=mouseleave

change select submit keydown keyup keypress blur focus load scroll error

jQuery通过一个bind(‘type’,function)方法来绑定事件,function可以是匿名函数，也可以是函数名

bind()可以允许绑定多个事件，

bind(‘click mouseover’,function(){

})

参数还可以是{}对象，用于多个不同事件

bind({

click : function(){},

mousedown : function(){}

})

删除事件unbind()

$(‘div’).unbind();没有参数就是删除所有事件

$(‘div’).unbind(‘click’);只删除click事件

div绑定了2个click事件，$(‘div’).unbind(‘click’，fn1);只删除绑定了fn1处理函数的click事件

简写事件讨论

click事件直接简写 $(‘div’).click(function(){});

dblclick事件直接简写 $(‘div’).dblclick(function(){});

$(‘div’).mousedown(function(){});鼠标左键点下

$(‘div’).mouseup(function(){});鼠标左键抬起

unload()事件一般用于清理工作，属于window，也有很多用于广告弹窗，新版浏览器一般拒绝这种操作

resize()事件是浏览器窗口大小发生改变时触发

scroll()事件是滚动条移动了触发

select() input文本框里面的内容文本被选中后触发

change() input 文本框里面的内容发生了改变就会触发

submit() 表单提交时触发事件，基于form $(‘form’).submit(function(){})

mouseenter和mouseover区别

mouseover会触发子节点，比如给div绑定一个事件，移入到p的时候还会执行一次,会把子节点当做不是自己儿子

mouseenter不会触发子节点，一般都使用e nter

mouseout会触发子节点，跟over是一对

mouseleave不会触发子节点，跟enter一对

keydown可以监测键盘的所有按键，keycode和which值是键盘排序

keypress只能监测字符类按键，charCode值是该字符的ascll码值

keyup键盘弹起

表单光标的丢失和激活 blur focus

$(‘input’).blur(function(){})

$(‘input’).focus(function(){})

功能类似的focusin 和 focusout 但这两个支持父元素激活

$(‘div’).focusin(function(){})

$(‘div’).focusout(function(){})

复合事件

ready(function(){});当DOM构建完成后触发事件

hover(function(){});鼠标移上去触发事件

hover(function(){},function(){});鼠标移上去触发第一个function事件，移开触发第二个function()

hover结合的是mouseenter和mouseleave

事件对象 e event

属性type 存的是事件类型是个字符串

属性target 存的是触发事件的DOM元素

属性currentTarget 绑定事件的元素，等于this

属性relatedTarget 获取移入移出最近那个元素

date的使用，date可以是数组，字符串，数字，对象等传入自定义数据

$(‘input’).bind(‘click’,date,function(e){

alert(e.date);

});

都是e里面的属性

pageX pageY相对于原点的距离

clientX clientY相对于浏览器视口的距离

screenX screenY相对于显示屏

timeStamp 获取事件的时间戳

which 获取鼠标的左中右键分别是123 或者键盘的排序跟keydown里面的keyCode一样

ctrlKey shiftKey altKey 监测是否按下了ctrl shift alt键

事件冒泡

存在父子结构的元素绑定了同一事件，由子元素冒泡向父元素

取消冒泡，jQuery已经做好了各浏览器的兼容，本来IE的方法是e.cancelBubble = true直接使用就可以了，e.stopPagation();

阻止默认事件

右键菜单

a链接跳转

$(‘a’).click(function(e){

e.stopPropagation();//阻止冒泡

e.preventDefault();//阻止跳转

alert(1);

});

表单提交也会跳转取消跳转

$(‘input’).click(function(e){

e.preventDefault();//阻止跳转

});

$(‘form’).submit(function(e){

e.preventDefault();//阻止跳转

});

e.stopPropagation();//阻止冒泡

e.preventDefault();//阻止跳转

阻止冒泡和阻止默认事件合并就是

$(‘a’).click(function(){

return false;//等于阻止冒泡和阻止默认事件的合体

});

isDefaultPrevented();判断是否阻止了默认事件

isPropagationStopped();判断是否阻止了冒泡事件

stopImmediatePropagation() 取消事件冒泡并且取消该事件的后续处理函数，绑定了两个click，取消冒泡，只执行第一个click，第二个不执行

isImmediatePropagationStopped(); 判断是否调用了stopImmediatePropagation()

高级事件

模拟操作：比如一个按钮，让浏览器模拟用户去点击它一下，就是模拟操作，区别于用户操作

模拟用户点击操作

$(‘input’).click(function(e){

alert(‘点击’);

});

$(‘input’).trigger(‘click’);//设置让浏览器点击一下按钮，这个就是模拟操作,只模拟一次，事件依然存在

简写：$(‘input’).click(function(e){

alert(‘点击’);

}).trigger(‘click’);

trigger(‘click’,[data1,data2]);还可以传多个数据但传多个数据的时候必须使用[]不然无法识别

示例：

$(‘input’).click(function(e,data1,data2){

alert(‘点击’);

});

$(‘input’).trigger(‘click’,[date1,date2,[1,2,3],{}]);中括号里面可以是对象，数组，字符串，数字

bind(‘click’,date);方法也可以传数据,可以是数组，对象，字符串，调用数据的时候就是e.date.

自定义事件

$(‘input’).bind(‘myEvent’,function(){

}).trigger(‘myEvent’);

trigger()方法简写空的click()就可以了，但必须是系统事件，自定义事件不能，大部分系统事件都是提供了简写

$(‘form’).trigger(‘submit’);//浏览器模拟提交表单并且跳转到form指定界面

$(‘form’).triggerHander(‘submit’);//浏览器模拟提交表单但是默认事件跳转被阻止了，不进行跳转

表单提交简写方式

$(‘form’).submit(function(){

e.preventDefault();

});

如果页面有多个元素绑定了相同事件如果有多个submit，使用trigger()会依次执行

$(‘input’).click(function(e){

alert(‘点击’);

}).trigger(‘click’);

但使用triggerHander(‘click’);只会执行第一个

trigger()返回值是一个jQuery对象，可以使用连缀功能

$(‘input’).click(function(e){

alert(‘点击’);

}).trigger(‘click’).css(‘background’,’red’);

triggerHander(‘click’)返回值是return值或者undefined 无法进行连缀功能

$(‘input’).click(function(e){

alert(‘点击’);

return 123;

}).triggerHander(‘click’);

trigger()有冒泡功能，triggerHander()无冒泡功能

命名空间绑定了多个相同事件，想移除某一个事件就需要用到命名空间

$(‘input’).bind(‘click’,function(){

alert(‘abc’);

})

$(‘input’).bind(‘click’,function(){

alert(‘xyz’);

})

同时绑定了两个事件$(‘input’).unbind(‘click’);把两个事件都移除了

使用命名空间就可以有针对的进行移除$(‘input’).unbind(‘click.abc’);只移除了click.abc,不会移除mouseover.abc

$(‘input’).bind(‘click.abc’,function(){

alert(‘abc’);

})

$(‘input’).bind(‘click.xyz’,function(){

alert(‘xyz’);

})

$(‘input’).bind(‘mouseover.abc’,function(){

alert(‘xyz’);

})

如果想移除带有命名空间abc使用方法$(‘input’).unbind(‘.abc’);

trigger(‘click.abc’);模拟执行的时候也可以使用命名空间

事件委托live() 请人帮忙比如学校有10000人同时收到快递委托门卫签收事件冒泡由子元素冒泡向父元素

<div>

</div>

使用bind()绑定事件有3个按钮绑定了3个事件，button越多，绑定越多

$(‘.button’).bind(‘click’,function(){

alert(‘未使用事件委托’);

})

事件委托每次会验证event.type 和 event.target才会触发，因为事件委托是借助事件冒泡来实现的

bind()不支持动态绑定事件，比如AJAX新更新的页面,如果使用的clone()虽然达到了目的，但是绑定次数确越来越多了，还是没有事件委托方便简洁

live()支持动态绑定事件，live()方法不支持连缀调用，解除委托事宜die(‘click’)

因为live()存在很多缺陷，不支持连缀，冒泡层次多，语义不清晰，在1.4.3版本就被废弃了，代替的新方法是

delegate(‘.button’,’click’,function(){})和undelegate(‘.button’,’click’)

注意：bind() live() delegate()都是事件绑定，live() delegate()是事件委托，数量多就使用事件委托，有动态更新需要绑定事件也建议使用事件委托

事件绑定事件委托的合体 on off one

1.普通绑定 bind() unbind()

2.事件委托 live() die() 已抛弃

3.事件委托 delegate() undelegate()

新方法的绑定 on() off()

1.替代bind()

$(‘.button’).on(‘click’,function(){});

2.bind()还可以传额外数据可以是普通字符串数字对象数组

$(‘.button’).on(‘click’,,function(){});

3.绑定多个事件

$(‘.button’).on(‘click mouseenter’,function(){});

4.绑定多个事件以对象的形式

$(‘.button’).on({

click : function(){

alert(‘click’);

}

mousedown : function(){

alert(‘down’);

}

}});

5.阻止表单提交默认跳转行为 return false;既阻止了默认事件也阻止了冒泡

$(‘form’).on(‘submit’,function(e){

e.preventDefault();或者return false;

})

5.阻止表单提交默认跳转行为

$(‘form’).on(‘submit’,false);既阻止了默认事件也阻止了冒泡

6.取消冒泡

$(‘form’).on(‘submit’,function(e){

e.stopPropagation();

})

新方法移除事件off 取代unbind

1.$(‘#button’).off(‘click’);

2.$(‘#button’).off(‘click’,fn);移除命名函数

2.$(‘#button’).off(‘click.abc’);移除带命名空间的事件

新方法替代事件委托live delegate 事件委托委托父元素进行事件操作

$(‘div’).on(‘click’,’p’,function(){});第一个参数是事件类型，第二个是事件源对象，第三个是事件处理函数

新方法移除事件委托off

$(‘div’).off(‘click’,’p’); 第一个参数是事件类型，第二个是事件源对象

特殊新方法one() 只触发一次事件，触发后自动销毁事件，不能多次执行

$(‘div’).one(‘click’,function(){}) 事件绑定，只有一次触发后就会销毁

$(‘div’).one(‘click’,’p’,function(){})事件委托，只有一次触发后就会销毁

动画效果

以前网页特效都是通过flash实现的，目前大部分已经被JavaScript取代了，网页特效，比如渐变菜单渐进显示图片轮播

显示、隐藏通过操作元素的display:none/block/inline-block/inline;

$(function(){

$(‘#show’).click(function(){

$(‘div’).show(1000)

});

$(‘#hide’).click(function(){

$(‘div’).hide(‘fast’)

});

})

1.显示方法是show() 可以传2个参数，不传参就是直接显示，第一个参数是速度包含了匀速变大以及透明度的变换

2.隐藏方法是hide() 可以传2个参数，不传参就是直接隐藏，第一个参数是速度包含了匀速变小以及透明度的变换

3.jQuery提供的3个预设速度参数slow—600毫秒 normal—400毫秒 fast–200毫秒

4.默认是normal–400毫秒

5.第二个参数就是一个回调函数显示或者隐藏完成后触发

$(function(){

$(‘#show’).click(function(){

$(‘div’).show(1000,function(){

alert(1);

})

});

$(‘#hide’).click(function(){

$(‘div’).hide(‘fast’,function(){

alert(2);

})

});

})

6.同步动画一起出来

$(function(){

$(‘#show’).click(function(){

$(‘.test’).show(1000,function(){

})

});

$(‘#hide’).click(function(){

$(‘.test’).hide(1000,function(){

})

});

})

7.列队动画一个一个嵌套但嵌套太多肯定不好，或者有新元素加入怎么办

$(function(){

$(‘#show’).click(function(){

$(‘.test’).eq(0).show(1000,function(){

$(‘.test’).eq(1).show(1000,function(){

$(‘.test’).eq(2).show(1000,function(){

$(‘.test’).eq(3).show(1000,function(){

});

$(‘#hide’).click(function(){

$(‘.test’).hide(1000,function(){

})

});

})

8.解决办法，使用递归自调用

$(function(){

$(‘#show’).click(function(){

$(‘.test’).eq(0).show(1000,function testShow(){

$(this).next().show(1000,testShow)

});

$(‘#hide’).click(function(){

$(‘.test’).last().hide(1000,function testHide(){

$(this).prev().hide(1000,testHide)

});

})

9.toggle 切换包含show 和 hide 内部会进行判断

10.slideUp卷上 slideDown滑下 slidetoggle 跟show 和 hide一样具有相同的参数

$(function(){

$(‘#toggle’).click(function(){

$(‘div’).slideToggle(1000);

});

})

11.淡入淡出 fadeIn fadeOut fadeToggle fadeTo透明度到某个值范围是0-1

$(function(){

$(‘#toggle’).click(function(){

$(‘div’).fadeToggle(1000);

});

})

fadeTo透明度

$(function(){

$(‘#to’).click(function(){

$(‘div’).fadeTo(1000,0.3);

});

})

自定义动画 animate() 有3个参数第一个是对象里面写css样式第二个参数是速度，第三个是回调函数，前面执行完毕才执行回调函数里面内容

$(‘div’).animate()

第二个参数还可以进行运算

$(function(){

$(‘#button’).click(function(){

$(‘div’).animate({

background : ‘red’,

height : ‘300px’,

width : ‘300px’,

opacity : 0.3,

left : ‘+=300px’

});

})

刚才的效果都是同时出现的，想要一个一个出现列队动画可以使用在回调函数里面不停地嵌套，因为回调函数就是等待前面的执行完毕后才执行

$(function(){

$(‘#button’).click(function(){

$(‘div’).animate({

left : ‘200px’

},2000,function(){

$(‘div’).animate({

height : ‘200px’

},2000,function(){

$(‘div’).animate({

width : ‘200px’

},2000);

});

})

还可以使用连缀animate()实现，他也是执行完一个在执行下一个同一个元素

$(‘div’).animate({left : ‘100px’}).animate({width : ‘300px’}).animate({height : ‘300px’})

还可以顺序排列执行同一个元素

$(‘div’).animate({left : ‘100px’});

$(‘div’).animate({height : ‘300px’});

$(‘div’).animate({width : ‘300px’});

$(‘div’).animate({opacity : 0.3});

如果需要不同元素的动画列队执行那么可以使用回调函数进行一个一个嵌套，但是回调函数可读性差，写起来麻烦

$(‘div’).slideUp(1000).slideDown(1000).css(‘background’,’red’);

分析：css操作不是动画操作，他会跟第一个动画操作同时进行，需要slideUp–slideDown–css依次执行那么可以使用回调函数，但回调函数缺陷多

$(‘div’).slideUp(1000).slideDown(1000,function(){

$(this).css(‘background’,’red’);

});

jQuery为解决回调函数麻烦，提供了一个方法queue(function(){})但他有个特性就是执行queue方法后无法进行连缀了，如果需要连缀就需要修改queue方法的参数next

$(‘div’).slideUp(1000).slideDown(1000).queue(function(next){

$(this).css(‘background’,’red’);

next();

})

清理动画的方法$(this).clearQueue();之后的动画都会被清理，在回调函数流氓使用

jQuery还提供了计算后面还有多少个动画长度 count返回的就是后面包括自己还有多少个动画，在回调函数里面执行这个就可以了

function count(){

return $(‘div’).queue(‘fx’).length;

}

动画相关方法

stop() 有两个参数

1.无参数的stop();直接停止动画

2.如果有列队动画，那么只会停止第一个动画，后面的会继续执行，需要清理后面的列队动画那就需要加一个参数true，不加默认是false，第一个参数决定是否clearQueue，会执行第一个动画

3.如果有列队动画，第二个参数决定是否跳转到动画最后的位置，仅仅是位置，不会执行之后的动画，默认值是false

delay() 延迟执行某个动画

$(‘div’).animate({left : ‘100px’}).delay(1000);

$(‘div’).animate({height : ‘300px’}).delay(1000);

$(‘div’).animate({width : ‘300px’}).delay(1000);

$(‘div’).animate({opacity : 0.3}).delay(1000);

过滤器’:animated’ 查找目前正在运动的动画

$(‘:animated’).css(‘background’,’blue’)

$(function(){

$(‘div’).slideToggle(1000,function(){

$(this).slideToggle(1000,arguments.callee)

});

$(‘#button’).click(function(){

$(‘:animated’).css(‘background’,’blue’)

});

})

动画全局属性

运行帧数$.fx.interval = 13;默认是13，越小越好，但对浏览器性能要求高

$.fx.off = true; 关闭动画，默认是false，不关闭动画

补充：自定义动画animate()在速度后面还有一个参数，默认是swing 先快后慢还有一个值是linear线性匀速运动

$(‘div’).animate({left : ‘100px’},1000,’linear’,function(){})

Ajax 异步JavaScript和xml 无刷新状态更新页面，并且实现异步提交

1.他是多个技术组合

JavaScript 捕获交互行为

XMLHTTPRequest对象

服务器上的文件

由JavaScript解析数据

2.Ajax优势特性

不需要插件支持，只要支持JavaScript就可以

用户体验极佳不需要刷新达到更新部分页面

提升Web程序性能按需要更新部分页面

减轻服务器负担将一些服务器操作转移到了客户端

3.Ajax不足

低版本浏览器如IE5对对象XMLHttpRequest支持不足

前进后退功能被破坏

搜索引擎支持度不够因为搜索引擎爬虫还不能理解js动态变化的数据内容

开发测试工具缺乏

方法探究静态HTML默认使用get方式提交 load()方法是局部方法

load()方法，加载html文件，参数是一个服务器上的url地址在文件url后面还可以对服务器返回回来的数据进行筛选

$(function(){

$(‘#button’).click(function(){

$(‘div’).load(‘Ajaxtest.html’);

});

})

在文件url后面还可以对服务器返回回来的数据进行筛选比如请求文件里面有两个span的class不一样，可以要求特定的class显示，其他的进行隐藏

$(‘div’).load(‘Ajaxtest.html .url’);

如果需要加载服务器端的文件如php 一般需要载入数据还要想服务器提交数据，那么load()的第二个参数就要使用了

以get方式提交数据把数据写在页面后面加？然后写要传的数据

$(function(){

$(‘#button’).click(function(){

$(‘div’).load(‘Ajaxtest.php?url=aaa’);

});

})

以post提交数据就需要使用load()第二个参数使用对象，把数据以对象的形式存在里面

$(function(){

$(‘#button’).click(function(){

$(‘div’).load(‘Ajaxtest.php’,{url : ‘aaa’});

});

})

load()第三参数回调函数,回调函数有3个参数，response status xhr

$(function(){

$(‘#button’).click(function(){

$(‘div’).load(‘Ajaxtest.php’,{url : ‘aaa’});

},function(){

});

})

xhr 全称是XMLHttpRequest,他是个对象，是Ajax技术的api 他也有几个属性

responseText属性，返回的文本

status 状态码 200表示”OK” 404表示页面不存在 500服务器遇到意外错误，无法完成请求

statusText 状态码的文本表示

readyState xhr的请求状态0-4 4表示请求完成且响应已就绪 0表示未初始化

Ajax的局部方法load()是局部方法，他需要一个jQuery对象作为前缀来调用的，他适合静态页面的处理，比如加载静态HTML

Ajax的全局方法 $.post()和$ .get()是全局方法，无需指定某个元素

$.get()方法和load方法类似，但$ .get()方法有4个参数，比load(‘url’,data,callback)多一个type，type用来规定返回的内容

$.get()方法使用？传参示例

$(function(){

$(‘#button’).click(function(){

$.get(‘Ajaxtest.php?url=aaa’,function(response,status,xhr){

$(‘div’).html(response);

});

})

$.get()使用数据位参数date传参以字符串形式如果有多个参数，使用&进行连接实际都是？传参，后期会自动转换

$(function(){

$(‘#button’).click(function(){

$.get(‘Ajaxtest.php’,’url=aaa’,function(response,status,xhr){

$(‘div’).html(response);

});

})

$.get()使用数据位参数date传参传入对象的形式实际都是？传参，后期会自动转换

$(function(){

$(‘#button’).click(function(){

$.get(‘Ajaxtest.php’,{url : ‘aaa’},function(response,status,xhr){

$(‘div’).html(response);

});

})

$.post()方法不支持？传参

$.post()方法支持以字符串形式传参但不会转换成？没有尾巴会转换成HTTP消息实体传参

$(function(){

$(‘#button’).click(function(){

$.post(‘Ajaxtest.php’,’url=aaa’,function(response,status,xhr){

$(‘div’).html(response);

});

})

$.post()方法支持以对象形式传参

$(function(){

$(‘#button’).click(function(){

$.post(‘Ajaxtest.php’,{url : ‘aaa’},function(response,status,xhr){

$(‘div’).html(response);

});

})

$.post()和$ .get()方法第四个参数type 服务器返回内容的格式

php html text 都是纯文本所以type类型为html或者text都可以正常获取数据，如果强行将type设置为xml或者json，那么就无法正常获取数据

第四个参数默认不写都是会自动识别的

如果本身是xml或者json文件，强行将type设置为HTML或者text，那么会把里面的数据当做纯文本拿出，连标签也会当做文本

如果使用xml或者json传参，获取里面数据的方法如下

如果是xml

$(function(){

$(‘#button’).click(function(){

$.post(‘Ajaxtest.xml’,function(response,status,xhr){

alert($(response).find(‘root’).find(‘url’).text());

});

})

如果是json 虽然json是以对象形式存储数据，但一般都会使用[{}]

$(function(){

$(‘#button’).click(function(){

$.post(‘Ajaxtest.json’,function(response,status,xhr){

alert($(response)[0].url);

});

})

post()和$.get()方法使用基本是一样的，只是各自后背后的机制不同

区别如下

1.GET 请求是通过url提交的而POST是通过HTTP消息实体提交

2.GET 请求有大小限制为2KB而POST无限制

3.GET 方式会被缓存下来，存在安全隐患，而POST没有

4.GET 方式通过 $_GET[]获取，POST 方式通过$ _POST[]接收

第三层专用方法 $.getJSON和$ .getScript

$.getJSON是JSON专用的方法，只有3个参数，没有第四个type用法和get、post一样，安全性提高了

$.getScript异步加载js文件，有需求的时候加载，没有需求永远不加载

$(function(){

$(‘#button’).click(function(){

$.getScript(‘Ajaxtest.js’,function(response,status,xhr){

});

})

$.ajax()是所有ajax方法最底层的方法可以替代所有的二层和三层方法使用对象的形式传

$(function(){

$(‘#button’).click(function(){

$.ajax({

url : ‘Ajaxtest.php’,

type : ‘POST’,

data : {

url : ‘aaa’

success : function(response,status,xhr){

alert(0);

}

});

})

表单提交 Ajax处理

$(function(){

$(‘#button’).click(function(){

$.ajax({

type : ‘POST’,

url : ‘Ajaxtest.php’,

data : {

user : $(‘form input[name=user]’).val(),

email : $(‘form input[name=email]’).val(),

success : function(response,status,xhr){

$(‘div’).html(response);

}

});

})

问题讨论

如果表单比较多，写起来就麻烦，

复制提交的js内容时，data属性需要修改的非常多

为了解决以上问题就提供了解决办法表单系列化直接一个$(‘form’).serialize()解决

$(function(){

$(‘#button’).click(function(){

$.ajax({

type : ‘POST’,

url : ‘Ajaxtest.php’,

data : $(‘form’).serialize(),

success : function(response,status,xhr){

$(‘div’).html(response);

}

});

})

$(‘form’).serialize()此方法已经把表单里面的内容变成了键值对形式的字符串，并且还进行了编码

serialize()还可以使用在单选和多选按钮上

$(‘form input[name=sex]’).click(function(){

$('div').html(decodeURIComponent($ (this).serialize()));

});

serializeArray()可以把数据变成JSON对象返回

var json = $(this).serializeArray();

初始化有多个Ajax的时候有共同的属性使用方法$.ajaxSetup

$(function(){

$(‘#button’).click(function(){

$.ajaxSetup({

type : ‘POST’,

url : ‘Ajaxtest.php’,

data : $(‘form’).serialize()

});

$.ajax({

success : function(response,status,xhr){

$(‘div’).html(response);

}

});

})

当数据以对象形式传递时，可能传递的数据比较多且复杂，程序对于复杂的系列化解析能力有限，所以传递对象形式要谨慎

那么就可以使用$.param()将对象形式的键值对转为URL地址的字符串键值对

$(function(){

$(‘#button’).click(function(){

$.ajax({

type : ‘POST’,

url : ‘Ajaxtest.php’,

data : $.param({

user : $(‘form input[name=user]’).val(),

email : $(‘form input[name=email]’).val(),

}),

success : function(response,status,xhr){

$(‘div’).html(response);

}

});

})

$.param({})方法就是为了把对象转换成URL地址的字符串键值对形式，将其进行系列化

Ajax进阶

1.加载请求

在Ajax异步发送请求时，遇到网速慢的情况，就会出现请求较长时间的问题，超过一定的时间用户就可能会关闭页面，但如果

可以给用户一些提示，比如正在加载中，这样用户体验就会好一些

解决问题的两个方法ajaxStart()事件刚触发 ajaxStop()事件完成后触发

$(document).ajaxStart(function(){

$(‘.loading’).show();

}).ajaxStop(function(){

$(‘.loading’).hide();

});

当然还可以设置一个超时限制，如果超过多少秒没有回应就停止

$(function(){

$(‘#button’).click(function(){

$.ajax({

type : ‘POST’,

url : ‘Ajaxtest.php’,

data : $.param({

user : $(‘form input[name=user]’).val(),

email : $(‘form input[name=email]’).val(),

}),

success : function(response,status,xhr){

$(‘div’).html(response);

timeout : 500,//500毫秒没有回应就停止加载，直接宣布加载结束

global : false//取消ajax事件，立马结束不执行

});

})

2.错误处理 Ajax异步提交时，不可能所有情况都是成功完成的，也有因为代码异步文件错误，网络错误导致提交失败，这个时候我们应该提醒用户重新提交

Ajax自带error属性

$(function(){

$(‘#button’).click(function(){

$.ajax({

type : ‘POST’,

url : ‘Ajaxtest.php’,

data : $.param({

user : $(‘form input[name=user]’).val(),

email : $(‘form input[name=email]’).val(),

}),

success : function(response,status,xhr){

$(‘div’).html(response);

timeout : 500,//500毫秒没有回应就停止加载，直接宣布加载结束

global : false,//取消ajax事件，立马结束不执行

error : function(xhr,errorText,errorType){

alert(xgr.status+”:”+xhr.statusText);

}

});

})

如果使用的 $.post()或者$ .get()方法时可以使用局部的连缀方法error()

$.post(‘url’,data,function(){}).error(function(xhr,errorText,errorType){})

还有一个全局方法ajaxError()这个方法是在document上使用的它一共有4个参数，第一个是event事件源对象e，setting是本次请求的url type 等info是错误信息

$(document).ajaxError(function(event,xhr,setting,info){});

3.请求全局事件参数都是event,xhr,setting,info

ajaxSuccess() 对应局部方法success(),请求成功完成时执行

ajaxComplete() 对应局部方法complete(),请求完成后执行，不管成功与否

ajaxSend() 请求发送之前执行，无对应局部方法，只有一个ajax属性

Ajax操作json文件

$(function(){

$(‘#button’).click(function(){

$.ajax({

type : ‘POST’,

url : ‘Ajaxtest.json’,

success : function(response,status,xhr){

$(‘div’).html(response[0].url);

}

});

})

php生成json文件通过$.ajax()获取 php默认是html()处理

<?php

//通过php创建一个json文件

$_arr = array(‘a’=>1,’b’=>2,’c’=>3);

$_result = json_encode($ _arr);

echo $_result;

$(function(){

$(‘#button’).click(function(){

$.ajax({

type : ‘POST’,

url : ‘Ajaxtest.php’,

dataType : ‘json’,

success : function(response,status,xhr){

$(‘div’).html(response.a);

}

});

})

跨域获取json文件，如果json文件不在同一个主机，那么就需要跨域获取json文件

跨域获取原理就是在请求的文件里面做一个契约也可以说是验证，就是你发过来的数据符合我的要求我才给你返回去数据

原理就是加一个参数作为验证

<?php

header(“Access-Control-Allow-Origin: *”);W3c要求加个头部才不会报错

//通过php创建一个json文件

$_arr = array(‘a’=>1,’b’=>2,’c’=>3);

$_result = json_encode($ _arr);

$_callback =$ _GET[‘callback’];

echo $_callback."($ _result)”;

使用getJSON获取远端主机数据

$(function(){

$(‘#button’).click(function(){

$.getJSON(‘http://39.108.188.31/Ajaxtest.php?callback=?’,function(response){

alert(response.a);

});

})

使用$.ajax获取远端主机数据

$(function(){

$(‘#button’).click(function(){

$.ajax({

url : ‘http://39.108.188.31/Ajaxtest.php?callback=?’,

type : “GET”,

dataType : ‘json’,

success : function(response){

alert(response.a);

}

});

})

dataType设置为jsonp也可以获取

$(function(){

$(‘#button’).click(function(){

$.ajax({

url : ‘http://39.108.188.31/Ajaxtest.php’,

type : “GET”,

dataType : ‘jsonp’,

success : function(response){

alert(response.a);

}

});

})

xhr是XMLHttpRequest对象，是JavaScript原生的 jQuery扩展了一个jqXHR对象他是整个$.ajax的返回，支持进行连缀

var jqXHR = $.ajax({

url : ‘http://39.108.188.31/Ajaxtest.php’,

type : “GET”,

dataType : ‘jsonp’,

success : function(response){

alert(response.a);

}

});

jqXHR.success(function(){})

success() complete() error()会被done() always() fail()取代，如果使用jqXHR建议使用这3个新方法，

使用jqXHR和这3个新方法的好处

1.可以进行连缀操作，可读性大大提高

2.可以多次执行同一个回调函数，在$.ajax里面如果有相同的回调函数，后面的会把前面的覆盖

3.同时处理多个ajax

var jqXHR = $.ajax(‘t1.php’);

var jqXHR2 = $.ajax(‘t2.php’);

正常处理方法是

jqXHR.done(function(response){

alert(response);

});

jqXHR2.done(function(response){

alert(response);

});

同时处理使用全局方法$.when

$.when(jqXHR,jqXHR2).done(function(r1,r2){

alert(r1[0]);

alert(r2[0]);

});

工具函数

1.jQuery只提供了一个字符串操作函数$.trim(),清除左右两边的空格

2.数组和对象的操作方法

1.each()遍历数组和对象

遍历数组

var arr = [‘张三’,’李四’,’马六’];

$.each(arr,function(index,value){

});

遍历对象属性名和值

$.each(obj,function(name,function){

});

2.$.grep()数据帅选整体返回值是一个数组处理函数有两个参数value和index index是索引，value是得到的值

var arr = [1,2,5,12,55,65,12];

var temp = $.grep(arr,function(value,index){

return index<3 && value<2;//系统就会在索引小于3也就是012里面的数据小于2的也就是返回1

})

3.$.map() 数据修改,返回值是个数组

var arr = [1,2,5,12,55,65,12];

var temp = $.map(arr,function(value,index){

if(index<5&&elemnet<6){

return value+1;

}

});

4.$.inArray(要查找的值,arr);查找某个值的下标也就是index

5.$.merge(arr1,arr2)合并两个数组

6. $.unique($ (divs)) 删除重复的DOM元素

var divs = $(‘div’).get();

divs = divs.concat($(‘.box’).get());

$.unique($ (divs))

7..toArray()把页面中的相同DOM元素变成数组

var arr = li.toArray();把页面中的所有li元素弄到一个数组里面

8.测试操作主要是针对一些数据类型进行判断然后做出相应的操作

1.$.isArray();判断是不是数据，返回值布尔值

2.$.isFunction();判断是不是函数，返回布尔值

3.$.isEmptyObject();判断一个对象是不是空对象

4. $.contains($ (‘box’).get(0),$(‘pox’).get(0))判断一个DOM元素是否包含在另一个DOM元素里面，必须是原生DOM对象，判断box里面有pox

5.$.type()判断数据类型返回值是数据类型

6.$.isNumeric();判断是否是数值返回值是布尔值

7.$.isWindow();判断数据是否是window对象

9.URL操作 $.param(obj)将对象转换成字符串的键值对，多个值用&连接

10.浏览器监测$.browser.mozilla 目前已经放弃

11.$.proxy()调整this指向

$(function(){

var obj = {

name : ‘GG’,

test : function(){

alert(this.name);

}

$('#button').click($ .proxy(obj,’test’));

})

插件plugin 插件是以jQuery的核心代码为基础插件也是jQuery代码通过js文件引入

插件种类 UI类表单及验证类输入类特效类 ajax类滑动类图像图形类导航类动画类

引入插件的步骤

1.必须先引入jQuery文件而且是在所有插件之前引入

2.引入插件

3.引入插件周边如皮肤、中文包

验证插件使用

1.引入jQuery

2.引入validate.js

3.加载validate $(‘form’).validate();

通过属性设置得到相应的效果

1.必填项设置class=”required”

2.不得小于2位设置minlength = “2”

3.电子邮件设置class = ‘email’

4.网址设置class = “url”

自动补全插件

自定义插件自己使用方便别人的不适合封装给自己使用的

自定义插件分类

1.封装对象方法的插件也就是基于DOM元素的jQuery对象进行局部调用的用的多

2.封装全局函数的插件全局使用用的多

3.选择器插件类似find()函数选择后代元素的封装的太少

自定义插件的约定

1.插件名一般按照jquery.插件名.js

2.避免插件内部使用$,如果要使用，必须传递jQuery进去

3.所有方法或者插件，必须以;结尾，避免出现错误

4.要封装全局性的方法就需要使用

$.extend({

‘nav’ : function(){

$(‘.nav’).css({

‘list-style’ : ‘none’,

‘margin’ : 0,

‘padding’ : 0,

‘display’ : ‘none’

});

$(‘.nav’).parent().hover(function(){

$(this).find(‘.nav’).slideDown(‘normal’);

},function(){

$(this).find(‘.nav’).stop().slideUp(‘normal’);

});

}

});

5.局部性的方法如果直接将全局 $.extend改成$ .fn.extend 如果页面中存有多个list那么就会产生局部问题

$.fn.extend({

‘nav’ : function(){

$(‘.nav’).css({

‘list-style’ : ‘none’,

‘margin’ : 0,

‘padding’ : 0,

‘display’ : ‘none’

});

$(‘.nav’).parent().hover(function(){

$(this).find(‘.nav’).slideDown(‘normal’);

},function(){

$(this).find(‘.nav’).stop().slideUp(‘normal’);

});

}

});

6.如果页面中存有多个list那么就会产生局部问题，用这个$(‘.list’).eq(0).nav();那么全部都会执行

$.fn.extend({

‘nav’ : function(){

this.find(‘.nav’).css({

‘list-style’ : ‘none’,

‘margin’ : 0,

‘padding’ : 0,

‘display’ : ‘none’

});

this.find(‘.nav’).parent().hover(function(){

$(this).find(‘.nav’).slideDown(‘normal’);

},function(){

$(this).find(‘.nav’).stop().slideUp(‘normal’);

});

}

});

7.’nav’ : function(){} 还可以传递参数

$.fn.extend({

‘nav’ : function(color){

$(this).find(‘.nav’).css({

‘list-style’ : ‘none’,

‘margin’ : 0,

‘padding’ : 0,

‘display’ : ‘none’

});

$(this).find(‘.nav’).parent().hover(function(){

$(this).find(‘.nav’).slideDown(‘normal’);

},function(){

$(this).find(‘.nav’).stop().slideUp(‘normal’);

});

}

});

8.想要使用连缀功能加个return this;

$.fn.extend({

‘nav’ : function(color){

$(this).find(‘.nav’).css({

‘list-style’ : ‘none’,

‘margin’ : 0,

‘padding’ : 0,

‘display’ : ‘none’

});

$(this).find(‘.nav’).parent().hover(function(){

$(this).find(‘.nav’).slideDown(‘normal’);

},function(){

$(this).find(‘.nav’).stop().slideUp(‘normal’);

});

return this;

}

});

jQuery UI插件

使用了jQuery UI里面的样式不喜欢或者不合适可以在css里面冲突掉

1.$(‘#button’).button()方法，让按钮拥有jQuery UI的button样式

2. dialog()的属性

$(‘#reg’).dialog({

title : ‘知问注册’,

buttons : {

’提交’ : function(){

alert(‘Ajax提交中…’);

’取消’ : function(){

$(this).dialog(‘close’);

}

position : ‘left top’ 出现位置

height : 500, dialog的高度

width : 400, 宽度单位默认是px

minWidth : 300, 最小宽度，不能小于300

minHeight : 300, 最小高度

maxHeight : 700, 最大不能超过700px

maxWidth ： 700，

show : true/false, 默认false，如果是true那么会有淡入的效果

hide : true/false，默认false，如果是true那么会有淡出的效果

show : ‘bind’

hide : ‘bind’

autoOpen : false 默认true 决定是否显示dialog

draggable ：false 默认true 决定能否拖动dialog

resizeable ： false 默认true 决定能否调整dialog大小

modal : false 默认是false可以操作决定对话框能否操作

closeText : ‘关闭’ 修改关闭按钮鼠标放上去的提示信息

});

show和hide其他属性

bind 对话框从顶部显示或者消失

bounce 对话框断断续续地显示或者消失，垂直运动

clip 对话框从中心垂直显示或者消失

slide从左边显示或者消失

drop从左边显示或者消失有透明度变化

fold从左上角显示或者消失

highlight对话框显示或者消失伴随透明度和背景色的变化

puff对话框从中心开始缩放，显示时收缩，消失时生长

scale对话框从中心开始缩放，显示时生长，消失时收缩

pulsate以闪烁形式显示或者消失

先创建dialog 后期需要再调用$(‘#reg’).dialog(‘open’); dialog一创建意味着就显示，autoOpen属性设置为false就会隐藏

$(‘#reg’).dialog({

title : ‘知问注册’,

buttons : {

’提交’ : function(){

alert(‘Ajax提交中…’);

’取消’ : function(){

$(this).dialog(‘close’);

}

position : ‘left top’ 出现位置

height : 500, dialog的高度

width : 400, 宽度单位默认是px

minWidth : 300, 最小宽度，不能小于300

minHeight : 300, 最小高度

maxHeight : 700, 最大不能超过700px

maxWidth ： 700，

show : true/false, 默认false，如果是true那么会有淡入的效果

hide : true/false，默认false，如果是true那么会有淡出的效果

show : ‘bind’

hide : ‘bind’

autoOpen : false

});

$(‘#reg’).dialog();创建dialog 如果传参进去就是进行某种操作

$(‘#reg’).dialog(‘close’); 关闭dialog

$(‘#reg’).dialog(‘open’); 打开dialog

dialog()里面的方法

dialog({

focus : function(event){

dialog获得焦点的时候执行

create : function(e,ui){

dialog创建的时候执行

open : function(event,ui){

dialog显示的时候执行

close : function(event,ui){

关闭的时候执行

beforeClose : function(){

将要关闭时执行，如果return false那么dialog将不会关闭，适用于做一些确认工作

drag : function(){

每次移动的时候就会执行

dragStart : function(event,ui){

拖动开始执行，ui里面有个position.top属性

dragStop : function(){

拖动结束执行，ui里面有个position.top属性

resizeStart : function(event,ui){

dialog大小变化的时候会执行，ui的四个属性，size子属性width和hight

position得到对话框的坐标子属性top和left，originSize原始对话框的大小，子属性width和height

originPosition原始对话框的坐标子属性top和left

}

resizeStop : function(event,ui){

dialog大小变化的时候会执行，ui的四个属性，size子属性width和hight

position得到对话框的坐标子属性top和left，originSize原始对话框的大小，子属性width和height

originPosition原始对话框的坐标子属性top和left

}

})

dialog() 传一个参数和传2个参数

$(‘#reg’).dialog(‘close’);

$(‘#reg’).dialog(‘moveToTop’);有多个dialog的时候指定谁在前面

$(‘#reg’).dialog(‘open’);

$(‘#reg’).dialog(‘destroy’);销毁dialog

$(‘#reg’).dialog(‘isOpen’);判断对话框是否处于打开状态返回值是布尔

$(‘#reg’).dialog() 返回的对象是#reg这个div的对象之前的事件都是div的对象

$(‘#reg’).dialog(‘widget’) 返回的对象是整个dialog的对象

$(‘#reg’).dialog(‘option’,’要获取的dialog的属性’); 返回值是dialog属性的值

$(‘#reg’).dialog(‘option’,’要获取的dialog的属性’,’要设置的值’); 修改属性的值

dialog中的事件

$(‘#reg’).on(dialogfocus,function(){

获得焦点事件

});

dialogopen 打开时的事件

dialogclose 关闭后的事件

dialogbeforeclose 关闭前的事件

dialogdragstart

dialogdragstop

dialogresizestart

dialogresizestop

button()方法和属性

button({

disabled : true,按钮能否点击

lable : ‘搜索’,修改按钮的value

icons : {

//按钮前后插入一个小图片，图片可以在文档里面查http://api.jqueryui.com/theming/icons/

primary : ”,

secondary : ”

//正常button建议不要使用input

}，

text : false,隐藏button的文字value

});

传一个参数

button(‘disable’) 禁用按钮

button(‘enable’) 启用按钮

button(‘destroy’) 销毁按钮

button(‘widget’) 获取按钮的jQuery对象,

button(‘option’,要获取的属性名) 获取属性的值

button(‘option’,要设置的属性名，value) 设置修改属性的值

需要操作dialog里面的按钮然后进行其他操作

方法1 $(‘#reg’).parent().find(‘button’).eq(1)

方法2 $(‘#reg’).dialog(‘widget’).find(‘button’).eq(1)

单选框和复选框使用UI 标签必须是双标签

单选

设置方法1 $(‘#reg input[type=radio]’).button();

方法2 $(‘#reg’).buttonset();

多选

设置方法1 $(‘#reg input[type=checkbox]’).button();

方法2 $(‘#reg’).buttonset();

tooltip() 提示UI 深入的扩展了HTML中的title属性提示更加丰富还可以进行控制，提升用户体验

1.先在标签里面设置好title

2.执行tooltip()方法 $(‘#reg input[title]’).tooltip({});

3.设置tooltip的样式

.ui-tooltip{

color:#666;

}

3.tooltip的功能设置

$(‘#reg input[title]’).tooltip({

disabled : true 禁用title，不显示title

content : ‘改变title的提示文本’ 修改title显示的文本

items : ” 过滤某个title

tooltipClass : ‘a’ 引入css样式

position : {

my : ‘left+5 left’ 以目标左下角为中心，还可以进行运算

at : ‘right+5 left’ 依据my为中心还可以进行运算

show : false, 显示时的样式，默认淡入

hide : false 消失时的样式，默认淡出

track : true title可以跟随鼠标走动

open : function(){

显示时运行触发

close : function(){

关闭时触发

}

});

4.tooltip() 传参进行某种操作

传一个参数

tooltip(‘open’) 使某个工具提示一开始就处于打开显示状态

tooltip(‘close’) 使某个工具提示一开始就处于打开关闭状态

tooltip(‘disable’) 禁用工具提示

tooltip(‘enable’) 启用工具提示

tooltip(‘destroy’) 销毁按钮

tooltip(‘widget’) 获取按钮的jQuery对象,

tooltip(‘option’,要获取的属性名) 获取属性的值

tooltip(‘option’,要设置的属性名，value) 设置修改属性的值

2.两个事件tooltipopen打开时触发 tooltipclose关闭时触发

$(‘#reg’).on(‘tooltipopen’,function(){});

自动补全UI autocomplete 必须要要一个参数

$(‘#email’).autocomplete({

source : [‘aa’,’bb’,’aaa’,’aaaa’,’aaaaaa’] 必要有数据源

disabled : true, 禁用自动补全

minLength : 2,最小字符长度才会自动补全，如果是0直接全部显示

delay : 0,延迟出来的时间，默认延迟300毫秒

autoFocus : true,默认第一个被选中

position : {

调整位置

my : ‘left center’,

at : ‘right center’

}，

create : function(){}创建的事件

open ： function（）{}打开时的事件

close : function(){} 关闭后的事件

focus ： function(e,ui){

获取焦点事件

alert(ui.item.lable);获取文本框输入的内容lable跟value是一样，但value可以进行控制变成

ui.item.value=’123’

select : function(){}选中了自动补全的内容是触发

change : function(){}失去焦点且内容发生改变触发，文本框内容初始是空

search : function(){} 搜索匹配内容完毕会触发

response : function(e,ui){

alert(ui.content[1].lable);

}搜索完毕会触但多有一个属性ui,content是一个数组，lable和value是一样，value可以进行修改

});

2.传一个参数和传2个参数

autocomplete(‘close’)

open disable enable destroy widget

autocomplete(‘search’,设定要默认输入的字符，代替我们输入然后自动会去匹配)

autocomplete(‘option’,要获取的属性名) 设后去属性值

3.使用on触发事件

$(‘#email’).on(‘autocompleteopen’,function(){})

autocompleteclose

autocompletesearch

autocompletefocus

autocompleteselect

autocompletechange

autocompleteresponse

4.修改自动补全UI的样式主要是提示菜单里面背景和字体颜色字体等设置

.ui-menu-item a.ui-state-focus{

}

自动补全深入研究数据源的探讨使用数据源可以是数组函数

$(‘#email’).autocomplete({

source : function(request,response){

alert(request.term);获取用户输入的内容

response([‘a’,’aaaa’,’bb’]);绑定数据源，要呈现的内容，不会根据你输入内容去匹配，只会全部显示，只能自己写功能

var host = [‘qq.com’,’163.com’,’263.com’,’gmail.com’,’hotmail.com’];

}

});

日历UI控件的调试和配置 $(‘#date’).datepicker();

UI标题背景设置

.ui-widget-header{

之前dialog的标题已经设置过了是同一个

}

当天的日期特殊显示

.ui-datepicker-today .ui-state-highlight{

}

日期国际化设置

d 1-31

dd 01-31

o 1-366

oo 001-366

D 星期的英文缩写

DD 星期的英文全拼

m 1-12

mm 01-12

M 月份的缩写

MM 月份全拼

y 两位数字的年份

yy四位数字年份

$(‘#date’).datepicker({

dateFormat : ‘yy-mm-dd’

});

$(‘#date’).datepicker({})属性设置

$(‘#date’).datepicker({

dateFormat : ‘yy-mm-dd’,

// dayNameMin : [‘日’,’一’,’二’,,,’六’],//设置日历的星期显示，默认是英文缩写

//monthNames : [‘一月’,’二月’,’三月’,,,,,,’十二月’],//设置标题上月份显示，默认是英文缩写

//altField : ‘#abc’,//给另一个input文本框里面载入选定的日期，该input的id是abc

//altFormat : ‘y-mm-dd’,//指定载入的那个文本框的日期显示格式

//appendText : ‘日历’,//在日历控件文本框外面插入文本跟在文本框后

//showWeek : true,//添加一列显示第几周,是个布尔值默认是false

//weekHeader : ‘添加一列的周的标题’

firstDay : 1,//指定星期从几开始，外国人是从星期天开始，是0，我们习惯从星期一开始，改成1就好了

disabled : true 禁用日历，无法选

numberOfMonths : 3,显示多个日历，多个月一起显示

numberOfMonths ：[3,2] 3行2列显示

showOtherMonths : true ,显示其他月份的日期，但是不可选

selectOtherMonths ：true，显示其他月份的日期，可选

changeMonth ： true，显示下拉菜单所有月份

changeYear ： true ,显示年份下拉菜单

autoSize ： true，自动适应日期选择后文本框长度

showOn : ‘button/both’ 添加一个按钮通过点击按钮触发可以选择日历，如果选both那么按钮和文本框都可以触发选择

buttonText : ‘设置按钮的文本’

buttonImage : “图片的url”

buttonImageOnly “配合图片url使用，只显示图片”

showButtonPanel ： true, 显示today和关闭按钮

closeText : ‘关闭’，修改关闭按钮的文本

currentText : ‘今天’，修改今天按钮的文本，本来是英文的

nextText : ‘下一个月的按钮的提示alt文本’

prevText : ‘上一个月的按钮的提示alt文本’

maxDate ： 0，当前日期的后面的第几天

});

验证插件设置可以在行间加class但只有会污染html，一般建议以js的形式

user对应name属性

设置默认行为

$.validator.setDefault({

debug : true 开启调试模式，表单将无法提交，适用于测试阶段

});

$(‘#reg’).validate({

submitHandler : function(){

//当验证成功后执行，而且阻止了默认提交

//一般用于ajax提交使用

}

ignore : ‘#demo’ 忽略某个字段的验证

/*群组麻烦方法

groups : {

myerror : ‘user pass’ //群组user 和 pass两个错误提示，合并

}

errorPlacement : function(error,element){

$.each(error,function(index,value){

//在html页面新加一个p标签class是myerror

$('.myerror').html($ (‘.myerror’).html()+$(value).html());

});

}

简单方法群组

groups : {

error_user : ‘user’,

error_pass : ‘pass’

errorPlacement : function(error,element){

error.appendTo(‘.myerror’);

}

群组最简单的方法

errorPlacement : function(error,element){

error.appendTo(‘.myerror’);

}

rules : {

user : {

required : true,

minLength : 2

email : {

required : true,

email : true

url : {

url : true

date : {

date : true//验证日期，很严格2018-05-16

number : {

number : true必须是数字

digits : {

digits : true,必须是正整数

notpass : {

equalTo : ‘#pass’密码确认，必须要和#pass这个文本框的值一样

min : {

min : 5输入值不小于5

}

max : {

max : 10 输入不能大于10的数

}

range : {

range : [5,10]

}

rangeLength : {

rangeLength : [5,10] 长度是5-10位，汉子算一位

}

messages : {

user : {

required : ‘账号不得为空’,

minLength : ‘账号不得小于2位’

}

});

$(‘#reg’).validate({

rules : {

user : {

required : true,

minLength : 2,

rangeLength : [5,10]

messages : {

user : {

required : ‘账号不得为空’,

minLength : ‘账号不得小于{0}位’ {0}会自动取得minLength的值

rangeLength : ‘账号长度要在{0}-{1}之间’

}

});

</body>

</html>

            </div>

晓凤凤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery

&lt;!DOCTYPE html&gt;&lt;html lang=”en”&gt;&nbsp;&lt;head&gt;&nbsp;&nbsp;&nbsp;&nbsp;&lt;meta charset=”UT...
复制链接

扫一扫

专栏目录