jQuery简单介绍及基本用法(选择器&DOM操作)
简介
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
简单来说jQuery就是一个JavaScript框架，简化js代码的编写，做到write less do more。
jQuery核心函数
页面加载函数 Jquery(callback)
作用: 页面加载完成后执行
意义: 弥补传统js window.onload的缺点: 如果一个页面出现两个, 后面的会把前面的onload函数覆盖掉
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> // js 的页面加载函数 // 缺点: 如果一个页面出现两个onload函数, 后面会把前面的覆盖掉, 因为js不存在 函数重载 // window.onload = function(){ // alert("js 的页面加载函数 11111111111 ..."); // } // window.onload = function(){ // alert("js 的页面加载函数 2222222 ..."); // } // 页面加载完成后执行 下面两个都会执行 jQuery(function(){ alert("jQuery 的页面加载函数 11111111111 ..."); }); jQuery(function(){ alert("jQuery 的页面加载函数 22222222222 ..."); }); </script>
简写
$(function() { //页面加载完成后执行 })
将js对象转成jQuery对象
query对象是jquery所独有的，只有jquery对象才可以使用jquery的属性和方法。
dom对象无法调用jquery对象的属性和方法；
jquery对象也无法调用dom对象的属性和方法。
jquery对象和dom对象的相互转化：
注意：需要把jquery对象理解成是一个数组，并且第一个元素就是dom对象。
jquery对象 ----》 dom对象： jquery对象[0] 或者 jquery对象.get(0);
dom对象 ----》 jquery对象： $(dom对象)
开发规范约定：
var 变量名 = dom对象；
var $变量名 = jquery对象；
//将jQuery看做是一个数组, 第一个元素就是js对象 jQuery("#myDiv")[0].onclick = function() { }; //只有jQuery对象才能调用jQuery的属性和方法 jQuery(document.getElementById("myDiv")).click(function() { });
将html文本转换成jQuery标签对象
var $span = jQuery("<span>山东张学友</span>");
$span.click(function() {
})
jQuery选择器
注意：jQuery中的选择器筛选出来的结果都是符合筛选条件的一个数组（即使只有一个也会放在数组中），
使用id筛选只会筛选出第一个，并且取值赋值都是操作这一个，使用name或者其他筛选会有多个，但是都是放在数组中的；
所以在确定只有一个对象并且需要得到该对象的一些属性的时候 ，需要找到该数组的第一个，再使用其属性，比如：
//获取下拉框option的个数 $("#sel01")[0].length; <select id="sel01"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select>
基本选择器
#id 根据id属性值获取标签对象(唯一)
element 根据标签名获取标签对象(多个)
.class 根据class属性值值获取标签对象(多个)
* 获取所有的标签对象
selector1,selector2,selectorN 既要 第一个, 也要 第二个 还要 第N个
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> <script> $(function() { //根据id属性值获取标签对象(唯一) var _fooHtml = $("#foo").html(); //根据标签名获取标签对象(多个) $("div").each(function() { $(this).html("山东张学友" + $(this).html()); // 设置 }); //根据class属性值值获取标签对象(多个) $(".zy").each(function() { $(this).html("zy" + $(this).html()); // 设置 }); }); </script> </head> <body> <div>DIVAAAA</div> <div class="zy">DIVBBBB</div> <div>DIVCCCC</div> <div>DIVDDDD</div> <div class="zy">DIVEEEE</div> <div id="foo">DIVFFFF</div> <p>PAAAA</p> <p class="zy">PBBBB</p> <p>PCCCC</p> </body> </html>
层级选择器
ancestor descendant : 选择当前标签的后代标签(空格)
parent > child : 选择当前标签的子标签(大于号 >)
prev + next : 选择当前标签的下一个弟弟标签(加号 +)
prev ~ siblings : 选择当前标签的兄弟标签(符号 ~)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> <script> $(function() { // 1．将class属性值为alex的元素下所有a元素字体变为红色 $(".alex a").css("color", "red"); // 2．将class属性值为alex的元素下直接a元素字体变为蓝色 $(".alex>a").css("color", "blue"); // 3．将div元素后所有兄弟a元素，字体变为黄色，大小变为30px $("div~a").css({ "color": "yellow", "font-size": "30px" }); }); </script> </head> <body> <div class="alex"> <a>div link</a> <p> info <a>p link</a> </p> </div> <a>link</a> <p class="alex"> <a>p link</a> </p> <a>link</a> </body> </html>
属性过滤选择器
[attribute] 选择有某个属性的标签, 如: input[name] 选择有name属性的标签
[attribute=value] 选择属性等于某个值的标签 如: input[name='username']
[attribute!=value] 选择属性不等于某个值的标签 如: input[name!='username']
[attribute^=value] 选择属性以某个值开始的标签 如: input[name^='use']
[attribute$=value] 选择属性以某个值结束的标签 如: input[name$='name']
[attribute*=value] 选择属性含有某个值的标签 如: input[name*='user']
[attrSel1][attrSel2][attrSelN] 选择既有属性id,也有属性class, 如 input[id][class]
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> <script> $(function() { // 1.设置所有含有id属性的div，字体颜色红色 $("div[id]").css("color", "red"); // 2.设置所有class属性值 含有alex元素背景色为黄色 $("[class*='alex']").css("background", "yellow"); // 3.对所有既有id又有class属性div元素，添加一个点击事件，打印div标签中内容 $("div[id][class]").click(function() { // alert(this.innerHTML); // js写法 alert($(this).html()); // jquery写法 }); // 4 获取属性name="hobby"的input标签, 打印value属性值 $("input[name='hobby']").each(function() { // alert(this.value); // js写法 alert($(this).val()); // jquery写法 }); }); </script> </head> <body> <div>AAAA</div> <div id="mydiv" class="itcast1">BBBB</div> <div class="alex3">CCCC</div> <div id="mydiv2">DDDD</div> <div class="divclass">EEEE</div> <div id="xxx" class="alex3">FFFF</div> <p class="p-alex">PPPPPP</p> <input type="checkbox" name="hobby" value="高尔夫" /> 高尔夫 <input type="checkbox" name="hobby" value="蹦极" /> 蹦极 <input type="checkbox" name="hobby" value="足球" /> 足球 </body> </html>
基本过滤选择器
:first 选择第一个
:last 选择最后一个
:not(selector) 不选择指定的那个标签
:even 偶数
:odd 奇数
:eq(index) 选择指定下标的那个标签
:gt(index) 大于指定下标的标签
:lt(index) 小于指定下标的标签
:header 选择标签标签
:animated 选择执行动画效果的标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> <script> $(function() { // 1．设置表格第一行，显示为红色 $("tr:first").css("color", "red"); // 2．设置表格除第一行以外 显示为蓝色 $("tr:not(:first)").css("color", "blue") // 3．设置表格奇数行背景色 黄色 $("tr:gt(0):odd").css("background", "yellow"); // 4．设置表格偶数行背景色 绿色 $("tr:gt(0):even").css("background", "green"); // 5．设置页面中所有标题 显示为灰色 $(":header").css("color", "gray"); // 6．设置页面中正在执行动画效果div背景黄色，不执行动画div背景绿色 $("div").click(function() { $(this).slideUp("slow"); // 向上滑动 $("div:animated").css("background", "yellow"); // 正在执行动画效果div背景黄色 }); // 不执行动画div背景绿色 $("div:not(:animated)").css("background", "green"); }); </script> </head> <body> <h1>表格信息</h1> <h2>这是一张商品表</h2> <table border="1" width="600"> <tr> <th>商品编号</th> <th>商品名称</th> <th>售价</th> <th>数量</th> </tr> <tr> <td>001</td> <td>冰箱</td> <td>3000</td> <td>100</td> </tr> <tr> <td>002</td> <td>洗衣机</td> <td>2000</td> <td>50</td> </tr> <tr> <td>003</td> <td>热水器</td> <td>1500</td> <td>20</td> </tr> <tr> <td>004</td> <td>手机</td> <td>2188</td> <td>200</td> </tr> </table> <div>slideDown(speed, [callback]) 概述 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。 参数 speedString,Number三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) callback (可选)FunctionFunction在动画完成时执行的函数</div> <div>fadeOut(speed, [callback]) 概述 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。 参数 speedString,Number三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) callback (可选)Function在动画完成时执行的函数</div> </body> </html>
内容过滤选择器
:contains(text) 包含某个文本内容的标签
:empty 没有内容的标签
:has(selector) 包含指定内容的标签
:parent 查找有内容的标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> <script> $(function() { // 1．设置含有文本内容 ”张学友” 的 div 的字体颜色为红色 $("div:contains('张学友')").css("color", "red"); // 2．设置没有子元素的div元素 文本内容 ”这是一个空DIV“ $("div:empty").html("这是一个空DIV"); // 3．设置包含p元素 的 div 背景色为黄色 $("div:has(p)").css("background", "yellow"); // 4．设置所有含有子元素的span字体为蓝色 $("span:parent").css("color", "blue"); }); </script> </head> <body> <div>今天是个晴天</div> <div>山东张学友河北刘德华</div> <div> <span>JavaScript</span> 是网页开发中脚本技术 </div> <div>Ajax 是异步的 JavaScript和 XML</div> <div> <p>jQuery</p> 是 JavaScript一个 轻量级框架 </div> <div></div> </body> </html>
可见性过滤选择器
:hidden 选择隐藏的标签:1 <input type="hidden" /> 2 <标签 sytle="display:noe" .../> :visible 选择可见的标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> <script> $(function() { // 1．为表单中所有隐藏域 添加 class属性，值为alex $("form :hidden").addClass("alex"); // 2．设置table所有 可见 tr 背景色 黄色 $("tr:visible").css("background", "yellow"); // 3．设置table所有 隐藏tr 字体颜色为红色，显示出来 ，并输出tr中文本值 /* var _tr = $("tr:hidden").css("color", "red"); var _tr2 = _tr.show(); alert(_tr2.html()); */ alert($("tr:hidden").css("color", "red").show().html()); }); </script> </head> <body> <form> <input type="hidden" /> <input type="text" name="xxx" style="display: none;" /> </form> <table> <tr> <td>洗衣机</td> </tr> <tr> <td>热水器</td> </tr> <tr style="display: none"> <td>电冰箱</td> </tr> </table> </body> </html>
子元素过滤选择器
:nth-child 匹配其父元素下的第N个子或奇偶元素
:first-child 匹配第一个子元素' first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
:last-child 匹配最后一个子元素 ':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> <script> $(function() { // 1.在每个表格 下3的倍数行，字体颜色为红色 $("tr:nth-child(3n)").css("color", "red"); // 2.每个表格 奇数行 背景色 黄色 $("tr:nth-child(odd)").css("background", "yellow"); // 3.每个表格 偶数行 背景色 灰色 $("tr:nth-child(even)").css("background", "gray"); // 4.每个tr 只有一个td的 背景为 蓝色 $("td:only-child").css("background", "blue"); }); </script> </head> <body> <table border="1" width="400" id="mytable"> <tr><td>1</td><td>冰箱</td></tr> <tr><td>2</td><td>洗衣机</td></tr> <tr><td>3</td><td>热水器</td></tr> <tr><td>4</td><td>电饭锅</td></tr> <tr><td>5</td><td>电磁炉</td></tr> <tr><td>6</td><td>豆浆机</td></tr> <tr><td>7</td><td>微波炉</td></tr> <tr><td>8</td><td>电视</td></tr> <tr><td>9</td><td>空调</td></tr> <tr><td>10</td><td>收音机</td></tr> <tr><td>11</td><td>排油烟机</td></tr> <tr><td>12</td><td>加湿器</td></tr> <tr><td>13 电暖气</td></tr> </table> </body> </html>
表单过滤选择器
:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有的单行文本框
:password 匹配所有密码框
:radio 匹配所有单选框
:checkbox 匹配所有多选框
:submit 匹配提交按钮
:image 匹配图片标签
:reset 匹配重置按钮
:button 匹配按钮
:file 匹配 input type='file'的标签
:hidden 匹配隐藏的标签
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> <script> //1．对所有text框和password框，添加离焦事件，校验输入内容不能为空 $("input[name='username'], input[name='password']").blur(function() { var val = this.value; if(val == null || val.trim().length <= 0) { alert(this.name + "不得为空!"); } }); //2．对button 添加 点击事件，提交form表单 $(":button").click(function() { $("form").submit(); }); </script> </head> <body> <form action="login"> 用户名 <input type="text" name="username" /> <br/> 密码 <input type="password" name="password" /> <br/> <input type="button" value="提交" /> </form> </body> </html>
表单对象属性
:enabled 可用
:disabled 不可用
:checked 选中(单选和多选)
:selected 选中(下拉)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> <script> $(function() { //1: 只读和不可用标签的联系和区别 // 联系: 只能看,不能修改 // 区别: // 只读虽然不能修改,但是可以随表单一起提交 // 不可用不仅不能修改, 还不能表单一起提交 //2: 点击button 打印radio checkbox select 中选中项的值 $(":button").click(function() { // 性别 var sexVal = $("input[name='gender']:checked").val(); alert("性别: " + sexVal); // 爱好 var hobbyStr = ""; $("input[name='hobby']:checked").each(function() { var hobby = this.value; // js写法 hobbyStr += hobby + ","; }); alert("爱好 : " + hobbyStr); // 城市 var cityVal = $("select[name='city'] option:selected").val(); alert("城市:" + cityVal); }); }); </script> </head> <body> <form> 用户名(只读): <input type="text" readonly="readonly" name="username" value="zhangsan" /> <br/> 密码(不可用): <input type="text" disabled="disabled" name="123" value="123" /> <br/> 性别 <input type="radio" value="男" name="gender" />男 <input type="radio" value="女" name="gender" />女 <br/> 爱好 <input type="checkbox" value="抽烟" name="hobby" /> 抽烟 <input type="checkbox" value="喝酒" name="hobby" /> 喝酒 <input type="checkbox" value="烫头" name="hobby" /> 烫头 <br/> 城市 <select name="city"> <option value="">请选择</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="天津">天津</option> </select> <br/> <input type="button" value="打印" /> </form> </body> </html>
jQuery操作DOM
操作属性
attr(name|pro|key,val|fn) 设置或返回被选元素的属性值。
removeAttr(name)
prop(n|p|k,v|f)1.6+ 获取在匹配的元素集中的第一个元素的属性值。(适用于单选 多选 下拉框)
removeProp(name)1.6+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> <script> $(function() { // 设置标签存在的属性 $("#btn1").click(function() { $("a").attr("href", "http://www.baidu.com"); }) // 设置标签不存在的属性 $("#btn2").click(function() { $("a").attr("meinv", "刘亦菲"); }) $("#btn3").click(function() { $("input[name='sex']").each(function() { var attrChecked = $(this).attr("checked"); // 获取单选的选中状态不合适 alert(this.checked + " ===== " + attrChecked); }); }); $("#btn4").click(function() { $("input[name='sex']").each(function() { var propChecked = $(this).prop("checked"); alert(this.checked + " ===== " + propChecked); }); }); }); </script> </head> <body> <a>百度</a> <br/> <input type="button" id="btn1" value="设置标签存在的属性" /> <br/> <input type="button" id="btn2" value="设置标签不存在的属性" /> <br/> <hr/> <input type="radio" name="sex" value="女" />女 <input type="radio" name="sex" value="男" checked="checked" />男 <br/> <input type="button" id="btn3" value="通过attr获取选中状态" /> <br/> <input type="button" id="btn4" value="通过prop获取选中状态" /> </body> </html>
设置样式
直接设置css样式:
$("p").css("color") 获取第一个段落的color值
$("p").css("color","red") 将所有段落的字体设为红色
$("p").css({color:"#ff0011", background:"blue"}) 将所有段落字体设置为红色,背景设置为蓝色
设置css类:
addClass(class|fn) 增加class样式
removeClass([class|fn]) 删除class样式
toggleClass(class|fn[,sw]) 切换css样式: 有 去掉; 没有 增加
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .changeBackYellow { background: yellow; } .changeFontBlue { color: blue; } </style> <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> <script> $(function() { $("#btn1").click(function() { // 方式一 $("div").attr("style", "background:yellow"); // 方式二: 通过css $("div").css("background", "yellow"); // 方式三: 增加class样式 $("div").addClass("changeBackYellow"); // 切换效果: 有 去掉; 没有 增加 $("div").toggleClass("changeBackYellow"); }); // 字体变蓝 $("#btn2").click(function() { // 方式一 $("div").attr("style", "color:blue"); // 方式二: 通过css $("div").css("color", "blue"); // 方式三: 增加class样式 $("div").addClass("changeFontBlue"); // 切换效果: 有 去掉; 没有 增加 $("div").toggleClass("changeFontBlue"); }); }); </script> </head> <body> <div>心情不错！</div> <input type="button" value="背景变黄" id="btn1" /> <input type="button" value="字体变蓝" id="btn2" /> </body> </html>
获取标签内容和标签填写的值
读取和设置某个元素中HTML内容
标签.html() 获取一个元素中html内容
标签.html(val) 设置一个元素中html内容
这个函数不能用于XML文档。但可以用于XHTML文档
读取和设置某个元素中的文本内容
标签.text() 获取一个元素中 文本内容
标签.text(val) 设置一个元素中 文本内容
该方法既可以用于 XHTML 也可以用于 XML 文档
文本框、下拉列表框、单选框 选中的元素值
标签.val() 获取文本框、下拉列表框、单选框 value值
标签.val(val) 设置文本框、下拉列表框、单选框 value值
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> <script> $(function() { // 1．<div><p>山东张学友</p></div> 获取div中 html和text 对比 var _html = $("div").html(); //带有p标签 var _text = $("div").text(); //不带标签 // 2．单击pickBtn 使用val() 获得文本框、下拉框、单选框选中的value $("#pickBtn").click(function() { // 用户名 var usernameVal = $("input[name='username']").val(); console.info("用户名 === " + usernameVal); // 城市 var cityVal = $("select[name='city']").val(); console.info("城市 === " + cityVal); // 爱好 var hobbyStr = ""; $("input[name='hobby']:checked").each(function() { hobbyStr += this.value + ", "; }); console.info("爱好 === " + hobbyStr); // 性别 var sexVal = $("input[name='gender']:checked").val(); console.info("性别 === " + sexVal); }); // 3．单击setBtn 通过 val() 设置单选框、下拉框的选中效果 $("#setBtn").click(function() { // 用户名 $("input[name='username']").val("梅西"); // 城市 $("select[name='city']").val("北京"); // 爱好(多个) $("input[name='hobby']").val(["足球", "篮球", "乒乓球"]); // 性别(将单选认为是特殊多选, 只能选择一个) $("input[name='gender']").val(["男"]); }); }); </script> </head> <body> <div> <p>山东张学友</p> </div> <form> 用户名 <input type="text" name="username" /> <br/> 城市 <select name="city"> <option value="">请选择</option> <option value="北京">北京</option> <option value="上海">上海</option> </select><br/> 爱好 <input type="checkbox" name="hobby" value="足球" />足球 <input type="checkbox" name="hobby" value="篮球" />篮球 <input type="checkbox" name="hobby" value="乒乓球" />乒乓球 <input type="checkbox" name="hobby" value="排球" />排球 <br/> 性别 <input type="radio" name="gender" value="男" />男 <input type="radio" name="gender" value="女" />女 <br/> <input type="button" value="取值" id="pickBtn" /> <input type="button" value="设值" id="setBtn" /> </form> </body> </html>
jQuery操作
创建元素 使用工厂函数 jQuery(html, [ownerDocument]) --- jQuery可以写为$ 例如： $(“<div>你好，jQuery</div>”); 内部插入 $node.append($newNode)向每个匹配的元素内部的结尾处追加结尾处 $newNode.appendTo($node)将新元素追加到每个匹配元素内部的结尾处 $node.prepend($newNode) 向每个匹配的元素内部的结尾处追加开始处 $newNode.prependTo($node)将新元素追加到每个匹配元素内部的开始处 外部插入 $node.after($newNode) 向每个匹配的元素的之后插入内容，是并列兄弟 $newNode.insertAfter($node) 将新元素插入到每个匹配元素之后 $node.before($newNode) 向每个匹配的元素的之前插入内容 $newNode.insertBefore($node) 将新元素插入到每个匹配元素之前
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> <script> $(function() { // 插入大专学历 （本科和高中之间）--- 外部插入 var _dazhuan = "<option value='大专'>大专</option>"; $("option[value='本科']").after(_dazhuan); // 插入幼儿园 （学历列表最后） --- 内部插入 var _youeryuan = "<option value='幼儿园'>幼儿园</option>"; $("#edu").append(_youeryuan) }); </script> </head> <body> <!-- 选择学历 --> <select id="edu" name="edu"> <option value="">请选择</option> <option value="本科">本科</option> <option value="高中">高中</option> <option value="中转">中专</option> <option value="小学">小学</option> </select> </body> </html>
删除标签对象
$("").remove() 删除标签 并删除标签对应的事件
$("").detach() 删除标签 但是不删除标签对应的事件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> <script> $(function() { // 绑定事件 $("#inner").click(function() { //既会触发inner的click事件 也会触发outer的click事件(事件冒泡) alert("点击内部的div ... ..."); }); $("#outer").click(function() { alert("点击外部的div ... ..."); }); // 1 使用remove删除内部div标签, 再将删除标签 重新加入body 查看事件是否存在: 事件不存在 var _inner = $("#inner").remove(); $("body").append(_inner); // 2 使用detach删除标签, 再将删除标签 重新加入body 查看事件是否存在: 保留事件 var _inner = $("#inner").detach(); $("body").append(_inner); // 3 清空id='inner'的标签内容 $("#inner").empty(); }); </script> </head> <body> <div id="outer" style="background:blue;width:300px;height:300px;"> <div id="inner" style="background:red;width:150px;height:150px;">山东张学友!!! </body> </html>
替换标签对象
替换： replaceWith(content|fn) 将所有匹配的元素替换成指定的HTML或DOM元素。 replaceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素。 克隆： clone([Even[,deepEven]]) 克隆匹配的DOM元素并且选中这些克隆的副本。
replaceWith（把所有的段落标记替换成加粗的标记。）： html代码： <p>Hello</p><p>cruel</p><p>World</p> jQuery代码： $("p").replaceWith("<b>Paragraph. </b>"); 结果： <b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b> replaceAll（把所有的段落标记替换成加粗标记）： html代码： <p>Hello</p><p>cruel</p><p>World</p> jQuery代码： $("<b>Paragraph. </b>").replaceAll("p"); 结果： <b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b> clone： 1，克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。 html代码： <b>Hello</b><p>, how are you?</p> jQuery代码： $("b").clone().prependTo("p"); 结果： <b>Hello</b><p><b>Hello</b>, how are you?</p> 2，创建一个按钮，他可以复制自己，并且他的副本也有同样功能。 html代码： <button>Clone Me!</button> jQuery代码： $("button").click(function(){ $(this).clone(true).insertAfter(this); });
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> div { padding : 10px; background-color : blue; } p { background-color : red; } </style> <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(function(){ // 需求1:当点击btn1时,将外面的p标签 替换 里面的p标签 $("#btn1").click(function(){ // $(被替换的节点).replaceWith(新节点); $("#mydiv_p").replaceWith($("#myp")); // 问题: 替换产生了移动效果, 类似域 ctrl + x 剪切 // 理想效果: 先复制,再粘贴 }); // 需求2:当点击btn2时,将外面的p标签 替换且克隆 里面的p标签 $("#btn2").click(function(){ // $(被替换的节点).replaceWith(新节点); // 问题: 替换产生了移动效果, 类似域 ctrl + x 剪切 // 理想效果: 先复制,再粘贴 // 克隆: $(被复制的标签).clone() 类似 : ctrl + c $("#mydiv_p").replaceWith($("#myp").clone()); }); }); </script> </head> <body> <div id="mydiv"> <p id="mydiv_p">AAAA</p> </div> <p id="myp">BBBB<a href="#">CCCC</a></p> <input type="button" id="btn1" value="替换"/> <input type="button" id="btn2" value="替换并克隆"/> </body> </html>
jQuery事件
blur([[data],fn])
change([[data],fn])
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])
focus([[data],fn])
focusin([data],fn)
focusout([data],fn)
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn])
mouseleave([[data],fn])
mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseup([[data],fn])
resize([[data],fn])
scroll([[data],fn])
select([[data],fn])
submit([[data],fn])
unload([[data],fn])
事件相关用法及jQuery其他用法可以参考相关api。
