1、each实现遍历操作:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>each实现的遍历title>
<script type="text/javascript" src="../js/jquery-1.8.3.js" >script>
<script>
$(function(){
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
});
script>
head>
<body>
<button>点击按键,each实现遍历操作button>
<ul>
<li>2020li>
<li>新年好!li>
<li>武汉加油!li>
ul>
body>
html>
2、遍历数组:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组遍历title>
<script type="text/javascript" src="../js/jquery-1.8.3.js" >script>
<script>
$(function () {
$.each([213,37,34,567,2020], function(index, value) {
alert(index + ': ' + value);
});
})
script>
head>
<body>
body>
html>
函数中,index代表角标,value代表遍历的每一个元素。
... ...
3、append实现添加操作(在被选元素的末尾添加)
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>append实现添加操作title>
<script type="text/javascript" src="../js/jquery-1.8.3.js" >script>
<script>
$(function(){
$("#button").click(function(){
$("ul").append("武汉加油! ");
});
});
script>
head>
<body>
<button id="button">append添加button>
<ul>
<li>2020li>
<li>新年好!li>
<li>武汉加油!li>
ul>
body>
html>
4、appendTo实现添加操作:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>appendTo实现添加操作title>
<script type="text/javascript" src="../js/jquery-1.8.3.js" >script>
<script>
$(function(){
$("#button").click(function(){
$("武汉加油! ").appendTo("ul");
});
});
script>
head>
<body>
<button id="button">append添加button>
<ul>
<li>2020li>
<li>新年好!li>
<li>武汉加油!li>
ul>
body>
html>
5、empty() 方法:移除被选元素内部的的所有子节点和内容
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>empty实现移除操作title>
<script type="text/javascript" src="../js/jquery-1.8.3.js" >script>
<script>
$(function(){
$("#button").click(function(){
$("ul").empty();
});
});
script>
head>
<body>
<button id="button">empty移除button>
<ul>
<li>2020li>
<li>新年好!li>
<li>武汉加油!li>
<ol>新年快乐!ol>
ul>
body>
html>
点击按键前:
点击按键后:
ul内部的所有元素被移除,文字部分消失了。
6、remove() 方法:移除相匹配的元素所有的文本和子节点
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>remove实现移除操作title>
<script type="text/javascript" src="../js/jquery-1.8.3.js" >script>
<script>
$(function(){
$("#button").click(function(){
$("li").remove();
});
});
script>
head>
<body>
<button id="button">remove移除button>
<ul>
<li>2020li>
<li>新年好!li>
<li>武汉加油!li>
<ol>新年快乐!ol>
ul>
body>
html>
点击按键前:
点击按键执行移除操作后:
只剩下ol元素内部的内容,li内部的内容已被移除。
7、案例(省市二级联动):
(1)核心代码:
此函数用到了用JQ的函数对二维数组进行遍历(each)、DOM操作、DOM对象向JQ对象的转化、清除(empty)。
(2)完整代码:
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市二级联动title>
<script type="text/javascript" src="../js/jquery-1.8.3.js" >script>
<script>
$(function(){
var cities = new Array(11);
cities[0] = new Array("东城区","西城区" ,"崇文区", "宣武区" ,"朝阳区" ,"丰台区","石景山区" ,"海淀区门" ,"头沟区");
cities[1] = new Array();
cities[2] = new Array();
cities[3] = new Array();
cities[4] = new Array();
cities[5] = new Array();
cities[6] = new Array();
cities[7] = new Array();
cities[8] = new Array();
cities[9] = new Array();
cities[10] = new Array();
cities[11] = new Array();
$("#province").change(function(){
$("#city").empty();
var val = this.value;
$.each(cities,function(i,n){
if(val==i){//i为下标,n为当前的省份
$.each(cities[i], function(j,m) {
var textNode = document.createTextNode(m);
var opEle = document.createElement("option");
$(opEle).append(textNode);//对象的转换
$(opEle).appendTo($("#city"));
});
}
});
});
});
script>
head>
<body>
<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
<tr>
<td height="600px" ">
<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
<table border="1px" width="450px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr>
<td>
用户名
td>
<td>
<input type="text" name="user" size="34px" id="user"
onfocus="showTips('user','用户名必填!')"
onblur="check('user','用户名不能为空!')"/>
<span id="userspan">span>
td>
tr>
<tr>
<td>
密码
td>
<td>
<input type="password" name="password" size="34px" id="password"
onfocus="showTips('password','密码必填')"
onblur="check('password','密码不能为空!')"/>
<span id="passwordspan">span>
td>
tr>
<tr>
<td>
确认密码
td>
<td>
<input type="password" name="repassword" size="34px" id="repassword">input>
td>
tr>
<tr>
<td>
Email
td>
<td>
<input type="text" name="email" size="34px" id="email"/>
td>
tr>
<tr>
<td>
姓名
td>
<td>
<input type="text" name="username" size="34px" id="username">input>
td>
tr>
<tr>
<td>
性别
td>
<td>
<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女"/>女
td>
tr>
<tr>
<td>
出生日期
td>
<td>
<input type="text" name="birthday" size="34px" id="birthday">input>
td>
tr>
<tr>
<td>籍贯td>
<td>
<select id="province">
<option>--请选择--option>
<option value="0">北京option>
<option value="1">上海option>
<option value="2">天津option>
<option value="3">重庆option>
<option value="4">黑龙江option>
<option value="5">吉林option>
<option value="6">辽宁option>
<option value="7">河南option>
<option value="8">湖北option>
<option value="9">湖南option>
<option value="10">台湾option>
<option value="11">澳门option>
select>
<select id="city">
select>
td>
tr>
<tr>
<td colspan="2">
<center>
<input type="submit" value="注册" />
center>
td>
tr>
table>
form>
td>
tr>
table>
body>
html>