第二阶段（day06）jquery2

sunshine195

已于 2022-09-04 19:53:53 修改

阅读量113

点赞数

分类专栏：第二阶段文章标签： java

于 2022-04-03 14:28:00 首次发布

本文链接：https://blog.csdn.net/sunshine195/article/details/123937188

版权

第二阶段专栏收录该内容

27 篇文章 2 订阅

订阅专栏

本文详细介绍了Jquery中的常用方法，包括DOM操作、样式处理、事件绑定、JSON处理以及动态添加元素等功能。同时，还展示了如何实现省市县级联菜单、全选/反选、数字加减框等实际应用。此外，还涵盖了Jquery中的显示效果、事件处理和JSON格式的使用。

摘要由CSDN通过智能技术生成

1.Jquery常用方法

1.1 Jquery常用方法补充回顾

html() 可以解析html标签对双标签内容进行取值和赋值

val() 对表单元素的value属性进行取值和赋值

text() 不解析html标签对双标签内容进行取值和赋值

css() 操作样式属性样式属性使用跟css相同的属性和值

addClass() 追加样式

removeClass() 移除样式

find(选择器) 在当前元素中查找子元素

eq(idx) 在当前元素中按索引查找元素

not(选择器) 排除指定元素

2.Jquery节点操作

2.1元素节点操作

1.子节点

A.append(B) A里添加节点B

B.appendTo(A) 把B添加到A的内部

A.prepend(B) A里添加节点B 头部插入

B.prependTo(A) 把B添加到A的内部头部插入

<body>
        <input id="addEleBtn1" type="button" value="添加元素" />
        <ul id="myul">
            <li><input type="button" value="测试按钮"/></li>
        </ul>
    </body>
    <script>
          /* 
            创建元素   $(元素字符串) 
            添加子元素
            A.append(B)   A里添加节点B
            B.appendTo(A) 把B添加到A的内部
            A.prepend(B)   A里添加节点B    头部插入
            B.prependTo(A) 把B添加到A的内部 头部插入  */
            
    
        $("#addEleBtn1").click(function(){
            //创建jquery元素 
            var myele = $('<li><input type="button" value="新按钮"/></li>');
            //在ul里添加新的元素
            $("#myul").append(myele);
            
            //或者写的时候别太啰嗦：
            $("#myul").append($('<li><input type="button" value="新按钮"/></li>'));
            
            //append也可解析html标签，故$()可允许不写，直接传元素的字符串，可解析。 
            $("#myul").append('<li><input type="button" value="新按钮"/></li>');
            
            //'<li><input type="button" value="新按钮"/></li>'.appendTo($("#myul"));   错误
            //此时前面就是一个字符串，必须用完整写法
            $('<li><input type="button" value="新按钮"/></li>').appendTo($("#myul"));
            
            //$("#myul").prepend('<li><input type="button" value="新按钮"/></li>');
            //$('<li><input type="button" value="新按钮"/></li>').prependTo($("#myul"));
        })   
        </script>

2.同辈节点

A.after(B) A后边添加同辈节点B

B.insertAfter(A) 把同辈节点B添加到A后边

A.before(B) A前边添加同辈节点B

B.insertBefore(A) 把同辈节点B添加到A前边

<body>
        <input id="addEleBtn1" type="button" value="添加元素" />
        <ul id="myul">
            <li id="myli"><input type="button" value="测试按钮"/></li>
        </ul>
    </body>
    <script>
          /*
          添加同级元素
            A.after(B)  A后边添加同辈节点B
            B.insertAfter(A) 把同辈节点B添加到A后边
            A.before(B)  A前边添加同辈节点B
            B.insertBefore(A) 把同辈节点B添加到A前边   */
         $("#addEleBtn1").click(function(){
             
         $("#myli").after('<li><input type="button" value="新按钮"/></li>');
         //$("#myli").before('<li><input type="button" value="新按钮"/></li>');
         //$('<li><input type="button" value="新按钮"/></li>').insertBefore($("#myli"));
        })

3.替换节点

A.replaceWith(B) B替换A

B.replaceAll(A) B替换A

<body>
        <input id="repEleBtn1" type="button" value="替换元素" />
        <ul id="myul">
            <li id="myli"><input type="button" value="测试按钮"/></li>
            <li><input type="button" value="测试按钮"/></li>
            <li><input type="button" value="测试按钮"/></li>
            <li><input type="button" value="测试按钮"/></li>
        </ul>
    </body>
    <script>
          /*
          替换元素
          A.replaceWith(B) B替换A
          B.replaceAll(A)  B替换A   注：是上面的翻了个，不要被名字迷惑  
          */

        $("#repEleBtn1").click(function(){
            //$("#myul li").replaceWith('<input type="button" value="新按钮"/>');    是每一个单独替换，不是全部被一个替换
            $('<input type="button" value="新按钮"/>').replaceAll($("#myul li"));
        })
</script>

4.复制节点

A. clone(true) 复制A节点

参数决定是否复制元素上绑定的事件

<body>
        <input id="copyEleBtn1" type="button" value="复制元素" />
        <ul id="myul">
            <li id="myli"><input type="button" value="测试按钮"/></li>
        </ul>
    </body>
    <script>
          /*
          复制节点
          A.    clone(true)    复制A节点  
                               参数决定是否复制元素上绑定的事件
          克隆方法可填参数，参数为布尔值。原生里是决定子元素是否一起复制。jquery里决定该元素绑定的事件是否一起复制                              
          */
         
        $("#myli :button").click(function(){
            console.log(1);
        }) 
        
       $("#copyEleBtn1").click(function(){
        $("#myli").clone(false).appendTo($("#myul"));      //将复制的元素装在ul里，false表示复制出来的元素未绑定事件
       })
</script>

注意一个细节：

<body>
        <input id="copyEleBtn1" type="button" value="复制元素" />
        <ul id="myul">
            <li id="myli"><input type="button" value="测试按钮" οnclick="mytest()"/></li>
        </ul>
    </body>
    <script>
          /*
          复制节点，只管绑定的事件。使用元素的属性定义事件，复制的时候会将元素所有属性一起复制过去，即clone的参数无效。
                                   
          */
        function myTest(){
                console.log(123);
            } 
        
       $("#copyEleBtn1").click(function(){
        $("#myli").clone(false).appendTo($("#myul"));     
       })
</script>

5.删除节点

A.remove() 删除A节点及其子孙

A.empty() 删除A的子孙节点

<body>
        <input id="delEleBtn1" type="button" value="删除元素" />
        <ul id="myul">
            <li id="myli"><input type="button" value="测试按钮" /></li>
        </ul>
    </body>
    <script>
          /*
          删除节点
          A.remove()       删除A节点及其子孙   
          A.empty()        删除A的子孙节点                    
          */
       
       $("#delEleBtn1").click(function(){
        $("#myli").empty();      //（li还在，其内部元素，即文本不在了）
       })
</script>

6.移动节点

<body>
        <input id="movEleBtn1" type="button" value="移动元素" />
        <ul id="myul">
            <li id="myli"><input type="button" value="测试按钮" /></li>
        </ul>
        <ul id="myul2"></ul>
    </body>
    <script>
          /*
          节点的移动
          如上：   想将第一个列表的东西添加到第二个列表，正常逻辑：将其复制一份到第二个列表，再删除第一个列表的内容。
           jquery里这样做：append里放页面已存在的元素
                         
          */
      $("#movEleBtn1").click(function(){
        $("#myul2").append($("#myli"));
        })
    </script>

根据层次获取节点

1.获取子节点

A.children() 获取A的子节点

2.获取同辈节点

A.next() 获取A的紧邻下个节点

A.prev() 获取A的紧邻上个节点

A.siblings() 获取A的所有同辈节点

3.获取父节点

A.parent() 获取父节点

A.parents() 获取所有父节点

<body>
        <input id="getEles" type="button" value="获取元素" />
        <ul id="myul">
            <li id="myli"><input type="button" value="测试按钮" /></li>
            <li><input type="button" value="测试按钮"/></li>
            <li><input type="button" value="测试按钮"/></li>
            <li><input type="button" value="测试按钮"/></li>
        </ul>
    </body>
    <script>
          /*
          根据层次获取
           获取子节点
          A.children()      获取A的子节点
           获取同辈节点
          A.next()          获取A的紧邻下个节点
          A.prev()          获取A的紧邻上个节点
          A.siblings()      获取A的所有同辈节点
           获取父节点
          A.parent()        获取父节点
          A.parents()       获取所有父节点
                         
          */
          
         $("#getEles").click(function(){
            //console.log($("#myul").children());    4个元素节点：li 
            //console.log($("#myli").siblings()); 
            console.log($("#myli").parent());        //ul
            console.log($("#myli").parents());       //0:ul  1:body  2:html
         }) 
    </script>

2.2属性节点操作

通用的属性操作方法：

attr() 可以获取自定义属性对disabled checked等属性返回undefined或者字符串值

prop() 不可以获取自定义属性对disabled checked等属性直接返回bol值

removeAttr() 删除属性

removeProd() 删除属性

<body>
        <input id="mycb" gxyval="abc123" type="checkbox" checked />
        <!-- checked属性，值的部分无所谓。  checked="abc"和checked="checked"(标准写法)和checked一样。 
        gxyval是自定义属性,没啥意义，浏览器不认识
        -->
    </body>
    <script>
    /* 
    以下都是读取属性：
     prop  适合用在有状态的属性上 checked disabled
     attr  适合用在自定义属性上 配合事件绑定传值
     
     删除属性用的不多 
     removeAtt() 删除属性
     removeProd()  删除属性
     */
    
        console.log($("#mycb").prop("type"));      //checkbox
        console.log($("#mycb").attr("type"));      //checkbox
        
        //若按钮上没有checked属性
        //console.log($("#mycb").prop("checked"));   //fales
        //console.log($("#mycb").attr("checked"));   //undefined
        
        //若按钮上有checked属性
        //console.log($("#mycb").prop("checked"));   //true
        //console.log($("#mycb").attr("checked"));   //checked 
        
        console.log($("#mycb").prop("gxyval"));    //undefined
        console.log($("#mycb").attr("gxyval"));    //abc123 
    </script>

<body>
        <div id="spans">
            <span id="sea" mycls="sea" mycolor="red">海边</span>
            <span id="garss" mycls="garss" mycolor="green">草原</span>
            <span id="mount" mycls="mount" mycolor="yellow">爬山</span>
        </div>
        
        <hr />
        <div id="spans2">
            <span class="mount">五台山</span>
            <span class="sea">三亚</span>
            <span class="garss">张北草原</span>
            <span class="sea">海口</span>
            <span class="mount">华山</span>
            <span class="sea">日照</span>
            <span class="mount">呼伦贝尔</span>
            <span class="garss">青青草原</span>
            <span class="mount">喜马拉雅山</span>
        </div>
    </body>
    <script> 
    
        $("#spans span").click(function(){
            
            var myClsName = $(this).attr("mycls");
            var myColor = $(this).attr("mycolor");
            $("#spans2 span").css("background-color","white");
            $("."+myClsName).css("background-color",myColor);
        
        })
      
    </script>

3.Jquery事件绑定

有两套写法：

<body>
        <input id="addEleBtn" type="button" value="添加按钮" />
    </body>
    <script>
    
       //第一种写法：
        $("#myBtn").click(function(){
            console.log(1);
        }) 
        
        //第二种写法： 用on方法，有两个参数，第一个参数是指定的事件，第二个参数是匿名函数
        $("#myBtn").on("click",function(){
            console.log(2);
        }) 
    </script>

事件绑定的规则：

<body>
        <input id="addEleBtn" type="button" value="添加按钮" />
        <div id="mydiv">
            <input class="mybtn" type="button" value="测试" />
        </div>
    </body>
    <script>
    /*
    事件绑定的一些特征
     1.隐式循环也会生效
     2.this 表示发生指定动作的元素
     3.同样的事件 可以多次绑定
     4.进行事件绑定时 选择器能选择到的元素才能绑定  (需要是页面中存在的元素)
     5.如果元素是动态生成的  注意绑定时机 如果不需要重复绑定 可以解除绑定
    
     */
        //同样的事件 可以多次绑定,结果是控制台打印出1   2    3
        $("#myBtn").click(function(){
                    console.log(1);
        })
        $("#myBtn").click(function(){
                    console.log(2);
        })
        $("#myBtn").click(function(){
                    console.log(3);
        }) 
    </script>

<body>
        <input id="addEleBtn" type="button" value="添加按钮" />
        <div id="mydiv">
            <input class="mybtn" type="button" value="测试" />
        </div>
    </body>
    <script>
    /*
    事件绑定的一些特征
     1.隐式循环也会生效
     2.this 表示发生指定动作的元素
     3.同样的事件 可以多次绑定
     4.进行事件绑定时 选择器能选择到的元素才能绑定  (需要是页面中存在的元素)
     5.如果元素是动态生成的  注意绑定时机 如果不需要重复绑定 可以解除绑定
    
     */
    
     //进行事件绑定时 选择器能选择到的元素才能绑定  (需要是页面中存在的元素)
    
        /* $(".mybtn").click(function(){   //给测试按钮加事件 
            console.log(1);
        })
        
        $("#addEleBtn").click(function(){   
            //点击添加按钮，往div里多加一个按钮,添加的按钮里没有点击事件     
            //原因：运行时机的问题，上面的代码运行时，新的按钮还没生成。
            $("#mydiv").append('<input class="mybtn" type="button" value="测试" />');  
        
        }) */
        
    //如何让新添加的按钮也有点击事件？
        /* $(".mybtn").click(function(){
            console.log(1);
        })
                
        
        $("#addEleBtn").click(function(){  
            $("#mydiv").append('<input class="mybtn" type="button" value="测试" />');  
            //可添加完新的按钮再绑定一次
            $(".mybtn").click(function(){
                console.log(1);
            })
        }) */
        
    //新的问题是同样的事件绑定了多次，此时不需要,只想新加入的按钮只绑定一次。用到解绑的方法off(),对应on() 
    //如果元素是动态生成的  注意绑定时机 如果不需要重复绑定 可以解除绑定
        $(".mybtn").click(function(){
                    console.log(1);
                }) 
                
        $("#addEleBtn").click(function(){
                    $(".mybtn").off("click");    //解除绑定
                    $("#mydiv").append('<input class="mybtn" type="button" value="测试" />');
                    $(".mybtn").click(function(){
                        console.log(1);
                    })
                }) 
</script>

有哪些事件可绑定：

<body>
        <input id="mytext" type="text" />
        <select id="mysel">
            <option value="021">北京</option>
            <option value="022">上海</option>
            <option value="023">深圳</option>
        </select>
        <form id="myform" action="/xxx" method="get">
            <input id="mySubmitBtn" type="button" value="我的提交" />
        </form>
    </body>
    <script>
    /*
    常用事件
    click  鼠标单击
    dblclick 双击
    mouseover  鼠标移入
    mouseout   鼠标移出
    focus      获得焦点
    blur       失去焦点
    change     内容改变
    keyup      键盘弹起     也可以有事件参数，对应获得键盘码
    submit     传入匿名函数  通过bol值 决定表单是否可以提交（用法一：表单效验）
               无参    提交表单  （用法二：通过代码直接调用submit(),直接让表单提交。这样，div，图片等都可以提交）
    
     */
        
        $("#mytext").change(function(){
            console.log($(this).val()); 
        }) 
        
        $("#mysel").change(function(){    //改变选项，被选中的值打出
            console.log($(this).val()); 
        })
        
        $("#mytext").keyup(function(event){   
            console.log($(this).val()); 
            console.log(event.keyCode); 
        })
        
        //submit用法一
        $("#myform").submit(function(){    //根据bol值决定表单是否可以提交
            return true;                  //返回true，表单提交
        }) 
        
        //submit用法二
        //若在表单里加一个自定义按钮，表单无法提交
        $("#mySubmitBtn").click(function(){
            $("#myform").submit();         //此时表单提交
        })
    
    </script>

课堂练习:

点击添加动态添加一行数据

数量加减框

点击删除删除一行数据

全选控制每条记录选中与不选中

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <table border="1">
            <tr>
                <th><input id="checkAllBtn" type="checkbox" /> 全选</th>
                <th>商品信息</th>
                <th>单价</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
            <tbody id="mybody">
                <tr>
                    <td><input class="cbs" type="checkbox"/></td>
                    <td><img src="img/01.jpg"/><br/>
                        烤肉</td>
                    <td>15</td>
                    <td>
                        <input class="diffBtn" type="button" value="-" />
                        <input type="text" value="1" />
                        <input class="addBtn" type="button" value="+" /><br />
                    </td>
                    <td>
                        <!-- <a href="javascript:void(0)">删除</a> -->
                        <input class="delBtn" type="button" value="删除" />
                    </td>
                </tr>
                
                <tr>
                    <td><input class="cbs" type="checkbox"/></td>
                    <td><img src="img/02.jpg"/><br/>
                        锤子</td>
                    <td>33</td>
                    <td>
                        <input class="diffBtn" type="button" value="-" />
                        <input type="text" value="1" />
                        <input class="addBtn" type="button" value="+" /><br />
                    </td>
                    <td>
                        <!--可放按钮，可放超链接。若不想让超链接跳转，可herf="###",但会体现在url里。
                        也可href="javascript:void(0)",不会在url里体现。-->
                        <!-- <a href="javascript:void(0)">删除</a> -->
                        <input class="delBtn" type="button" value="删除" />
                    </td>
                </tr>
                
            </tbody>
        </table>
        <input id="addRowBtn" type="button" value="添加" />
    </body>
    <script>
        /* 
         1.拆分任务
         2.动态添加 删除元素
         3.拼接页面元素
         
         */
        $("#checkAllBtn").click(function(){
            //赋的值与当前点击的保持一致
            $(".cbs").prop("checked",$(this).prop("checked"));
        })
        

        
        $("#addRowBtn").click(function(){
            //拼接好添加的元素
            var myContent = '<tr>'
                    +'<td><input class="cbs" type="checkbox"/></td>'
                    +'<td><img src="img/00.jpg"/><br/>'
                    +'    白板</td>'
                    +'<td>55</td>'
                    +'<td>'
                    +'  <input class="diffBtn" type="button" value="-" disabled />'
                    +'  <input type="text" value="1" />'
                    +'  <input class="addBtn" type="button" value="+" /><br />'
                    +'</td>'
                    +'<td>'
                    +'  <!-- <a href="javascript:void(0)">删除</a> -->'
                    +'  <input class="delBtn" type="button" value="删除" />'
                    +'</td>'
                    +'</tr>';
            //把元素填入页面
            $("#mybody").append(myContent);
            resetBtn();
        })
        
        
        function resetBtn(){
            $(".addBtn").off("click");
            $(".diffBtn").off("click");
            $(".delBtn").off("click"); 
            
            $(".addBtn").click(function(){
                var oldval = $(this).prev().val();
                oldval++;
                $(this).prev().val(oldval);
                setBtnStatus($(this),$(this).prev().prev(),oldval);
                
            })
            
            $(".diffBtn").click(function(){
                var oldval = $(this).next().val();
                oldval--;
                $(this).next().val(oldval);
                setBtnStatus($(this).next().next(),$(this),oldval);
                
                
            })
            
            $(".delBtn").click(function(){
                //向上查找父元素
                $(this).parent().parent().remove();
            })
        }
        
        function setBtnStatus(addBtn,diffBtn,myval){
            //当前行 加减按钮启用
            addBtn.prop("disabled",false);
            diffBtn.prop("disabled",false);
            //到10 禁用加
            if(myval>=10){
                //加按钮
                addBtn.prop("disabled",true);
            }
            //到1  禁用减
            if(myval<=1){
                //减按钮
                diffBtn.prop("disabled",true);
            }
        }
        //页面加载结束后 初始化页面数据
        setBtnStatus($(".addBtn"),$(".diffBtn"),1);
        resetBtn();

    
    </script>
</html>

4.Jquery显示效果相关方法

Jquery中直接封装了一些针对显示效果的方法，可以用来制作一些常见特效:

.show() 显示

.hide() 隐藏

.toggle() 切换显示和隐藏

.fadeIn() 淡入

.fadeOut() 淡出

可以传参控制显示效果快慢

<head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .mydiv{
                width: 200px;
                height: 200px;
                background-color: blue;
                border: 1px solid black;
                display: none;
            }
        
        </style>
        <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <input id="changeBtn" type="button" value="控制渐变" />
        <div id="mydiv" class="mydiv">div</div>
    </body>
    <script>
    /*
     show()   显示           宽高透明度
     hide()   隐藏
     toggle()  切换显示/隐藏
     
     fadeIn()     淡入           透明度
     fadeOut()    淡出
     fadeToggle()  切换淡入淡出
     */
        $("#changeBtn").click(function(){
            $("#mydiv").hide(5000);    //参数是毫秒数。 5s内，完成该过渡效果（宽,高,透明度逐渐减小至0）
            $("#mydiv").show(5000);    //需要在style里加display: none;
            $("#mydiv").toggle(5000);   //若是显示状态，则隐藏；若是隐藏状态，则显示
             
            $("#mydiv").fadeIn(5000);    //只改变透明度
            $("#mydiv").fadeOut(5000); 
            $("#mydiv").fadeToggle(3000);
        })
        
    
    </script>

5.JSON

5.1Json介绍

Json是前端中常用的格式(JavaScript Object Notation, JS 对象标记),用来标记对象。

对jquery里想自定义对象的一种比较方便的处理形式。

Json是js中的对象可以通过对象.属性的方法获取值。

注：json在原生JavaScript中就可使用。

5.2 Json格式

1.Json格式 json使用键值对存储{key：value，key：value} 类似java中的Map结构

<script>

       //创建json对象，{}，里面是键值对key:value，键值对间用逗号隔开。value部分可以是字符串，数字，布尔值，对象，函数等。
       //用json定义函数，this指向发生改变，默认指向当前对象，即json对象。由该特性，可做各种扩展库
       //标准语法中，key部分是字符串，值的部分value随意。这叫标准json格式，key上带引号  
       var myObj = {"name":"jack","mykey":true,"code":14"myfun":function(){
            console.log("我的函数");
            console.log(this);
        }};
       //调用json对象的内容，点key的部分 调用自己定义的函数，点函数名。
       console.log(myObj.name);
       console.log(myObj.mykey);
       console.log(myObj.code);
       myObj.myfun();
        
        
        //简化的json格式：key部分不加引号。  前端常用，因为写法简单。
        //标准json格式和简化的json格式，用法上无区别。 但涉及前后端传递时，两套应用程序进行前后端传递，且过网络，比如
        //java里传了一个对象，前端认不出，且传的数据是纯字符串。
        var myObj2 = {code:14,name:"jack",mykey:true};
        
        
        //拿到后端的json格式字符串后，前端通常转成json对象。转化方式：用json对象的parse()方法
        //简化的json不能转。即涉及前后端传递，只能用标准的json格式
        var myObj3Str = '{code:14,name:"jack",mykey:true}';
        var myObj3 = JSON.parse(myObj3Str); 
        
         //json对象转字符串，结果也是标准字符串格式
        var myObj2 = {code:14,name:"jack",mykey:true};
        var myObj2Str = JSON.stringify(myObj2);
        console.log(myObj2Str);
</script>

3.l Json使用时，经常和数组搭配使用

//在数组中套json对象类似java中的List<User>

[{uname:"jack",uage:15},{uname:"rose",uage:16}];

//value部分可以使用数组类似java中Map<String,List<User>>

{utotal:3,students:[{uname:"jack",uage:15},

{uname:"rose",uage:16},

{uname:"jase",uage:1}]

};

//取值时注意当前取到的是json还是数组对象数组对象用索引 json对象用.属性

<body>
        <table border="1"> 
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            <tbody id="mybody">
                <tr>
                    <td>001</td>
                    <td>jack</td>
                    <td>15</td>
                </tr>
            </tbody>
        </table>
    </body>
    <script>
        
        //假设一条json是一个学生信息，多个学生信息用数组装。（数组里套json）
        var myObj4 = [{"code":14,"name":"jack","mykey":true},{"code":15,"name":"jack2","mykey":true},{"code":16,"name":"jack3","mykey":true}]
        console.log(myObj4[1].name);  //读取数组对象第二条数据的name（数组对象加索引拿到json对象。搞清何时什么对象）
        
         //假设后台传的数据包含学生总数和学生信息（json里套数组，数组里再套json）
        var myObj5 = {"totalNum":3,"students":[{"code":14,"name":"jack","age":11},
                                                {"code":15,"name":"jack2","age":13},
                                                {"code":16,"name":"jack3","age":15}]}
        console.log(myObj5.students[1].name);  //读第二条数据里的名称
        
        //json对象的扩展，在myObj5中加点内容  
        myObj5.addr="xxx大街";
        console.log(myObj5);
        
        //若json格式套的太多，看起来很费力。有些网站可在线解析和格式化验证：eg：jsoncn
        
        
        //若想遍历学生信息，填入到table里。之前遍历用.each()。需要选择器选到元素集合后才能用。
        //若对普通的数组，可用$.each()。两个参数（遍历的数组，匿名函数）。且这里不能用this对应传入的数组。
        //匿名函数里有两个形参（索引，数据），通过第二个形参表示遍历到的数据
        $.each(myObj5.students,function(i,d){
            console.log(i);
            console.log(d);
            //元素填入页面的步骤如下(固定写法)：
            //拼接好添加的元素
            var myContent =  '<tr>'
                    +'<td>'+d.code+'</td>'
                    +'<td>'+d.name+'</td>'
                    +'<td>'+d.age+'</td>'
                    +'</tr>';
            //把元素填入页面
            $("#mybody").append(myContent);
                
        })
        
    </script>

4.课堂练习省市县级联菜单

级联方式很多，由数据存储方式决定。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/addr.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <select id="prov">
            <option disabled selected>------------请选择-------------</option>
        </select>省
        
        <select id="city">
            <option disabled selected>------------请选择-------------</option>
        </select>市
        
        <select id="coun">
            <option disabled selected>------------请选择-------------</option>
        </select>县/区
    </body>
    <script>
    
    //数据应该在下拉列表点击前准备好（先将省的内容填入）
     $.each(temp,function(i,d){
         console.log(d.code+"---------"+d.label);
         var myContent = '<option value="'+d.code+'">'+d.label+'</option>';
         $("#prov").append(myContent);
     })
     
     //做联动，省的内容改变，找到对应省里的市(找到当前省的编号，用该编号与整体数据的编号匹配，若相同则找到选中的省。
     //然后在省里找对应的市，将市的内容填入到市的下拉列表)。
     $("#prov").change(function(){
        // console.log($(this).val());
        //当前选中的省
        var provCode = $(this).val();
        //清空选项
        $("#city").html('<option disabled selected>------------请选择-------------</option>');
        $("#coun").html('<option disabled selected>------------请选择-------------</option>');
        $.each(temp,function(i,d){
            //从数据中 找到了被选中的省
            if(provCode==d.code){
                //遍历对应省的市
                $.each(d.children,function(i,d){
                    console.log(d.code+"---------"+d.label);
                    //拼成option 填入市下拉列表
                    var myContent = '<option value="'+d.code+'">'+d.label+'</option>';
                    $("#city").append(myContent);
                })
            }
        })  
     })
     
     //市的内容改变，市与县级联
     $("#city").change(function(){
         var provCode = $("#prov").val();
         var cityCode = $(this).val();
         console.log(provCode);
         console.log(cityCode);
         //清空选项
         $("#coun").html('<option disabled selected>------------请选择-------------</option>');
         $.each(temp,function(i,d){
             //找到了省
             if(provCode==d.code){
                 $.each(d.children,function(i,d){
                     //找到了市
                     if(cityCode==d.code){
                         
                         $.each(d.children,function(i,d){
                             var myContent = '<option value="'+d.code+'">'+d.label+'</option>';
                             $("#coun").append(myContent);
                         })
                     }
                 })
             }
         })
         
     })
     
    </script>
</html>

课后作业：

1.根据输入框改变文字颜色和内容

在jquery1笔记中。

2.jquery实现全选反选

在jquery1笔记中。

3.jquery实现轮播图

解：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<img id="myimg" src="image/pic1.png" /><br />
		<div id="btns">
			<input id="startBtn" type="button" value="开始" />
			<input id="stopBtn" type="button" value="结束" />
		</div>
	</body>
	<script>
	    var imgidx = 1;
		var taskid;
	    $("#startBtn").click(function(){
			$(this).prop("disabled",true);
			taskid = setInterval(function(){
				imgidx++;
				$("#myimg").prop("src","image/pic"+imgidx+".png");
				if(imgidx==8){
					imgidx=0;
				}
			},300)
		})
	
	    $("#stopBtn").click(function(){
			clearInterval(taskid);
			$("#startBtn").prop("disabled",false);
		})
	</script>
</html>

4.jquery实现数字加减框
最低减到1 最大增到10 到临界值禁用按钮

解：

点击元素的上一个元素就是文本框。（添加按钮）

先完成主要功能：

<body>
		<input class="diffBtn" type="button" value="-" />
		<input type="text" value="1" />
		<input class="addBtn" type="button" value="+" /><br />
		
		<input class="diffBtn" type="button" value="-" />
		<input type="text" value="1" />
		<input class="addBtn" type="button" value="+" /><br />
		
		<input class="diffBtn" type="button" value="-" />
		<input type="text" value="1" />
		<input class="addBtn" type="button" value="+" /><br />
</body>
<script>
	    $(".addBtn").click(function(){
			var oldval = $(this).prev().val();   //读取文本框的值
			oldval++;
			$(this).prev().val(oldval);
		})
		
		$(".diffBtn").click(function(){
			var oldval = $(this).next().val();
			oldval--;
			$(this).next().val(oldval);
		})
</script>

再补全最低最高，临界值问题：

<body>
		<input class="diffBtn" type="button" value="-" disabled/>
		<input type="text" value="1" />
		<input class="addBtn" type="button" value="+" /><br />
		
		<input class="diffBtn" type="button" value="-" disabled/>
		<input type="text" value="1" />
		<input class="addBtn" type="button" value="+" /><br />
		
		<input class="diffBtn" type="button" value="-" disabled/>
		<input type="text" value="1" />
		<input class="addBtn" type="button" value="+" /><br />
	</body>
	<script>
	    $(".addBtn").click(function(){
			var oldval = $(this).prev().val();   //读取文本框的值
			oldval++;
			$(this).prev().val(oldval);
			
			//启用当前组的加减
			$(this).prop("disabled",false);   //当前组的加启用
			$(this).prev().prev().prop("disabled",false);   //当前组的减启用
			
			if(oldval>=10){
				$(this).prop("disabled",true);
			}
		})
		
		$(".diffBtn").click(function(){
			var oldval = $(this).next().val();
			oldval--;
			$(this).next().val(oldval);
			
			//启用当前组的加减
			$(this).prop("disabled",false);   //当前组的减启用
			$(this).next().next().prop("disabled",false);   //当前组的加启用
			
			if(oldval<=1){
				$(this).prop("disabled",true);
			}
			
		})
	</script>

重复代码太多，可简化：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
	</head>
	<body>
		<input class="diffBtn" type="button" value="-" />
		<input type="text" value="1" />
		<input class="addBtn" type="button" value="+" /><br />
		
		<input class="diffBtn" type="button" value="-" />
		<input type="text" value="1" />
		<input class="addBtn" type="button" value="+" /><br />
		
		<input class="diffBtn" type="button" value="-" />
		<input type="text" value="1" />
		<input class="addBtn" type="button" value="+" /><br />
	</body>
	<script>
	    $(".addBtn").click(function(){
			var oldval = $(this).prev().val();   //读取文本框的值
			oldval++;
			$(this).prev().val(oldval);
			
			setBtnStatus($(this),$(this).prev().prev(),oldval);
		})
		
		$(".diffBtn").click(function(){
			var oldval = $(this).next().val();
			oldval--;
			$(this).next().val(oldval);
				
			setBtnStatus($(this).next().next(),$(this),oldval);
		})
		
		function setBtnStatus(addBtn,diffBtn,myval){
			//当前行 加减按钮启用
			addBtn.prop("disabled",false);
			diffBtn.prop("disabled",false);
			
			//到10 加禁用
			if(myval>=10){
				addBtn.prop("disabled",true);
			}
			
			//到1 减禁用
			if(myval<=1){
				diffBtn.prop("disabled",true);
			}
		}
		
		//处理按钮的禁用状态
		setBtnStatus($(".addBtn"),$(".diffBtn"),1);   
		
		
	</script>
</html>

5.点击“第一首诗字体颜色改变”按钮，对应文本框输入字体颜色

点击“第二首诗字体背景颜色改变”按钮，对应文本框输入背景颜色

<body>
       <input type="button" value="第一首诗字体颜色改变" />
       <input type="text" placeholder="请输入字体颜色" /><br />
       <input type="button" value="第二首诗字体背景颜色改变" />
       <input type="text" placeholder="请输入背景颜色" /><br />
       <h1>静夜思</h1>
       <p>床前明月光</p>
       <p>疑是地上霜</p>
       <p>举头望明月</p>
       <p>低头思故乡</p>

       <h1>静夜思</h1>
       <p>床前明月光</p>
       <p>疑是地上霜</p>
       <p>举头望明月</p>
       <p>低头思故乡</p>
</body>

解：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.6.0.js"></script>
    </head>
    <body>
        <input id="myBtn1" type="button" value="第一首诗字体颜色改变" />
        <input id="myText1" type="text" placeholder="请输入字体颜色" /><br />
        <input id="myBtn2" type="button" value="第二首诗字体背景颜色改变" />
        <input id="myText2" type="text" placeholder="请输入背景颜色" /><br />
        <h1>静夜思</h1>
        <div id="div1">
            <p>床前明月光</p>
            <p>疑是地上霜</p>
            <p>举头望明月</p>
            <p>低头思故乡</p>
        </div>
        
        <div id="div2">
            <h1>静夜思</h1>
            <p>床前明月光</p>
            <p>疑是地上霜</p>
            <p>举头望明月</p>
            <p>低头思故乡</p>
        </div>
    </body>
    <script>
        $("#myBtn1").click(function(){
            $("#div1 p").css("color",$("#myText1").val());
        })
        $("#myBtn2").click(function(){
            $("#div2 p").css("background-color",$("#myText2").val());
        })
    </script>
</html>

6.点击按钮加内容到div中，div在诗的后面，且所添加内容单独成一个段落。

<body>
       <input type="button" value="点击按钮添加内容到div中" />
       <input type="text" placeholder="请输入内容" /><br />
       <h1>静夜思</h1>
       <p>床前明月光</p>
       <p>疑是地上霜</p>
       <p>举头望明月</p>
       <p>低头思故乡</p>
       <div>

       </div>
</body>

解：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
	</head>
	<body>
		<input id="myBtn1" type="button" value="点击按钮添加内容到div中" />
		<input id="myText1" type="text" placeholder="请输入内容" /><br />
		<h1>静夜思</h1>
		<p>床前明月光</p>
		<p>疑是地上霜</p>
		<p>举头望明月</p>
		<p>低头思故乡</p>
		<div id="mydiv">
			
		</div>
	</body>
	<script>
	    $("myBtn1").click(function(){
			var newStr = $("mydiv").html()+"<p>"+$("#myText1").val()+"</p>";
			$("mydiv").html(newStr); 
		})
	</script>
</html>

7.省市县级联：

在js目录下引入addr.js

temp是数组，该数组每条数据都是三个json对象，第三个json对象的value又是数组，数组里套的json对象......。

temp = [
  {
    "code": "110000",
    "label": "北京市",
    "children": [
      {
        "code": "110100",
        "label": "北京市",
        "children": [
          {
            "code": "110101",
            "label": "东城区"
          },
          {
            "code": "110102",
            "label": "西城区"
          },
          {
            "code": "110105",
            "label": "朝阳区"
          },
          {
            "code": "110106",
            "label": "丰台区"
          },
          {
            "code": "110107",
            "label": "石景山区"
          },
          {
            "code": "110108",
            "label": "海淀区"
          },
          {
            "code": "110109",
            "label": "门头沟区"
          },
          {
            "code": "110111",
            "label": "房山区"
          },
          {
            "code": "110112",
            "label": "通州区"
          },
          {
            "code": "110113",
            "label": "顺义区"
          },
          {
            "code": "110114",
            "label": "昌平区"
          },
          {
            "code": "110115",
            "label": "大兴区"
          },
          {
            "code": "110116",
            "label": "怀柔区"
          },
          {
            "code": "110117",
            "label": "平谷区"
          },
          {
            "code": "110228",
            "label": "密云区"
          },
          {
            "code": "110229",
            "label": "延庆区"
          }
        ]
      }
    ]
  },
  {
    "code": "120000",
    "label": "天津市",
    "children": [
     ...

解：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/addr.js" type="text/javascript" charset="UTF-8"></script>
		<script src="js/jquery-3.6.0.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<select id="prov">
			<option disabled selected>----------请选择--------------</option>
		</select>省
		
		<select id="city">
			<option disabled selected>----------请选择--------------</option>
		</select>市
		
		<select id="coun">
			<option disabled selected>----------请选择--------------</option>
		</select>县/区
	</body>
	<script>
	    $.each(temp,function(i,d){    //遍历temp    匿名函数里是索引和数据
		  console.log(d.code+"-------------"+d.label);
		  var myContent = '<option value="'+d.code+'">'+d.label+'</option>';
		  $("#prov").append(myContent);
		})
		
		$("#prov").change(function(){    //省的内容改变，对应的市，县/区的内容也改变
			//console.log($(this).val());   //当前选中的option的值，即省的编码
			var provCode = $(this).val();
			$("#city").html('<option disabled selected>----------请选择--------------</option>');   //填入数据前，将以前的数据用请选择替换掉（清空数据） 
			$("#coun").html('<option disabled selected>----------请选择--------------</option>');   //省内容改变，市和县都要清空
			
			$.each(temp,function(i,d){
				if(provCode==d.code){    //在temp中找到了被选中的省
					$.each(d.children,function(i,d){             //遍历省对应的市
						console.log(d.code+"-------------"+d.label);    //打印出省对应的市的信息
						var myContent = '<option value="'+d.code+'">'+d.label+'</option>';
						$("#city").append(myContent); 
					})
				}
			})
		})
		
		$("#city").change(function(){
			var provCode = $("#prov").val();  
			var cityCode = $(this).val();   //找到选中的市
			$("#coun").html('<option disabled selected>----------请选择--------------</option>');
			
			$.each(temp,function(i,d){
				if(provCode==d.code){            //找到了省
					$.each(d.children,function(i,d){      //遍历市
						if(cityCode==d.code){       //找到了市
						   $.each(d.children,function(i,d){   //遍历县/区
							   var myContent = '<option value="'+d.code+'">'+d.label+'</option>';
							   $("#coun").append(myContent); 
						   })
							
						}
					})
				}
			})
			
		})
		
		
	</script>
</html>

8.选择列表
单项移动
全部移动
输出已选列表里的所有项

双击任意选项，都会从一边到另一边

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.6.0.js" ></script>
		<style>
			.main{
				width: 500px;
				height: 500px;
				border: 1px solid black;
			}
			.mysel{
				width: 100px;
				height: 400px;
			}
			.btns{
				display: inline-block;
				position: relative;
				width: 200px;
				top: -200px;
				left: 50px;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<span>未选列表</span><span style="margin-left: 270px;">已选列表</span>
			<select class="mysel" multiple="multiple">
				<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>
			</select>
			<div class="btns">
				<input id="addone" type="button" value=">" /><br />
				<input id="addall" type="button" value=">>>" /><br />
				<input id="removeone" type="button" value="<" /><br />
				<input id="removeall" type="button" value="<<<" /><br />
			</div>
			<select class="mysel" multiple="multiple">
			</select>
			<br />
			<input type="button" value="获取已选列表的值" />
			<span>在这里显示已选列表的选项 用逗号分隔</span>
		</div>
	</body>
</html>

接下来做功能：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.6.0.js" ></script>
		<style>
			.main{
				width: 500px;
				height: 500px;
				border: 1px solid black;
			}
			.mysel{
				width: 100px;
				height: 400px;
			}
			.btns{
				display: inline-block;
				position: relative;
				width: 200px;
				top: -200px;
				left: 50px;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<span>未选列表</span><span style="margin-left: 270px;">已选列表</span>
			<select id="leftPanel" class="mysel" multiple="multiple">
				<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>
			</select>
			<div class="btns">
				<input id="addone" type="button" value=">" /><br />
				<input id="addall" type="button" value=">>>" /><br />
				<input id="removeone" type="button" value="<" /><br />
				<input id="removeall" type="button" value="<<<" /><br />
			</div>
			<select id="rightPanel" class="mysel" multiple="multiple">
			</select>
			<br />
			<input id="getValueBtn" type="button" value="获取已选列表的值" />
			<span>在这里显示已选列表的选项 用逗号分隔</span>
		</div>
	</body>
	<script>
	   $("#addone").click(function(){
		   //console.log($("#leftPanel :selected"));    //找被选中的选项
		   $("#leftPanel :selected").appendTo($("#rightPanel")); 
	   })
	   
	   $("#addall").click(function(){
		   $("#leftPanel option").appendTo($("#rightPanel"));
	   })
	   
	   $("#removeone").click(function(){
	   	  $("#rightPanel :selected").appendTo($("#leftPanel")); 
	   })
	   
	   $("#removeall").click(function(){
	   	  $("#rightPanel option").appendTo($("#leftPanel"));
	   })
	   
	   $("#leftPanel option").dblclick(function(){  
		   var pos = $(this).parent().prop("id");   //父元素id,即select的id
		   if(pos=="leftPanel"){
			   $(this).appendTo($("#rightPanel"));  //左边被双击的选项移动到右边
		   }else{
			   $(this).appendTo($("#leftPanel"));   //右边被双击的选项移动到左边
		   }
	   })
	   
	   $("#getValueBtn").click(function(){
		   var myRes="";
		   $("#rightPanel option").each(function(){
			   myRes += $(this).val()+",";
		   })
		   console.log(myRes);
	   })
		 
	</script>
</html>