【python】-- web开发之jQuery
jQuery
jQuery 是一个 JavaScript 函数库，jQuery库包含以下特性(HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX、Utilities)。
jQuery目前包含三个版本：jQuery的1.x、jQuery的2.x、jQuery的3.x（jquery-2.0以上版本不再支持IE 6/7/8），每个版本中都会有两个类型提供选择uncompressed（未压缩版,用于测试和开发）, minified（压缩版，用于实际的网站中），jQurey下载引用地址：点击
jQuery的两种使用方式：
- 下载jQuery文件放到与页面相同的目录中使用
<script src="jquery-1.12.4.js"></script>
- 通过 CDN（内容分发网络） 引用jQuery
#百度压缩版引用地址: <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> #微软压缩版引用地址: <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script> #官网jquery压缩版引用地址: <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
jQuery与Dom对象之间的转换：
// $(Dom对象) =>jQuery对象
var a = document.getElementById("MySignature")
<div id="MySignature"></div>
$(a)
//输出：n.fn.init [div#MySignature, context: div#MySignature]0: div#MySignaturecontext: div#MySignaturelength: 1__proto__: Object(0)
//jquery对象[0] => Dom对象
$(a)[0]
//输出：<div id="MySignature"></div>
一、查找元素
1、jQuery常用选择器，直接找到某个或者某类标签：
1.1、id、class、标签、组合、层级查找元素
$('#id') //根据id查找元素
$(".c1") //根据class查找元素
$('a') //查找出所有标签为a的元素
$('a,.c2,#i10') //查找出所有标签为a、class=c2、id=i10的元素，并将匹配到的元素合并到一个结果内
$('#i10 a') //查找出id=i10标签下的所有的后代元素
$('#i10>a') //查找出id=i10标签下的子元素
$('#i10+a') //查找出id=i10标签的下一个兄弟元素
$('#i10~a') //查找出id=i10标签的下一个siblings元素
1.2、基本筛选器、属性查找元素
常用的基本筛选器 <ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul> $('li:first'); //匹配第一个li元素 $('li:last'); //匹配的最后一个li元素 $('li:eq(2)'); //匹配下标索引为2的li元素（从0开始） $('li:gt(2)'); //匹配下标索引大于2的li元素（从0开始） $('li:even'); //匹配下标索引为偶数li元素 $('li:odd'); //匹配下标索引为奇数li元素 属性 <input name="newsletter" /> <input name="milkman" /> <input name="jobletter" /> $('[name]') //匹配具有name属性的所有标签 $('[name="milkman"]') //匹配name属性等于milkman的标签 $("input[name='milkman']") //匹配input标签下name属性等于milkman的标签 $("input[name!='milkman']") //匹配input标签下name属性不等于milkman的标签 $("input[name^='milk']") //匹配input标签下name属性以milk开头的标签 $("input[name$='man']") //匹配input标签下name属性以man结尾的标签 $("input[name*='man']") //匹配input标签下name属性包含man的标签
1.3、表单、表单对象属性
表单 <form> <input type="text" /> <input type="checkbox" /> <input type="radio" /> <input type="image" /> <input type="file" /> <input type="submit" /> <input type="reset" /> <input type="password" /> <input type="button" /> <select><option/></select> <textarea></textarea> <button></button> </form> $(":input") //匹配表单中所有 input, textarea, select 和 button 元素 $(":text") //匹配表单中所有单行文本框 $(":checkbox") //匹配表单中所有的复选框 $(":radio") //匹配表单中所有的单项按钮 $(":image") //匹配表单中所有的图像域 $(":file") //匹配表单中所有的文件域 $(":submit") //匹配表单中所有提交按钮 $(":reset") //匹配表单中所有重置按钮 $(":password") //匹配表单中所有密码框 $(":button") //匹配表单中所有按钮 [ <input type="button" />,<button></button> ] 表单的对象属性 <form> <input name="email" disabled="disabled" /> <input name="id" /> <input type="checkbox" name="newsletter" checked="checked" value="Daily" /> <input type="checkbox" name="newsletter" value="Weekly" /> <input type="checkbox" name="newsletter" checked="checked" value="Monthly" /> <option value="1">Flowers</option> <option value="2" selected="selected">Gardens</option> <option value="3">Trees</option> </form> $("input:enabled") //匹配所有可用元素 $("input:disabled") //匹配所有不可用元素 $("input:checked") //匹配所有选中的被选中元素复选框、单选框等，select中的option（对于select元素来说，获取选中推荐使用 :selected） $("select option:selected") //匹配所有选中的option元素
2、jQuery筛选（作为jQuery选择器的补充）：
查找 $('#i1').next() //匹配id=i1标签下面的第一个同级标签 $('#i1').nextAll() //匹配id=i1标签下面的所有同级标签 $('#i1').nextUntil('#ii1') //匹配id=i1标签下面的所有同级标签，直到id=ii1的标签为止 $('#i1').prev() //匹配id=i1标签上面的第一个同级标签 $('#i1').prevAll() //匹配id=i1标签上面的所有同级标签 $('#i1').prevUntil('#ii1') //匹配id=i1标签上面的所有同级标签，直到id=ii1的标签为止 $('#i1').parent() //匹配id=i1标签的父标签 $('#i1').parents() //匹配id=i1标签的所有祖先标签 $('#i1').parentsUntil('#ii1') //匹配id=i1标签的所有祖先标签，直到id=ii1的标签为止 $('#i1').children() //匹配id=i1标签的所有子标签，children(".i2")通过可选的表达式来过滤所匹配的子元素（parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素） $('#i1').siblings() //匹配id=i1标签的所有同辈标签，.siblings(".i2") 可用的表达式进行筛选。 $('#i1').find(".i2") //搜索id=i1标签下的后代标签中class=i2的标签 过滤 $('li').eq(1) //匹配li标签中下标索引为1的li标签（当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个，与选择器$('li:eq(1)')类似） $('li').first() //匹配第一个li标签 $('li').last() //匹配最后一个li标签 $(this).hasClass("protected") //判断当前标签中的class属性中是否有protected值，有则true,反之false $("p").filter(".selected, :first") //筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式
二、操作元素
1、文本操作：
$("p").text(); // 获取P标签文本内容
$("p").text("Hello world!"); //重新赋值设置P标签文本内容
$("p").html() //返回p元素的内容。
$("p").html("hello <b>world</b>!"); //重新赋值设置P元素的内容
//区别：text是文本形式，html是html形式
$("input").val(); //获取文本框中的值
$("input").val("hello world!"); //设定文本框的值
2、样式操作：
$("p").addClass("selected1 selected2"); //为每个匹配的元素添加指定的类名（多个类名用空格分开）
$("p").removeClass("selected selected2"); //从所有匹配的元素中删除全部（不指定类名默认删全部）或者指定的类（多个类名用空格分开）
$("p").toggleClass("selected"); //如果存在（不存在）就删除（添加）一个类。
3、属性操作：
# 专门用于做自定义属性 $(..).attr('n') //返回标签中的n的属性值 $(..).attr('n','v') //重新复制设置标签中n的属性值 $(..).removeAttr('n') //将标签中的为n的属性删除 # 专门用于chekbox,radio $(..).prop('checked') //选中复选框为true，没选中为false $(..).prop('checked', true) //将复选框设置为选中状态
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="全选" onclick="checkAll();" /> <input type="button" value="反选" onclick="reverseAll();" /> <input type="button" value="取消" onclick="cancleAll();"/> <table border="1"> <thead> <tr> <th>选项</th> <th>IP</th> <th>PORT</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox" /></td> <td>1.1.1.1</td> <td>80</td> </tr> </tbody> </table> <script src="jquery-1.12.4.js"></script> <script> function checkAll() { $('#tb :checkbox').prop('checked',true); } function cancleAll() { $('#tb :checkbox').prop('checked',false); } function reverseAll() { $(':checkbox').each(function(k){ // this,代指当前循环的每一个元素 // Dom /* if(this.checked){ this.checked = false; }else{ this.checked = true; } */ /* if($(this).prop('checked')){ $(this).prop('checked', false); }else{ $(this).prop('checked', true); } */ // 三元运算var v = 条件? 真值：假值 var v = $(this).prop('checked')?false:true; $(this).prop('checked',v); }) } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ height: 38px; background-color: #eeeeee; line-height: 38px; } .active{ background-color: brown; } .menu .menu-item{ float: left; border-right: 1px solid red; padding: 0 5px; cursor: pointer; } .content{ min-height: 100px; border: 1px solid #eeeeee; } </style> </head> <body> <div style="width: 700px;margin:0 auto"> <div class="menu"> <div class="menu-item active" a="1">菜单一</div> <div class="menu-item" a="2">菜单二</div> <div class="menu-item" a="3">菜单三</div> </div> <div class="content"> <div b="1">内容一</div> <div class="hide" b="2">内容二</div> <div class="hide" b="3">内容三</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.menu-item').click(function(){ $(this).addClass('active').siblings().removeClass('active'); var target = $(this).attr('a'); $('.content').children("[b='"+ target+"']").removeClass('hide').siblings().addClass('hide'); }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .menu{ height: 38px; background-color: #eeeeee; line-height: 38px; } .active{ background-color: brown; } .menu .menu-item{ float: left; border-right: 1px solid red; padding: 0 5px; cursor: pointer; } .content{ min-height: 100px; border: 1px solid #eeeeee; } </style> </head> <body> <div style="width: 700px;margin:0 auto"> <div class="menu"> <div class="menu-item active" >菜单一</div> <div class="menu-item" >菜单二</div> <div class="menu-item" >菜单三</div> </div> <div class="content"> <div >内容一</div> <div class="hide" >内容二</div> <div class="hide">内容三</div> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.menu-item').click(function(){ $(this).addClass('active').siblings().removeClass('active'); $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide'); }); </script> </body> </html>
4、文档操作：
$("p").append("<b>Hello</b>"); //向每个匹配的元素内部追加（结尾处）内容。
$("p").appendTo("div"); //把匹配的元素追加到另一个指定的元素元素集合中的尾部。
$("p").prepend("<b>Hello</b>"); //向所有匹配元素内部（开始处）插入内容
$("p").prependTo("#foo"); //把匹配的元素插入到另一个指定的元素元素集合中的开始处。
$("p").after("<b>Hello</b>"); //在每个匹配的元素之后插入内容。
$("p").insertAfter("#foo"); //颠倒了常规的$(A).after(B)的操作，即不是把B插入到A后面，而是把A插入到B后面
$("p").before("<b>Hello</b>"); //在每个匹配的元素之前插入内容。
$("p").insertBefore("#foo"); //颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面
$("p").remove(".hello"); //删除所有匹配的元素。
$("p").empty(); //把所有的子元素（包括文本节点）删除
$("b").clone().prependTo("p"); //克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .modal{ position: fixed; top: 50%; left: 50%; width: 500px; height: 400px; margin-left: -250px; margin-top: -250px; background-color: #eeeeee; z-index: 10; } .shadow{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.6; background-color: black; z-index: 9; } </style> </head> <body> <a onclick="addElement();">添加</a> <table border="1" id="tb"> <tr> <td target="hostname">1.1.1.11</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.12</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.13</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> <tr> <td target="hostname">1.1.1.14</td> <td target="port">80</td> <td target="ip">80</td> <td> <a class="edit">编辑</a> | <a class="del">删除</a> </td> </tr> </table> <div class="modal hide"> <div> <input name="hostname" type="text" /> <input name="port" type="text" /> <input name="ip" type="text" /> </div> <div> <input type="button" value="取消" onclick="cancelModal();" /> <input type="button" value="确定" onclick="confirmModal();" /> </div> </div> <div class="shadow hide"></div> <script src="jquery-1.12.4.js"></script> <script> $('.del').click(function () { $(this).parent().parent().remove(); }); function confirmModal() { var tr = document.createElement('tr'); var td1 = document.createElement('td'); td1.innerHTML = "11.11.11.11"; var td2 = document.createElement('td'); td2.innerHTML = "8001"; $(tr).append(td1); $(tr).append(td2); $('#tb').append(tr); $(".modal,.shadow").addClass('hide'); // $('.modal input[type="text"]').each(function () { // // var temp = "<td>..." // // // // }) } function addElement() { $(".modal,.shadow").removeClass('hide'); } function cancelModal() { $(".modal,.shadow").addClass('hide'); $('.modal input[type="text"]').val(""); } $('.edit').click(function(){ $(".modal,.shadow").removeClass('hide'); // this var tds = $(this).parent().prevAll(); tds.each(function () { // 获取td的target属性值 var n = $(this).attr('target'); // 获取td中的内容 var text = $(this).text(); var a1 = '.modal input[name="'; var a2 = '"]'; var temp = a1 + n + a2; $(temp).val(text); }); // var port = $(tds[0]).text(); // var host = $(tds[1]).text(); // // $('.modal input[name="hostname"]').val(host); // $('.modal input[name="port"]').val(port); // 循环获取tds中内容 // 获取 <td>内容</td> 获取中间的内容 // 赋值给input标签中的value }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="t1" type="text" /> <input id="a1" type="button" value="添加" /> <input id="a2" type="button" value="删除" /> <input id="a3" type="button" value="复制" /> <ul id="u1"> <li>1</li> <li>2</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $('#a1').click(function () { var v = $('#t1').val(); var temp = "<li>" + v + "</li>"; // $('#u1').append(temp); $('#u1').prepend(temp); // $('#u1').after(temp) // $('#u1').before(temp) }); $('#a2').click(function () { var index = $('#t1').val(); $('#u1 li').eq(index).remove(); //$('#u1 li').eq(index).empty(); }); $('#a3').click(function () { var index = $('#t1').val(); var v = $('#u1 li').eq(index).clone(); $('#u1').append(v); //$('#u1 li').eq(index).remove(); //$('#u1 li').eq(index).empty(); }) </script> </body> </html>
5、css操作：
$(..).css('样式名称', '样式值')
$("p").css({ "color": "#ff0011", "background": "blue" });
$("p").css("color","red");
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container{ padding: 50px; border: 1px solid #dddddd; } .item{ position: relative; width: 30px; } </style> </head> <body> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <div class="container"> <div class="item"> <span>赞</span> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.item').click(function () { AddFavor(this); }); function AddFavor(self) { // DOM对象 var fontSize = 15; var top = 0; var right = 0; var opacity = 1; var tag = document.createElement('span'); $(tag).text('+1'); $(tag).css('color','green'); $(tag).css('position','absolute'); $(tag).css('fontSize',fontSize + "px"); $(tag).css('right',right + "px"); $(tag).css('top',top + 'px'); $(tag).css('opacity',opacity); $(self).append(tag); var obj = setInterval(function () { fontSize = fontSize + 10; top = top - 10; right = right - 10; opacity = opacity - 0.1; $(tag).css('fontSize',fontSize + "px"); $(tag).css('right',right + "px"); $(tag).css('top',top + 'px'); $(tag).css('opacity',opacity); if(opacity < 0){ clearInterval(obj); $(tag).remove(); } }, 40); } </script> </body> </html>
6、位置操作：
$("div.demo").scrollTop(); //获取滚动条距离顶部的值
$("div.demo").scrollTop(100)； //设置滚动条距离顶部的值
$("div.demo").scrollLeft(); //获取滚动条距离左部的值
$("div.demo").scrollLeft(300); //设置滚动条距离左部的值
//window表示当前浏览器的滚动条
$(window).scrollLeft(100)
$(window).scrollTop(100)
<p>Hello</p><p>2nd Paragraph</p>
offset().left //指定标签在html中的坐标
offset().top //指定标签在html中的坐标
$("p:last").offset({ top: 10, left: 30 });
position() //指定标签相对父标签(relative)标签的坐标
<p>Hello</p><p>2nd Paragraph</p>
var p = $("p:first");
var position = p.position();
$("p:last").html( "left: " + position.left + ", top: " + position.top );
$('i1').height() //获取标签的高度 纯高度
$('i1').innerHeight() //获取第一个匹配元素内部区域高度（包括补白、不包括边框）
$('i1').outerHeight() //获取第一个匹配元素外部高度（默认包括补白和边框）
$('i1').outerHeight(true) //设置为 true 时，计算边距在内。
$('i1').width() //取得第一个匹配元素当前计算的宽度值（px）
$('i1').innerWidth() //获取第一个匹配元素内部区域宽度（包括补白、不包括边框）
$('i1').outerWidth() //获取第一个匹配元素外部宽度（默认包括补白和边框）
$('i1').outerWidth(true) //设置为 true 时，计算边距在内。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div style="border: 1px solid #ddd;width: 600px;position: absolute;"> <div id="title" style="background-color: black;height: 40px;"></div> <div style="height: 300px;"></div> </div> <script type="text/javascript" src="jquery-1.12.4.js"></script> <script> $(function(){ $('#title').mouseover(function(){ $(this).css('cursor','move'); }); $("#title").mousedown(function(e){ //console.log($(this).offset()); var _event = e || window.event; var ord_x = _event.clientX; var ord_y = _event.clientY; var parent_left = $(this).parent().offset().left; var parent_top = $(this).parent().offset().top; $('#title').on('mousemove', function(e){ var _new_event = e || window.event; var new_x = _new_event.clientX; var new_y = _new_event.clientY; var x = parent_left + (new_x - ord_x); var y = parent_top + (new_y - ord_y); $(this).parent().css('left',x+'px'); $(this).parent().css('top',y+'px'); }) }); $("#title").mouseup(function(){ $("#title").off('mousemove'); }); }) </script> </body> </html>
7、效果：
效果演示：点击
三、事件
1、jQuery事件的几种绑定触发方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="t1" type="text" /> <input id="a1" type="button" value="添加" /> <ul id="u1"> <li>1</li> <li>2</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $('#a1').click(function () { var v = $('#t1').val(); var temp = "<li>" + v + "</li>"; $('#u1').append(temp); }); //事件的几种绑定方式 // 1，第一种$(".c1").click(function(){}) // $('ul li').click(function () { // var v = $(this).text(); // alert(v); // }) // 2,第二种$('.c1').bind('click',function(){})，对应的取消绑定方式$('.c1').unbind('click',function(){}) // $('ul li').bind('click',function () { // var v = $(this).text(); // alert(v); // }) //对未来元素（由脚本创建的元素）绑定事件，jquery3.0以下版本使用delegate("选择器","事件名称",function(){事件处理函数})jquery3.0+版本使用.on("事件名称","选择器",function(){}) // 3，第三种方式$('.c1').on('click', function(){})， 对应的取消绑定方式$('.c1').off('click', function(){}) // $('ul li').on('click', function () { // var v = $(this).text(); // alert(v); // }) // 4,第四种绑定方式$('.c').delegate('a', 'click', function(){})，对应的取消绑定方式$('.c').undelegate('a', 'click', function(){}) // $('ul').delegate('li','click',function () { // var v = $(this).text(); // alert(v); // }) </script> </body> </html>
2、阻止事件发生
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a onclick="return ClickOn()" href="http://www.baidu.com">go_1</a> <a id="i1" href="http://www.baidu.com">go_2</a> <script src="jquery-1.12.4.js"></script> <script> //dom方式实现阻止事件发生，需要在在标签中增加return，函数中也需要return false function ClickOn(){ alert(123); return false; } //jquery方式实现实现阻止事件发生，只需要在函数中return false即可 $('#i1').click(function () { alert(456); return false; }) </script> </body> </html>
3、通过自执行函数自动执行事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .error{ color: red; } </style> </head> <body> <form id="f1" action="s1.html" method="POST"> <div><input name="n1" tex = "用户名" type="text" /></div> <div><input name="n2" tex = "密码" type="password" /></div> <div><input name="n3" tex = "邮箱" type="text" /></div> <div><input name="n4" tex = "端口" type="text" /></div> <div><input name="n5" tex = "IP" type="text" /></div> <input type="submit" value="提交" /> </form> <script src="jquery-1.12.4.js"></script> <script> // 之前接触定义事件绑定触发方式，会在当页面所有元素完全加载完毕后才会执行，这样如果有张图片过大的时候加载的慢，事件绑定效果就会随之变慢 $(':submit').click(function () { $('.error').remove(); var flag = true; $('#f1').find('input[type="text"],input[type="password"]').each(function () { var v = $(this).val(); var n = $(this).attr('tex'); if(v.length <= 0){ flag = false; var tag = document.createElement('span'); tag.className = "error"; tag.innerHTML = n + "必填"; $(this).after(tag); // return false; 如果这里不注释的return话,点击button只对当前输入框进行检查校验，注释了则对全部输入框进行校验 } }); return flag; }); // 通过自执行函数$(function(){绑定的事件})解决问题，这样在当页面框架加载完毕后，自动执行，这样的话，即使图片没有加载完毕，事件却已绑定 $(function(){ $(':submit').click(function () { $('.error').remove(); var flag = true; $('#f1').find('input[type="text"],input[type="password"]').each(function () { var v = $(this).val(); var n = $(this).attr('tex'); if(v.length <= 0){ flag = false; var tag = document.createElement('span'); tag.className = "error"; tag.innerHTML = n + "必填"; $(this).after(tag); // return false; 如果这里不注释的return话,点击button只对当前输入框进行检查校验，注释了则对全部输入框进行校验 } }); return flag; }); }); </script> </body> </html>
4、jQuery扩展
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script src="jquery-1.12.4.js"></script> <!--<script src="plugin.js"></script>可以将扩展的方法添加在其他文件中，然后引入--> <div id="i1">hello word</div> <script> // 第一种扩展方法：$.extend，通过“$.方法”使用 $.extend({ 'print': function () { return 'hello word'; } }); var v = $.print(); alert(v); // 第二种扩展方法：$.fn.extend，通过“$(..).方法”使用 $.fn.extend({ 'print_1': function () { return 'hello word'; } }); var v1 = $("#i1").print_1(); alert(v1) //在引用多个外部jquery插件时候可能会遇到公共变量命名重复的问题，这个时间可通过自执行函数解决这个问题 (function (arg) { var status = 1; arg.extend({ 'print_2': function () { return 'hello word'; } }); })(jQuery); </script> </body> </html>
