jquery 第三章

1、回顾
$(document).ready(function(){
    
})
$(function(){
    
})

ID选择器、类选择器、元素选择器
层次选择器:空格(上文下:tr td{})
属性过滤器:[属性=值]  input[type=button]
表单:
    :checked  被选中的单选框或复选框
    :selected 被选中的下拉框
表单选择器:
    :input
    :button
2、本章目标
    掌握dom操作的分类
    掌握jquery的dom操作
3、dom操作分类
    dom core:对节点进行操作,添加、修改、删除、查找
    html core:对页面元素的属性进行操作,比如:document.form.action = 'xxxServlet'
    css core:对页面样式进行操作,比如:document.getElementById("txt").style.display = 'none'

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#btn1").click(function(){
                    //获取第一个li标签
                    var v=$("#aihao li:first").text();
                    alert(v);
                    
                })
                
                $("#btn2").click(function(){
                    //获取ul的id属性
                    var s=$("ul").attr("id")
                    alert(s)
                })
                
                $("#btn3").click(function(){
                    //li节点字符串
                    var v=$("<li>足球</li>")
                    //给ul添加一个li对象
                    $("ul").append(v);
                    
                })
                
                $("#btn4").click(function(){
                    //li节点字符串
                    var v=$("<li class='paiqiu'>排球</li>")
                    //追加到ul中
                    v.appendTo("ul")
                })
                $("#btn5").click(function(){
                    //li节点字符串
                    var v=$("<li>游泳</li>")
                    //把li对象添加到li对象最前面:下面两种用法均可
                    //$("ul").prepend(v)
                    v.prependTo($("ul"))
                })
                
                $("#btn6").click(function(){
                    var v=$("<li>运动</li>")
                    //把运动插入到足球前面
                    v.insertBefore($("ul li:eq(1)"))
                })
                
                $("#btn7").click(function(){
                    var v=$("<li>跑步</li>")
                    //把跑步插入到足球后面
                    $("ul li:eq(1)").after(v)
                    //把跑步插入到乒乓球之前
                    //$("ul li:eq(2)").before(v)
                })
                
                $("#btn8").click(function(){
                    //选取ul标签里最后一个节点然后删除
                    $("ul li:last").remove()
                    
                })
                
                $("#btn9").click(function(){
                    //清空节点
                    $("ul").empty()
                    
                })
            })
        </script>
    </head>
    <body>
        <ul id="aihao">
            <li>篮球</li>
            <li>足球</li>
            <li>乒乓球</li>
            
        </ul>
        <button type="button" id="btn1">获取第一个li标签</button>
        <button type="button" id="btn2">获取ul的id属性</button>
        <button type="button" id="btn3">给ul中添加一个li标签</button>
        <button type="button" id="btn4">给ul中追加一个li标签 带属性</button>
        <button type="button" id="btn5">给ul中第一个li前面插一个li标签</button>
        <button type="button" id="btn6">把运动插入到足球前面</button>
        <button type="button" id="btn7">把跑步插入到足球后面</button>
        <button type="button" id="btn8">删除乒乓球节点</button>
        <button type="button" id="btn9">删除全部li节点</button>
    </body>
</html>
dom的操作

 


4、jquery查找节点元素
    就是通过前面学习的各种选择器,选取出需要操作的节点对象,然后调用相应的方法即可
5、jquery创建节点元素(重点!!!)
    append(内容)、appendTo(节点对象)    --追加到后面
    prepend(内容)、prependTo(节点对象) --追加到前面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div{
                width: 200px;
                height: 150px;
                border: 1px red solid;
                float: left;
                margin-left: 10px;
            }
        </style>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#div1 ol li").click(function(){
                    ///把当前项追加到右边的ol窗口,当前是一个移动操作
                    $(this).appendTo($("#div2 ol"))
                })
            
                $("#div2 ol li").click(function(){
                    //把当前项先复制 然后加到左边div 的ol中
                    $(this).clone().appendTo("#div1 ol")
                })
            })
        </script>
    </head>
    <body>
        <div id="div1">
            <ol>
                <li>java</li>
                <li>js</li>
                <li>jquery</li>
                
            </ol>
        </div>
        <div id="div2">
            <ol>
                <li>张三</li>
                <li>李四</li>
                <li>王五</li>
                
            </ol>
        </div>
    </body>
</html>
jquery创建节点元素

 


6、jquery插入节点元素
    after(内容)、insertAfter(节点对象) --把内容添加到后面
    before(内容)、insertBefore(节点对象) -- 把内容添加到前面


7、jquery删除节点元素(重点!!!)
    remove()  移除、删除
    empty()   清空
8、jquery复制节点
        节点对象.clone()
9、jquery替换节点
    旧节点对象.replaceWith(html)
    新节点对象.replaceAll(旧节点对象)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("input[type=button]").click(function(){
                //$(this).replaceWith("<p>试试就试试</p>")
                
                $("<p>试试就试试</p>").replaceAll($(this))
            })
                
        })
            
        </script>
    </head>
    <body>
        <input type="button"  value="点我试试"/>
    </body>
</html>
jquery替换节点

 


10、jquery包裹节点
    节点对象.wrap(html)   单个包裹
    节点对象.wrapAll(html)  全包包裹
    节点对象.wrapInner(html)  内部包裹

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#btn1").click(function(){
                    $("span").wrap("<div style='border: 1px solid red'></div>");
                    
                    
                })
                $("#btn2").click(function(){
                    $("span").wrapAll("<div style='border: 1px solid red'></div>");
                    
                    
                })
                $("#btn3").click(function(){
                    $("p").wrapInner("<div style='border: 1px solid red'></div>");
                    
                    
                })
                
                
                
            })
        </script>
    </head>
    <body>
        <span>aaa</span>
        <br />
        <span>abbb</span>
        <br />
        <div style="border: 1px solid gray;">
            <p>aabcdef</p>
        </div>
        <button type="button" id="btn1">单个包裹</button>
        <button type="button" id="btn2">全部包裹</button>
        <button type="button" id="btn3">内部包裹</button>
    </body>
</html>
jquery包裹节点

 


11、jquery操作节点属性(重点!!!)
    节点对象.attr("属性名")    获取相应属性的值
    节点对象.attr("属性名","值")  或  节点对象.attr({"属性1":"值1","属性2":"值2".......})  给属性赋值
    节点对象.removeAttr("属性名")  移除某属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#btn1").click(function(){
                    var v=$("input").attr("name")
                    alert(v)
                    
                })
                $("#btn2").click(function(){
                    $("input").attr("value",123)
                    
                    
                })
                $("#btn3").click(function(){
                    $("input").removeAttr("id")
                    
                })
            })
        </script>
    </head>
    <body>
        <input type="text" name="uname" id="uid" value="默认值" />
        <br />
        <button type="button" id="btn1"> 获取input标签name 属性的值</button>
        <button type="button" id="btn2"> 设置input标签value 属性的值</button>
        <button type="button" id="btn3"> 删除input标签id 属性的值</button>
    </body>
</html>
jquery操作节点属性(重点!!!)

 


12、jquery操作样式
    节点对象.addClass("样式名")   添加样式
    节点对象.removeClass("样式名")  移除样式
    节点对象.toggleClass("样式名")  切换样式
    节点对象.hasClass("样式名")     判断是否有某样式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .one{
                border: 1px red solid;
            }
            .two{
                width: 40px;
                height: 60px;
                border: 3px greenyellow dotted;
            }
            .three{
                border: 6px darkgoldenrod solid;
            }
        </style>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#btn1").click(function(){
                    $("div").addClass("two")
                    
                })
                $("#btn2").click(function(){
                    $("div").removeClass("one")
                    
                    
                })
                //给div切换样式  是来回切换
                $("#btn3").click(function(){
                    $("div").toggleClass("three")
                    
                })
                //判断div是否有样式 下面两种均可
                $("#btn4").click(function(){
                    //var v=$("div").hasClass("three")
                    var v=$("div").is("three")
                    alert(v)
                })
            })
        </script>
    </head>
    <body>
        <div class="one">
            测试内容!!!!!
        </div>
        <br />
        <button type="button" id="btn1"> 给div添加样式</button>
        <button type="button" id="btn2"> 给div移除样式</button>
        <button type="button" id="btn3"> 给div切换样式</button>
        <button type="button" id="btn4"> 判断div是否有样式</button>
    </body>
</html>
jquery操作样式

 


13、jquery操作html、text、val(重点!!!)    
    节点对象.html()     类似于innerHTML ,获取节点的html内容
    节点对象.html(html) 设置节点的html内容
    节点对象.text()     类似于innerText,获取节点的纯文本
    节点对象.text(html) 设置节点的内容
    节点对象.val()      类似value属性,获取节点的值
    节点对象.val(内容)  设置节点的值

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#btn1").click(function(){
                    var v=$("div").html()
                    alert(v)
                })
                
                $("#btn2").click(function(){
                    var v=$("div").text()
                    alert(v)
                    
                })
                
                $("#btn3").click(function(){
                    $("div").html("<p>新内容</p>")
                    
                })
                
                $("#btn4").click(function(){
                    $("div").text("<p>新内容</p>")
                })
                
                $("#btn5").click(function(){
                    var v=$("input").val()
                    alert(v)
                })
                
                $("#btn6").click(function(){
                    $("input").val("asdasdasd")
                })
            })
        </script>
    </head>
    <body>
        <div class="one">
            <span>
                测试内容!!!!!
            </span>
            
        </div>
        <br />
        <button type="button" id="btn1">获取div的html内容</button>
        <button type="button" id="btn2">获取div的text内容</button>
        <button type="button" id="btn3">设置div的html内容</button>
        <button type="button" id="btn4">设置div的text内容</button>
        <br />
        <input type="text"/>
        <button type="button" id="btn5">获取input的value</button>
        <button type="button" id="btn6">设置input的value</button>
    </body>
</html>
jquery操作html,text,val()

 


14、jquery遍历节点
    节点对象.children()   获取节点的所有子节点
    节点对象.next()       获取节点的下一个同级节点
    节点对象.prev()       获取节点的上一个同级节点
    节点对象.siblings()   获取节点的所有同级节点
    节点对象.parent()     获取节点的父节点

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#btn1").click(function(){
                    var cs=$("div").children();
                    //遍历
                    for(var i=0;i<cs.length;i++){
                        var c=cs[i].innerText
                        //alert(c)
                    }
                    
                })
                
                $("#btn2").click(function(){
                    var v=$("p").prev().text()            
                    alert(v)
                    
                })
                
                $("#btn3").click(function(){
                    var v=$("p").next().text()            
                    alert(v)
                    
                })
                
                $("#btn4").click(function(){
                    var v=$("p").siblings()
                    alert(v.length)
                })
                
                $("#btn5").click(function(){
                    var v=$("p").parent().html()
                    alert(v)
                })
            })
        </script>
    </head>
    <body>
        <div class="one">
            <span>
                测试内容1
            </span>
            <p>测试内容2</p>
            <b>测试内容3</b>
        </div>
        <br />
        <button type="button" id="btn1">获取div的所有子节点</button>
        <button type="button" id="btn2">获取p的上一个同级元素</button>
        <button type="button" id="btn3">获取p的下一个同级元素</button>
        <button type="button" id="btn4">获取p的所有同级元素</button>
        <button type="button" id="btn5">获取p的父节点</button>
        
    </body>
</html>
jquery遍历节点

 


15、jquer操作样式(重点!!!)
    节点.css("样式名","值")    给节点设置样式
    节点.css({"样式1":"值1","样式2":"值2".....})
    节点.css("opacity","0.5")  设置透明度
    节点.height()    获取节点的高度
    节点.height(值)  设置节点的高度
    节点.width()    获取节点的宽度
    节点.width(值)   设置节点的宽度

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
        <script type="text/javascript">
            $(function(){
                $("#btn1").click(function(){
                    $("div").width("100px")
                    $("div").height("200px")
                    $("div").css("border","1px red solid")
                    $("div").css("opacity","0.4")
                })
            })
        </script>
    </head>
    <body>
        <div class="one">
            <span>
                测试内容!!!!!
            </span>
            
        </div>
        <br />
        <button type="button" id="btn1">设置div的 高度,宽度 ,透明度,边框</button>
    </body>
</html>
jquery操作样式

 


16、jquery操作定位(了解)
    节点.offset()     相对当前页面
    节点.position()   绝对父节点
    返回值均有两个属性:left和top
17、jquery滚动操作(回到顶端)
    节点.scrollTop()     获取滚动到页面顶部的距离
    节点.scrollLeft()    获取滚动到页面的左边的距离
    节点.scrollTop(值)
    节点.scrollLeft(值)
   

作业

实现列表框左右选项选择移动

分析

使用列表框  其中有多选的属性multiple="multiple"

其次考察.clone().appendTo  和remove

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
    <script type="text/javascript">
        $(function(){
            //选中添加到右边
            $("#btn1").click(function(){
                $("#Select1 option:selected").clone().appendTo("#Select2");
                $("#Select1 option:selected").remove();                
            })
            //全部添加到右边
            $("#btn2").click(function(){
                $("#Select1 option").clone().appendTo("#Select2");
                $("#Select1 option").remove();                
            })
            //选中添加到左边
            $("#btn3").click(function(){
                $("#Select2 option:selected").clone().appendTo("#Select1");
                $("#Select2 option:selected").remove();                
            })
            //全部删除到左边
            $("#btn4").click(function(){
                $("#Select2 option").clone().appendTo("#Select1");
                $("#Select2 option").remove();                
            })
        })
        
    </script>
    <body>
        <table style="width: 600px;">
            <tr>
                <td style="width: 250px;">
                    <select id="Select1" size="4" style="height: 200px; width: 80px;" multiple="multiple">
                        <option>选项1</option>
                        <option>选项2</option>
                        <option>选项3</option>
                        <option>选项4</option>
                        <option>选项5</option>
                        <option>选项6</option>
                    </select>
                </td>
                <td style="width: 100px;">
                    <input id="btn1" type="button" value="选中添加到右边" /><br />
                    <input id="btn2" type="button" value="全部添加到右边" /><br />
                    <input id="btn3" type="button" value="选中删除到左边" /><br />
                    <input id="btn4" type="button" value="全部删除到左边" />
                </td>
                <td style="width: 250px;">
                    <select id="Select2" size="4" style="height: 200px; width: 80px;" multiple="multiple">
                    <option>选项8</option>
                    </select>
                </td>
            </tr>
        </table>
    </body>

</html>
实现列表框的左右选项选择移动

效果

posted @ 2019-03-12 20:45  星梦泪痕  阅读(207)  评论(0编辑  收藏  举报