前言
JQuery可以理解为是一个模块,里边封装了DOM以及JavaScript,可以方便的对JQuery对象进行操作。
版本
尽量选择1.X系统的Jquery版本,例如1.12.jquery.js。因为1.X系列的兼容性最好。
2.X系列的版本,不再考虑兼容IE9以下的版本。
JQuery操作
Ps:具体操作参考链接:http://www.php100.com/manual/jquery/index.html。本文不会有太多举例,仅作小结。
查找-选择器
JQuery的选择器常用的有以下几种:
- ID选择器 - 标签选择器 - 类选择器 - 组合选择器 - 层级选择器 - 基本筛选器$('#i1:first') - 属性选择器
查找-筛选器
筛选器其实是对于选择器的一个补充,用来进一步筛选对象
操作
操作CSS
addClass(class|fn)removeClass([class|fn])toggleClass(class|fn[,sw])
操作属性
attr(name|pro|key,val|fn)removeAttr(name)prop(n|p|k,v|f)removeProp(name)
文本操作
内部插入append(content|fn)appendTo(content)prepend(content|fn)prependTo(content)外部插入after(content|fn)before(content|fn)insertAfter(content)insertBefore(content)包裹wrap(html|ele|fn)unwrap()wrapAll(html|ele)wrapInner(html|ele|fn)替换replaceWith(content|fn)replaceAll(selector)删除empty()remove([expr])detach([expr])复制clone([Even[,deepEven]])
事件
1. 基本事件
blur([[data],fn])change([[data],fn])click([[data],fn])dblclick([[data],fn])error([[data],fn])focus([[data],fn])focusin([data],fn)focusout([data],fn)keydown([[data],fn])keypress([[data],fn])keyup([[data],fn])mousedown([[data],fn])mouseenter([[data],fn])mouseleave([[data],fn])mousemove([[data],fn])mouseout([[data],fn])mouseover([[data],fn])mouseup([[data],fn])resize([[data],fn])scroll([[data],fn])select([[data],fn])submit([[data],fn])unload([[data],fn])
2. 当文档加载完毕后,自动执行
$(function(){ ... });
3. 延迟绑定
- 123
- 456
- 789
JQuery扩展的两种方法、即“插件机制”
自定义JQuery扩展的正确方法主要包含两要素:自执行、闭包
方法1:扩展 “$” 的方法
$.extend({ 'function_name1': function(arg){}; 'function_name2': function(arg){}; })
调用方法:
$.function_name1(arg);
实际案例:改造上边的表单验证,最终以扩展方法实现绑定事件
1 2 3 4 56 26 27 28 29 30 42 4344 45 46 47 54 55
1 /** 2 * Created by ACER on 2016/8/28. 3 */ 4 (function(jq){ 5 6 function ErrorMessage(inp,message){ 7 var tag = document.createElement('span'); 8 tag.innerText = message; 9 inp.after(tag);10 }11 12 jq.extend({13 valid:function(form){14 // #form1 $('#form1')15 jq(form).find(':submit').click(function(){16 17 jq(form).find('.item span').remove();18 19 var flag = true;20 jq(form).find(':text,:password').each(function(){21 22 var require = $(this).attr('require');23 if(require){24 var val = $(this).val();25 26 if(val.length<=0){27 var label = $(this).attr('label');28 ErrorMessage($(this),label + "不能为空");29 flag = false;30 return false;31 }32 33 var minLen = $(this).attr('min-len');34 if(minLen){35 var minLenInt = parseInt(minLen);36 if(val.length
方法2:对选择器结果执行方法的扩展,也就是对选择器的选择结果的对象,进行方法扩展。适用于需要传递选择器参数的时候
$.fn.extend({ 'function_name1': function(arg){//this是特殊值,代指选择器结果}; 'function_name2': function(arg){}; })
调用方法:
$(选择器).function_name1(arg);
Ajax
偷偷发请求(后续待补)
循环
要点:
在JQuery的循环中,有一点和Python中有些不同。在Python中,如果遇到“return”,无论有没有返回值,函数都将终止执行。
但是在JQuery中,如果出现单独的“return”,则相当于continue,仅仅是跳过本次循环。当return 有返回值的时候,相当于break,函数会终止执行
选择器
基本选择器
#id
作用:根据给定的ID匹配一个元素
测试代码:
# 普通id类型id="notMe"
id="myDiv"# 带有特殊符号的id类型
方式1:查找普通ID
$("#myDiv");
方式2:查找带有特殊字符(如 !"#$%&'()*+,./:;<=>?@[\]^`{|}~)的ID, 它必须被两个反斜杠转义:\\
$("#foo\\[bar\\]")