前端之jquery函数库

这是⼀个div

'); //创建⼀个空的divvar $div2 = $('');移动或者插⼊标签的⽅法1、append()和appendTo()：在现存元素的内部，从后⾯放⼊元素var $span = $('这是⼀个span元素');$('#div1').append($span);......2、prepend()和prependTo()：在现存元素的内部，从前⾯放⼊元素3、after()和insertAfter()：在现存元素的外部，从后⾯放⼊元素4、before()和insertBefore()：在现存元素的外部，从前⾯放⼊元素删除标签$('#div1').remove();javascript对象　　javascript中的对象，可以理解成是⼀个键值对的集合，键是调⽤每个值的名称，值可以是基本变量，还可以是函数和对象。创建javascript对象有两种⽅法，⼀种是通过顶级Object类来实例化⼀个对象，然后在对象上⾯添加属性和⽅法：var person = new Object();// 添加属性： = 'tom'; = '25';// 添加⽅法：e = function(){ alert();}// 调⽤属性和⽅法：alert();e();还可以通过对象直接量的⽅式创建对象：var person2 = { name:'Rose', age: 18, sayName:function(){ alert('My name is' + ); }}// 调⽤属性和⽅法：alert();e();json　　json是 JavaScript Object Notation 的⾸字母缩写，单词的意思是javascript对象表⽰法，这⾥说的json指的是类似于javascript对象的⼀种数据格式对象，⽬前这种数据格式⽐较流⾏，逐渐替换掉了传统的xml数据格式。json数据对象类似于JavaScript中的对象，但是它的键对应的值⾥⾯是没有函数⽅法的，值可以是普通变量，不⽀持undefined，值还可以是数组或者json对象。与JavaScript对象写法不同的是，json对象的属性名称和字符串值需要⽤双引号引起来，⽤单引号或者不⽤引号会导致读取数据错误。json格式的数据：{ "name":"tom", "age":18}　　json的另外⼀个数据格式是数组，和javascript中的数组字⾯量相同。["tom",18,"programmer"]　　还可以是更复杂的数据机构：{ "name":"jack", "age":29, "hobby":["reading","travel","photography"] "school":{ "name":"Merrimack College", "location":'North Andover, MA' }}ajax与jsonp　　ajax技术的⽬的是让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使⽤此对象与后台通信。ajax通信的过程不会影响后续javascript的执⾏，从⽽实现异步。同步和异步　　现实⽣活中，同步指的是同时做⼏件事情，异步指的是做完⼀件事后再做另外⼀件事，程序中的同步和异步是把现实⽣活中的概念对调，也就是程序中的异步指的是现实⽣活中的同步，程序中的同步指的是现实⽣活中的异步。局部刷新和⽆刷新　　ajax可以实现局部刷新，也叫做⽆刷新，⽆刷新指的是整个页⾯不刷新，只是局部刷新，ajax可以⾃⼰发送http请求，不⽤通过浏览器的地址栏，所以页⾯整体不会刷新，ajax获取到后台数据，更新页⾯显⽰数据的部分，就做到了页⾯局部刷新。数据接⼝　　数据接⼝是后台程序提供的，它是⼀个url地址，访问这个地址，会对数据进⾏增、删、改、查的操作，最终会返回json格式的数据或者操作信息，格式也可以是text、xml等。$.ajax使⽤⽅法常⽤参数：1、url 请求地址2、type 请求⽅式，默认是'GET'，常⽤的还有'POST'3、dataType 设置返回的数据格式，常⽤的是'json'格式，也可以设置为'html'4、data 设置发送给服务器的数据5、success 设置请求成功后的回调函数6、error 设置请求失败后的回调函数7、async 设置是否异步，默认值是'true'，表⽰异步以前的写法：$.ajax({ url: '/change_data', type: 'GET', dataType: 'json', data:{'code':300268} success:function(dat){ alert(); }, error:function(){ alert('服务器超时，请重试！'); }});新的写法(推荐)：$.ajax({ url: '/change_data', type: 'GET', dataType: 'json', data:{'code':300268}}).done(function(dat) { alert();}).fail(function() { alert('服务器超时，请重试！');});$.ajax的简写⽅式　　$.ajax按照请求⽅式可以简写成$.get或者$.post⽅式$.get("/change_data", {'code':300268}, function(dat){ alert();});$.post("/change_data", {'code':300268}, function(dat){ alert();});同源策略　　ajax请求的页⾯或资源只能是同⼀个域下⾯的资源，不能是其他域的资源，这是在设计ajax时基于安全的考虑。特征报错提⽰：XMLHttpRequest cannot load /. No

'Access-Control-Allow-Origin' header is present on the requested resource.

Origin 'null' is therefore not allowed 　　ajax只能请求同⼀个域下的数据或资源，有时候需要跨域请求数据，就需要⽤到jsonp技术，jsonp可以跨域请求数据，它的原理主要是利⽤了jquery的⼝号和愿望 Write Less, Do More（写得少，做得多）jquery⽂档加载完再执⾏　　将获取元素的语句写到页⾯头部，会因为元素还没有加载⽽出错，jquery提供了ready⽅法解决这个问题，它的速度⽐原⽣的 更快。　　可以简写为：jquery选择器jquery⽤法思想⼀

选择某个⽹页元素，然后对它进⾏某种操作jquery选择器 jquery选择器可以快速地选择元素，选择规则和css样式相同，使⽤length属性判断是否选择成功。$('#myId') //选择id为myId的⽹页元素$('.myClass') // 选择class为myClass的元素$('li') //选择所有的li元素$('#ul1 li span') //选择id为为ul1元素下的所有li下的span元素$('input[name=first]') // 选择name属性等于first的input元素对选择集进⾏过滤$('div').has('p'); // 选择包含p元素的div元素$('div').not('.myClass'); //选择class不等于myClass的div元素$('div').eq(5); //选择第6个div元素选择集转移$('#box').prev(); //选择id是box的元素前⾯紧挨的同辈元素$('#box').prevAll(); //选择id是box的元素之前所有的同辈元素$('#box').next(); //选择id是box的元素后⾯紧挨的同辈元素$('#box').nextAll(); //选择id是box的元素后⾯所有的同辈元素$('#box').parent(); //选择id是box的元素的⽗元素$('#box').children(); //选择id是box的元素的所有⼦元素$('#box').siblings(); //选择id是box的元素的同级元素$('#box').find('.myClass'); //选择id是box的元素内的class等于myClass的元素判断是否选择到了元素

　　jquery有容错机制，即使没有找到元素，也不会出错，可以⽤length属性来判断是否找到了元素,length等于0，就是没选择到元素，length⼤于0，就是选择到了元素。var $div1 = $('#div1');var $div2 = $('#div2');alert($); // 弹出1alert($); // 弹出0......

jquery样式操作jquery⽤法思想⼆　　同⼀个函数完成取值和赋值操作⾏间样式// 获取div的样式$("div").css("width");$("div").css("color");//设置div的样式$("div").css("width","30px");$("div").css("height","30px");$("div").css({fontSize:"30px",color:"red"});特别注意　　选择器获取的多个元素，获取信息获取的是第⼀个，⽐如：$("div").css("width")，获取的是第⼀个div的width。操作样式类名$("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2$("#div1").removeClass("divClass") //移除id为div1的对象的class名为divClass的样式$("#div1").removeClass("divClass divClass2") //移除多个样式$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式　绑定click事件给元素绑定click事件，可以⽤如下⽅法：$('#btn1').click(function(){ // 内部的this指的是原⽣对象 // 使⽤jquery对象⽤ $(this)})获取元素的索引值

有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以⽤index()⽅法获取var $li = $('.list li').eq(1);alert($()); // 弹出1......

• 1
• 2
• 4
• 5
• 6

jquery动画　　通过animate⽅法可以设置元素某属性值上的动画，可以设置⼀个或多个属性值，动画执⾏完成后会执⾏⼀个函数。/* animate参数： 参数⼀：要改变的样式属性值，写成字典的形式 参数⼆：动画持续的时间，单位为毫秒，⼀般不写单位 参数三：动画曲线，默认为‘swing’，缓冲运动，还可以设置为‘linear’，匀速运动 参数四：动画回调函数，动画完成后执⾏的匿名函数*/$('#div1').animate({ width:300, height:300},1000,'swing',function(){ alert('done!');});　jquery特殊效果fadeIn() 淡⼊ $(function(){ $('#div1').fadeIn(1000,'swing',function(){ alert('done!'); }); });fadeOut() 淡出fadeToggle() 切换淡⼊淡出hide() 隐藏元素show() 显⽰元素toggle() 切换元素的可见状态slideDown() 向下展开slideUp() 向上卷起slideToggle() 依次展开或卷起某个元素jquery链式调⽤　　jquery对象的⽅法会在执⾏完后返回这个jquery对象，所有jquery对象的⽅法可以连起来写：$('#div1') // id为div1的元素.children('ul') //该元素下⾯的ul⼦元素.slideDown('fast') //⾼度从零变到实际⾼度来显⽰ul元素.parent() //跳到ul的⽗元素，也就是id为div1的元素.siblings() //跳到div1元素平级的所有兄弟元素.children('ul') //这些兄弟元素中的ul⼦元素.slideUp('fast'); //⾼度实际⾼度变换到零来隐藏ul元素jquery属性操作1、html() 取出或设置html内容// 取出html内容var $htm = $('#div1').html();// 设置html内容$('#div1').html('添加⽂字');2、prop() 取出或设置某个属性的值// 取出图⽚的地址var $src = $('#img1').prop('src');// 设置图⽚的地址和alt属性$('#img1').prop({src: "", alt: "Test Image" });jquery循环　　对jquery选择的对象集合分别进⾏操作，需要⽤到jquery循环操作，此时可以⽤对象上的each⽅法：$(function(){ $('.list li').each(function(){ $(this).html( $(this).index() ); })})......

jquery事件事件函数列表：blur() 元素失去焦点focus() 元素获得焦点click() ⿏标单击mouseover() ⿏标进⼊（进⼊⼦元素也触发）mouseout() ⿏标离开（离开⼦元素也触发）mouseenter() ⿏标进⼊（进⼊⼦元素不触发）mouseleave() ⿏标离开（离开⼦元素不触发）hover() 同时为mouseenter和mouseleave事件指定处理函数ready() DOM加载完成submit() ⽤户递交表单表单验证1、什么是正则表达式：

能让计算机读懂的字符串匹配规则。2、正则表达式的写法：var re=new RegExp('规则', '可选参数');var re=/规则/参数;3、规则中的字符

1）普通字符匹配：如：/a/ 匹配字符 ‘a’，/a,b/ 匹配字符 ‘a,b’2）转义字符匹配：d 匹配⼀个数字，即0-9D 匹配⼀个⾮数字，即除了0-9w 匹配⼀个单词字符（字母、数字、下划线）W 匹配任何⾮单词字符。等价于[^A-Za-z0-9_]s 匹配⼀个空⽩符S 匹配⼀个⾮空⽩符b 匹配单词边界B 匹配⾮单词边界. 匹配⼀个任意字符var sTr01 = '123456asdf';var re01 = /d+/;//匹配纯数字字符串var re02 = /^d+$/;alert((sTr01)); //弹出truealert((sTr01)); //弹出false4、量词：对左边的匹配字符定义个数

出现零次或⼀次（最多出现⼀次）+ 出现⼀次或多次（⾄少出现⼀次）* 出现零次或多次（任意次）{n} 出现n次{n,m} 出现n到m次{n,} ⾄少出现n次5、任意⼀个或者范围

[abc123] : 匹配‘abc123’中的任意⼀个字符[a-z0-9] : 匹配a到z或者0到9中的任意⼀个字符6、限制开头结尾

^ 以紧挨的元素开头$ 以紧挨的元素结尾7、修饰参数：g： global，全⽂搜索，默认搜索到第⼀个结果接停⽌i： ingore case，忽略⼤⼩写，默认⼤⼩写敏感8、常⽤函数

test⽤法：正则.test(字符串) 匹配成功，就返回真，否则就返回假正则默认规则

匹配成功就结束，不会继续匹配，区分⼤⼩写常⽤正则规则//⽤户名验证：(数字字母或下划线6到20位)var reUser = /^w{6,20}$/;//邮箱验证：

var reMail = /^[a-z0-9][w.-]*@[a-z0-9-]+(.[a-z]{2,5}){1,2}$/i;//密码验证：var rePass = /^[w!@#$%^&*]{6,20}$/;//⼿机号码验证：var rePhone = /^1[34578]d{9}$/;　事件冒泡什么是事件冒泡

在⼀个对象上触发某类事件（⽐如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调⽤这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的⽗级对象传播，从⾥到外，直⾄它被处理（⽗级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。事件冒泡的作⽤ 事件冒泡允许多个操作被集中处理（把事件处理器添加到⼀个⽗级元素上，避免把事件处理器添加到多个⼦级元素上），它还可以让你在对象层的不同级别捕获事件。阻⽌事件冒泡 事件冒泡机制有时候是不需要的，需要阻⽌掉，通过 opagation() 来阻⽌$(function(){ var $box1 = $('.father'); var $box2 = $('.son'); var $box3 = $('.grandson'); $(function() { alert('father'); }); $(function() { alert('son'); }); $(function(event) { alert('grandson'); opagation(); }); $(document).click(function(event) { alert('grandfather'); });})......

阻⽌默认⾏为

阻⽌表单提交$('#form1').submit(function(event){ tDefault();})合并阻⽌操作实际开发中，⼀般把阻⽌冒泡和阻⽌默认⾏为合并起来写，合并写法可以⽤// opagation();// tDefault();// 合并写法：return false;　　事件委托　　事件委托就是利⽤冒泡的原理，把事件加到⽗级上，通过判断事件来源的⼦集，执⾏相应的操作，事件委托⾸先可以极⼤减少事件绑定次数，提⾼性能；其次可以让新加⼊的⼦元素也可以拥有相同的操作。⼀般绑定事件的写法$(function(){ $ali = $('#list li'); $(function() { $(this).css({background:'red'}); });})...

• 1
• 2
• 3
• 4
• 5

事件委托的写法$(function(){ $list = $('#list'); $te('li', 'click', function() { $(this).css({background:'red'}); });})...

• 1
• 2
• 3
• 4
• 5

Dom操作元素节点操作指的是改变html的标签结构，它有两种情况：1、移动现有标签的位置2、将新创建的标签插⼊到现有的标签中创建新标签var $div = $('