Day43 jQuery-1

最新推荐文章于 2022-07-23 16:21:52 发布
最新推荐文章于 2022-07-23 16:21:52 发布
阅读量156 收藏
点赞数
分类专栏： JavaScript 前端 HTML+CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21953671/article/details/79420888
版权
前端 同时被 3 个专栏收录
9 篇文章 0 订阅
订阅专栏
HTML+CSS
7 篇文章 0 订阅
订阅专栏
JavaScript
6 篇文章 0 订阅
订阅专栏

jQuery入门：

查看官网
1、jquery的概念
问题：
使用js完成对网页的操作，代码的书写量比较大。js中对网页操作提供的方式过于简单，造成获取和操作HTML元素对象过于麻烦。
解决:
使用jQuery
结论：
其实jQuery就是讲常用的js操作封装了起来。jQuery是js的一个框架。
内容:
jQuery本质上还是js，基本语法和js一致。将js的DOM操作重新封装整合了。
学习:
如何使用JQuery完成网页操作。
2、jquery的特点
jQuery是js的一个框架
jQuery提供了多种多样的选择器
jQuery支持主流的各种版本的浏览器
jQuery使用起来特别简单
3、jQuery的使用
jQuery的选择器
jQuery的DOM操作
jQuery的事件和动画
jQuery的表单验证

01-jQuery的基本选择器

<html>
    <head>
        <title>jquery的选择器学习</title>
        <meta charset="UTF-8"/>
        <!--
            jQuery的选择器学习:
                作用：获取要操作的HTML元素对象
                使用：
                    基本选择器：
                        全部选择器*
                        ID选择器:
                            $("#id名")  返回的是存储了指定的HTML元素对象的数组
                        标签选择器:
                            $("标签名")   返回的是存储了指定标签的数组
                        类选择器:
                            $(".类选择器") 返回的是使用了相同类选择器的HTML元素对象
                        组合选择器:
                            $("选择器，选择器，选择器，.....") 返回的是所有选择器所指定的HTML元素对象。
                    层级选择器
                    简单选择器
                    可见性选择器
                    属性选择器
                    子元素选择器
                    表单选择器
                    表单对象属性选择器
                注意：
                    jQuery中的选择器返回的是存储了指定的HTML元素对象的数组。
        -->
        <!--引入jQuery-->
        <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <!--声明js代码域-->
        <script type="text/javascript">
            //基本选择器
                //iD选择器
                function testById(){
                    var un=$("#uname");//
                    alert(un.val());
                }
                //标签选择器
                function testByTag(){
                    var inps=$("input");
                    alert(inps.length);
                }
                //类选择器
                function testByClass(){
                    var objs=$(".commom");
                    objs.css("color","red")

                }
                //组合选择器
                function testBySelect(){
                    var  objs=$("#upwd,#uname,#showdiv")
                    objs.css("background-color","aqua");

                }
        </script>
        <!--声明css代码域-->
        <style type="text/css">
            #showdiv{
                border: solid 1px;
                width: 200px;
                height: 200px;
                background-color: orange;
                margin-top: 20px;
            }
            .commom{
                font-family: "微软雅黑";
            }
        </style>
    </head>
    <body>
        <h3>jquery的选择器学习</h3>
        <input type="button" id="" value="测试基本选择器--ID" onclick="testById()"/>
        <input type="button" id="" value="测试基本选择器--标签" onclick="testByTag()"/>
        <input type="button" id="" value="测试基本选择器--类选择器" onclick="testByClass()"/>
        <input type="button" id="" value="测试基本选择器--组合器" onclick="testBySelect()"/>
        <hr />
        用户名:<input type="text" name="uname" id="uname" value="" class="commom"/>&nbsp;&nbsp;&nbsp;
        密码: <input type="text" name="upwd" id="upwd" value="" />
        <div id="showdiv" class="commom">
            我是div
        </div>
    </body>
</html>

02-jquery-层级选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>层级选择器</title>
        <style type="text/css">
            #showdiv{
                border: solid 1px;
                width: 600px;
                height:300px;
                background-color: orange;
                margin-top: 20px;
                text-align: center;
            }
        </style>
        <!--
            层级选择器学习:
                祖先获取所有后代：
                    $("选择器  标签名")  返回的是选择器下的所有指明的后代元素。
                选择所有子元素
                    $("选择器>选择器") 返回的是所有的子元素
                选择紧跟的元素
                    $("选择器+选择器") 返回的是紧跟的元素
                选择后面所有的元素
                    $("选择器 ~选择器") 返回所有后面的元素（了解）
        -->
        <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
        //层级选择器
            //选择所有的后代元素
            function getAllChild(){
                var objs=$("#showdiv img");
                objs.css("border","solid 3px red");
            }
            //选择子元素
            function getChild(){
                var objs=$("#showdiv>img");
                objs.css("padding","5px");

            }
            //选择紧跟元素
            function getNextEle(){
                var objs=$("img+br+span");
                objs.css("color","red");
            }

            //案例
            $(function(){
                $("#showdiv img").mouseover(function(){
                    $(this).css("border","solid 3px red")
                })

                $("#showdiv img").mouseout(function(){
                    $(this).css("border","")
                })
            })
        </script>
    </head>
    <body>
        <h3>层级选择器：</h3>
        <input type="button" id="" value="测试层级选择器--选择所有后代元素"  onclick="getAllChild()"/>
        <input type="button" id="" value="测试层级选择器--选择所有子元素"  onclick="getChild()"/>
        <input type="button" id="" value="测试层级选择器--选择紧跟元素"  onclick="getNextEle()"/>
        <hr />
        <div id="showdiv">
            <img src="img/1.jpg" width="200px"/><br /><span>产品价格:￥99.99</span>
            <div id="">
                <img src="img/3.gif" width="200px"/><br /><span>产品价格:￥100.99</span>
            </div>
        </div>
        <img src="img/4.png"/><br /><span>产品价格:￥200.99</span>
    </body>
</html>

03-jQuery-简单选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>简单选择器</title>
        <style type="text/css">
            table{
                border:  solid 1px;
            }
            tr{
                height: 35px;
            }
            td{
                border: solid 1px;
                width: 100px;
            }
        </style>
        <!--
            简单选择器：在其他选择器的基础上选择某个或某些指定的HTML元素(筛选)
                选择第一个元素：
                    $("选择器:first") 返回第一个HTML元素
                选择最后一个
                    $("选择器:last") 返回第一个HTML元素
                去除某个元素：
                    $("选择器:not(选择器)") 去除选择的HTML元素中的某些元素
                奇数偶数
                    $("选择器:even")  返回角标为偶数的HTML元素

                    $("选择器:odd")   返回角标为奇数的HTML元素
                指定角标
                    $("选择器:eq(角标)")    返回指定角标的HTML元素对象
                大于角标
                    $("选择器:gt(角标)")    返回大于指定角标的HTML元素
                小于角标    
                    $("选择器:lt(角标)")    返回小于指定角标的HTML元素 
        -->
        <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //简单选择器：
                //选择第一个
                function getFirst(){
                    $("tr:first").css("background-color","orange");
                }
                //选择最后一个
                function getLast(){
                    $("tr:last").css("background-color","red");
                }
                //去除某个元素
                function getNot(){
                    $("tr:not(tr:first)").css("background-color","orangered");
                }
                //获取奇数和偶数--隔行变色
                function getEvenOdd(){
                    $("tr:not(tr:first):even").css("background-color","orange");
                    $("tr:not(tr:first):odd").css("background-color","blueviolet");
                }
                //按照角标筛选
                function getEq(){
                    $("tr:eq(3)").css("background-color","brown");

                }
                //按照大于某值
                function getGt(){
                    $("tr:gt(3)").css("background-color","brown");

                }
                //按照小于某值
                function getLt(){
                    $("tr:lt(3)").css("background-color","olive");

                }
        </script>
    </head>
    <body>
        <h3>简单选择器</h3>
        <input type="button" id="" value="简单选择器--选择第一个元素" onclick="getFirst()"/>
        <input type="button" id="" value="简单选择器--选择最后一个元素" onclick="getLast()"/>
        <input type="button" id="" value="简单选择器--去除" onclick="getNot()"/>
        <input type="button" id="" value="简单选择器--奇数&偶数" onclick="getEvenOdd()"/>
        <input type="button" id="" value="简单选择器--角标" onclick="getEq()"/>
        <input type="button" id="" value="简单选择器--大于角标" onclick="getGt()"/>
        <input type="button" id="" value="简单选择器--小于角标" onclick="getLt()"/>
        <hr />
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </body>
</html>

04-jQuery内容选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>内容选择器</title>
        <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //内容选择器：
                //包含--模糊筛选
                    function testCon(){
                        $("li:contains('水果')").css("color","red");


                    }
                //内容为空
                    function testEmp(){
                        $("li:empty").css("color","royalblue");
                    }
                //匹配含有选择器所匹配的元素的元素
                    function testHas(){
                        $("li:has(a)").css("background-color","#FFA500");
                    }
                //匹配含有子元素或者文本的元素
                    function testParent(){
                        $("li:parent").css("background-color","#FFA500");
                    }   
        </script>
    </head>
    <body>
        <h3>内容选择器：</h3>
        <input type="button" id="" value="内容选择器---包含" onclick="testCon()"/>
        <input type="button" id="" value="内容选择器---空选择" onclick="testEmp()"/>
        <input type="button" id="" value="内容选择器---包含指定的元素" onclick="testHas()"/>
        <input type="button" id="" value="内容选择器---有子元素的元素" onclick="testParent()"/>
        <hr />
        <ul>
            <li>水果：苹果</li>
            <li>键盘：双飞燕</li>
            <li>电脑：thinkpid</li>
            <li>水果：香蕉</li>
            <li>篮球：乔丹</li>
            <li>水果：猕猴桃</li>
            <li></li>
            <li><a href="http://www.baidu.com">百度一下</a></li>
        </ul>
    </body>
</html>

05-jquery可见性选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>可见性</title>
        <!--

            可见性
                匹配隐藏
                    $("选择器:hidden") 返回隐藏的HTML元素
                匹配可见
                    $("选择器:visible") 返回可见的HTML元素


        -->
        <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //可见性
                //匹配隐藏
                function testHidden(){
                    $("div:hidden").css("display","block");
                }
                //匹配可见的
                function testVisible(){
                    $("div:visible").css("display","none");
                }
        </script>
        <style type="text/css">
            #div01{
                border: solid 1px;
                width: 200px;
                height: 200px;
                background-color: orange;
                margin-bottom: 20px;
                display: none;/*隐藏元素*/


            }
            #div02{
                border: solid 1px;
                width: 200px;
                height: 200px;
                background-color: aqua; 
            }
        </style>
    </head>
    <body>
            <h3>可见性</h3>
            <input type="button" id="" value="可见性--hidden" onclick="testHidden()"/>
            <input type="button" id="" value="可见性--visible" onclick="testVisible()"/>
            <hr />
            <div id="div01"></div>
            <div id="div02"></div>
    </body>
</html>

06-jquery属性选择器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>属性选择器</title>
        <!--
            属性选择器：
                属性：
                    $("选择器[属性名]")  返回具备某些属性的HTML元素
                属性值：
                    $("选择器[属性名=值]") 返回具备属性且属性值为特定值的HTML元素
                不等于特定值
                    $("选择器[属性名!=值]") 返回具备属性且属性值不等于特定值的HTML元素
                其他：参照API
        -->
        <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //属性选择器
                //属性选择
                function getEleByAttr(){
                    $("input[name]").css("background-color","hotpink");
                }
                //属性为特定值
                function getEleByAttrValue(){
                    $("input[type=text]").css("background-color","aqua");
                }
                //属性值不等于特定值
                function getEleByAttrValue2(){
                    $("div>input[type!=text]").css("background-color","red");
                }
        </script>
        <style type="text/css">
            #showdiv{
                border: solid 1px;
                width: 300px;
                height: 240px;
                background-color: orange;
                margin-bottom: 20px;
                padding: 10px;
            }
            input{
                margin: 10px;
            }
        </style>
    </head>
    <body>
        <h3>属性选择器</h3>
        <input type="button" id="" value="属性选择器--属性" onclick="getEleByAttr()"/>
        <input type="button" id="" value="属性选择器--属性值" onclick="getEleByAttrValue()"/>
        <input type="button" id="" value="属性选择器--不等于特定值" onclick="getEleByAttrValue2()"/>
        <hr />
            <div id="showdiv">
                用户名:<input type="text" name="uname" id="" value="" /><br /><br />
                手机号: <input type="text" name="phone" id="" value="" /><br /><br />
                密码: <input type="password" name="" id="" value="" /><br /><br />
                邮箱:<input type="text"  value="" /><br />
            </div>
    </body>
</html>

07-jquery表单选择器

my.css:

/*设置body*/
body{background-color: gray;}
/*设置表格样式*/
table{margin: auto;margin-top: 10px;}
    tr{height: 35px;}
/*设置div样式*/
#showdiv{border: solid 1px; width: 400px; height: 450px;margin: auto;margin-top: 40px;
        border-radius: 10px;background-color: orange;
}

html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表单选择器</title>
        <!--引入css-->
        <link rel="stylesheet" type="text/css" href="css/my.css"/>
        <!--引入jQuery-->
        <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <!--声明js代码域-->
        <script type="text/javascript">
            //表单选择器
                //匹配所有 input, textarea, select 和 button 元素
                function testInput(){
                    $(":input").css("background-color","red");
                }
                //匹配所有的单行文本框
                function testText(){
                    $(":text").css("background-color","red");
                }
        </script>
        <!--
            表单操作及表单对象属性参照API即可
        -->
    </head>
    <body>
        <div id="" style="text-align: center;">
            <input type="button" id="" value="表单选择器--input" onclick="testInput()"/>
            <input type="button" id="" value="表单选择器--text" onclick="testText()"/>
        </div>
        <hr />
        <form action="" method="post">
        <div id="showdiv">
        <table cellpadding="0" cellspacing="0">
            <tr>
                <td>用户名:</td>
                <td>
                    <input type="text" name="uname" id="uname" value="" disabled="disabled"/>
                </td>
            </tr>
            <tr>
                <td width="70px">密码:</td>
                <td width="200px">
                    <input type="password" name="pwd" id="pwd" value="" />
                </td>
            </tr>
            <tr>
                <td>邮箱:</td>
                <td>
                    <input type="text" name="mail" id="mail" value="" />
                </td>
            </tr>
            <tr>
                <td>手机号:</td>
                <td>
                    <input type="text" name="phone" id="phone" value="" />
                </td>
            </tr>
            <tr>
                <td>性别:</td>
                <td>
                    男: <input type="radio" name="sex" id="" value="1" />
                    女: <input type="radio" name="sex" id="" value="0" />
                </td>
            </tr>
            <tr>
                <td>爱好:</td>
                <td>
                    唱歌<input type="checkbox" name="fav" id="" value="1" />
                    跳舞<input type="checkbox" name="fav" id="" value="2" />
                    打球<input type="checkbox" name="fav" id="" value="3" />
                </td>
            </tr>
            <tr>
                <td>籍贯:</td>
                <td>
                    <select name="address" id="">
                        <option value="1">北京</option>
                        <option value="2">上海</option>
                        <option value="3">商丘</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>个人介绍:</td>
                <td>
                    <textarea name="intro" rows="4" cols="20"></textarea>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="checkbox" name="" id="" value="" />是否同意协议
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" name="" id="" value="注册" />
                </td>
            </tr>
        </table>
        </div>
        </form>
    </body>
</html>

08-jquery操作属性

<html>
    <head>
        <title>操作属性</title>
        <meta charset="UTF-8"/>
        <style type="text/css">
            #showdiv{
                border: solid 1px; 
                width: 400px;
                 height: 100px;
                background-color: orange;
            }
            input[type=text]{
                margin: 10px;
            }
        </style>
        <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <!--
            jQuery获取元素对象(选择器)
            jquery操作元素属性
                获取：
                    对象名.attr("属性名") 返回属性值。返回的是默认值
                    注意：
                        如果要获取用户数据使用对象名.val()
                修改
                    对象名.attr("属性名","新的值")
                注意：
                    使用jQuery对象获取紧跟的元素：
                        对象名.next()  //返回的是紧跟的jQuery对象
        -->
        <script type="text/javascript">
            //操作属性
            //获取
            function getField(){
                //获取元素对象
                var obj=$("#uname");
                //获取
                alert(obj.attr("type")+":"+obj.attr("name")+":"+obj.attr("id")+":"+obj.attr("value"));
                alert(obj.val());
            }
            //修改
            function operField(){
                //获取元素对象
                var obj=$("#uname");
                //修改
                obj.attr("type","button")
            }
            //案例：用户名校验
            function checkUname(){
                //获取元素对象
                var obj=$("#uname");//用户名
                //获取用户名数据
                var data=obj.val();
                //校验
                if(data=="" || data==null){
                    obj.next().html("*用户名不能为空");
                    obj.next().css("color","red");
                }else if(data.length>6&&data.length<=8){
                    obj.next().html("*用户名正确").css("color","green");
                }else{
                    obj.next().html("*用户名不符合规则");
                    obj.next().css("color","red");
                }
            }
        </script>
    </head>
    <body>
        <h3>操作属性</h3>
        <input type="button" id="" value="操作属性---获取" onclick="getField()"/>
        <input type="button" id="" value="操作属性---修改" onclick="operField()"/>
        <hr />
        <div id="showdiv">
            用户名: <input type="text" name="uname" id="uname" value="" onblur="checkUname()" /><span></span>
        </div>
    </body>
</html>

09-jquery操作元素内容

<html>
    <head>
        <title>操作元素内容</title>
        <meta charset="UTF-8"/>
        <style type="text/css">
            #showdiv{
                border: solid 1px; 
                width: 200px;
                 height: 200px;
                background-color: orange;
            }
        </style>
        <!--引入-->
        <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <!--
            jquery获取元素对象
            jQuery操作元素内容
                获取：
                    元素对象.html()     返回元素的所有内容包括HTML标签
                    元素对象.text() 返回所有的文本内容，不包括HTML标签
                修改
                    元素对象.html("新的内容")   会覆盖原有内容，解析HTML标签
                    元素对象.text("新的内容")   覆盖原有内容，不解析HTML标签
                注意：
                    如果是追加则使用
                    元素对象.html(元素对象.html()+"新的内容")
                    元素对象.text(元素对象.text()+"新的内容")

        -->
        <script type="text/javascript">
            //操作元素内容
                //获取
                    function getData(){
                        //获取元素对象
                        var obj=$("#showdiv");
                        //获取元素内容
                        alert(obj.html());//返回元素的所有内容包括HTML标签
                        alert(obj.text());//返回所有的文本内容，不包括HTML标签
                    }
                //修改
                    function operData(){
                        //获取元素对象
                        var obj=$("#showdiv");
                        //修改元素内容
                        obj.html(obj.html()+"<i>后端知识马上就开始了，你的人生巅峰就要到了</i>");//会覆盖原有内容，解析HTML标签
                        obj.text(obj.text()+"<i>后端知识马上就开始了，你的人生巅峰就要到了</i>");//会覆盖原有内容，不解析HTML标签
                    }
        </script>
    </head>
    <body>
        <h3>操作元素内容</h3>
        <input type="button" id="" value="操作元素内容--获取" onclick="getData()"/>
        <input type="button" id="" value="操作元素内容--获取" onclick="operData()"/>
        <hr />
        <div id="showdiv">
            <b>别急，前端知识马上就学完啦。</b>
        </div>
    </body>
</html>

10-jQuery操作样式

<html>
    <head>
        <title>操作样式</title>
        <meta charset="UTF-8"/>
        <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <!--
            jQuery获取元素对象
            jquery操作样式：
                添加:
                    元素对象.css("样式名","样式值");
                    元素对象.css({"样式名":"样式值","样式名":"样式值","样式名":"样式值",....})
                修改
                    元素对象.css("样式名","新的样式");
                注意:
                    也可以元素对象名.addClass("类选择器名");

        -->
        <script type="text/javascript">
            //操作元素样式
                //添加
                function addCss(){
                    //获取元素对象
                    var obj=$("#showdiv");
                    //添加样式
                        //基本写法
//                      obj.css("border","solid 1px");
//                      obj.css("width","200px");
//                      obj.css("height","200px");
//                      obj.css("background-color","orange");
                        //高级写法
                        obj.css({"border":"solid 1px","width":"200px","height":"200px","background-color":"orange"})
                }

                //修改
                    function updateCss(){
                        //获取元素对象
                            var obj=$("#showdiv");
                        //修改
                            obj.css("background-color","darkcyan");
                    }
                //添加
                    function addClass(){
                        //获取元素对象
                            var obj=$("#showdiv");
                        //使用类选择器添加
                            obj.addClass("commom");                 
                    }

        </script>
        <style type="text/css">

        </style>
    </head>
    <body>.commom{
                border: solid 1px; 
                width: 200px;
                 height: 200px;
                background-color: orange;
            }
    <h3>操作样式</h3>
        <input type="button" id="" value="操作样式---添加--css()" onclick="addCss()"/>
        <input type="button" id="" value="操作样式---修改--css()" onclick="updateCss()"/>
        <input type="button" id="" value="操作样式---修改--addClass()" onclick="addClass()"/>
    <hr />
        <div id="showdiv">

        </div>
    </body>
</html>

11-jQuery操作文档结构

<html>
    <head>
        <title>操作文档</title>
        <meta charset="UTF-8"/>
        <style type="text/css">

        </style>
        <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <!--
            jQuery获取元素对象
            操作文档结构：修改，添加，删除
                内部插入：   
                    元素对象名.append("HTML代码")      追加(创建新的节点并追加)
                    元素对象名.appendTo("选择器")       将制定的元素移动并追加到指定的元素中(将别的节点移动到追加)
                    元素对象名.prepend("HTML代码")     在前面追加(创建新的节点并追加)
                    元素对象名.prependTo("选择器")      将制定的元素移动并在前面追加到指定的元素中(将别的节点移动到在前面追加)    
                外部插入:
                    元素对象名.after("HTML代码")       在元素之后添加
                    元素对象名.before("HTML代码")      在元素之前添加
                    元素对象名.insertAfter("选择器")        将指定的节点移动到指定的元素后
                    元素对象名.insertBefore("选择器")   将指定的节点移动到指定的元素前
                包裹：
                    参照API
                替换：
                    replace()
                删除：
                    empty()
                    remove()
                    detach()
                克隆：
                    clone()
                    clone(true)
            -->
        <script type="text/javascript">
            //操作文档结构：
                //内部插入
                    //append
                    function testAppend(){
                        //获取元素对象
                        var obj=$("#div01");
                        //内部插入--追加
                        obj.append("<span>聪明</span>");
                        //obj.append($("#div02+span"));
                    }
                    //appendTo
                    function testAppendTo(){
                        //获取元素对象
                        $("#div02+span").appendTo("div");
                    }
                    //prepend
                    function testPrepend(){
                        //获取元素对象
                        var obj=$("#div01");
                        //内部插入--追加
                        obj.prepend("<span>帅气</span>");
                    }

            //外部插入  
                //after
                function testAfter(){
                    //获取元素对象
                    $("#div01").after("<span>大家对他的印象:</span>");
                }

                //before
                function testBefore(){
                    //获取元素对象
                    $("#div01").before("<span>请选择印象标签:</span>");
                }
                //insertAfter
                function testInsertAfter(){
                    //将指定的节点移动到指定的元素后面
                    $("#div02+span").insertAfter("#div01");

                }
        //替换
            function testReplace(){
                $("#div01 span").replaceWith("<b>哈哈</b>");

            }
/*-------------------------------------------------------------------------------*/

                    function operSpanCss(){
                        //获取元素对象
                        $("#div01 span").css("background-color","#FFF5A8");
                        $("#div01 span").css("font-size","20px");
                        $("#div01 span").css("padding","5px");
                    }

                    //案例
                        function moveSpan(){
                            $("#div01 span").click(function(){
                                $(this).clone().appendTo("#div02");
                            })
                        }
        </script>

    </head>
    <body>
        <h3>操作文档结构</h3>
        <input type="button" id="" value="测试操作文档结构--内部插入--append" onclick="testAppend()"/>
        <input type="button" id="" value="测试操作文档结构--内部插入--appendTo" onclick="testAppendTo()"/>
        <input type="button" id="" value="测试操作文档结构--内部插入--prepend" onclick="testPrepend()"/>
        <input type="button" id="" value="span样式1" onclick="operSpanCss()"/>
        <input type="button" id="" value="案例-移动span" onclick="moveSpan()"/>
        <hr />
        <input type="button" id="" value="测试外部插入--after" onclick="testAfter()"/>
        <input type="button" id="" value="测试外部插入--after" onclick="testBefore()"/>
        <input type="button" id="" value="测试外部插入--insertAfter" onclick="testInsertAfter()"/>
        <hr />
        <input type="button" id="" value="替换" onclick="testReplace()"/>
        <hr />
        <div id="div01">
            <span>情商高</span>
        </div>
        <div id="div02">

        </div>
        <span>666</span>
    </body>
</html>

小结

01-jQuery的基本选择器
02-jQuery-层级选择器
03-jQuery-简单选择器
04-jQuery内容选择器
05-jQuery可见性选择器
06-jQuery属性选择器
07-jQuery表单选择器
08-jQuery操作属性
09-jQuery操作元素内容
10-jQuery操作样式
11-jQuery操作文档结构

注意：

1.jQuery是一个链式语言，属性设置可以连续.出来设置
2.js对象和jQuery对象的互转：
对于已经是一个 DOM 对象，只需要用 $() 把DOM对象包装起来，就可以获得一个 jQuery 对象了，使用[index]和.get(index)可以转为DOM对象

链式调用原理：
http://blog.csdn.net/cx0517/article/details/75643496

资料：jquery-1.9.1.js
img:
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述

神一样的我
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javaweb学习（day12-jQuery)
weixin_51580177的博客
04-23 1084
jquery就是简化了dom的操作，也确实很方便
jQuery-Day3
最新发布
2401_85122909的博客
06-10 724
🏆 学习の目标能够说出4种常见的注册事件能够说出 on 绑定事件的优势能够说出 jQuery 事件委派的优点以及方式能够说出绑定事件与解绑事件能够说出 jQuery 对象的拷贝方法能够说出 jQuery 多库共存的2种方法能够使用 jQuery 插件🥇 一、jQuery 事件注册​ jQuery 为我们提供了方便的事件注册机制，使开发人员易于操作，优缺点如下：优点: 操作简单，且不用担心事件覆盖等问题。缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。
jQuery-3
qq_44588612的博客
04-16 620
文章の目录 学习の目标 一、jQuery 事件注册 二、jQuery 事件处理2.1 事件处理 on() 绑定事件 2.2 事件处理 off() 解绑事件2.3 事件处理 trigger() 自动触发事件 三、jQuery 事件对象 四、jQuery 拷贝对象 五、jQuery 多库共存 六、jQuery 插件 6.1 瀑布流插件（重点讲解） 6.1.1 瀑布流插件使用步骤演示 6.2 图片懒加载插件 6.2.1 图片懒加载插件使用步骤演示 6.3 全屏滚动插件 6
Jquery-day01
weixin_50519232的博客
04-26 1483
jquery是一个js工具库，它是对js的封装形成工具类。 jquery选择器： 一. jquery操作DOM 1.如何获取dom get()获取到的是一个dom对象 console.log($("tr").get(1)); jquery转dom jq[0] dom转化为jquery $(js对象) con...
7.23 Day27 ----- jQuery
qq_63771774的博客
07-23 302
在idea中下载jQuery 建一个01.jQuery选择器 HTML文件 建一个02.val()操作元素的value HTML文件 建一个03.使用元素的事件属性监听事件 HTML文件 建一个04.使用jQuery监听事件 HTML文件 建一个06.事件冒泡(事件传播)，事件委托 HTML文件 ...
jQuery-Day01 基础
weiweianx的博客
02-04 116
jQuery-Day01基础 JavaScript库是一个封装号的特定的集合（方法和函数）。 常见的库有jQuery、YUI、Dojo、Ext Js、zeptol（移动端）； 都是对原生js的封装。 jQuery 宗旨：“write less， Do More" 学习jQuery，重在学会调用其内部函数 优点：核心文件齐全；跨浏览器兼容；链式编程，隐式迭代；对事件、样式、动画支持；支持插件扩展开发；免费、开源。 官网：”https://jQuery.com“; 选择版本： 1x: 支持IE678低
text/x-jquery-tmpl做分页查询
苏凯的博客
03-15 1789
页面原型: 数据格式: { "pageindex" : 1, 默认第一页 "pagesize" : 10,每页显示条数记录 "count" : 12,总条数 "total" : 2,总页数 "currentPage" : 1,当前页面码 "list" : [ { "id" : 398,
jQuery-1
一个前端初学者的博客
02-01 931
正课: 1. 什么是jQuery 2. 查找 1. 什么是jQuery   jQuery是快速的，简洁的第三方javascript库  为什么:      1. DOM操作的终极简化:          DOM的问题: 核心DOM: 万能，繁琐                               HTML DOM: 简洁，不是万能          jQuery在
jQuery UI -- 日历选择器
热爱思考、活力满满、开朗爱笑的年轻人
11-21 5320
用jQuery UI实现的日期选择器 　　在这之前，我们先来了解一下jQuery UI。jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视空间。我们可以直接用它来构建具有很好交互性的 web 应用程序。 　　本次采用的jQuery UI 的版本为:jquery-ui-1.10.3.custom.zip
Jquery--日期初始化
WangKeSiInSiChuan的博客
10-21 540
1.在jquery中，对于初始化的操作可以通过jquery中的ready方法来进行渲染。其写法如下： //jquery中的ready方法 $(document).ready(function(){ }); 2.日期初始值获取（获取当前日期） //给小于10的数字前添加一个0来完成01或者02样式的渲染。 function getNow(s) {return s < 10 ? '0' + s...
15day-study-jquery-.rar_JavaScript/JQuery_Java_
08-11
在本资源"15day-study-jquery-.rar"中，你将踏上一个为期15天的快速学习jQuery的旅程。jQuery是一个强大的JavaScript库，它极大地简化了JavaScript编程，特别是对于网页上的DOM操作、事件处理、动画效果以及AJAX交互...
jQuery-dayin调用浏览器打印
11-08
在IT行业中，jQuery-dayin是一个基于jQuery的插件，用于实现网页内容的浏览器打印功能。这个插件的主要目的是提供一种跨浏览器的解决方案，确保在不同的浏览器环境下都能顺利地调用打印功能，尤其对于那些默认不支持...
jquery-scheduler:与jQuery配合使用的日程安排器
05-13
jQuery调度程序 什么？ 这是一个简单的jQuery...克隆存储库： git clone https://github.com/johnsolo15/jquery-scheduler.git 下载压缩文件 包含文件： <link rel="stylesheet" href="/path/to/jquery.scheduler
CountDown-jQuery-plugin:CountDown-jQuery-插件
05-20
CountDown-jQuery-插件 CountDown-jQuery-插件 ＃设置倒计时的方法####启动倒数 jQuery(document).ready(function() { $('#countdown_dashboard').countDown({ targetOffset: { 'day': 0, 'month': 0, ...
jquery-1.7.1
09-12
《jQuery 1.7.1：前端开发的重要里程碑》 jQuery，这个JavaScript库，自2006年发布以来，以其简洁的API和强大的功能，极大地推动了前端开发的进步。在众多版本中，jQuery 1.7.1是一个重要的里程碑，它在功能优化和...
Day45 EasyUI 搭建后台登录界面和管理系统主界面
新世界的大门
03-06 8996
EasyUI介绍 1.EasuyUI介绍： EasyUI：简单的界面设计框架，作用主要是用来设计网站的后台管理系统。帮助程序员快速的构建网站界面。 特点： 基于jQuery的一个UI插件 2、EasyUI官网： http://www.jeasyui.com 3、EasyUI使用目录介绍： ...
Day83 EasyUI和IDEA的使用
新世界的大门
05-11 1564
1
Day50 ajax和Json数据格式
新世界的大门
03-13 200
Ajax学习 http://www.runoob.com/ajax/ajax-tutorial.html 问题： 目前来，所有的请求的发送都是通过浏览器自己直接进行发送，响应是浏览器在接收到响应信息后自主的将响应数据覆盖当前页面显示。现在，要求在保留原有页面内容的情况下显示新的响应内容。 解决: 使用ajax技术 ajax原理: 请求由ajax引擎对象发送，响应数据，浏览...
Day42 JavaScript-2
新世界的大门
02-28 190
JavaScript 学习网站：http://www.w3school.com.cn/html/index.asp JavaScript由三部分组成：EMCAScript、DOM、BOM。 DOM是一个使程序和脚本有能力动态地访问和更新文档的内容，结构以及样式的平台和语言中立的接口。而BOM定义了JavaScript可以进行操作的浏览器的各个功能部件的接口。首先应该清楚的是两者皆为接口定义。...
"使用jQuery-EasyUI组件构建Web页面培训总结
在js-day06培训中，要求使用jQuery-EasyUI组件构建自己的Web页面，并使用Jsp/Js/Ajax/Json/Jquery/Easyui、Servlet、JDBC、Lucene/Mysql/Oracle完成数据库分页。此外，还要求学员查阅文档，使用jQuery-EasyUI构建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值