Python菜鸟之路：JQuery基础
前言
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. 延迟绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none; } .menu{ width: 200px; height: 600px; border: 1px solid #dddddd; overflow: auto; } .menu .item .title{ height: 40px; line-height: 40px; background-color: #2459a2; color: white; } </style> </head> <body> <div class="menu"> <div class="item"> <div class="title">菜单一</div> <div class="body"> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> <p>内容一</p> </div> </div> <div class="item"> <div class="title" >菜单二</div> <div class="body hide"> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> <p>内容二</p> </div> </div> <div class="item"> <div class="title">菜单三</div> <div class="body hide"> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> <p>内容三</p> </div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $(function(){ // 当文档树加载完毕后，自动执行 $('.item .title').click(function(){ // this,$(this) $(this).next().removeClass('hide'); $(this).parent().siblings().find('.body').addClass('hide'); }); }); /* $('.item .title').bind('focus', function () { $(this).next().removeClass('hide'); $(this).parent().siblings().find('.body').addClass('hide'); }) */ </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="button" onclick="Add();" /> <ul> <li>123</li> <li>456</li> <li>789</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $(function(){ /* $('li').click(function () { alert($(this).text()); }); */ $("ul").delegate("li","click",function(){ alert($(this).text()); }); }); function Add(){ var tag = document.createElement('li'); tag.innerText = '666'; $('ul').append(tag); } </script> </body> </html>
JQuery扩展的两种方法、即“插件机制”
自定义JQuery扩展的正确方法主要包含两要素：自执行、闭包
方法1：扩展 “$” 的方法
$.extend({
'function_name1': function(arg){};
'function_name2': function(arg){};
})
调用方法：
$.function_name1(arg);
实际案例：改造上边的表单验证，最终以扩展方法实现绑定事件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .item{ 8 width: 250px; 9 height: 60px; 10 position: relative; 11 } 12 .item input{ 13 width: 200px; 14 } 15 .item span{ 16 position: absolute; 17 top: 20px; 18 left: 0px; 19 font-size: 8px; 20 background-color: indianred; 21 color: white; 22 display: inline-block; 23 width: 200px; 24 } 25 </style> 26 </head> 27 <body> 28 29 <div> 30 <form id="form1"> 31 <div class="item"> 32 <input class="c1" type="text" name="username" label="用户名" require="true" min-len="6"/> 33 </div> 34 <div class="item"> 35 <input class="c1" type="password" name="pwd" label="密码"/> 36 </div> 37 <div class="item"> 38 <input class="c1" type="text" name="phone" label="手机" require="true" phone="true"/> 39 </div> 40 <input type="submit" value="提交" /> 41 </form> 42 43 </div> 44 45 <script src="jquery-1.12.4.js"></script> 46 <script src="commons.js"></script> 47 <script> 48 $(function(){ 49 $.valid('#form1'); 50 }); 51 52 53 </script> 54 </body> 55 </html>
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<minLenInt){ 37 var label = $(this).attr('label'); 38 ErrorMessage($(this),label + "长度最小为"+ minLen); 39 flag = false; 40 return false; 41 } 42 //json.stringify() 43 //JSON.parse() 44 } 45 46 var phone = $(this).attr('phone'); 47 if(phone){ 48 // 用户输入内容是否是手机格式 49 var phoneReg = /^1[3|5|8]\d{9}$/; 50 if(!phoneReg.test(val)){ 51 var label = $(this).attr('label'); 52 ErrorMessage($(this),label + "格式错误"); 53 flag = false; 54 return false; 55 } 56 } 57 58 } 59 // 每一个元素执行次匿名函数 60 // this 61 //console.log(this,$(this)); 62 /* 63 var val = $(this).val(); 64 if(val.length<=0){ 65 var label = $(this).attr('label'); 66 var tag = document.createElement('span'); 67 tag.innerText = label + "不能为空"; 68 $(this).after(tag); 69 flag = false; 70 return false; 71 } 72 */ 73 }); 74 75 return flag; 76 }); 77 } 78 }); 79 })(jQuery);
方法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匹配一个元素
测试代码：
<div id="notMe"><p>id="notMe"</p></div> # 普通id类型 <div id="myDiv">id="myDiv"</div> <span id="foo:bar"></span> <span id="foo[bar]"></span> # 带有特殊符号的id类型 <span id="foo.bar"></span>
方式1：查找普通ID
$("#myDiv");
方式2：查找带有特殊字符(如 !"#$%&'()*+,./:;<=>?@[\]^`{|}~)的ID， 它必须被两个反斜杠转义：\\
$("#foo\\[bar\\]")
