JavaEE学习日志持续更新----> 必看！JavaEE学习路线（文章总汇）
JavaEE学习日志（六十二）
jQuery
jQuery遍历
传统遍历
遍历所有的option标签
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
<script type="text/javascript">
/*
* 传统形式遍历
*/
window.onload = function(){
//dom对象获取所有的标签option
var 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="<--" />
<input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
</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>
760
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
