jQuery DOM操作与简单事件
1.1 DOM查询
- 过滤
- eq(index|-index) 选出索引为index 的元素（0开始） ,负号表示可以倒着选（-1开）
- first() 选出第一个元素
- last() 选出最后一个元素
- hasClass(class) 是否含有class值
- filter(expr|obj|ele|fn) 按照表达式过滤
- is(expr|obj|ele|fn)1.6* 是否满足表达式
- has(expr|ele) 是否含有表达式的元素
- not(expr|ele|fn) 判断一个元素是不是符合表达式
- slice(start,[end]) 表示从start开始选择直到end,只传递一个start表示从start开始直至结束
- 查找
- children([expr]) 查找所有子元素，传入表达式，表示满足表达式的子元素
- closest(expr,[con]|obj|ele)1.6* 表示查找和当前元素最接近的元素
- find(expr|obj|ele) 表示查找元素，查找的是后代元素
- next([expr]) 查找下一个元素
- nextall([expr]) 查找下面所有的元素
- nextUntil([exp|ele][,fil])1.6* 查找相邻元素一直到结束
- offsetParent() 返回第一个匹配元素用于定位的父节点。这返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。
- parent([expr]) 返回父元素
- parents([expr]) 返回所有祖先元素
- parentsUntil([exp|ele][,fil])1.6* 返回所有祖先元素直到满足表达式为止
- prev([expr]) 返回之前的那个元素
- prevall([expr]) 返回之前所有的兄弟元素
- prevUntil([exp|ele][,fil])1.6* 返回之前所有兄弟元素直到满足表达式为止
- siblings([expr]) 返回满足表达式的同辈元素
- add(expr|ele|html|obj[,con]) 并联关系。选择当前的元素和add条件中的元素，返回的是这些元素的集合
代码实例：
-
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>DOM查询title> <style type="text/css"> div, span, p { width: 140px; height: 140px; margin: 5px; background: #aaa; border: #000 1px solid; float: left; font-size: 17px; font-family: Verdana; } div.mini { width: 55px; height: 55px; background-color: #aaa; font-size: 12px; } div.hide { display: none; } style> <script type="text/javascript" src="../script/jquery-1.7.2.js">script> <script type="text/javascript"> $(document).ready( function() { function anmateIt() { $("#mover").slideToggle("slow", anmateIt); } anmateIt(); var $div = $("div"); //(1)eq()选择索引值为等于 3 的 div 元素 $("#btn1").click(function() { // $("div:eq(3)").css("background-color", "#bfa"); // $div.eq(3).css("background-color", "#bfa"); }); //(2)first()选择第一个 div 元素 $("#btn2").click(function() { // $("div:first").css("background-color", "#bfa"); $div.first().css("background-color", "#bfa"); // $div.filter(":first").css("background-color", "#bfa"); }); //(3)last()选择最后一个 div 元素 $("#btn3").click(function() { // $("div:last").css("background-color", "#bfa"); $div.last().css("background-color", "#bfa"); }); //(4)filter()在div中选择索引为偶数的 $("#btn4").click(function() { // $("div:even").css("background-color", "#bfa"); $div.filter(":even").css("background-color", "#bfa"); }); //(5)is()判断#one是否为:empty或:parent //is用来检测jQuery对象是否符合指定的选择器 $("#btn5").click(function() { var yOn = $("#one").is(":parent"); alert(yOn); }); //(6)has()选择div中包含.mini的 $("#btn6").click(function() { $div.has(".mini").css("background-color", "#bfa"); // $("div:has(.mini)").css("background-color", "#bfa"); }); //(7)not()选择div中class不为one的 $("#btn7").click(function() { $div.not(".one").css("background-color", "#bfa"); // $("div:not(.one)").css("background-color", "#bfa"); }); //(8)children()在body中选择所有class为one的div元素 $("#btn8").click(function() { $("body").children("div.one").css("background-color", "#bfa"); // $("body>div.one").css("background-color", "#bfa"); }); //(9)find()在body中选择所有class为mini的div元素 $("#btn9").click(function() { $("body").find("div.mini").css("background-color", "#bfa"); // $("body div.mini").css("background-color", "#bfa"); }); //(10)next() #one的下一个div $("#btn10").click(function() { $("#one").next("div").css("background-color", "#bfa"); // $("#one+div").css("background-color", "#bfa"); }); //(11)nextAll() #one后面所有的span元素 $("#btn11").click(function() { $("#one").nextAll("span").css("background-color", "#bfa"); // $("#one~span").css("background-color", "#bfa"); }); //(12)nextUntil() #one和span之间的元素 $("#btn12").click(function() { $("#one").nextUntil("span").css("background-color", "#bfa"); }); //(13)parent() .mini的父元素 $("#btn13").click(function() { $(".mini").parents("body").css("background-color", "#bfa"); // $(".mini").parent().parent().css("background-color", "#bfa"); }); //(14)prev() #two的上一个元素 $("#btn14").click(function() { $("#two").prev().css("background-color", "#bfa"); }); //(15)prevAll() span前面所有的div $("#btn15").click(function() { $("span").prevAll("div").css("background-color", "#bfa"); }); //(16)prevUntil() span向前直到#one的元素 $("#btn16").click(function() { $("span").prevUntil("#one").css("background-color", "#bfa"); }); //(17)siblings() #two的所有兄弟div元素 $("#btn17").click(function() { $("#two").siblings("div").css("background-color", "#bfa"); }); //(18)add()选择所有的 span 元素和id为two的元素 $("#btn18").click(function() { $("span").add("#two").css("background-color", "#bfa"); // $("span,#two").css("background-color", "#bfa"); }); }); script> head> <body> <input type="button" value="1-eq()选择索引值为等于 3 的 div 元素" id="btn1" /> <input type="button" value="2-first()选择第一个 div 元素" id="btn2" /> <input type="button" value="3-last()选择最后一个 div 元素" id="btn3" /> <input type="button" value="4-filter()在div中选择索引为偶数的" id="btn4" /> <input type="button" value="5-is()判断#one是否为:empty或:parent" id="btn5" /> <input type="button" value="6-has()选择div中包含.mini的" id="btn6" /> <input type="button" value="7-not()选择div中class不为one的" id="btn7" /> <input type="button" value="8-children()在body中选择所有class为one的div元素" id="btn8" /> <input type="button" value="9-find()在body中选择所有class为mini的div元素" id="btn9" /> <input type="button" value="10-next()#one的下一个div" id="btn10" /> <input type="button" value="11-nextAll()#one后面所有的span元素" id="btn11" /> <input type="button" value="12-nextUntil()#one和span之间的元素" id="btn12" /> <input type="button" value="13-parent().mini的父元素" id="btn13" /> <input type="button" value="14-prev()#two的上一个元素" id="btn14" /> <input type="button" value="15-prevAll()span前面所有的div" id="btn15" /> <input type="button" value="16-prevUntil()span向前直到#one的元素" id="btn16" /> <input type="button" value="17-siblings()#two的所有兄弟div元素" id="btn17" /> <input type="button" value="18-add()选择所有的 span 元素和id为two的元素" id="btn18" /> <h3>DOM查询h3> <br /> <br /> 文本框 <input type="text" name="account" disabled="disabled" /> <br> <br> <div class="one" id="one"> id 为 one,class 为 one 的div <div class="mini">class为minidiv> div> <div class="one" id="two" title="test"> id为two,class为one,title为test的div <div class="mini" title="other">class为mini,title为otherdiv> <div class="mini" title="test">class为mini,title为testdiv> div> <div class="one"> <div class="mini">class为minidiv> <div class="mini">class为minidiv> <div class="mini">class为minidiv> <div class="mini">div> div> <div class="one"> <div class="mini">class为minidiv> <div class="mini">class为minidiv> <div class="mini">class为minidiv> <div class="mini" title="tesst">class为mini,title为tesstdiv> div> <div style="display: none;" class="none">style的display为"none"的divdiv> <div class="hide">class为"hide"的divdiv> <span id="span1">^^span元素 111^^span> <div> 包含input的type为"hidden"的div<input type="hidden" size="8"> div> <span id="span2">^^span元素 222^^span> <div id="mover">正在执行动画的div元素.div> body> html>
1.2 DOM增删改
文档处理
-
内部插入
- append(content)---->a.append(b);把b加到a里面 添加到最后面
- prepend(content)---->a.prepend(b); 把b加到a里面 添加到最前面
- appendTo(content)---->a.appendTo(b);把a加到b里面 添加到最后面
- prependTo(content)----> a.prependTo(b);把a加到b里面 添加到最前面
-
外部插入
-
before(content)---->a.before(b);a的前面插入b
-
after(content)---->a.after(b);a的后面插入b
-
insertBefore(content)---->a.insertBefore(b);b的前面插入a
-
insertAfter(content)---->a.insertAfter(b);b的后面插入a
-
-
替换
- replaceWith(content|fn)---->a.replaceWith(b);b替换所有的a
- replaceAll(selector)---->a.replaceAll(b);a替换所有的b
-
删除
- empty() ---->a.empty();把a掏空，把a里面的所有元素都删除,但绑定的事件不删除
- remove([expr])---->a.remove();删除a，绑定的事件也删除
- a.remove(b);删除a，b是筛选条件
代码实例
- a.remove(b);删除a，b是筛选条件
-
<html> <head> <meta charset="UTF-8"> <title>DOM增删改title> <link rel="stylesheet" type="text/css" href="style/css.css" /> <script type="text/javascript" src="../script/jquery-1.7.2.js">script> <script type="text/javascript"> $(function(){ //创建广州元素节点对象 var $li = $("- 广州
"); $("#btn01").click(function(){ //在#city中添加广州节点 [append()] // $("#city").prepend($li); $li.appendTo($("#city")); // $("#city").append($li); }); $("#btn02").click(function(){ //创建一个"广州"节点,添加到#city下[appendTo()] }); $("#btn03").click(function(){ //在#city中添加广州节点[prepend()] }); $("#btn04").click(function(){ //创建一个"广州"节点,添加到#city下[prependTo()] }); $("#btn05").click(function(){ //在#sh前面插入"广州"节点[before()] $li.insertAfter($("#sh")); // $("#sh").after($li); // $("#sh").before($li); }); $("#btn06").click(function(){ //将"广州"节点插入到#sh前面[insertBefore()] }); $("#btn07").click(function(){ //在#sh后面插入"广州"节点[after()] }); $("#btn08").click(function(){ //将"广州"节点插入到#sh后面[insertAfter()] }); $("#btn09").click(function(){ //使用"广州"节点替换#sh节点[replaceWith()] $li.replaceAll($("#sh")); // $("#sh").replaceWith($li); }); $("#btn10").click(function(){ //使用"广州"节点替换#sh节点[replaceAll()] }); $("#btn11").click(function(){ //删除#rl节点[remove()] $("#rl").empty(); // $("#rl").remove(); }); $("#btn12").click(function(){ //掏空#city节点[empty()] // $("#city").remove(); $("#city").empty(); }); }); script> head> <body> <div id="total"> <div class="inner"> <p> 你喜欢哪个城市? p> <ul id="city"> <li id="bj">北京li> <li id="sh">上海li> <li>东京li> <li>首尔li> ul> <br> <br> <p> 你喜欢哪款单机游戏? p> <ul id="game"> <li id="rl">红警li> <li>实况li> <li>极品飞车li> <li>魔兽li> ul> <br /> <br /> <p> 你手机的操作系统是? p> <ul id="phone"><li>IOSli><li id="android">Androidli><li>Windows Phoneli>ul> div> <div class="inner"> gender: <input type="radio" name="gender" value="male"/> Male <input type="radio" name="gender" value="female"/> Female <br> <br> name: <input type="text" name="name" id="username" value="abcde"/> div> div> <div id="btnList"> <div><button id="btn01">1-在#city中添加广州节点[append()]button>div> <div><button id="btn02">2-创建一个"广州"节点,添加到#city下[appendTo()]button>div> <div><button id="btn03">3-创建一个"广州"节点,添加到#city下[prepend()]button>div> <div><button id="btn04">4-创建一个"广州"节点,添加到#city下[prependTo()]button>div> <div><button id="btn05">5-在#sh前面插入"广州"节点[before()]button>div> <div><button id="btn06">6-将"广州"节点插入到#sh前面[insertBefore()]button>div> <div><button id="btn07">7-在#sh后面插入"广州"节点[after()]button>div> <div><button id="btn08">8-将"广州"节点插入到#sh后面[insertAfter()]button>div> <div><button id="btn09">9-使用"广州"节点替换#sh节点[replaceWith()]button>div> <div><button id="btn10">10-使用"广州"节点替换#sh节点[replaceAll()]button>div> <div><button id="btn11">11-删除#rl节点[remove()]button>div> <div><button id="btn12">12-掏空#city节点[empty()]button>div> div> body> html>
1.3 DOM属性操作
- 获取HTML代码/文本/值
- html([val|fn]) ---->a.html()取出a的html值 a.html(val) 让a的html值变为val
- text([val|fn])---->a.text()取出a的text值 a.text(val) 让a的文本值变为val
- val([val|fn|arr])---->a.val() 取出a的val值（input） a.val(v) 设置a的value值为v
特殊作用：设置单选按钮或复选框或者下拉选框的选中状态 val([])
- 通用属性操作：
- attr(name|pro|key,val|fn)
- 1、a.attr(‘name’)取出a的name值
- 2、a.attr(“name”,“username”)把a的name值设置为username
- removeAttr(name) ----> a.removeAttr(‘class’) 移除a的class属性
- prop(name|pro|key,val|fn) 1.6+ (attr不能修改hidden，prop可以)
- 1、a.prop(‘id’) 取出a的id值
- 2、a.prop(‘id’,“bj”) 设置a的id值为bj
- removeProp(name) 1.6+
- a.removeProp(‘class’) 移除a的class属性
代码实例
- a.removeProp(‘class’) 移除a的class属性
- attr(name|pro|key,val|fn)
-
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title heretitle> <script type="text/javascript" src="../script/jquery-1.7.2.js">script> <script type="text/javascript"> $(function() { $("#btn1").click(function() { //读取#mz内的HTML代码:html() / text() var mzHtml = $("#mz").html(); alert(mzHtml); }); $("#btn2").click(function() { //设置#dream内的HTML代码 $("#dream").html("java从入门到入门"); // $("#dream").text("java从入门到入门"); }); $("#btn3").click(function() { //获取文本框的value值 // var tv = $("input:text").val(); // alert(tv); $("input:text").val("123"); // $("input[name='a']") }); $("#btn4").click(function() { //获取文本框的name值 var nv = $("input:text").attr("name"); alert(nv); }); }) script> head> <body> <button id="btn1">读取#mz内的HTML代码button> <br /><br/> <button id="btn2">设置#dream内的HTML代码button><br /><br/> <button id="btn3">获取文本框的value值button><br /><br/> <button id="btn4">获取文本框的name值button><br /><br/> <form action="#" id="form1"> 文本框:<input name="a" value="abc" type="text" /><br /> 多选框:<input type="checkbox" name="interest" value="篮球"> 篮球 <input type="checkbox" name="interest" value="zuqiu"> 蹴鞠 <input type="checkbox" name="interest" value="乒乓"> 乒乓 <input type="checkbox" name="interest" value="御马">御马 form> <ul id="mz"> <li>三国演义li> <li id="dream">红楼梦li> <li>西游记li> <li>水浒传li> ul> body> html>
2.1文档加载
- $()与window.onload的区别
- 前者在当前文档中可以书写多次，后者只能书写一次（书写多次，后面会覆盖前面代码）。
- 前者有两种语法结构，后者只有一种语法
- 前者当前文档绘制成功后执行，后者当前文档完全加载后执行（但现在的浏览器都有自己处理方法，会让后者在加载完之前执行）。
- $(document).ready()—>$()简写方式
2.2jQuery中的事件
- click(fn);事件响应，以后再添加进来的无效
- live(“事件名”,function(){})；给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
- delegate(“触发事件对象名（选择器）”,“事件名”,function(){})；给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效。
-
<html> <head> <meta charset="UTF-8"> <title>Untitled Documenttitle> <link rel="stylesheet" type="text/css" href="styleB/css.css" /> <script type="text/javascript" src="../../script/jquery-1.7.2.js">script> <script type="text/javascript"> $(function() { //删除 $("#employeeTable").delegate("a","click",function () { $(this).parents("tr").remove(); return false; }) /*$("#employeeTable a").live("click",function () { $(this).parents("tr").remove(); return false; })*/ //添加 $("#addEmpButton").click(function () { var empName = $("#empName").val(); var email = $("#email").val(); var salary = $("#salary").val(); var $tr = $("\n" + "\t\t\t "); $("#employeeTable").append($tr); }) }); script> head> <body> <table id="employeeTable"> <tr> <th>Nameth> <th>Emailth> <th>Salaryth> <th> th> tr> <tr> <td>Tomtd> <td>[email protected]td> <td>5000td> <td><a href="deleteEmp?id=001">Deletea>td> tr> <tr> <td>Jerrytd> <td>[email protected]td> <td>8000td> <td><a href="deleteEmp?id=002">Deletea>td> tr> <tr> <td>Bobtd> <td>[email protected]td> <td>10000td> <td><a href="deleteEmp?id=003">Deletea>td> tr> table> <div id="formDiv"> <h4>添加新员工h4> <table> <tr> <td class="word">name:td> <td class="inp"><input type="text" name="empName" id="empName" /> td> tr> <tr> <td class="word">email:td> <td class="inp"><input type="text" name="email" id="email" /> td> tr> <tr> <td class="word">salary:td> <td class="inp"><input type="text" name="salary" id="salary" /> td> tr> <tr> <td colspan="2" align="center"> <button id="addEmpButton" value="abc">Submitbutton> td> tr> table> div> body> html>"+empName+" \n" + "\t\t\t"+email+" \n" + "\t\t\t"+salary+" \n" + "\t\t\tDelete \n" + "\t\t
-
- change():失去焦点且文本改变
-
<html> <head> <meta charset="UTF-8"> <title>Insert title heretitle> <script type="text/javascript" src="../../script/jquery-1.7.2.js">script> <script type="text/javascript"> $(function(){ //给文本框绑定change事件 //假设数据库只有一个用户，名为zhangsan $("#username").change(function(){ //取值username var uname = $(this).val(); if(uname == "zhangsan"){ // alert("用户名已存在，请重新输入"); $("#msg").html("用户名已存在，请重新输入!").css("color","#ff0000"); }else{ // alert("用户名可用！"); $("#msg").html("用户名可用!").css("color","#FFB6C1"); } }); }); script> head> <body> <form action=""> 用户名：<input type="text" name="username" id="username"> <span id="msg">span> <br> 密码：<input type="password" name="pwd"><br> <input type="submit"> form> body> html>
-
- blur();失去焦点