JQ——遍历(each遍历、数组遍历)、添加(append、appendTo)、清除(empty、remove)、省市二级联动

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>

JQ——遍历(each遍历、数组遍历)、添加(append、appendTo)、清除(empty、remove)、省市二级联动_第1张图片

 

 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代表遍历的每一个元素。

JQ——遍历(each遍历、数组遍历)、添加(append、appendTo)、清除(empty、remove)、省市二级联动_第2张图片

 

 JQ——遍历(each遍历、数组遍历)、添加(append、appendTo)、清除(empty、remove)、省市二级联动_第3张图片

 

 JQ——遍历(each遍历、数组遍历)、添加(append、appendTo)、清除(empty、remove)、省市二级联动_第4张图片

 

 ... ...

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>

    JQ——遍历(each遍历、数组遍历)、添加(append、appendTo)、清除(empty、remove)、省市二级联动_第5张图片

     

    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>

    JQ——遍历(each遍历、数组遍历)、添加(append、appendTo)、清除(empty、remove)、省市二级联动_第6张图片

     

     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>

    点击按键前:

    JQ——遍历(each遍历、数组遍历)、添加(append、appendTo)、清除(empty、remove)、省市二级联动_第7张图片

     

     点击按键后:

     

     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>

    点击按键前:

    JQ——遍历(each遍历、数组遍历)、添加(append、appendTo)、清除(empty、remove)、省市二级联动_第8张图片

     

     点击按键执行移除操作后:

     

     只剩下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>

     

    你可能感兴趣的:(JQ——遍历(each遍历、数组遍历)、添加(append、appendTo)、清除(empty、remove)、省市二级联动)