js+ajax+jquery(3)(jquery选择器，方法和事件实例）
jQuery是什么
John Resig在2006年1月发布的一款跨主流浏览器的JavaScript库，简化JavaScript对HTML操作
为什么要使用jQuery
（1）写少代码,做多事情【write less do more】 （2）免费，开源且轻量级的js库，容量很小 注意：项目中，提倡引用min版的js库 （3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome 注意：jQuery不是将所有JS全部封装，只是有选择的封装 （4）能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步AJAX功能 （5）文档手册很全，很详细 （6）成熟的插件可供选择 （7）提倡对主要的html标签提供一个id属性，但不是必须的 （8）出错后，有一定的提示信息 （9）不用再在html里面通过<script>标签插入一大堆js来调用命令了
jQuery开发步骤
（可以使用迷你版本的js库,即去掉注释和换行，这样会小很多）
（1）引用第三方js库文件，<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
（2）查阅并使用api手册，$("#divID").html()/val()/text()/css("color","red")/....
比如
//var divElement = document.getElementById("divID"); var $div = $("#divID"); //var html = divElement.innerHTML; var html = $div.html(); alert(html);
实例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jQuery入门</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> </head> <body> <input id="inputID" type="button" value="这就是jQuery库,写少代码，做多事情"/> <div id="divID">哈哈哈</div> <script type="text/javascript"> //取得<input>标签中的value属性的内容 /*js方式 var inputElement = document.getElementById("inputID"); var input = inputElement.value; alert(input);*/ /*jquery方式 var $input = $("#inputID"); var input = $input.val(); alert(input);*/ //取得<div>标签中的文本内容 /*js方式 var divElement = document.getElementById("divID"); var div = divElement.innerHTML; alert(div);*/ //jquery方式 var $div = $("#divID"); var div = $div.html(); alert(div); </script> </body> </html>
js对象和jQuery对象相互转换
（1）什么是js对象及代码规则
就是使用js-API，即Node接口中的API或是传统JS语法定义的对象，叫做js对象 js代码规则----divElement var divElement = document.getElementById("divID");
var nameArray = new Array(3);
（2）什么是jQuery对象及代码规则
就是使用jQuery-API，返回的对象就叫做jQuery对象 jQuery代码规则----$div var $div = $("#divID") 声明：上述代码规则（变量名用美元符号$开头），只是个人习惯规则，不代表所有企业都这样做
（3）js对象转成jQuery对象【重点】
语法：$(js对象)---->jQuery对象 例如：$(divElement)---->$div 例如：$(this)---->$this
注意：jQuery对象将js对象做了封装，js对象二边无引号
var inputElement = document.getElementById("inputID");//js对象 var $input = $(inputElement);//jquery对象 var txt = $input.val(); alert(txt);
（4）jQuery对象转成js对象（有点特别：json对象是一个数组，获取的话取第一个，下标为0）
语法1：jQuery对象[下标，从0开始]
语法2：jQuery对象.get(下标，从0开始)
例如：$div[0]---->divElement
注意：不同的对象只能调用对应的api方法，即jQuery对象不能调用js对象的api，反之亦然
$div.innerHTML（错）
divElement.html（）(错)
var $div = $("#divID");//jquery对象 var divElement = $div[0];//js对象(方式一) //var divElement = $div.get(0);//js对象(方式二) var txt = divElement.innerHTML; alert(txt);
实例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>js对象和jquery对象的相互转换</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> </head> <body> <input id="inputID" type="button" value="这就是jQuery库,写少代码，做多事情"/> <div id="divID">哈哈</div> <script type="text/javascript"> /*取得<input>标签中的value属性的内容[js对象->jquery对象] var inputElement = document.getElementById("inputID");//js对象 var $input = $( inputElement );//jquery对象 var input = $input.val(); alert(input);*/ //取得<div>标签中的文本内容[jquery对象->js对象] var $div = $("#divID");//jquery对象 //var divElement = $div.get(0);//js对象 var divElement = $div[0];//js对象 var div = divElement.innerHTML; alert(div); </script> </body> </html>
js对象和jQuery对象的区别
（1）js对象的三种基本定位方式
（A）通过ID属性：document.getElementById()
（B）通过NAME属性：document.getElementsByName()
（C）通过标签名：document.getElementsByTagName()
（2）jQuery对象的三种基本定位方式
（A）通过ID属性：$("#id属性值")
（B）通过标签名：$("标签名")
（C）通过CLASS属性：$(".类名")
（3）js对象出错的显示
没有合理的提示信息（获取不到对象，不会出现错误提示）
例如：alert(document.getElementById("usernameIDD").value)
（4）jQuery对象出错的显示
有合理的提示信息，例如：弹出undefined
例如：alert($("#usernameIDD").val())
实例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>js操作与jQuery操作对错误的处理方式的比较</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> .oneClass { font-size: 44px; color: red } </style> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> </head> <body> <input type="text" id="usernameID" value="这就是jQuery库" /> <div id="divID" class="oneClass">这是div标签中的内容</div> <script type="text/javascript"> //通过"#id"定位<input> //alert( $("#usernameID").val() ); //通过"标签名"定位<input><div> //alert( $("input").val() ); //alert( $("div").html() ); //通过"样式名"定位<div>，没有样式也可以，只是通过类名定位i //alert( $(".oneClass").html() ); //js错误处理和jquery错误处理 //alert( document.getElementById("usernameTD").value ); alert( $("#usernameID").val() ); </script> </body> </html>
jQuery九类选择器【参见jQueryAPI.chm手册】
补充：对于选中的是数组取值，默认处理的都是首个
获取后代（多层次下）元素中的标签或值：
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <form> <table> <tr> <td> 赵君 </td> </tr> </table> </form> <script type="text/javascript"> //获取"赵君"( //alert( $("form td").text() ); alert( $("form table tr td").text() ); </script> </body> </html>
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <form> <table> <tr> <td> 哈哈 </td> <td> 赵君 </td> </tr> <tr> <td> 细细 </td> </tr> </table> <table> <tr> <td> 笨笨 </td> </tr> </table> </form> <script type="text/javascript"> //获取"赵君" var name = $("html body form table:first tr:first td:last").text(); alert(name); </script> </body> </html>
（1）基本选择器【参见selector_1.html】
//1)查找ID为"div1ID"的元素个数 alert( $("#div1ID").size() ); //2)查找DIV元素的个数 alert( $("div").size() ); //3)查找所有样式是"myClass"的元素的个数 alert( $(".myClass").size() ); //4)查找所有DIV,SPAN,P元素的个数 alert( $("div,span,p").size() ); //5)查找所有ID为div1ID,CLASS为myClass,P元素的个数 alert( $('#div1ID,.myClass,p').size() );
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <div id="div1ID">div1</div> <div id="div2ID">div2</div> <span class="myClass">span</span> <p>p</p> <script type="text/javascript"> //1)查找ID为"div1ID"的元素个数 //alert( $("#div1ID").size() ); //2)查找DIV元素的个数 //alert( $("div").length ); //3)查找所有样式是"myClass"的元素的个数 //alert( $(".myClass").size() ); //4)查找所有DIV,SPAN,P元素的个数 //alert( $("DIV,span,p").size() ); //5)查找所有ID为div1ID,CLASS为myClass,P元素的个数 alert( $("#div1ID,.myClass,p").size() ); </script> </body> </html>
（2）层次选择器【参见selector_2.html】
//1)找到表单form里所有的input元素的个数 alert( $("form input").size() ); //2)找到表单form里所有的子级input元素个数 alert( $("form > input").size() ); //3)找到表单form同级第一个input元素的value属性值 alert( $("form + input").val() ); //4)找到所有与表单form同级的input元素个数（是以form为基准往下） alert( $("form ~ input").size() );
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <!-- <input type="radio" value="z"/> <input type="radio" value="e"/> <input type="radio" value="y"/> --> <form> <input type="text" value="a"/> <table> <tr> <td> <input type="checkbox" value="b"/> </td> </tr> </table> </form> <input type="radio" value="ccccccccc"/> <input type="radio" value="d"/> <input type="radio" value="e"/> <script type="text/javascript"> //1)找到表单form里所有的input元素的个数 //alert( $("form input").size() ); //2)找到表单form里所有的子级input元素个数 //alert( $("form>input").size() ); //3)找到表单form同级第一个input元素的value属性值 //alert( $("form+input").val() ); //4)找到所有与表单form同级的input元素个数 alert( $("form~input").size() ); </script> </body> </html>
（3）增强基本选择器【参见selector_3.html】
补充：
//html()要用于html/jsp，不能用在xml //text()既能用于html/jsp，且能用于xml //html()：强调的是标签中的内容，即便标签中的子标签，也会显示出来 //text()：强调的是标签中的文本内容，即便标签中的子标签，也只会显示出文本内容，不会显示子标签
比如：
//1)查找UL中第一个元素的内容 alert( $("ul li:first").text() ); //2)查找UL中最后个元素的内容 alert( $("ul li:last").text() ); //4)查找表格的索引号为1、3、5...奇数行个数，索引号从0开始 alert( $("table tr:odd").size() ); //5)查找表格的索引号为2、4、6...偶数行个数，索引号从0开始 alert( $("table tr:even").size() ); //6)查找表格中第二行的内容，从索引号0开始，这是一种祖先 后代 的变化形式 alert( $("table tr td:eq(1)").text() ); //7)查找表格中第二第三行。。。之后的个数，即索引值是1和2，也就是比0大 alert( $("table tr:gt(0)").size() ); //8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小 alert( $("table tr:lt(2)").size() ); //9)给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色（header这是一个特殊属性针对<h>标签) $(":header").css("background-color","red").css("color","blue"); //3)查找所有未选中的input为checkbox的元素个数（选取表单元素标签，都有特殊的属性对应，比如checkbox,以及该标签的属性也有专门对于的属性checked) alert( $(":checkbox:NOT(:checked)").size() );
实例：
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <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> <input type="checkbox" checked/> <input type="checkbox" checked/> <input type="checkbox"/> <table border="1"> <tr><td>line1[0]</td></tr> <tr><td>line2[1]</td></tr> <tr><td>line3[2]</td></tr> <tr><td>line4[3]</td></tr> <tr><td>line5[4]</td></tr> <tr><td>line6[5]</td></tr> </table> <h1>h1</h1> <h2>h2</h2> <h3>h3</h3> <p>p</p> <script type="text/javascript"> //1)查找UL中第一个LI元素的内容 //html()要用于html/jsp，不能用在xml //text()既能用于html/jsp，且能用于xml //alert( $("ul li:first").text() ); //2)查找UL中最后个元素的内容 //alert( $("ul li:last").text() ); //4)查找表格的索引号为1、3、5...奇数行个数，索引号从0开始 //alert( $("table tr:odd").size() ); //5)查找表格的索引号为2、4、6...偶数行个数，索引号从0开始 //alert( $("table tr:even").size() ); //6)查找表格中第二行的内容，从索引号0开始，这是一种祖先 后代 的变化形式 //html()：强调的是标签中的内容，即便标签中的子标签，也会显示出来 //text()：强调的是标签中的文本内容，即便标签中的子标签，也只会显示出文本内容，不会显示子标签 //alert( $("table tr:eq(1)").text() ); //7)查找表格中第二第三行的个数，即索引值是1和2，也就是比0大 //alert( $("table tr:gt(0)").size() ); //8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小 //alert( $("table tr:lt(3)").size() ); //9)给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色 //$(":header").css("background-color","red").css("color","#ffff33"); //3)查找所有[未]选中的input为checkbox的元素个数 alert( $(":checkbox:not(:checked)").size() ); </script> </body> </html>
（4）内容选择器【参见selector_4.html】
//1)查找所有包含文本"John"的div元素的个数 alert( $("div:contains('John')").size() ); //2)查找所有p元素为空的元素个数 alert( $("p:empty").size() ); //3)给所有包含p元素的div元素添加一个myClass样式（该样式已经被定义了，或者是为别的标签定义的） $("div:has(p)").addClass("myClass"); //4)查找所有含有子元素或者文本的p元素个数,即p为父元素（p标签必须包含内容或者其他标签才算是父标签）
alert( $("p:parent").size() );
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> <style type="text/css"> .myClass{ font-size:44px; color:blue } </style> </head> <body> <div><p>John Resig</p></div> <div><p>George Martin</p></div> <div>Malcom John Sinclair</div> <div>J. Ohn</div> <div></div> <p></p> <p></p> <script type="text/javascript"> //1)查找所有包含文本"John"的div元素的个数 //alert( $("div:contains('John')").size() ); //2)查找所有p元素为空的元素个数 //alert( $("p:empty").size() ); //3)给所有包含p元素的div元素添加一个myClass样式 //$("div:has(p)").addClass("myClass"); //4)查找所有含有子元素或者文本的p元素个数,即p为父元素 alert( $("p:parent").size() ); </script> </body> </html>
（5）可见性选择器（查找隐藏/显示的标签：（表示隐藏：style="display:none"）
//1)查找隐藏的tr元素的个数 //alert( $("table tr:hidden").size() ); //2)查找所有可见的tr元素的个数 //alert( $("table tr:NOT(:hidden)").size() ); alert( $("table tr:visible").size() );//提倡
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <table border="1" align="center"> <tr style="display:none"> <td>Value 1</td> </tr> <tr> <td>Value 2</td> </tr> <tr> <td>Value 3</td> </tr> </table> <script type="text/javascript"> //1)查找隐藏的tr元素的个数 //alert( $("table tr:hidden").size() ); //2)查找所有可见的tr元素的个数 //alert( $("table tr:NOT(:hidden)").size() ); alert( $("table tr:visible").size() );//提倡 </script> </body> </html>
（6）属性选择器
//1)查找所有含有id属性的div元素个数 //alert( $('div[id]').size() ); //2)查找所有name属性是newsletter的input元素，并将其选中
//$("input[name='newsletter']").attr("checked","checked"); //3)查找所有name属性不是newsletter的input元素，并将其选中
//$("input[name!='newsletter']").attr("checked","true"); //4)查找所有name属性以'news'开头的input元素，并将其选中
//$("input[name^='news']").attr("checked","checked"); //5)查找所有name属性以'letter'结尾的input元素，并将其选中
//$("input[name$='letter']").attr("checked","checked"); //6)查找所有name属性包含'news'的input元素，并将其选中
//$("input[name*='news']").attr("checked","checked"); //7)找到所有含有id属性，并且它的name属性是以"letter"结尾的input元素，并将其选中 $("input[id][name$='letter']").attr("checked","true");
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <div> <p>Hello!</p> </div> <div id="test2"></div> <input type="checkbox" name="newsletter" value="Hot Fuzz"/> <input id="myID" type="checkbox" name="newsletter" value="Cold Fusion" /> <input type="checkbox" name="newsaccept" value="Evil Plans" /> <!-- <input type="checkbox" name="letternews" value="Hot Fuzz"/> <input id="myID" type="checkbox" name="letnewster" value="Cold Fusion" /> <input type="checkbox" name="accNEWSept" value="Evil Plans" /> --> <script type="text/javascript"> //1)查找所有含有id属性的div元素个数 //alert( $('div[id]').size() ); //2)查找所有name属性是newsletter的input元素，并将其选中 //$("input[name='newsletter']").attr("checked","checked"); //3)查找所有name属性不是newsletter的input元素，并将其选中 //$("input[name!='newsletter']").attr("checked","true"); /* 请问：在JS中如下符号表示什么意思 1)=/==/=== 2)!=/!== 明天讲解 */ //4)查找所有name属性以'news'开头的input元素，并将其选中 //$("input[name^='news']").attr("checked","checked"); //5)查找所有name属性以'letter'结尾的input元素，并将其选中 //$("input[name$='letter']").attr("checked","checked"); //6)查找所有name属性包含'news'的input元素，并将其选中 //$("input[name*='news']").attr("checked","checked"); //7)找到所有含有id属性，并且它的name属性是以"letter"结尾的input元素，并将其选中 $("input[id][name$='letter']").attr("checked","true"); </script> </body> </html>
（7）（每组中父标签的子标签）子元素选择器
下面这种方式取第几个，索引从1开始，不像eq()是从0开始的
/*1)迭代[each]每个ul中第1个li元素中的内容,索引从1开始 $("ul li:first-child").each(function(){ alert( $(this).text() ); }); */ /*2)迭代每个ul中最后1个li元素中的内容,索引从1开始 $("ul li:last-child").each(function(){ alert( $(this).text() ); }); */ /*4)迭代每个ul中第2个li元素中的内容,索引从1开始 $("ul li:nth-child(2)").each(function(){ alert( $(this).text() ); });*/ //3)在ul中查找是唯一子元素的li元素的内容 $("ul li:only-child").each(function(){ alert( $(this).text() ); });
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <ul> <li>John</li> <li>Karl</li> <li>Brandon</li> </ul> <ul> <li>Glen</li> <li>Tane</li> <li>Ralph</li> </ul> <ul> <li>Marry</li> </ul> <ul> <li>Jack</li> </ul> <script type="text/javascript"> /*1)迭代[each]每个ul中第1个li元素中的内容,索引从1开始 $("ul li:first-child").each(function(){ alert( $(this).text() ); }); */ /*2)迭代每个ul中最后1个li元素中的内容,索引从1开始 $("ul li:last-child").each(function(){ alert( $(this).text() ); }); */ /*4)迭代每个ul中第2个li元素中的内容,索引从1开始 $("ul li:nth-child(2)").each(function(){ alert( $(this).text() ); });*/ //3)在ul中查找是唯一子元素的li元素的内容 $("ul li:only-child").each(function(){ alert( $(this).text() ); }); </script> </body> </html>
（8）表单选择器
//1)查找所有input元素的个数 //alert( $("input").size() );//10，找input标签 //alert( $(":input").size() );//13，找input标签和select/textarea/button //2)查找所有文本框的个数 //alert( $(":text").size() ); //3)查找所有密码框的个数 //alert( $(":password").size() ); //4)查找所有单选按钮的个数 //alert( $(":radio").size() ); //5)查找所有复选框的个数 //alert( $(":checkbox").size() ); //6)查找所有提交按钮的个数 //alert( $(":submit").size() ); //7)匹配所有图像域的个数 //alert( $(":images").size() ); //8)查找所有重置按钮的个数 //alert( $(":reset").size() ); //9)查找所有普通按钮的个数 //alert( $(":button").size() ); //10)查找所有文件域的个数 //alert( $(":file").size() ); //11)查找所有input元素为隐藏域的个数 //alert( $(":input:hidden").size() );
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <form> <input type="button" value="Input Button"/><br/> <input type="checkbox" /><br/> <input type="file" /><br/> <input type="hidden" name="id" value="123"/><br/> <input type="image" src="../images/lb.jpg" width="25px" height="25px"/><br/> <input type="password" /><br/> <input type="radio" /><br/> <input type="reset" /><br/> <input type="submit" /><br/> <input type="text" /><br/> <select><option>Option</option></select><br/> <textarea></textarea><br/> <button>Button</button><br/> </form> <script type="text/javascript"> //1)查找所有input元素的个数 //alert( $("input").size() );//10，找input标签 //alert( $(":input").size() );//13，找input标签和select/textarea/button //2)查找所有文本框的个数 //alert( $(":text").size() ); //3)查找所有密码框的个数 //alert( $(":password").size() ); //4)查找所有单选按钮的个数 //alert( $(":radio").size() ); //5)查找所有复选框的个数 //alert( $(":checkbox").size() ); //6)查找所有提交按钮的个数 //alert( $(":submit").size() ); //7)匹配所有图像域的个数 //alert( $(":images").size() ); //8)查找所有重置按钮的个数 //alert( $(":reset").size() ); //9)查找所有普通按钮的个数 //alert( $(":button").size() ); //10)查找所有文件域的个数 //alert( $(":file").size() ); //11)查找所有input元素为隐藏域的个数 //alert( $(":input:hidden").size() ); </script> </body> </html>
（9）表单对象属性选择器
//1)查找所有可用的input元素的个数 //alert( $("input:enabled").size() ); //2)查找所有不可用的input元素的个数 //alert( $("input:disabled").size() ); //3)查找所有选中的复选框元素的个数 //alert( $(":checkbox:checked").size() ); //4)查找所有未选中的复选框元素的个数 //alert( $(":checkbox:NOT(:checked)").size() ); //5)查找所有选中的选项元素的个数 //alert( $("select option:selected").size() ); alert( $("#provinceID option:NOT(:selected)").size() );
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <form> <input type="text" name="email" disabled="disabled" /> <input type="text" name="password" disabled="disabled" /> <input type="text" 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" /> <select id="provinceID"> <option value="1">广东</option> <option value="2" selected="selected">湖南</option> <option value="3">湖北</option> </select> </form> <script type="text/javascript"> //1)查找所有可用的input元素的个数 //alert( $("input:enabled").size() ); //2)查找所有不可用的input元素的个数 //alert( $("input:disabled").size() ); //3)查找所有选中的复选框元素的个数 //alert( $(":checkbox:checked").size() ); //4)查找所有未选中的复选框元素的个数 //alert( $(":checkbox:NOT(:checked)").size() ); //5)查找所有选中的选项元素的个数 //alert( $("select option:selected").size() ); alert( $("#provinceID option:NOT(:selected)").size() ); </script> </body> </html>
注意：项目中，通常是多种选择器一起使用
实例：弹出表格偶数行（0，2行）中每个表格的字段
多种方式实现：
--find("9类选择器")：查询指定的节点和多重each()迭代
//使用jquery弹出奇数的tr标签下的td里的值 var $tr = $("table tr:lt(4):even"); $tr.each(function(){ //tr中查找td标签,$(this)表示tr var $td = $(this).find("td"); $td.each(function(){ //$(this)表示td var txt = $(this).text(); alert(txt); }); });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> <script type="text/javascript"> function myclick(){ //使用jquery弹出奇数的tr标签下的td里的值，即A1,A2,A3,C1,C2,C3 var $tr = $("table tr:NOT(:last):even"); //在每个tr标签中查询td标签 $tr.each(function(){ //在tr标签中查询所有的td标签 var $td = $(this).find("td"); //迭代 $td.each(function(){ var content = $(this).text(); alert(content); }); }); } //写出另一种方式，比第一种更加easy </script> </head> <body> <table border="2" align="center" width="30%"> <tr> <td>A1</td><td>A2</td><td>A3</td><td>0</td> </tr> <tr> <td>B1</td><td>B2</td><td>B3</td><td>1</td> </tr> <tr> <td>C1</td><td>C2</td><td>C3</td><td>2</td> </tr> <tr> <td>D1</td><td>D2</td><td>D3</td><td>3</td> </tr> <tr> <td colspan="3" align="center"> <input type="button" value=" 测 试 " onclick="myclick()" /> </td> <td>4</td> </tr> </table> </body> </html>
//写出另一种方式，比第一种更加easy function myclick(){ var $td = $("table tr:NOT(:last):even td"); $td.each(function(){ alert($(this).html()); }); }
多个实例：
1.在多个相同标签上添加事件
//1.定位3个p标签 $("p").click( function(){ alert( $(this).text() ); } )
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>exe_1.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <p>段落1</p> <p>段落2</p> <p>段落3</p> <script type="text/javascript"> //定位3个p标签 $("p").click( function(){ alert( $(this).text() ); } ) </script> </body> </html>
2.将奇偶行设置不同颜色
//NO1)将索引号为奇数的行背景色设为蓝色 $("table tr:odd").css("background-color","blue"); //NO2)将索引号为偶数的行背景色设为黄色 $("table tr:even").css("background-color","yellow"); //NO3)将第一行背景色设为粉色 $("table tr:first").css("background-color","pink");
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>exe_2.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <form> <table border="1" align="center" width="70%"> <tr> <th>用户名</th> <th>密码</th> <th>0</th> </tr> <tr> <td>张三</td> <td>123456</td> <th>1</th> </tr> <tr> <td>李四</td> <td>654321</td> <th>2</th> </tr> <tr> <td>王五</td> <td>162534</td> <th>3</th> </tr> </table> </form> <script type="text/javascript"> //NO1)将索引号为奇数的行背景色设为蓝色 $("table tr:odd").css("background-color","blue"); //NO2)将索引号为偶数的行背景色设为黄色 $("table tr:even").css("background-color","yellow"); //NO3)将第一行背景色设为粉色 $("table tr:first").css("background-color","pink"); </script> </body> </html>
3.获取多选中选中的值
//定位"选中的个数"按钮，同时添加单击事件 $(":button:first").click( function(){ //获取选中的复选框个数 var size = $(":checkbox:checked").size(); //判断 if(size == 0){ alert("这家伙太赖了"); }else{ alert("你选中了"+size+"个项目"); } } ); //定位"依次显示选中的value"按钮，同时添加单击事件 $(":button:last").click( function(){ //获取选中的复选框 var $checkbox = $(":checkbox:checked"); //迭代所有选中的复选框的value属性值 $checkbox.each(function(){ //alert( $(this).val() );//提倡 alert( this.value );//不提倡 }); } );
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>exe_3.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <input type="checkbox" value="篮球"/>篮球 <input type="checkbox" value="排球"/>排球 <input type="checkbox" value="羽毛球"/>羽毛球 <input type="checkbox" value="乒乓球"/>乒乓球 <input type="button" value="选中的个数"/> <input type="button" value="依次显示选中的value"/> <script type="text/javascript"> //定位"选中的个数"按钮，同时添加单击事件 $(":button:first").click( function(){ //获取选中的复选框个数 var size = $(":checkbox:checked").size(); //判断 if(size == 0){ alert("这家伙太赖了"); }else{ alert("你选中了"+size+"个项目"); } } ); //定位"依次显示选中的value"按钮，同时添加单击事件 $(":button:last").click( function(){ //获取选中的复选框 var $checkbox = $(":checkbox:checked"); //迭代所有选中的复选框的value属性值 $checkbox.each(function(){ //alert( $(this).val() );//提倡 alert( this.value );//不提倡 }); } ); </script> </body> </html>
4.将左边列表选择移动到右边列表
//双击右移 //定位左边的下拉框，同时添加双击事件 $("#leftID").dblclick(function(){ //获取双击时选中的option标签 var $option = $("#leftID option:selected"); //将选中的option标签移动到右边的下拉框中 $("#rightID").append( $option ); }); //批量右移 //定位批量右移按钮，同时添加单击事件 $("#rightMoveID").click(function(){ //获取左边下拉框中选中的option标签 var $option = $("#leftID option:selected"); //将选中的option标签移动到右边的下拉框中 $("#rightID").append( $option ); }); //全部右移 //定位全部右移按钮，同时添加单击事件 $("#rightMoveAllID").click(function(){ //获取左边下拉框中所有的option标签 var $option = $("#leftID option"); //将选中的option标签移动到右边的下拉框中 $("#rightID").append( $option ); });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <div> <select style="width:60px" multiple size="10" id="leftID"> <option>选项A</option> <option>选项B</option> <option>选项C</option> <option>选项D</option> <option>选项E</option> <option>选项F</option> <option>选项G</option> <option>选项H</option> <option>选项I</option> <option>选项J</option> </select> </div> <div style="position:absolute;left:100px;top:60px"> <input type="button" value="批量右移" id="rightMoveID"/> </div> <div style="position:absolute;left:100px;top:90px"> <input type="button" value="全部右移" id="rightMoveAllID"/> </div> <div style="position:absolute;left:220px;top:20px"> <select multiple size="10" style="width:60px" id="rightID"> </select> </div> </body> <script type="text/javascript"> //双击右移 //定位左边的下拉框，同时添加双击事件 $("#leftID").dblclick(function(){ //获取双击时选中的option标签 var $option = $("#leftID option:selected"); //将选中的option标签移动到右边的下拉框中 $("#rightID").append( $option ); }); //批量右移 //定位批量右移按钮，同时添加单击事件 $("#rightMoveID").click(function(){ //获取左边下拉框中选中的option标签 var $option = $("#leftID option:selected"); //将选中的option标签移动到右边的下拉框中 $("#rightID").append( $option ); }); //全部右移 //定位全部右移按钮，同时添加单击事件 $("#rightMoveAllID").click(function(){ //获取左边下拉框中所有的option标签 var $option = $("#leftID option"); //将选中的option标签移动到右边的下拉框中 $("#rightID").append( $option ); }); </script> </html>
5.添加删除标签：
//定位"增加"按钮，同时添加单击事件 $("#addID").click(function(){ //获取用户名和密码的值 var username = $("#usernameID").val(); var password = $("#passwordID").val(); //去掉二边的空格 username = $.trim(username); password = $.trim(password); //如果用户名或密码没有填 if(username.length == 0 || password.length == 0){ //提示用户 alert("用户名或密码没有填"); }else{ //创建1个tr标签 var $tr = $("<tr></tr>"); //创建3个td标签 var $td1 = $("<td>"+username+"</td>"); var $td2 = $("<td>"+password+"</td>"); var $td3 = $("<td></td>"); //创建input标签，设置为删除按钮 var $del = $("<input type='button' value='删除'>"); //为删除按钮动态添加单击事件 $del.click(function(){ //删除按钮所有的行，即$tr对象 $tr.remove(); }); //将删除按钮添加到td3标签中 $td3.append($del); //将3个td标签依次添加到tr标签中 $tr.append($td1); $tr.append($td2); $tr.append($td3); //将tr标签添加到tbody标签中 $("#tbodyID").append($tr); //清空用户名和密码文本框中的内容 $("#usernameID").val(""); $("#passwordID").val(""); }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <table id="tableID" border="1" align="center" width="60%"> <thead> <tr> <th>用户名</th> <th>密码</th> <th>操作</th> </tr> </thead> <tbody id="tbodyID"> <!-- 动态增加行 <tr> <td>哈哈</td> <td>123</td> <td><input type="button" value="删除" onclick=""/></td> </tr> --> </tbody> </table> <hr/> 用户名：<input type="text" id="usernameID"/> 密码： <input type="text" id="passwordID"/> <input type="button" value="增加" id="addID"/> </body> <script type="text/javascript"> //定位"增加"按钮，同时添加单击事件 $("#addID").click(function(){ //获取用户名和密码的值 var username = $("#usernameID").val(); var password = $("#passwordID").val(); //去掉二边的空格 username = $.trim(username); password = $.trim(password); //如果用户名或密码没有填 if(username.length == 0 || password.length == 0){ //提示用户 alert("用户名或密码没有填"); }else{ //创建1个tr标签 var $tr = $("<tr></tr>"); //创建3个td标签 var $td1 = $("<td>"+username+"</td>"); var $td2 = $("<td>"+password+"</td>"); var $td3 = $("<td></td>"); //创建input标签，设置为删除按钮 var $del = $("<input type='button' value='删除'>"); //为删除按钮动态添加单击事件 $del.click(function(){ //删除按钮所有的行，即$tr对象 $tr.remove(); }); //将删除按钮添加到td3标签中 $td3.append($del); //将3个td标签依次添加到tr标签中 $tr.append($td1); $tr.append($td2); $tr.append($td3); //将tr标签添加到tbody标签中 $("#tbodyID").append($tr); //清空用户名和密码文本框中的内容 $("#usernameID").val(""); $("#passwordID").val(""); } }); </script> </html>
6.多选，全选，反选
//全选中和全取消 //定位tfoot中的全选复选框，同时添加单击事件 $("tfoot input:checkbox").click(function(){ //获取该全选复选框的状态 var flag = this.checked; //如果选中 if(flag){ //将tbody中的所有复选框选中 $("tbody input:checkbox").attr("checked","checked"); //如果未选中 }else{ //将tbody中的所有复选框取消 $("tbody input:checkbox").removeAttr("checked"); } });
//全反选 //定位tfoot标签中的全反选按钮，同时添加单击事件 $("tfoot input:button").click(function(){ //将tbody标签中的所有选中的复选框失效 $("tbody input:checkbox:checked").attr("disabled","disabled"); //将tbody标签中的所有生效的复选框选中 $("tbody input:checkbox:enabled").attr("checked","checked"); //将tbody标签中的所有生效的复选框生效且设置为未选中 $("tbody input:checkbox:disabled").removeAttr("disabled").removeAttr("checked"); });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <table border="1" align="center"> <thead> <tr> <th>状态</th> <th>用户名</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" /></td> <td>赵</td> </tr> <tr> <td><input type="checkbox" /></td> <td>钱</td> </tr> <tr> <td><input type="checkbox" /></td> <td>孙</td> </tr> <tr> <td><input type="checkbox" /></td> <td>李</td> </tr> <tr> <td><input type="checkbox" /></td> <td>周</td> </tr> </tbody> <tfoot> <tr> <td> <input type="checkbox" /> 全选 </td> <td> <input type="button" value="全反选" /> </td> </tr> </tfoot> </table> <script type="text/javascript"> //全选中和全取消 //定位tfoot中的全选复选框，同时添加单击事件 $("tfoot input:checkbox").click(function(){ //获取该全选复选框的状态 var flag = this.checked; //如果选中 if(flag){ //将tbody中的所有复选框选中 $("tbody input:checkbox").attr("checked","checked"); //如果未选中 }else{ //将tbody中的所有复选框取消 $("tbody input:checkbox").removeAttr("checked"); } }); </script> <script type="text/javascript"> //全反选 //定位tfoot标签中的全反选按钮，同时添加单击事件 $("tfoot input:button").click(function(){ //将tbody标签中的所有选中的复选框失效 $("tbody input:checkbox:checked").attr("disabled","disabled"); //将tbody标签中的所有生效的复选框选中 $("tbody input:checkbox:enabled").attr("checked","checked"); //将tbody标签中的所有生效的复选框生效且设置为未选中 $("tbody input:checkbox:disabled").removeAttr("disabled").removeAttr("checked"); }); </script> </body> </html>
7.文本框的输入提示
<script type="text/javascript">
//当浏览器加载web页面时
$(function(){
//将文本框中的文本样式改变
$(":text").addClass("myClass");
});
</script>
<script type="text/javascript">
//当光标定位文本框时
$(":text").focus(function(){
//清空文本框中的内容
$(this).val("");
//删除文本框的样式
$(this).removeClass("myClass");
});
</script>
<script type="text/javascript">
//当文本框失去焦点时
$(":text").blur(function(){
//获取文本框中填入的内容
var content = $(this).val();
//去二边的空格
content = $.trim(content);
//如果没填了内容
if(content.length == 0){
//在文本框显示提示信息
$(":text").val("输入用户名");
//设置文本框中文本的样式
$(":text").addClass("myClass");
}
});
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> .myClass{ color:inactivecaption } </style> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <table border="1" align="center"> <tr> <th>用户名</th> <td> <input type="text" value="输入用户名"/> </td> </tr> </table> <script type="text/javascript"> //当浏览器加载web页面时 $(function(){ //将文本框中的文本样式改变 $(":text").addClass("myClass"); }); </script> <script type="text/javascript"> //当光标定位文本框时 $(":text").focus(function(){ //清空文本框中的内容 $(this).val(""); //删除文本框的样式 $(this).removeClass("myClass"); }); </script> <script type="text/javascript"> //当文本框失去焦点时 $(":text").blur(function(){ //获取文本框中填入的内容 var content = $(this).val(); //去二边的空格 content = $.trim(content); //如果没填了内容 if(content.length == 0){ //在文本框显示提示信息 $(":text").val("输入用户名"); //设置文本框中文本的样式 $(":text").addClass("myClass"); } }); </script>
补充：
将html文件直接拖到浏览器，如果引用的资源采用绝对地址会找不到（实际找的绝对路径是资源在磁盘所在路径），比如：
：（找不到）
需要使用tomcat服务器下运行才不会有问题。但是采用相对路径，html直接拖到浏览器查找就会没问题
jQuery中常用方法
目的：通过方法，能操作web页面（HTML/JSP）中的任何标签
（1）val()：获取标签的value属性值，前提是该标签有value属性 （2）html()：获取标签之间的内容，不能用运于xml文件 （3）text()：获取标签之间的内容，可以用运于html/jsp和xml文件，(提倡) （4）css()：加key-value形成的css样式 （5）addClass()：加已经定义好的一个css样式 （6）size()：获取jQuery对象/数组中元素的个数，提倡 （7）length：获取jQuery对象/数组中元素的个数
注意：在写jQuery代码时，不光可以使用jQuery的API，还能使用传统JS的API
jQuery常用Method-API
目的：对web页面（HTML/JSP/XML）中的任何标签，属性，内容进行增删改查
（1）DOM简述与分类
（A）DOM是一种W3C官方标准规则，可访问任何标签语言的页面(HTML/JSP/XML)
（B）DOM是跨平台(window/linux/unix)，跨语言(javascript/java)，跨浏览器(ie/firefox/Chrome)的标准规则
（C）我们只需要按照DOM标准规则，针对主流浏览器(ie/firefox/Chrome)编程
（D）JS/jQuery按照DOM的标准规则，既可以操作HTML/JSP，也能操作CSS
（E）DOM标准规则不是JS的专属，其它语言，也能适用，例如:VBScript，Java语言等
（2）DOM标准规则下的jQuery常用API，注意：以下方法均由jQuery对象调用
each()：是jQuery中专用于迭代数组的方法，参数为一个处理函数，this表示当前需要迭代的js对象
<script type="text/javascript">
/*用JS语法创建一个一维数组，存入string类型的姓名，再迭代
var nameArray = new Array("哈哈","呵呵","嘻嘻");
for(var i=0;i<nameArray.length;i++){
document.write(nameArray[i]+"<br/>");
}*/
/*用JSON语法创建一个一维数组，存入string类型的姓名，再迭代
var nameArray = ["哈哈","呵呵","嘻嘻","都都"];//js对象
var $nameArray = $(nameArray);//jquery对象
$nameArray.each(function(){
this表示数组中每一个元素，this属性js对象，this代表string类型
alert(this);
});*/
//用JSON语法创建一个一维数组，存入object类型的姓名和薪水，再迭代
var nameArray = [
{
name : "哈哈",
sal : 6000
},
{
name : "嘿嘿",
sal : 7000
},
{
name : "笨笨",
sal : 8000
}
];
var $nameArray = $(nameArray);
$nameArray.each(function(){
//this代表object类型
alert(this.name + ":"+this.sal);
});
</script>
append()：追加到父元素之后（相对于将标签进行移动）
prepend()：追加到父元素之前
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>method_1.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
<hr/>
<div>这是子元素，要插入到父元素内</div>
<script type="text/javascript">
//DIV标签插入到UL标签之后(父子关系)
//$("ul").append( $("div") );
//DIV标签插入到UL标签之前(父子关系)
$("ul").prepend( $("div") );
</script>
</body>
</html>
after()：追加到兄弟元素之后
before()：追加到兄弟元素之前
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>method_1.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul> <hr/> <div>这是子元素，要插入到父元素外</div> <script type="text/javascript"> //DIV标签插入到UL标签之后(兄弟关系) //$("ul").after( $("div") ); //DIV标签插入到UL标签之前(兄弟关系) $("ul").before( $("div") ); </script> </body> </html>
attr(name)：获取属性值
attr(name,value)：给符合条件的标签添加key-value属性对
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>method_1.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <form> <table> <tr> <td> <input type="text" name="username" value="张三"/> </td> <td> <input type="password" name="password" value="123456"/> </td> </tr> </table> </form> <script type="text/javascript"> //取得form里第一个input元素的type属性 //alert( $("form input:first").attr("type") ); //设置form里最后个input元素的为只读文本框 //$("form input:last").attr("readonly","readonly") //$(":password").attr("readonly","readonly") </script> </body> </html>
$("<div id='xxID'>HTML代码</div>")：创建元素，属性，文本
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>method_1.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <script type="text/javascript"> //创建div元素，添加"哈哈"文本，ID属性，并添加到文档中 //<body><div id="2015">哈哈</div></body> /*js方式 var divElement = document.createElement("div"); divElement.innerHTML = "哈哈哈"; divElement.setAttribute("id","2015"); divElement.id = "2015"; document.body.appendChild(divElement);*/ //jquery方式 var $div = $("<div id='2015'>哈哈哈哈哈</div>"); //$("body").append( $div ); $(document.body).append( $div ); </script> </body> </html>
remove()：删除自已及其后代节点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>method_1.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <ul id="a"> <li>第一项</li> <li id="secondID">第二项</li> <li>第三项</li> </ul> <ul id="b"> <li>第一条</li> <li id="secondID">第二条</li> <li>第三条</li> </ul> <div>这是div元素</div> <script type="text/javascript"> //删除ID为secondID的LI元素 //$("#secondID").remove(); //删除所有LI元素 //$("#a li").remove(); //删除UL元素 $("#b").remove(); </script> </body> </html>
val()：获取value属性的值
val("")：设置value属性值为""空串，相当于清空
text()：获取HTML或XML标签之间的值
text("")：设置HTML或XML标签之间的值为""空串
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <div> 哈哈 </div> <select id="city"> <option value="地都">北京</option> </select> <script type="text/javascript"> //取得<div>中的内容 //alert( $("div").text() ); //取得<option>的值和描述 var $option = $("#city option"); var value = $option.val(); var html = $option.text(); alert(value + ":" + html); </script> </body> </html>
clone()：只复制样式，不复制行为（静态事件是会被复制的）
clone(true)：既复制样式，又复制行为（动态事件也被复制）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>method_1.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <input type="button" value="原按钮" onclick="alert('静态事件')"/> <script type="text/javascript"> //复制原input元素，添加到原input元素后，与其同级 var $old = $(":button"); var $new = $old.clone(); $new.val("新按钮"); $old.after( $new ); //为原input元素动态添加单击事件，且复制原input元素， //var $old = $(":button"); //$old.click(function(){ // alert("动态事件"); //}); //添加到原input元素后，与其同级，且和原按钮有一样的行为 //var $new = $old.clone(true); //$new.val("新按钮"); //$old.after( $new ); </script> </body> </html>
replaceWith()：替代原来的节点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>method_1.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <table border="1" align="center"> <tr> <td> <div style="width:165px;height:23px"> 双击会被替换成文本框 </div> </td> <td> 不会变 </td> </tr> </table> <script type="text/javascript"> //双击<div>中的文本，用文本框替换文本 $("div").dblclick( function(){ var $text = $("<input type='text' style='width:165px;height:23px'/>"); //文本框替代div标签 $(this).replaceWith( $text ); } ); </script> </body> </html>
removeAttr()：删除已存在的属性
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>method_1.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <table> <tr> <td> 添加属性border/align/width </td> <td> 删除属性align </td> </tr> </table> <script type="text/javascript"> //为<table>元素添加属性border/align/width var $table = $("table").attr("border","2").attr("align","right").attr("width","60%") //将<table>元素的align属性删除 $table.removeAttr("align"); </script> </body> </html>
addClass()：增加已存在的样式
removeClass()：删除已存在的样式
hasClass()：判断标签是否有指定的样式，true表示有样式，false表示无样式
toggleClass()：如果标签有样式就删除，否则增加样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>method_1.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <style type="text/css"> .myClass{ font-size:30px; color:red } </style> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <div>无样式</div> <div class="myClass">有样式</div> <script type="text/javascript"> //为无样式的DIV添加样式 //$("div:first").addClass("myClass"); //为有样式的DIV删除样式 //$("div:last").removeClass("myClass"); //切换样式，即有样式的变成无样式，无样式的变成有样式 //$("div").toggleClass("myClass"); //最后一个DIV是否有样式 var flag = $("div:last").hasClass("myClass"); alert(flag?"有样式":"无样式"); </script> </body> </html>
offset()：获取对象的left和top坐标
offset({top:100,left:200})：将对象直接定位到指定的left和top坐标
width()：获取对象的宽
width(300)：设置对象的宽
height()：获取对象的高
height(500)：设置对象的高
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <img src="../images/zgl.jpg"/> <script type="text/javascript"> //获取图片的坐标 //var offset = $("img").offset(); //var x = offset.left; //var y = offset.top; //alert(x+":"+y); //设置图片的坐标 //$("img").offset({ // top:100, // left:200 //}); //获取图片的宽高 //var w = $("img").width(); //var h = $("img").height(); //alert(w+":"+h); //设置图片的宽高 $("img").width(500); $("img").height(600); </script> </body> </html>
children()：只查询子节点，不含后代节点
next()：下一下兄弟节点
prev()：上一下兄弟节点
siblings()：上下兄弟节点（带参数表示具体哪个兄弟）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>method_1.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <p>Hello</p> <div> <span> Hello Again <b> Bold </b> </span> </div> <p>And Again</p> <span>And Span</span> <script type="text/javascript"> //取得div元素的直接子元素内容，不含后代元素 //var $span = $("div").children(); //var content = $span.html();//包含子标签 //var content = $span.text();//不包含子标签 //alert(content); //取得div元素的下一个同级的兄弟元素内容 //var $p = $("div").next(); //alert( $p.text() ); //取得div元素的上一个同级的兄弟元素内容 //alert( $("div").prev().text() ); //依次取得div元素的上下一个同级的所有兄弟元素的内容 var $all = $("div").siblings("p"); $all.each(function(){ alert( $(this).html() ); }); </script> </body> </html>
show()：显示对象
hide()：隐藏对象（加参数时间，会慢慢变小消失
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <p> <img src="../images/zgl.jpg"/> </p> <script type="text/javascript"> //图片隐蔽 $("img").hide(5000); //休息3秒 window.setTimeout(function(){ //图片显示 $("img").show(5000); },3000); </script> </body> </html>
fadeIn()：淡入显示对象
fadeOut()：淡出隐藏对象
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <p> <img src="../images/zgl.jpg" style="display:none"/> </p> <script type="text/javascript"> //淡入显示图片 $("img").fadeIn(3000); //淡出隐蔽图片 $("img").fadeOut(3000); </script> </body> </html>
slideUp()：向上滑动（收缩消失）
slideDown()：向下滑动（下拉恢复）
slideToggle()：上下切换滑动，速度快点（慢的话，可能会恢复闪一下）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <div> 中国0<br/> 中国1<br/> 中国2<br/> 中国3<br/> 中国4<br/> 中国5<br/> 中国6<br/> 中国7<br/> 中国8<br/> 中国9<br/> </div> <input type="button" value="我的好友"/> <script type="text/javascript"> //向上下滑动 $(":button").click(function(){ //div标标上下移动 $("div").slideToggle(100); }); </script> </body> </html>
jQuery常用Event-API
目的：对web页面（HTML/JSP）进行事件触发，完成特殊效果的处理
window.onload：在浏览器加载web页面时触发，可以写多次onload事件，但后者覆盖前者
ready：在浏览器加载web页面时触发，可以写多次ready事件，不会后者覆盖前者，
依次从上向下执行，我们常用$(函数)简化
ready和onload同时存在时，二者都会触发执行，ready快于onload（readdy会在图片/多媒体未加载完的时候执行）
（补充：页面加载触发事件 document.ready和window.onload的区别）
$(document).ready(function(){ //do something }) //或者下面这个方法，jQuer的默认参数是：“document”； $().ready(function(){ //do something }) //最简写 $(function(){ alert("现代"); });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>ready.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <script type="text/javascript"> //定义a()和b()二个方法 function a(){ alert("JS方式"); } function b(){ alert("JQUERY方式"); } /*使用JS方式加载a()和b()二个方法 window.onload = function(){ a(); } window.onload = function(){ b(); } */ /*使用jQuery方式加载a()和b()二个方法 $(document).ready(function(){ a(); }); $(document).ready(function(){ b(); }); */ /*使用jQuery最简方式加载a()和b()二个方法 $(function(){ a(); }); $(function(){ b(); }); */ //将js方式的onload与jquery方式的ready对比，看哪个执行快 window.onload = function(){ alert("3传统"); } $(function(){ alert("2现代"); }); function a(){ alert("1最先"); } a(); </script> </body> </html>
补充：执行js的执行顺序：
//最后执行 window.onload = function(){ alert("3传统"); } //第二个执行 $(function(){ alert("2现代"); }); //最先执行 function a(){ alert("1最先"); } a();
change：当内容改变时触发
<select id="city">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="gz">广州</option>
</select>
<script type="text/javascript">
//当<select>标签触发onchange事件,显示选中<option>的value和innerHTML属性的值
$("#city").change( function(){
var $option = $("#city option:selected");
var value = $option.val();
var text = $option.text();
alert(value+":"+text);
} );
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>ready.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <select id="city"> <option value="bj">北京</option> <option value="sh">上海</option> <option value="gz">广州</option> </select> <script type="text/javascript"> //当<select>标签触发onchange事件,显示选中<option>的value和innerHTML属性的值 $("#city").change( function(){ var $option = $("#city option:selected"); var value = $option.val(); var text = $option.text(); alert(value+":"+text); } ); </script> </body> </html>
focus：焦点获取
select：选中所有的文本值
//加载页面时获取光标并选中所有文字 $(function(){ //光标定位文本框 $(":text").focus(); //选中文本框的所有文本 $(":text").select(); });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>focus.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <input type="text" value="加载页面时获取光标并选中所有文字" size="50"/> <script type="text/javascript"> //加载页面时获取光标并选中所有文字 $(function(){ //光标定位文本框 $(":text").focus(); //选中文本框的所有文本 $(":text").select(); }); </script> </body> </html>
keyup/keydown/keypress：演示在IE和Firefox中获取event对象的不同（键盘鼠标事件时，浏览器会自动创建事件对象，可以获取鼠标位置和键盘值）
//当按键弹起时，显示所按键的unicode码 $(function(){ //IE浏览器会自动创建event这个事件对象，那么程序员可以根据需要来使用该event对象 $(document).keyup(function(){ //获取按钮的unicode编码 var code = event.keyCode; alert(code); }); });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>focus.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <script type="text/javascript"> //当按键弹起时，显示所按键的unicode码 $(function(){ //IE浏览器会自动创建event这个事件对象，那么程序员可以根据需要来使用该event对象 $(document).keyup(function(){ //获取按钮的unicode编码 var code = event.keyCode; alert(code); }); }); </script> </body> </html>
mousemove：在指定区域中不断移动触发
//显示鼠标移动时的X和Y座标 $(function(){ $(document).mousemove(function(){ var x = event.clientX; var y = event.clientY; $("#xID").val(x); $("#yID").val(y); }); });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>focus.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> X=<input type="text" id="xID"/> <br/> Y=<input type="text" id="yID"/> <script type="text/javascript"> //显示鼠标移动时的X和Y座标 $(function(){ $(document).mousemove(function(){ var x = event.clientX; var y = event.clientY; $("#xID").val(x); $("#yID").val(y); }); }); </script> </body> </html>
mouseover：鼠标移入时触发
mouseout：鼠标移出时触发
//鼠标移到某行上，某行背景变色 $("table tr").mouseover(function(){ $(this).css("background-color","inactivecaption"); }); //鼠标移出某行，某行还原 $("table tr").mouseout(function(){ $(this).css("background-color","white"); }); //鼠标移到某图片上，为图片加边框 $("img").mouseover(function(){ $(this).css("border-color","red"); }); //鼠标移出图片，图片还原 $("img").mouseout(function(){ $(this).css("border-color","white"); });
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>focus.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <table border="2" align="center" width="80%" id="tableID"> <tr> <td>张三</td> <td>男</td> <td>22</td> </tr> <tr> <td>李四</td> <td>男</td> <td>24</td> </tr> <tr> <td>王五</td> <td>男</td> <td>26</td> </tr> <tr> <td>周六</td> <td>男</td> <td>28</td> </tr> </table> <hr/> <img height="120px" src="../images/zgl.jpg" style="position:absolute;left:30%;border-style:dashed;border-color:white"/> <img height="120px" src="../images/lb.jpg" style="position:absolute;left:60%;border-style:dashed;border-color:white"/> <script type="text/javascript"> //鼠标移到某行上，某行背景变色 $("table tr").mouseover(function(){ $(this).css("background-color","inactivecaption"); }); //鼠标移出某行，某行还原 $("table tr").mouseout(function(){ $(this).css("background-color","white"); }); //鼠标移到某图片上，为图片加边框 $("img").mouseover(function(){ $(this).css("border-color","red"); }); //鼠标移出图片，图片还原 $("img").mouseout(function(){ $(this).css("border-color","white"); }); </script> </body> </html>
submit：在提交表单时触发，true表示提交到后台，false表示不提交到后台
<script type="text/javascript">
//浏览器加载web页面时触发
$(function(){
//将光标定位于文本框中
$(":text").focus();
});
</script>
<script type="text/javascript">
//检测是否为中文，true表示是中文，false表示非中文
function isChinese(str){
if(/^[\u3220-\uFA29]+$/.test(str)){
return true;
}else{
return false;
}
}
</script>
<script type="text/javascript">
//当表单提交前检测
$("form").submit(function(){
var flag = false;
//获取文本框的中内容
var name = $(":text").val();
//去二边的空格
name = $.trim(name);
//如果没有填内容
if(name.length == 0){
alert("用户名必填");
//将光标定位于文本框中
$(":text").focus();
//清空文本框中的内容
$(":text").val("");
}else{
//调用方法
flag = isChinese(name);
//如果不是中文
if(!flag){
alert("用户名必须填中文");
//将光标定位于文本框中
$(":text").focus();
//清空文本框中的内容
$(":text").val("");
}
}
return flag;
});
</script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>ready.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> </head> <body> <form action="06_mouseover_mouseout.html" method="post"> 用户名：<input type="text"/> <input type="submit" value="表单提交"/> </form> <script type="text/javascript"> //浏览器加载web页面时触发 $(function(){ //将光标定位于文本框中 $(":text").focus(); }); </script> <script type="text/javascript"> //检测是否为中文，true表示是中文，false表示非中文 function isChinese(str){ if(/^[\u3220-\uFA29]+$/.test(str)){ return true; }else{ return false; } } </script> <script type="text/javascript"> //当表单提交前检测 $("form").submit(function(){ var flag = false; //获取文本框的中内容 var name = $(":text").val(); //去二边的空格 name = $.trim(name); //如果没有填内容 if(name.length == 0){ alert("用户名必填"); //将光标定位于文本框中 $(":text").focus(); //清空文本框中的内容 $(":text").val(""); }else{ //调用方法 flag = isChinese(name); //如果不是中文 if(!flag){ alert("用户名必须填中文"); //将光标定位于文本框中 $(":text").focus(); //清空文本框中的内容 $(":text").val(""); } } return flag; }); </script> </body> </html>
click：单击触发
dblclick：双击触发
blur：焦点失去
在上面的例子中已经有过了
浙公网安备 33010602011771号