使用 jquery · 地表最强JS文档

[toc] # 每日单词 1. previous 上一个 1. prev 上一个 1. equal 相等 1. attribute 属性 # jquery 简介 ## 什么是 jquery? - **一个 js 库, 大型开发必备** - **相当于 js 升级版** ## jquery 的好处 > 如果把编程比喻成做菜... - **简化原生 js 操作** - **不用担心兼容性** - **提供大量的实用方法** ## 如何学习 jquery - **jquery 只是辅助工具, 要正确面对(佐料齐了...)** - **原生 js 和 jquery 都要会(学了英语就不会汉语了?)(原生 js 是基础)** - **先易后难...** # jquery 的设计思想-选择元素 ## 选择网页元素 - **模拟 css 选择元素** ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div id="div1" class="box">div</div> </body> <script> // 三种方式, 都能找到对象 $(function() { $("#div1").css("background", "red"); // $("div").css("background", "yellow"); // $(".box").css("background", "blue"); }); </script> </html> ``` _jquery 省略了循环..._ ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box">div</div> <div class="box">div</div> <div class="box">div</div> <div class="box">div</div> </body> <script> // jquery省略了循环 $(function() { $(".box").css("background", "blue"); }); </script> </html> ``` - **独有的表达式选择** ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box">div</div> <div class="box">div</div> <div class="box">div</div> <div class="box">div</div> </body> <script> $(function() { $(".box:first").css("background", "blue"); // 第一个div会变蓝... }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box">div</div> <div class="box">div</div> <div class="box">div</div> <div class="box">div</div> </body> <script> $(function() { $(".box:last").css("background", "blue"); // 最后一个div会变蓝... }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box">div</div> <div class="box">div</div> <div class="box">div</div> <div class="box">div</div> </body> <script> $(function() { $(".box:eq(2)").css("background", "blue"); // 第三个div会变蓝... $(".box") .eq(1) .css("background", "yellow"); // 第二个div会变黄... }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <ul> <li>this is li 0</li> <li>this is li 1</li> <li>this is li 2</li> <li>this is li 3</li> <li>this is li 4</li> <li>this is li 5</li> <li>this is li 6</li> <li>this is li 7</li> <li>this is li 8</li> <li>this is li 9</li> </ul> </body> <script> $("li:odd").css("background", "blue"); // 隔行换色, 奇数行 // $("li:even").css("background", "blue"); // 隔行换色, 偶数行 </script> </html> ``` - **多种筛选方法** _根据 div 找对象的两种方法_ ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <ul> <li class="li">this is li 0</li> <li class="li li1">this is li 1</li> <li class="li li1">this is li 2</li> <li class="li">this is li 3</li> </ul> </body> <script> $(function() { $("li") .filter(".li1") .css("background", "yellow"); }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <ul> <li class="li">this is li 0</li> <li class="li li1">this is li 1</li> <li class="li li1">this is li 2</li> <li class="li">this is li 3</li> </ul> </body> <script> $(function() { $("li.li1").css("background", "yellow"); }); </script> </html> ``` _过滤器支持属性值_ ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <ul> <li title="hello" class="li">this is li 0</li> <li class="li li1">this is li 1</li> <li class="li li1">this is li 2</li> <li title="hello" class="li">this is li 3</li> </ul> </body> <script> $(function() { $("li") .filter("[title=hello]") .css("background", "yellow"); }); </script> </html> ``` _过滤器, 支持自定义属性_ ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <ul> <li tittle="hello" class="li">this is li 0</li> <li class="li li1">this is li 1</li> <li class="li li1">this is li 2</li> <li tittle="hello" class="li">this is li 3</li> </ul> </body> <script> $(function() { $("li") .filter("[tittle=hello]") .css("background", "yellow"); }); </script> </html> ``` _也可以不要过滤器_ ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <ul> <li tittle="hello" class="li">this is li 0</li> <li class="li li1">this is li 1</li> <li class="li li1">this is li 2</li> <li tittle="hello" class="li">this is li 3</li> </ul> </body> <script> $(function() { $("li[tittle=hello]").css("background", "yellow"); }); </script> </html> ``` ## jquery 写法 - **方法函数化** 点击获取 div 内的 html 内容... ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div><p>hello world</p></div> </body> <script> $(function() { $("div").click(function() { alert($(this).html()); }); }); </script> </html> ``` _jquery 中基本不用等号_ _几乎所有的操作, 都需要加上括号_ ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div><p>hello world</p></div> </body> <script> $(function() { $("div").click(function() { alert($(this).html()); }); }); </script> </html> ``` - **强大的链式操作** ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="div1"></div> </body> <script> $(function() { var oDiv = $("#div1"); oDiv.html("hello"); oDiv.css("background", "red"); $("div").click(function() { alert("hello world"); }); }); </script> </html> ``` _链式操作_ ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="div1"></div> </body> <script> $(function() { // var oDiv = $("#div1");l // oDiv.html("hello"); // oDiv.css("background", "red"); // $("div").click(function() { // alert("hello world"); // }); $("#div1") .html("hello") .css("background", "red") .click(function() { alert("hello world"); }); }); </script> </html> ``` - **取值赋值合体**(方法重载) ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="div1">hello world</div> </body> <script> $(function() { alert($("div").html()); // 没有参数就取值 }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="div1">hello world</div> </body> <script> $(function() { $("div").html("hello China"); // 有参数就赋值 }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="div1">hello world</div> </body> <script> $(function() { console.log($("div").css("width")); // 一两个参数就赋值 }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div id="div1">hello world</div> </body> <script> $(function() { $("div").css("width", "300px"); // 两个参数就赋值 }); </script> </html> ``` _如果是一堆元素呢?_ ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <ul> <li>this is li tag 0</li> <li>this is li tag 1</li> <li>this is li tag 2</li> <li>this is li tag 3</li> <li>this is li tag 4</li> <li>this is li tag 5</li> <li>this is li tag 6</li> </ul> </body> <script> $(function() { $("li").css("background", "yellow"); }); </script> </html> ``` 如果取值, 取第一个 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <ul> <li>this is li tag 0</li> <li>this is li tag 1</li> <li>this is li tag 2</li> <li>this is li tag 3</li> <li>this is li tag 4</li> <li>this is li tag 5</li> <li>this is li tag 6</li> </ul> </body> <script> $(function() { console.log($("li").html()); }); </script> </html> ``` ## jquery 和原生 js 的关系(公共厕所...) - **可以共存, 不能混用** 可以一行 jquery, 一行原生不能一行里面,既有 jquery, 又有原生... ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; border: 1px solid red; } </style> </head> <body> <div><p>hello world</p></div> </body> <script> $(function() { $("div").click(function() { alert($(this).innerHTML); // 不能混用 alert(this.html()); // 不能混用 }); }); </script> </html> ``` ## `$()`下的常用方法 ### `has()`(包含)看元素里面的东西... ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box"> div1 <span>span1</span> </div> <div>div2</div> </body> <script> $(function() { $("div") .has("span") .css("background", "red"); }); </script> </html> ``` _只能是儿子吗?_ ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box"> div1 <span> span1 <span class="span1"></span> </span> </div> <div>div2</div> </body> <script> $(function() { $("div") .has("span.span1") .css("background", "red"); }); </script> </html> ``` ### `not()`(对象是当前元素) ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box">div1</div> <div>div2</div> </body> <script> $(function() { $("div") .not(".box") .css("background", "red"); }); </script> </html> ``` ### `filter()`(反义词是`not()`, 对象同样是当前元素) ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box">div1</div> <div>div2</div> </body> <script> $(function() { $("div") .filter(".box") .css("background", "red"); }); </script> </html> ``` ## 注意 has 和 filter 的区别(对象不同) ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box">this is div</div> <div><span class="box">this is span</span></div> </body> <script> $(function() { $("div") .has(".box") .css("background", "red"); }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box">this is div</div> <div><span class="box">this is span</span></div> </body> <script> $(function() { $("div") .filter(".box") .css("background", "red"); }); </script> </html> ``` ### `next()` (下一个兄弟节点) ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div>this is a div tag</div> <span>this is a span tag</span> <p>this is a p tag</p> </body> <script> $(function() { $("div") .next() .css("background", "red"); }); </script> </html> ``` _可以连写吗?_ ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div>this is a div tag</div> <span>this is a span tag</span> <p>this is a p tag</p> </body> <script> $(function() { $("div") .next() .next() .css("background", "red"); }); </script> </html> ``` ### `prev()` (上一个兄弟节点) ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div>this is a div tag</div> <span>this is a span tag</span> <p>this is a p tag</p> </body> <script> $(function() { $("p") .prev() .prev() .css("background", "red"); }); </script> </html> ``` ### `find()`(查找) ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div> <h2>this is a tag h2_1</h2> <h2>this is a tag h2_2</h2> <h2>this is a tag h2_3</h2> <h2>this is a tag h2_4</h2> <h3>this is a tag h3_1</h3> <h3>this is a tag h3_2</h3> <h3>this is a tag h3_3</h3> <h3>this is a tag h3_4</h3> </div> <h2>this is a tag h2_4</h2> </body> <script> $(function() { $("div") .find("h2") .css("background", "red"); }); </script> </html> ``` ### `eq()`(下标) ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div> <h2>this is a tag h2_1</h2> <h2>this is a tag h2_2</h2> <h2>this is a tag h2_3</h2> <h2>this is a tag h2_4</h2> <h3>this is a tag h3_1</h3> <h3>this is a tag h3_2</h3> <h3>this is a tag h3_3</h3> <h3>this is a tag h3_4</h3> </div> <h2>this is a tag h2_4</h2> </body> <script> $(function() { $("div") .find("h2") .eq(2) .css("background", "red"); }); </script> </html> ``` _另一种写法(`:`表示修饰)_ ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div> <h2>this is a tag h2_1</h2> <h2>this is a tag h2_2</h2> <h2>this is a tag h2_3</h2> <h2>this is a tag h2_4</h2> <h3>this is a tag h3_1</h3> <h3>this is a tag h3_2</h3> <h3>this is a tag h3_3</h3> <h3>this is a tag h3_4</h3> </div> <h2>this is a tag h2_4</h2> </body> <script> $(function() { $("div") .find("h2:eq(1)") .css("background", "red"); }); </script> </html> ``` ### `index()`(兄弟中的排行) ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div> <h2>this is a tag h2_1</h2> <h2>this is a tag h2_2</h2> <h2>this is a tag h2_3</h2> <h2>this is a tag h2_4</h2> <h3 id="h3">this is a tag h3_1</h3> <h3>this is a tag h3_2</h3> <h3>this is a tag h3_3</h3> <h3>this is a tag h3_4</h3> </div> </body> <script> $(function() { console.log($("#h3").index()); }); </script> </html> ``` ### `attr()` 一个参数取值 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div title="123"></div> </body> <script> $(function() { alert($("div").attr("title")); }); </script> </html> ``` 两个参数赋值 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div title="123"></div> </body> <script> $(function() { alert($("div").attr("title", "45678")); }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div title="123"></div> </body> <script> $(function() { alert( $("div") .attr("title", "45678") .attr("class", "box") ); }); </script> </html> ``` ## 编写一个选项卡 > 原生能写, jquery 就能写, 而且更快, _先来原生的_ 先来布局 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> #div1 div { width: 200px; height: 200px; border: 1px solid red; display: none; } #div1 div:first-of-type { display: block; } .active { background: red; } </style> </head> <body> <div id="div1"> <input class="active" type="button" value="button1" /> <input type="button" value="button2" /> <input type="button" value="button3" /> <div>00001</div> <div>00002</div> <div>00003</div> </div> </body> </html> ``` 再写 js ```javascript window.onload = function() { var oDiv = document.getElementById("div1"); var aInput = oDiv.getElementsByTagName("input"); var aCon = oDiv.getElementsByTagName("div"); for (var i = 0; i < aInput.length; i++) { aInput[i].index = i; aInput[i].onclick = function() { for (var i = 0; i < aInput.length; i++) { aInput[i].className = ""; aCon[i].style.display = "none"; } this.className = "active"; aCon[this.index].style.display = "block"; }; } }; ``` 同样的 html, 再写 jquery ```javascript $(function() { $("#div1") .find("input") .click(function() { $("#div1") .find("input") .attr("class", ""); $("#div1") .find("div") .css("display", "none"); $(this).attr("class", "active"); $("#div1") .find("div") .eq($(this).index()) .css("display", "block"); }); }); ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> #div1 div { width: 200px; height: 200px; border: 1px solid red; display: none; } #div1 div:first-of-type { display: block; } .active { background: red; } </style> </head> <body> <div id="div1"> <input index="0" class="active" type="button" value="button1" /> <input index="1" type="button" value="button2" /> <input index="2" type="button" value="button3" /> <div>00001</div> <div>00002</div> <div>00003</div> </div> </body> <script> $(function() { $("#div1") .find("input") .click(function() { $("#div1") .find("input") .attr("class", ""); $(this).attr("class", "active"); $("#div1") .find("div") .css("display", "none"); $("#div1") .find("div") .eq($(this).attr("index")) .css("display", "block"); }); }); </script> </html> ``` ## `$()下的常用方法` - `addClass()` `removeClass()` > 添加删除样式 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box1 box2"></div> </body> <script> $(function() { $("div").addClass("box3 box4"); }); </script> </html> ``` _如果添加的 class 名称, 已经存在了, 会重复吗?_ ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box1 box2 box3"></div> </body> <script> $(function() { $("div").addClass("box3 box4"); }); </script> </html> ``` 删除类名 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box1 box2 box3"></div> </body> <script> $(function() { $("div").removeClass("box3"); }); </script> </html> ``` _如果类名没有呢?_ ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div class="box1 box2 box3"></div> </body> <script> $(function() { $("div").removeClass("box3 box4"); }); </script> </html> ``` - `width()` `innerWidth()` `outerWidth()` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background: red; } </style> </head> <body> <div></div> </body> <script> $(function() { alert($("div").width()); }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background: red; } </style> </head> <body> <div></div> </body> <script> $(function() { alert($("div").css("width")); }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background: red; } </style> </head> <body> <div></div> </body> <script> $(function() { console.log($("div").width()); console.log($("div").innerWidth()); console.log($("div").outerWidth()); }); </script> </html> ``` 加一个 padding... ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background: red; padding: 20px; } </style> </head> <body> <div></div> </body> <script> $(function() { console.log($("div").width()); console.log($("div").innerWidth()); console.log($("div").outerWidth()); }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background: red; padding: 20px; border: 20px solid black; margin: 20px; } </style> </head> <body> <div></div> </body> <script> $(function() { console.log($("div").width()); console.log($("div").innerWidth()); console.log($("div").outerWidth()); console.log($("div").outerWidth(true)); }); </script> </html> ``` `console.log($("div").width()); // width` `console.log($("div").innerWidth()); // width+padding` `console.log($("div").outerWidth()); // width+padding+border` `console.log($("div").outerWidth(true)); // width+padding+border+margin` - `height()` `innerHeight()` `outerHeight()` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 100px; background: red; padding: 20px; border: 20px solid black; margin: 20px; } </style> </head> <body> <div></div> </body> <script> $(function() { console.log($("div").height()); console.log($("div").innerHeight()); console.log($("div").outerHeight()); console.log($("div").outerHeight(true)); }); </script> </html> ``` - `insertBefore()` `before()` a insertBefore b, 把 a 插入达到 b 的前面 (a,b) a before b, a 的前面是 b (b,a) ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div>this is div</div> <span>this is span</span> </body> <script> $(function() { $("span").insertBefore($("div")); }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <span>this is span</span> <div>this is div</div> </body> <script> $(function() { $("span").before($("div")); }); </script> </html> ``` - `insertAfter()` `after()` a insertAfter b 把 a 插到 b 的后面, (b,a) a after b a 的后面有个 b, (a,b) ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <span>this is span</span> <div>this is div</div> </body> <script> $(function() { $("span").insertAfter($("div")); }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div>this is div</div> <span>this is span</span> </body> <script> $(function() { $("span").after($("div")); }); </script> </html> ``` - `appendTo()` `append()` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <span>this is span</span> <div>this is div</div> </body> <script> $(function() { $("span").appendTo($("div")); // div.appendChild(span) }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div>this is div</div> <span>this is span</span> </body> <script> $(function() { $("span").append($("div")); // span.appendChild(div) }); </script> </html> ``` - `prependTo()` `prepend()` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <span>this is span</span> <div>this is div</div> </body> <script> $(function() { $("span").prependTo($("div")); // span作为div的第一个孩子 }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div>this is div</div> <span>this is span</span> </body> <script> $(function() { $("div").prepend($("span")); // span作为div的第一个孩子 }); </script> </html> ``` **这些方法区别何在?**(后续操作不同) ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div>this is div</div> <span>this is span</span> </body> <script> $(function() { $("div") .before($("span")) .css("background", "red"); }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div>this is div</div> <span>this is span</span> </body> <script> $(function() { $("span") .insertBefore($("div")) .css("background", "red"); }); </script> </html> ``` - `remove()` 删除节点 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> </head> <body> <div>this is div</div> <span>this is span</span> </body> <script> $(function() { $("span").remove(); }); </script> </html> ``` - `on()` `off()` 事件 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background-color: #0f0; } </style> </head> <body> <div></div> </body> <script> $(function() { document.getElementsByTagName("div")[0].onclick = function() { alert("hello world"); }; }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background-color: #0f0; } </style> </head> <body> <div></div> </body> <script> $(function() { $("div").click(function() { alert("hello jquery"); }); }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background-color: #0f0; } </style> </head> <body> <div></div> </body> <script> $(function() { $("div").on("click", function() { alert("has clicked"); }); }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background-color: #0f0; } </style> </head> <body> <div></div> </body> <script> $(function() { $("div").on("mouseover", function() { alert("has overed"); }); }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background-color: #0f0; } </style> </head> <body> <div></div> </body> <script> $(function() { $("div").on("mouseover click", function() { alert("has done"); }); }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background-color: #0f0; } </style> </head> <body> <div></div> </body> <script> $(function() { $("div").on({ click: function() { alert("clicked"); }, mouseover: function() { alert("overed"); } }); }); </script> </html> ``` off 关闭事件 ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background-color: #0f0; } </style> </head> <body> <div></div> </body> <script> $(function() { $("div").on("mouseover click", function() { alert("has done"); $("div").off(); }); }); </script> </html> ``` ```html <!DOCTYPE html> <html lang="zh"> <head> <script src="js/jquery.js"></script> <style> div { width: 200px; height: 200px; background-color: #0f0; } </style> </head> <body> <div></div> </body> <script> $(function() { $("div").on("mouseover click", function() { alert("has done"); $("div").off("click"); }); }); </script> </html> ```