<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-1.10.1.js"></script>
<script src="js/jQueryfirstDemo.js"></script>
</head>
<body>
<input type="button" value="按钮">
<script>
/*
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元素
$('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>
<input type="text" name="username" value="jack">
<input type="password" name="password" value="666">
</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区别
<div><p></p></div>
mouseover会触发子节点,比如给div绑定一个事件,移入到p的时候还会执行一次,会把子节点当做不是自己儿子
mouseenter不会触发子节点,一般都使用e nter
mouseout会触发子节点,跟over是一对
mouseleave不会触发子节点,跟enter一对
keydown可以监测键盘的所有按键,keycode和which值是键盘排序
keypress只能监测字符类按键,charCode值是该字符的ascll码值
keyup键盘弹起
表单光标的丢失和激活 blur focus
<div><input type="text"> </div>
$('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>
<input type="button" name="" id="" class="button">
<input type="button" name="" id="" class="button">
<input type="button" name="" id="" class="button">
</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><p></p></div>
$('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 标签必须是双标签
单选
<input type="radio" name="sex" value="male" id="male"><label for="male">男</label></input>
<input type="radio" name="sex" value="female" id="female"><label for="female">女</label></input>
设置方法1 $('#reg input[type=radio]').button();
方法2 $('#reg').buttonset();
多选
<input type="checkbox" name="color" value="red" id="red"><label for="red">红</label></input>
<input type="checkbox" name="color" value="yellow" id="yellow"><label for="yellow">黄</label></input>
<input type="checkbox" name="color" value="blue" id=blue"><label for=blue">蓝</label></input>
<input type="checkbox" name="color" value="green" id="green"><label for="green">绿</label></input>
设置方法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>