jQuery笔记

jQuery笔记

1.语法 一.两种基本写法 第一种： $(function(){

}) 第二种： $(document).ready(function(){ }) 二.基本用法 $(this).hide();隐藏当前元素 $("p").hide();隐藏所有的p标签元素 $("p.test").hide();隐藏所有class="test"的p标签元素 $("#test").hide();隐藏所有id="test"的元素

2.jQuery绑定事件 不用加on 直接添加事件click mouseover focus blur dblclick(双击) $(function(){ var flag=true; $("#dd").click(function(){ if(flag){ $("#p").hide(); }else{ $("#p").show(); } flag=!flag; }) }) $(“input”).focus(function(){ $(this).css(“background-color”,"#cccccc"); }); 3.选择器 .class #id p this [href]

$("*") 选取所有的元素 $("this") 选取当前HTML元素 $("p.intro") 选取 class 为 intro 的 <p> 元素 $("ul li:first") 选取第一个ul的第一个li $("ul li:first-child") 选取每个ul的第一个li $("li[href]") 选取带有 href 属性的元素 $("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素 $("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 $(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素 $("tr:even") 选取偶数行的 li 元素 奇数位置（从0开始） $("tr:odd") 选取奇数行的 li 元素 偶数位置（从0开始） $("*").hide(); 选取所有元素选取所有元素 $(this).hide(); 选取当前 HTML 元素 $("ul li:first").hide(); //选取第一个 <ul> 元素的第一个 <li> 元素 $("ul li:first-child").hide(); 选取每个 <ul> 元素的第一个 <li> 元素 $("ul li[href]").hide(); 选取带有 href 属性的元素 $("ul li:odd").hide(); 选取偶数行的 li 元素 奇数位置（从0开始） $("ul li:even").hide(); 选取奇数行的 li 元素 偶数位置（从0开始） $(":button").hide(); 选取所有 type="button" 的 <input> 元素 和 <button> 元素 $("a[target='_blank']").hide(); 选取所有 target 属性值等于 "_blank" 的 <a> 元素

4.jQuery效果

一.淡入淡出 fadeIn（时间，回调函数）fadeOut（） fadeToggle（时间，透明度，回调函数） fadeTo（） $(selector).fadeIn(speed,callback); 淡入 $(selector).fadeOut(speed,callback); 淡出 $(selector).fadeToggle(speed,callback); 淡入淡出 $(selector).fadeTo(speed,opacity,callback); 淡入到 某个透明度使用flag时可淡入淡出 $("ul li").fadeIn(3000,function(){alert(1)}) $("ul li").fadeOut(3000,function(){alert(1)}) $("ul li").fadeToggle(3000,function(){alert(1)}) $("ul li").fadeTo(3000,0.5,function(){alert(1)}) 二.滑动 slideUp（时间，回调函数） slideDown（）slideToggle（） $(selector).slideDown(speed,callback); 向下滑 $(selector).slideUp(speed,callback); 向上滑 $(selector).slideToggle(speed,callback); 向上向下滑 三.动画 $(selector).animate({params},speed,callback); 必需的 params 参数定义形成动画的 CSS 属性。 属性之间要用逗号隔开 width:"+=150px" 逐渐加到150 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。 可选的 callback 参数是动画完成后所执行的函数名称。 $("ul li").animate({width:'600px',height:'500px',opacity:'0.5'},3000,function(){alert(1)}); $("ul li").animate({width:'+=150px',height:'+=150px',opacity:'1'},3000,function(){alert(1)}); 使用队列功能 顺序执行 $("ul li").animate({width:'+=150px',opacity:'0.5'},3000,function(){alert(1)}); $("ul li").animate({height:'+=150px',opacity:'0.5'},3000,function(){alert(2)}); 四.停止动画 $(selector).stop(stopAll,goToEnd); 停止正在运动的动画 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。 $("ul li").stop(); $("ul li").hide(3000,function(){ console.log("段落现在被隐藏了"); }); 五.方法链 先背景变蓝，宽度变为600px；再向上滑动，再向下滑动，然后3s透明度变为0.5，最后宽度在原来600px的基础上加150px $("ul li").css({"background":"blue","width":"600px"}).slideUp(3000,function(){console.log("上滑");}).slideDown(3000,function(){console.log("下滑");}).fadeTo(3000,0.5,function(){console.log("淡入")}).animate({width:"+=150px"},3000,function(){console.log("动画")});

5.jQuery HTML 一.jQuery捕获 text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容（包括 HTML 标记） val() - 设置或返回表单字段的值 //得到文本框的value值 二.jQuery 设置与回调函数 回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。 $("#div1").text(function(i,olddiv){ return “旧文本：”+olddiv+“新文本：hello World！(index：”+i+")"; });

jQuery attr() 方法也用于设置/改变属性值，允许同时设置多个属 $("#dd3").click(function(){ $("#aa").attr({ "href":"http://www.baidu.com", "title":"百度" }) }） 提供回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串。 $("button").click(function(){ $("#runoob").attr("href", function(i,origValue){ return origValue + "/jquery"; }); }); 三.添加元素 append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 $("ul li:first-child").append("在被选元素结尾追加文本");//1在被选元素结尾追加内容 $("ul li:nth-child(2)").prepend("在被选元素开头追加文本");//在被选元素开始追加文本1 $("ul li:nth-child(4)").after("被选元素之后插入内容追加文本");//after在被选元素之后插入内容 $("ul li:nth-child(6)").before("被选元素之前插入内容追加文本");//before在被选元素之前插入内容 jQuery创建元素 var txt=$("<p><p>").text("<b>love</b>"); $("ul li").append(txt); 四.删除元素 remove() - 删除被选元素（及其子元素） empty() - 从被选元素中删除子元素 $("ul li:first-child").remove();//删除被选元素（及其子元素） $("ul li:first-child").empty();//删除被选元素的子元素 五.CSS操作 addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() - 对被选元素进行添加/删除类的切换操作 css() - 设置或返回样式属性 $("ul li:first-child").addClass("div");//删除被选元素添加 class 属性 $("ul li:nth-child(1)").removeClass("div"); //删除被选元素的指定的 $("ul li:nth-child(1)").toggleClass("div"); //对被选元素进行添加/删除类的切换操作 $("ul li:nth-child(2)").css({"background-color":"yellow","font-size":"200%"}); 六.尺寸 width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。 height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。 innerWidth() 方法返回元素的宽度（包括内边距）。 innerHeight() 方法返回元素的高度（包括内边距）。 outerWidth() 方法返回元素的宽度（包括内边距和边框）。 outerHeight() 方法返回元素的高度（包括内边距和边框）。 $("ul li:first").width(); //100 内容区 $("ul li:first").height(); //100 内容区 $("ul li:first").innerWidth(); //160 内容区+补白（内边距） $("ul li:first").innerHeight(); //160 内容区+补白（内边距） $("ul li:first").outerWidth(); //260 内容区+补白（内边距）+边框（外边距） $("ul li:first").outerHeight(); //260 内容区+补白（内边距）+边框（外边距）

6.JQuery 遍历 一.祖先 parent() 方法返回被选元素的直接父元素。 parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()。 parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素

$("span").parents().css({"color":"red","fontSize":"200%","border":"1px solid red"}); $("span").parents().css({"color":"red","border":"1px solid red"}); $("span").parentsUntil("div").css({"color":"red","border":"1px solid red"}) 二.后代 children（）返回被选元素的所有直接子元素 find（） 返回被选元素的所有后代元素，一路向下直到最后一个后代 $("div").children("p:nth-child(2)").css({"color":"red","border":"1px solid red"}); //返回被选择的元素的所有直接子元素 $("div").find("span").css({"color":"red","border":"1px solid red"}); //查找所有div下的span标签，返回被选元素的后代元素，一路向下直到最后一个后代 三.同胞 siblings（）返回被选元素的所有同胞元素，左右两边都查到头 siblings("p") 返回被选元素的所有同胞p标签元素，左右两边都查到头 next() 返回被选元素的下一个元素 nextAll() 返回被选元素后面所有的元素 nextUntil("#fff") 返回被选元素介于两个给定参数之间的所有跟随的同胞元素 prev() 返回被选元素的前一个元素 prevAll() 返回被选元素前面所有的元素 prevUntil() 返回被选元素介于两个给定参数之间的所有跟随的同胞元素 $("#ff").siblings().css({"color":"red","border":"1px solid red"}); $("#ff").siblings("p").css({"color":"red","border":"1px solid red"}); $("#ff").next().css({"color":"red","border":"1px solid red"}); $("#ff").nextAll().css({"color":"red","border":"1px solid red"}); $("#ff").nextUntil("#fff").css({"color":"red","border":"1px solid red"}); 四.过滤 first() 方法返回被选元素的首个元素 last() 方法返回被选元素的最后一个元素 eq() 方法返回被选元素中带有指定索引号的元素，索引号从0开始 filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回 not() 方法返回不匹配标准的所有元素 $("p").first().css({"color":"red","border":"1px solid red"}); $("p").last().css({"color":"red","border":"1px solid red"}); $("p").eq(0).css({"color":"red","border":"1px solid red"}); $("p").filter(".ff").css({"color":"red","border":"1px solid red"}); $("p").not(".ff").css({"color":"red","border":"1px solid red"});

7.jQuery Ajax 一.兼容 if(window.XMLHttpRequest){ ajax=new XMLHttpRequest(); }else{ ajax=new ActiveXObject(“Microsoft.XMLHTTP”); } 二.基本用法 第一种用法：load jQuery load() 方法是简单但强大的 AJAX 方法。 load() 方法从服务器加载数据，并把返回的数据放入被选元素中 $(selector).load(URL,data,callback); $("#aa").load(“http://127.0.0.1:8020/复习jQuery/ajax.txt”);

第二种用法：open send ajax.onreadystatechange 先用ajax.open（“GET/POST”，“链接”）向服务器打开接口请求，再用ajax.send（）传送得到的信息，然后当readyState发生改变时，就会触发onreadyStatechange事件 ajax.onreadyStatechange=function(){}，最后判断当ajax.readyState的状态值为4且ajax.status判断码为200 时，说明响应已就绪 if(window.XMLHttpRequest){ ajax=new XMLHttpRequest(); }else{ ajax=new ActiveXObject("Microsoft.XMLHTTP"); } ajax.open("GET","http://127.0.0.1:8020/复习jQuery/ajax.txt"); ajax.send(); ajax.onreadystatechange=function(){ if(ajax.readyState==4 /*状态值*/ && ajax.status==200){//状态码判断 200 交易成功 alert(ajax.responseText); } } 两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。 GET - 从指定的资源请求数据 POST - 向指定的资源提交要处理的数据 $.get() 方法通过 HTTP GET 请求从服务器上请求数据。 第三种用法：get 语法： $.get(URL,callback); 必需的 URL 参数规定您希望请求的 URL。 可选的 callback 参数是请求成功后所执行的函数名 $.get() 的第一个参数是我们希望请求的 URL（"demo_test.php"）。 第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。 data为执行成功后返回的值 status为success/error $("#dd3").click(function(){ $.get("http://127.0.0.1:8020/复习jQuery/ajax.txt",function(data,status){ alert("数据："+data+"状态："+status); }) }) 第四种用法：post 语法： $.post() 方法通过 HTTP POST 请求向服务器提交数据。 语法: $.post(URL,data,callback); 必需的 URL 参数规定您希望请求的 URL。 可选的 data 参数规定连同请求发送的数据。 可选的 callback 参数是请求成功后所执行的函数名 $("#dd4").click(function(){ $.post("http://127.0.0.1:8020/复习jQuery/ajax.php",{ name:"菜鸟教程", url:"http://www.baidu.com" },function(data,status){ alert("数据："+data+"状态："+status); }) })

8.jQuery noConflict 当在页面上同时使用 jQuery 和其他框架时，要先在前面加上$.noConflict(),然后其他操作就和常用的一样 一.第一种用法 $.noConflict(); jQuery(document).ready(function(){ jQuery("#dd").click(function(){ jQuery("#aa").text(“jQuery 仍然在工作”); }) }) 二.第二种用法 $.noConflict(); jQuery(function(){ jQuery("#dd").click(function(){ jQuery("#aa").text(“jQuery 仍然在工作”); }) }) 三.第三种用法 如果你的 jQuery 代码块使用 $ 简写，并且您不愿意改变这个快捷方式，那么您可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 “jQuery” $.noConflict();jQuery(function($){ $("#dd3").click(function(){ KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲aa").text("jQue….noConflict(); jq(function(){ jq("#dd4").click(function(){ jq("#aa").text(“jQuery 仍然在工作”); }) })

9.jQuery JSONP

<?php header('Content-type: application/json'); //获取回调函数名 $jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']); //json数据 $json_data = '["customername1","customername2"]'; //输出jsonp格式的数据 echo $jsoncallback . "(" . $json_data . ")"; ?> $.getJSON("http://127.0.0.1:8020/复习jQuery/jsonp.php?jsoncallback=?",function(data){ var html="<ul>"; for(var i=0;i<data.length;i++){ html+="<li>"+data[i]+"</li>"; } html+="</ul>"; $("#aa").html(html); })

9.jQuery 实用工具

一.$.each() 遍历指定的对象和数组

$.each([52,97],function(index,value)alert(index{+}^{\prime }{:}^{\prime }+value););二.$.extend() 将一个或多个对象的内容合并到目标对象 三.$.inArray()在数组中查找指定值并返回它的索引值（如果没有找到，则返回-1）jQuery.inArray("John",arr)四.$.isArray([]) 判断指定参数是否是一个数组 五.$.grep() 过滤并返回满足指定函数的数组元素 jQuery.grep(arr, function( n, i ) { return ( n !== 5 && i > 4 ); });

10.0jQuery Validate 表单验证插件 要用jQuery validate时要先在页面中加载jquery.validate.min.js

required:true 必须输入的字段。 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。 email:true 必须输入正确格式的电子邮件。 url:true 必须输入正确格式的网址。 date:true 必须输入正确格式的日期。日期校验 ie6 出错，慎用。 dateISO:true 必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。 number:true 必须输入合法的数字（负数，小数）。 digits:true 必须输入整数。 creditcard: 必须输入合法的信用卡号。 equalTo:"#field" 输入值必须和 #field 相同。 accept: 输入拥有合法后缀名的字符串（上传文件的后缀）。 maxlength:5 输入长度最多是 5 的字符串（汉字算一个字符）。 minlength:10 输入长度最小是 10 的字符串（汉字算一个字符）。 rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。 range:[5,10] 输入值必须介于 5 和 10 之间。 max:5 输入值不能大于 5。 min:10 输入值不能小于 10。 一.提交事件 $.validator.setDefaults({ submitHandler: function() { alert("提交事件!"); } }); $().ready(function() { $("#commentForm").validate(); }); 二.将校验规则写到控件中 <label for="cname">Name (必需, 最小两个字母)</label> <input id="cname" name="name" minlength="2" type="text" required> 三.将校验规则写到 js 代码中 $.validator.setDefaults({ submitHandler: function() { 成功后执行 alert("提交事件!"); } }); $("#signupForm").validate({ rules: { firstname: "required", lastname: "required", username: { required: true, minlength: 2 }， password: { required: true, minlength: 5 } }， messages: { firstname: "请输入您的名字", lastname: "请输入您的姓氏", username: { required: "请输入用户名", minlength: "用户名必需由两个字母组成" }, password: { required: "请输入密码", minlength: "密码长度不能小于 5 个字母" } }) <form class="cmxform" id="signupForm" method="get" action=""> <fieldset> <legend>验证完整的表单</legend> <p> <label for="firstname">名字</label> <input id="firstname" name="firstname" type="text"> </p> <p> <label for="lastname">姓氏</label> <input id="lastname" name="lastname" type="text"> </p> <p> <label for="username">用户名</label> <input id="username" name="username" type="text"> </p> <p> <label for="password">密码</label> <input id="password" name="password" type="password"> </p> <p> <input class="submit" type="submit" value="提交"> </p> </fieldset> </form>