事件绑定第一种方式： 事件绑定第二种方式
JQuery简介
一。JQUERY学习重点:
1.熟练背诵JQUERY[选择器和过滤器]语法 2.熟练掌握【JQUERY对象】提供【功能函数】 二。jquery学习方式
1.一天理论介绍 2.分段提供jquery练习内容 三。JQUERY技术介绍:
1.就是JavaScript的封装版 2.简化JavaScript对DOM对象定位以及对DOM对象属性操作开发步骤 四。JQUERY使用：
1.下载jquery工具文件，并导入到工程中. 2.将jquery文件加载到浏览上。 五。jquery对象与DOM对象区别:
1. DOM对象: 1)在浏览器加载网页时，由浏览器负责创建的. 2)一个html标签对应一个DOM对象. 3)可以通过管理DOM对象，来对关联html标签中属性进行操作。 2. jquery对象： 1)是[jquery函数 $() ]负责创建的 2)jquery对象就是一个【数组】 3)jquery对象中存放的本次定位【dom对象】 4)可以通过jquery对象中【功能函数】,来快速的对定位【dom对象】进行操作管理 六。JQUERY对象与DOM对象转换:
1.如何将JQUERY对象转换为DOM对象. for(var i=0;i<$obj.length;i++){ var domObj = $obj[i]; } 2.如何将DOM对象转换为JQUERY对象 var $obj = $(domObj); ***** jquery对象与DOM对象之间属性和函数彼此不能调用. 案例：
<html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js" ></script> <script type="text/javascript"> function selectAll(){ //1.获得第一个checkbox的选中状态 var flag= $("#selectAllBut").prop("checked"); //2.为所有数据行checkbox的选中状态设置 var $obj=$(".ah");//jquery对象名称一般是以$为开头的. $obj.prop("checked",flag); } </script> </head> <body> <!-- this表示触发当前事件的HTML元素对象 --> <input type="checkbox" onclick="selectAll()" id="selectAllBut"/>全选<br /> <input type="checkbox" class="ah" />吃<br /> <input type="checkbox" class="ah" />喝<br /> <input type="checkbox" class="ah"/>玩<br /> </body> </html> JQUERY选择器语法
一。什么是选择器语法:
1.就是对DOM对象进行定位的条件，比如根据ID定位，根据标签类型名 2.jquery中只有三种选择器 二。基本选择器:
1.【定位条件】：可以根据ID编号，根据标签类型名,根据标签采用样式选择器 2.【使用】： 1） $("#id编号")：代替 document.getElementById("id") 根据ID编号定位对应的DOM对象。让DOM对象保存到一个数组中 并返回。返回这个数组就是【jquery对象】 2） $(".样式选择器名称")：代替document.getElementsByClassName("样式选择器名") 将使用了指定的样式选择器的dom对象保存到同一个数组中， 并返回。返回这个数组就是【jquery对象】 3） $("标签类型名"): 代替document.getElementsByTagName() 将所有指定的标签类型关联的DOM对象保存到同一个数组中并返回 ，返回的这个数组就是【jquery对象】 4) $("*"): 定位浏览器中所有的DOM对象保存到同一个数组中并返回。 返回的这个数组就是【jquery对象】 5） $("条件1,条件2")：只要DOM对象满足其中的一种条件，就会被定位到数组中 相当于mysql or where sal>=3000 or job='mangaer' 案例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript" src="js/jquery-3.3.1.js" ></script> <script> function fun1(){ /* css函数“ 1：jquery对象中功能函数 2：负责将jquery对象中所有的DOM对象的样式属性进行统一赋值 */ var $obj = $("#one"); $obj.css("background-color","red"); } function fun2(){ var $obj = $(".two"); $obj.css("background-color","green"); } function fun3(){ var $obj = $("div"); $obj.css("background-color","aqua"); } function fun4(){ var $obj = $("*"); $obj.css("background-color","yellow"); } function fun5(){ var $obj = $("#one,span"); $obj.css("background-color","blue"); } </script> <title>jQuery基本选择器</title> <meta charset="utf-8"> <style type="text/css"> div{ background: gray; width: 200px; height: 100px; } .two{ } </style> </head> <body> <!--定义被选择对象--> <div id="one" class="two"></div><br> <div class="two"></div><br> <div></div><br> <span>我是span标签</span> <br> <!--定义按钮--> <input type="button" id="btn01" value="选择id为one的元素" onclick="fun1()"/> <input type="button" id="btn02" value="选择class为two的元素" onclick="fun2()"/> <input type="button" id="btn03" value="选择所有div元素" onclick="fun3()"/> <input type="button" id="btn04" value="选择所有元素" onclick="fun4()"/> <input type="button" id="btn05" value="选择id为one与所有span元素" onclick="fun5()"/> </body> </html> 三。层级选择器:
1.[定位条件]：可以根据标签之间父子关系定位 可以根据标签之间兄弟关系定位 2.[标签之间关系]: 1)父子关系：就是包含关系 <tr> <td> <input type="checkbox"> </td> </tr> TD 是 TR 的 【直接子标签】 INPUT 是 TD 的 【直接子标签】 INPUT 是 TR 的 【间接子标签】 2）兄弟关系: 两个标签拥有相同的父标签，并且彼此之间没有包含关系 <body> <div>1</div> 大哥 <div>2</div> 二哥 <p>段落标签</p> 三弟 </body> 3.【使用】： 1） $("定位父标签条件>定位子标签条件") 定位当前父标签下，所有满足条件的【直接子标签】 2） $("定位父标签条件 定位子标签条件") 定位当前父标签下，所有满足条件的【直接子标签】和【间接子标签】 3) $("定位当前标签条件~定位兄弟标签条件"): 定位当前标签【后面】，所有满足条件的兄弟标签 4） $("定位当前标签条件+定位兄弟标签条件"): 定位当前标签【后面与之紧邻的】，并且满足条件的所有兄弟标签 5） $("定位当前标签条件").siblings("定位兄弟标签条件") 定位当前标签[前面与后面]所有满足条件的兄弟标签 案例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>jQuery层级选择器</title> <meta charset="utf-8"> <script type="text/javascript" src="js/jquery-3.3.1.js" ></script> <script> function fun1(){ $("body div").css("background-color","pink"); } function fun2(){ $("body>div").css("background-color","orange"); } function fun3(){ $("#one+div").css("background-color","aqua") } function fun4(){ $("#two~div").css("background-color","red") } function fun5(){ $("#two").siblings("div").css("background-color","green") } </script> <style type="text/css"> div{ background: gray; } </style> </head> <body> <!--定义被选择对象--> <div id="one">我是div01</div> <div id="two">我是div02</div> <div> 我是div03 <div class="son">我是div03的子div</div> <div class="son">我是div03的子div</div> </div> <div>我是div04</div> <span>我是span标签</span> <br> <!--定义按钮--> <input type="button" id="btn01" value="选择body中的所有div子标签" onclick="fun1()"/> <input type="button" id="btn02" value="选择body下的直接div子标签" onclick="fun2()"/> <input type="button" id="btn03" value="选择id为one的下一个兄弟div" onclick="fun3()"/> <input type="button" id="btn04" value="选择id为two的所有后面的兄弟div" onclick="fun4()"/> <input type="button" id="btn05" value="选择id为two的所有兄弟div" onclick="fun5()"/> </body> </html> 四。INPUT标签选择器:
1.INPUT标签组成: <input type="text"> <input type="password"> <input type="radio"> <input type="checkbox"> <input type="file">//文件选择框 <input type="button"> <input type="submit"> <input type="reset"> 2.INPUT标签作用： 作为浏览器向网站发送请求是携带请求参数 3.[使用]: $(":type属性名字") 4.【例子】: $(":button"):定位页面中所有的button关联的DOM $(":checkbox")：定位页面中所有的checkbox关联的DOM $(":table"):无法定位任何内容，因为input标签类型中没有table。 案例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>jQuery表单input框选择器</title> <meta charset="utf-8"> <script type="text/javascript" src="js/jquery-3.3.1.js" ></script> <script> //ReferenceError: $ is not defined ：jquery文件没有加载到浏览器中 function fun1(){ var $obj = $(":text"); var value = $obj.val(); alert("文本框的value值 "+value) /* val（）函数 1.jquery对象中一个功能函数 2.读取jquery对象中【第一个Dom对象】的value属性内容 */ } function fun2(){ var value = $(":password").val(); alert("密码框内容 "+value) } function fun3(){ var $obj = $(":radio"); /* each函数遍历jquery对象中DOM对象. 每次读取一个【下标值】和对应的【DOM对象】 交给处理函数 */ $obj.each(myFun); } function myFun(index,domObj){ alert("第"+(index+1)+"个radio标签的value是 "+domObj.value) } function fun4(){ alert($(":file").val()); } function fun5(){ var $obj=$(":checkbox:checked");//定位的被用户选中的checkbox $obj.each(test); } function test(i,domObj){ alert("第"+(i+1)+"个checkbox的value值 "+domObj.value); } </script> </head> <body> <!--定义表单--> <form id="myForm" action=""> 用户名： <input type="text" name="username"/><br><br> 密 码： <input type="password" name="password"/><br><br> 性 别： <input type="radio" name="gender" value="1" checked/>男 <input type="radio" name="gender" value="0"/>女<br><br> 照 片： <input type="file" name="photo"/><br><br> 兴 趣： <input type="checkbox" name="interest" value="music" checked/>音乐 <input type="checkbox" name="interest" value="food"/>美食 <input type="checkbox" name="interest" value="travel"/>旅游 <input type="checkbox" name="interest" value="shopping"/>购物 <br><br> <input type="submit" value="提交"/> </form> <br><br> <!--定义按钮--> <button id="btn01" onclick="fun1()">选择文本输入框并输出用户输入的值</button> <button id="btn02" onclick="fun2()">选择密码输入框输出用户输入的密码</button> <button id="btn03" onclick="fun3()">选择单选框的value属性值</button> <button id="btn04" onclick="fun4()">选择文件上传框并输出用户选择的文件</button> <button id="btn05" onclick="fun5()">选择复选框并输出用户选择的值</button> </body> </html> JQUERY中过滤器
一。过滤器语法介绍:
1.对已经定位到jquery对象中DOM对象，进行二次过滤筛选的。 2.过滤器不能独立使用，必须声明在选择器后面 3.六种过滤器（三种常见过滤器） 4.将多个过滤器放到同一个jquery函数，进行层层过滤 二。基本过滤器:
1.[过滤器条件]: 根据已经定位的DOM对象在jquery对象中存储位置进行二次过滤筛选 2.[使用]: $("选择器:first")：留下满足条件中的第一个DOM对象 例子：$(":button:first"):定位页面中第一个button $("选择器:last")：留下满足条件中的最后一个DOM对象 例子：$(":button:last"):定位页面中最后一个button $("选择器:eq(下标值)"):留下满足条件中的指定位置的DOM对象 例子：$("div:eq(2)") 定位页面中第三个DIV $("选择器:lt(下标值)")：留下满足条件中的指定位置之前的所有Dom 例子： $(":checkbox:lt(2)"):页面中前两个checkbox $("选择器:gt(下标值)"):留下满足条件中的指定位置之后的所有Dom 例子: $(":button:gt(3)"):位置在第四个butotn之后的所有的button 案例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>jQuery基本过滤选择器</title> <meta charset="utf-8"> <script type="text/javascript" src="js/jquery-3.3.1.js" ></script> <script> function fun1(){ $("div:first").css("background-color","yellow"); } function fun2(){ $("div:eq(3)").css("background-color","green"); } function fun3(){ $("div:lt(3)").css("background-color","red"); } function fun4(){ $("div:gt(3)").css("background-color","red"); } </script> <style type="text/css"> div{ background: gray; } </style> </head> <body> <!--定义被选择对象--> <h2>以下是div</h2> <div id="one">我的序号是0</div> <div id="two" class="c02">我的序号是1</div> <div> 我的序号是2 <div class="son">我的序号是3</div> <div class="son">我的序号是4</div> </div> <div>我的序号是5</div> <h3>以下是span</h3> <span>我是span标签</span> <br><br> <!--定义按钮--> <input type="button" id="btn01" value="选择第一个div" onclick="fun1()"/> <input type="button" id="btn02" value="选择最后一个div"/> <input type="button" id="btn03" value="选择id值不是one的div"/> <input type="button" id="btn04" value="选择class不包含c02的div"/> <input type="button" id="btn05" value="选择索引号为奇数的div元素"/> <input type="button" id="btn06" value="选择索引号为偶数的div元素"/> <input type="button" id="btn07" value="选择索引号等于3的div元素" onclick="fun2()"/> <input type="button" id="btn08" value="选择索引号小于3的div元素" onclick="fun3()"/> <input type="button" id="btn09" value="选择索引号大于3的div元素" onclick="fun4()"/> <input type="button" id="btn10" value="选择所有标题元素"/> </body> </html> 三。基本属性过滤器
1.[过滤条件]: 根据标签在声明时是否为指定属性进行手动赋值 根据标签的属性内容与【指定内容】关系进行过滤器 2.[例子]: <div>1</div> <div name="two">2</div> <div name="three">3</div> <div name="four">4</div> 问题1,哪一个DIV中没有name属性 所有DIV标签都有name属性 问题2：哪一个DIV中name属性的值是"" 第一个DIV手动为name属性赋值，因此name属性值是默认值，就是"" 3.[使用]: 1) $("选择器[属性名]"):留下满足定位条件的并且在声明时为指定属性进行手动赋值的DOM对象 例子: $("div[name]") <div name="two">2</div> <div name="three">3</div> 2) $("选择器[属性名='值']")：留下满足定位条件的并且指定属性内容【等于】指定内容DOM 例子: $("div[name='two']") <div name="two">2</div> $("div[name='']") <div>1</div> $("div[name!='four']") <div>1</div> <div name="two">2</div> <div name="three">3</div> 3.$("选择器[属性名^='值']"):留下满足定位条件的并且指定属性内容以【指定内容为开头】所有DOM 例子: $("div[name^='t']") <div name="two">2</div> <div name="three">3</div> 4.$("选择器[属性名$='值']")留下满足定位条件的并且指定属性内容以【指定内容为结尾】所有DOM 例子:$("div[name$='e']") <div name="three">3</div> 5.$("选择器[属性名*='值']")留下满足定位条件的并且指定属性内容【包含】指定内容的所有DOM 例子: $("div[name*='o']") <div name="two">2</div> <div name="four">4</div> 6.$("选择器[属性名1][属性名2*='值'][属性名3^='值']") 案例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>jQuery过滤选择器</title> <meta charset="utf-8"> <script type="text/javascript" src="js/jquery-3.3.1.js" ></script> <script> function fun1(){ $("div[title]").css("background-color","red"); } function fun2(){ $("div[title='test']").css("background-color","yellow"); } function fun3(){ $("div[title!='test']").css("background-color","yellow"); } function fun4(){ $("div[title^='te']").css("background-color","blue"); } function fun5(){ $("div[title$='st']").css("background-color","green"); } function fun6(){ $("div[title*='es']").css("background-color","pink"); } function fun7(){ $("div[title*='es'][id]").css("background-color","pink"); } function fun8(){ $("div[title*='es']:first").css("background-color","pink"); } </script> <style type="text/css"> div{ background: gray; width: 200px; height: 100px; } .son{ background: cyan; width: 180px; height: 20px; } </style> </head> <body> <!--定义被选择对象--> <div id="one" title="test">zero</div> <div class="c02" title="myTest">one</div> <div> two <div id="three" class="son">three</div> <div title="test" class="son">four</div> </div> <div title="testCase" id="">five</div> <div>six</div> <span>我是span标签</span> <br><br> <!--定义按钮--> <input type="button" id="btn01" value="选择包含title属性的div元素" onclick="fun1()"/> <input type="button" id="btn02" value="选择title属性值为test的div元素" onclick="fun2()"/> <input type="button" id="btn03" value="选择title属性值不为test的div元素" onclick="fun3()"/> <input type="button" id="btn04" value="选择title属性以'te'开头的div元素" onclick="fun4()"/> <input type="button" id="btn05" value="选择title属性以'st'结尾的div元素" onclick="fun5()"/> <input type="button" id="btn06" value="选择title属性包含'es'的div元素" onclick="fun6()"/> <input type="button" id="btn07" value="选择title属性包含'es'的并且含有id属性的div元素" onclick="fun7()"/> <input type="button" id="btn08" value="选择title属性包含'es'的第一个DIV" onclick="fun8()"/> </body> </html> 四。工作状态属性过滤器
1.html标签属性分类： 1）基本属性：绝大多数标签都拥有的属性，【id,name,title,rowspan】 2) 样式属性：背景，字体，边框 3) value属性： 只存在【表单域标签中 （input,select,textarea）】 4) 工作状态属性:只存在表单域标签[chekced，disabled，selected] 5) 监听事件属性 ： onclick ,onchange.... 2.[使用]: 1) $("选择器:enabled")：留下满足条件的并且处于【可用状态】的DOM 例子: $(":button:enabled")：定位所有处于可用的button 2) $("选择器:disabled")：留下满足条件的并且处于【不可用状态】的DOM 例子: $(":button:disabled")：定位所有处于不可用的button 3）$("选择器:checked")： 留下满足条件的并且处于【选中状态的】DOM 例子:$(":checkbox:checked:first"):页面中第一个被选中的checkbox 4) $("选择器:selected")：留下满足条件的并且处于【选中状态的】DOM 例子：$("select>option:selected")：下拉列表中被选中的option 案例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>jQuery表单相关元素选择器</title> <meta charset="utf-8"> <script type="text/javascript" src="js/jquery-3.3.1.js" ></script> <script> /* val() $obj.val(): 读取jquery对象中第一个DOM对象的value属性值 $obj.val("值"): 为jquery对象中所有的DOM对象的value属性值进行统一赋值 */ function fun1(){ $(":text:enabled").val("可用文本框"); } function fun2(){ $(":text:disabled").val("不可用文本框"); } function fun3(){ $(":checkbox:checked").each(loop); } function loop(index,domObj){ alert("第"+(index+1)+"个被选中的checkbox的value "+$(domObj).val()) } function fun4(){ //alert($("#city>option:selected").val()); alert($("#city").val()) } </script> </head> <body> <!--定义文本框--> 文本01：<input type="text" id="text01" value="value01" /><br> 文本02：<input type="text" id="text02" value="value02" disabled/><br> 文本03：<input type="text" id="text03" value="value03"/><br> 文本04：<input type="text" id="text04" value="value04" disabled/><br> <br> <!--定义复选框--> <input type="checkbox" name="interest" value="reading" checked/>读书 <input type="checkbox" name="interest" value="food"/>美食 <input type="checkbox" name="interest" value="travel" checked/>旅游 <input type="checkbox" name="interest" value="music"/>音乐 <input type="checkbox" name="interest" value="shopping" checked/>购物 <br><br> <!--定义下拉列表--> <select id="city" > <option value="bj" title="beijing" title="" selected>北京</option> <option value="sh" title="shanghai">上海</option> <option value="gz" title="guangzhou">广州</option> <option value="sz" title="shenzhen">深圳</option> <option value="hz" title="hangzhou">杭州</option> </select> <br><br> <!--定义测试按钮--> <button id="btn01" onclick="fun1()">选择可用文本框并修改其值</button> <button id="btn02" onclick="fun2()">选择不可用文本框并修改其值</button> <button id="btn03" onclick="fun3()">选择复选框被选中的元素</button> <button id="btn04" onclick="fun4()">选择下拉列表中被选中的元素</button> </body> </html> JQUERY对象中【功能函数】
一。show() & hide()：
show():负责让jquery对象包含的所有DOM对象关联的标签在浏览上显示 style="display:block" hide():负责让jquery对象包含的所有DOM对象关联的标签在浏览上隐藏 style="display:none" 案例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width:200px; height: 200px; background-color: green; font-size: 30px; color: red; } </style> <script type="text/javascript" src="js/jquery-3.3.1.js" ></script> <script> function fun1(){ $("div").hide(); } function fun2(){ $("div").show(); } </script> </head> <body> <div> 我是一个DIV </div> <input type="button" value="隐藏DIV" onclick="fun1()"/> <input type="button" value="显示DIV" onclick="fun2()"/> </body> </html> 二。remove() & empty():
empty：将当前标签子标签进行清除处理 remove：将当前标签及其子标签一并删除 案例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> </style> <script type="text/javascript" src="js/jquery-3.3.1.js" ></script> <script> function fun1(){ $("#one").remove(); } function fun2() { $("#two").empty(); } </script> </head> <body> 大臣1：<select id="one"> <option value="">大儿子</option> <option value="">二儿子</option> </select> 大臣2：<select id="two"> <option value="">大儿子</option> <option value="">二儿子</option> </select> <br /> <input type="button" value="大臣1满门抄斩" onclick="fun1()"/> <input type="button" value="大臣2断子绝孙" onclick="fun2()"/> </body> </html> 三. append() & appendTo()
1.共同点:都是操作标签中innerHTML，为当前标签添加子标签 2.append(): 父标签.append（子标签）；父亲给自己找了一个儿子 appendTo(): 子标签.appendTo(父标签); 儿子各自找了一个爹 案例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #father{ width:400px; height: 400px; background-color: green; font-size: 30px; color: red; margin-bottom: 10px; } #son{ width:80px; height: 80px; background-color: yellow; font-size: 20px; color: red; margin-bottom: 10px; } .two{ width:200px; height: 200px; background-color: pink; font-size: 20px; color: red; } </style> <script type="text/javascript" src="js/jquery-3.3.1.js" ></script> <script> function fun1(){ $("#father").append($("#son")); } function fun2(){ $("#son").appendTo($("#father")); } </script> </head> <body> <div id="father"> 我是爸爸 </div> <div class="two"> <div id="son"> 我是儿子 </div> </div> <input type="button" value="爸爸给自己找了个儿子" onclick="fun1()"/> <input type="button" value="儿子给自己找了个爹" onclick="fun2()"/> </body> </html> 四。属性操作函数
1. val函数: value
1) $obj.val(): 读取jquery对象中第一个DOM对象的【value属性值】 2) $obj.val(值):为jquery对象中所有DOM对象的[value属性]进行统一赋值 2.prop函数: 工作状态属性 checked,disabled,selected
1) $obj.prop("checked",true)：为jquery对象中所有DOM对象的checked属性值赋值为true 2) $obj.prop（"checked"）：读取jquery对象中第一个DOM对象的【checked属性值】 3.attr函数: 基本属性 id name title rowspan
1) $obj.attr("name","ck")：为jquery对象中所有DOM对象的【name属性】统一赋值为[ck] 2) $obj.attr("title")：读取jquery对象中第一个DOM对象的【title属性】的值 4.text函数：操作属性innerText，双目标签的文本显示内容
双目标签：<div>123<div> 单目标签：<br/>123 1) $obj.text("123"):为jquery对象中所有DOM对象的innerText属性赋值为"123" 2）$obj.text(); 读取jquery对象中所有DOM对象的innerText属性内容，拼接为一个字符串返回 案例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js" ></script> <script> function fun1(){ var $option = $("#city>option:selected"); alert("value = "+$option.val()); alert("title = "+$option.attr('title')); alert("文字显示内容 = "+$option.text()); alert("selected = "+$option.prop("selected")); } </script> </head> <body> <center> <select id="city" onchange="fun1()"> <option value="bj" title="beijing" title="" selected>北京</option> <option value="sh" title="shanghai">上海</option> <option value="gz" title="guangzhou">广州</option> <option value="sz" title="shenzhen">深圳</option> <option value="hz" title="hangzhou">杭州</option> </select> </center> </body> </html> JQUERY中事件绑定方式
一。JavaScript中事件绑定方式:
1.嵌入式绑定: <input type="button" onclick="fun1()"> 缺点：一次只能为一个标签绑定监听事件 2.基于DOM对象绑定方式: var array = docuemnt.getElementsByName("ck"); for(var i=0;i<array.length;i++){ var domObj = array[i]; domObj.onclick = fun1; } 缺点：需要开发人员自行遍历数组，来绑定监听事件 二。jquery中事件绑定方式:
1. $obj.jquery监听事件函数(处理函数) [例子]: $(":button").click(fun1); 为页面中所有的btton绑定onclick以及对应处理函数fun1 [jquery监听事件函数]: html监听事件名称 jquery监听事件函数 onclick $obj.click(fun1); onchange $obj.change(fun1); onmouseover $obj.mouseover(fun1); *******jquery监听事件函数名字就是【jquery监听事件函数】去掉[on] 2.$obj.bind("jquery监听事件函数名",处理函数):以这种方式绑定监听事件，可以解除的 $obj.unbind("jquery监听事件函数名"):将指定监听事件从DOM对象身上移除。 $obj.unbind(): 将所有监听事件从DOM对象身上移除。 案例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js" ></script> <script> window.onload=main; function main(){ $(":button").click(fun1); } function fun1 () { // this 被单击的button的DOM对象 alert($(this).val()); } </script> </head> <body> <input type="button" value="我是大哥"> <input type="button" value="我是二哥"> <input type="button" value="我是三哥"> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js" ></script> <script> function fun1 () { //$(":button:lt(3)").bind("click",dealFun); $(":button:lt(3)").click(dealFun); } function fun2(){ $(":button:lt(2)").unbind("click"); } function dealFun(){ alert($(this).val()); } </script> </head> <body> <input type="button" value="我是大哥"> <input type="button" value="我是二哥"> <input type="button" value="我是三哥"> <br/> <input type="button" value="为前三个button绑定onclick" onclick="fun1()"> <input type="button" value="为前两个个button解除onclick绑定" onclick="fun2()"> </body> </html>
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
