JavaEE学习日志持续更新----> 必看！JavaEE学习路线（文章总汇）

JavaEE学习日志（六十二）

jQuery
- jQuery遍历
- - 传统遍历
  - jQuery对象遍历
  - jQuery全局函数each遍历
- jQuery事件
- - 常用事件
  - DOM对象绑定事件
  - jQuery对象绑定事件
  - jQuery对象解绑事件
  - 事件练习
- 省市联动
- 左右互选

jQuery

jQuery遍历

传统遍历

遍历所有的option标签

<select><option>北京</option><option>上海</option><option>广州</option><option>深圳</option>
</select>

<script type="text/javascript">/** 传统形式遍历*/window.onload = function(){//dom对象获取所有的标签optionvar options = document.getElementsByTagName("option");for(var i=0;i<options.length;i++){alert(options[i].innerText);}}
</script>

jQuery对象遍历

jQuery对象调用函数jQuery对象.each(回调函数)
回调函数：函数是自己定义的，但不是自己调用

注意：

回调函数中传递两个参数，一个是索引，一个是遍历到的元素
each遍历数组，遍历一次调用一次匿名函数
jQuery对象本质是数组，遍历的元素是DOM对象

<script type="text/javascript">$(function(){//使用jQuery获取option标签var $option = $("option");//jQuery对象调用函数each/*   回调函数，each函数进行调用*     参数：索引，遍历到的元素*     each遍历数组，遍历一次调用一次匿名函数*/$option.each(function(index,element){/** jQuery对象本质是数组，遍历的元素是DOM对象*/alert($(element).html());});});</script>

jQuery全局函数each遍历

jQuery框架定义函数：each
不需要jQuery对象调用，使用$调用：$.each()

注意：each函数有两个参数

被遍历的对象
回调函数，传递索引和元素

好处：遍历的容器可以是jQuery对象，也可以是DOM对象

<script type="text/javascript">$(function(){//使用jQuery获取option标签var $option = $("option");//jQuery符号$直接调用全局函数each/** each函数的参数* 被遍历的对象* 回调函数，传递索引和元素*/$.each($option, function(index,element) {alert($(element).html());});});</script>

jQuery事件

jQuery绑定事件，事件名没有on

常用事件

click 点击事件
blur 失去焦点
change 内容改变
keyup 键盘弹起
mouseover 鼠标悬停
mouseout鼠标离开

DOM对象绑定事件

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript">window.onload = function(){//获取按钮var btn = document.getElementById("btn");//DOM对象的事件属性绑定btn.onclick = function(){alert("按钮被点击")}}</script></head><body><input type="button" value="按钮" id="btn"/></body>
</html>

jQuery对象绑定事件

绑定一个事件

<script type="text/javascript">$(function(){//调用jQuery的事件函数$("#btn").click(function(){alert("按钮被点击");});});
</script>

绑定多个事件
jQuery对象中的函数，实现对一个事件源同时绑定多个事件。
函数：bind

格式：
bind绑定一个事件

jQuery对象.bind("事件类型",function(){});

bind绑定多个事件

jQuery对象.bind({"事件类型":function(){},"事件类型":function(){}})

jQuery对象解绑事件

函数：unbind

解绑所有事件

$("#btn").unbind();

解绑一个指定的事件

$("#btn").unbind("click");

解绑多个事件：多个事件写成一个字符串，空格隔开

$("#btn").unbind("click mouseover");

具体的演示

<script type="text/javascript">$(function(){$("#btn").bind({"click":function(){alert("绑定一个点击事件");},"mouseover":function(){alert("绑定鼠标悬停事件");}});//解绑$("#unbtn").click(function(){//unbind什么参数都不传递，则解绑所有//$("#btn").unbind();//解除点击事件//$("#btn").unbind("click");//解除多个事件$("#btn").unbind("click mouseover");})});</script>

事件练习

输入数字，在文本框下方显示出来

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script><script type="text/javascript">$(function(){//文本框绑定键盘的弹起事件var text=$("#text");$("#text").keyup(function(){//取出文本框输入的内容，放在div中$("#div").html(text.val()).css("font-size","30px");});});</script></head><body><input type="text" id="text" /><div id="div"></div></body>
</html>

省市联动

使用jQuery重写省市联动

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>用户注册</title><style type="text/css">.regist_bg{background: url(../img/regist_bg.jpg) repeat-x ;width: 100%;height: 600px;padding-top: 40px;           }.regist{border: 7px solid #ccc;width: 800px;padding: 40px 0;padding-left: 80px;background-color: #fff;margin-left: 25%;                }input[type="submit"]{background-image: url(../img/register.gif);width: 100px; height: 35px;color: #fff;cursor: pointer;}</style><script type="text/javascript" src="../js/jquery-3.3.1.min.js" ></script><script type="text/javascript">function selectCity(value){/** value是传递的标签option的value的属性值* 作为索引使用，到二维数组中，找出对应的市* 遍历一维数组* 追加到标签select中*/var citys = [["海淀","昌平","朝阳"],["长春","吉林","延边"],["南京","徐州","苏州"]];var city = citys[value];//获取市区的标签var cityId = $("#cityId");//拼接字符串操作var s = "<option>----请-选-择-市----</option>";//jQuery的全局函数each遍历$.each(city, function(index,element) {s+="<option>"+element+"</option>";});//字符串放到标签中cityId.html(s);}</script></head><body><div class="regist_bg"><div class="regist"><form action="../index.html" ><table  width="600" height="350px"><tr><td colspan="3"><font color="#3164af">会员注册</font> USER REGISTER</td></tr><tr><td align="right">用户名</td><td colspan="2"><input id="loginnameId" type="text" name="loginname" size="60"/> </td></tr><tr><td align="right">密码</td><td colspan="2"><input id="loginpwdId" type="password" name="loginpwd" size="60"/> </td></tr><tr><td align="right">确认密码</td><td colspan="2"><input id="reloginpwdId" type="password" name="reloginpwd" size="60"/> </td></tr><tr><td align="right">Email</td><td colspan="2"><input id="emailId" type="text" name="email" size="60"/> </td></tr><tr><td align="right">姓名</td><td colspan="2"><input name="text" name="username" size="60"/> </td></tr><tr><td align="right">性别</td><td colspan="2"><input type="radio" name="gender" value="男" checked="checked" />男<input type="radio" name="gender" value="女" />女</td></tr><tr><td align="right">出生日期</td><td colspan="2"><input type="text" name="birthday" size="60"/> </td></tr><tr><td align="right">所在地</td><td colspan="3"><select id="provinceId" onchange="selectCity(this.value)" style="width:150px"><option value="">----请-选-择-省----</option><option value="0">北京</option><option value="1">吉林省</option><option value="2">江苏省</option></select><select id="cityId" style="width:150px"><option value="">----请-选-择-市----</option></select></td></tr><tr><td width="80" align="right">验证码</td><td width="100"><input type="text" name="verifyCode" /> </td><td><img src="../img/code.png" /> </td></tr><tr><td></td><td colspan="2"><input type="submit" value="注册" /> </td></tr></table></form></div></div></body>
</html>

左右互选

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>左右互选</title><style type="text/css">body{font-family:Courier;;font-size: 12px;margin:0px 0px 0px 0px;overflow-x:no;overflow-y:no;background-color: #B8D3F4;}td{font-size:12px;}.default_input{border:1px solid #666666;height:18px;font-size:12px;}.default_input2{border:1px solid #666666;height:18px;font-size:12px;}.nowrite_input{border:1px solid #849EB5;height:18px;font-size:12px;background-color:#EBEAE7;color: #9E9A9E;}.default_list{font-size:12px;border:1px solid #849EB5;}.default_textarea{font-size:12px;border:1px solid #849EB5;}.nowrite_textarea{border:1px solid #849EB5;font-size:12px;background-color:#EBEAE7;color: #9E9A9E;}.wordtd5 {font-size: 12px;text-align: center;vertical-align:top;padding-top: 6px;padding-right: 5px;padding-bottom: 3px;padding-left: 5px;background-color: #b8c4f4;}.wordtd {font-size: 12px;text-align: left;vertical-align:top;padding-top: 6px;padding-right: 5px;padding-bottom: 3px;padding-left: 5px;background-color: #b8c4f4;}.wordtd_1 {font-size: 12px;vertical-align:top;padding-top: 6px;padding-right: 5px;padding-bottom: 3px;padding-left: 5px;background-color: #516CD6;color:#fff;}.wordtd_2{font-size: 12px;text-align: right;vertical-align:top;padding-top: 6px;padding-right: 5px;padding-bottom: 3px;padding-left: 5px;background-color: #64BDF9;}.wordtd_3{font-size: 12px;text-align: right;vertical-align:top;padding-top: 6px;padding-right: 5px;padding-bottom: 3px;padding-left: 5px;background-color: #F1DD34;}.inputtd{font-size:12px;vertical-align:top;padding-top: 3px;padding-right: 3px;padding-bottom: 3px;padding-left: 3px;}.inputtd2{text-align: center;font-size:12px;vertical-align:top;padding-top: 3px;padding-right: 3px;padding-bottom: 3px;padding-left: 3px;}.tablebg{font-size:12px;}.tb{border-collapse: collapse;border: 1px outset #999999;background-color: #FFFFFF;}.td2{line-height:22px; text-align:center; background-color:#F6F6F6;}.td3{background-color:#B8D3F4; text-align:center; line-height:20px; width:160px;}.td4{background-color:#F6F6F6;line-height:20px;}.td5{border:#000000 solid;border-right-width:0px;border-left-width:0px;border-top-width:0px;border-bottom-width:1px;}.tb td{font-size: 12px;border: 2px groove #ffffff;}.noborder {border: none;}.button {border: 1px ridge #ffffff;line-height:18px;height: 20px;width: 45px;padding-top: 0px;background:#CBDAF7;color:#000000;font-size: 9pt;font-family:Courier;;} .textarea {font-family: Arial, Helvetica, sans-serif, "??";font-size: 9pt;color: #000000;border-bottom-width: 1px;border-top-style: none;border-right-style: none;border-bottom-style: solid;border-left-style: none;border-bottom-color: #000000;background-color:transparent;text-align: left}</style><script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script><script type="text/javascript">$(function(){//左向右移动$("#add").click(function(){//获取选中，层次选择器，后代子标签$("#second").append($("#first option:selected"));});//左向右全部移动$("#add_all").click(function(){//获取选中，层次选择器，后代子标签$("#second").append($("#first option"));});//右向左移动$("#remove").click(function(){//获取选中，层次选择器，后代子标签$("#first").append($("#second option:selected"));});//右向左全部移动$("#remove_all").click(function(){//获取选中，层次选择器，后代子标签$("#first").append($("#second option"));});});</script></head><body><div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:450px; height:300px; background-color:#E6E6E6;"><table width="385" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;"><tr><td width="126"><!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度--><select name="first" size="10" multiple="multiple" class="td3" id="first"><option value="选项1">选项1</option><option value="选项2">选项2</option><option value="选项3">选项3</option><option value="选项4">选项4</option><option value="选项5">选项5</option><option value="选项6">选项6</option><option value="选项7">选项7</option><option value="选项8">选项8</option></select>    </td><td width="89" valign="middle" align="center"><input name="add"  id="add" type="button" class="button" value="-->" /> <input name="add_all" id="add_all" type="button" class="button" value="==>" /> <input name="remove"  id="remove" type="button" class="button" value="&lt;--" /><input name="remove_all" id="remove_all" type="button" class="button" value="&lt;==" /></td><td width="127" align="left"><select name="second" size="10" multiple="multiple" class="td3" id="second"><option value="选项9">选项9</option></select></td></tr></table></div></body>
</html>

JavaEE学习日志(六十二): jQuery遍历，jQuery事件，省市联动，左右互选相关推荐

JavaScript学习（六十二）—解析选项和序列化选项
JavaScript学习(六十二)-解析选项和序列化选项一.解析选项格式:JSON.parse(参数1,参数2); 参数说明参数1:表示要转换为JS对象的json字符串参数2:表示将json转 ...
salesforce 零基础学习（六十二）获取sObject中类型为Picklist的field values(含record type)...
本篇引用以下三个链接: http://www.tgerm.com/2012/01/recordtype-specific-picklist-values.html?m=1 https://github ...
深度学习（六十二）SqueezeNet网络设计思想笔记
JSP学习笔记(六十二)：struts2中的Lambda表达式
<s:property value="#conv =:[#this==1?'男':#this==2?'女':''], #conv(1)" /> 或者 <s:pro ...
JavaEE学习日志(七十三): 黑马商城项目（六）
JavaEE学习日志持续更新----> 必看!JavaEE学习路线(文章总汇) JavaEE学习日志(七十三) 黑马商城项目(六) 今天任务在线支付准备工作前端 OrdersDao Ord ...
Slicer学习笔记（六十二）slicer下导出模块接口
Slicer学习笔记(六十二)slicer下导出模块接口 1. 参考文件实现 1. 参考文件实现通过配置config_file为每一个生成类添加 Export,并为每个Module生成 Export ...
JavaScript学习（六十六）—字符串对象常用的属性和方法总结以及数组元素的排序问题
JavaScript学习(六十六)-字符串对象常用的属性和方法总结以及数组元素的排序问题学习内容一.数组去重问题二.二维数组的定义三.二维数组的元素操作四.二维数组的遍历五.关联数组六. ...
JavaScript学习（六十五）—数组知识点总结
JavaScript学习(六十五)-数组学习内容一.什么是数组二.数组的分类三.数组的创建方式四.数组元素五.数组的操作六.数组元素遍历的四种方法七.随机数为数组赋值八.数组的比较 ...
【正点原子Linux连载】第六十二章 Linux SPI驱动实验 -摘自【正点原子】I.MX6U嵌入式Linux驱动开发指南V1.0
1)实验平台:正点原子阿尔法Linux开发板 2)平台购买地址:https://item.taobao.com/item.htm?id=603672744434 2)全套实验源码+手册+视频下载地址: ...

JavaEE学习日志(六十二): jQuery遍历，jQuery事件，省市联动，左右互选