jQuery大法--jQuery控制页面

最新推荐文章于 2022-10-24 18:37:49 发布

宇宙一码平川

最新推荐文章于 2022-10-24 18:37:49 发布

阅读量368

点赞数

分类专栏：前端大法文章标签： jQuery 控制页面

本文链接：https://blog.csdn.net/qq_36789311/article/details/99622676

版权

前端大法专栏收录该内容

32 篇文章 0 订阅

订阅专栏

一、对元素内容和值进行操作

元素的内容是指定义元素的起始标记和结束标记之间的内容，可分为文本内容和HTML内容。

<div>
    <p>测试内容</p>
</div>

div元素的文本内容是“测试内容”，文本内容是不包含元素的子元素，质保函元素的文本内容。而“<p>测试内容</p>”就是元素的HTML内容，HTML内容不仅包括元素的文本内容，还包括元素的子元素。

1、对元素内容操作

（1）对文本内容操作

text()用于获取全部匹配元素的文本内容，text(val)用于设置全部匹配元素的文本内容。text()方法取得的是所有匹配元素包含的文本组合起来的文本内容，这个方法也对XML文件有效，可以用text()方法解析XML文档元素的文本内容。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对值和内容进行操作</title>
</head>
<body>
    <div>
        <span id="clock">程潇小可爱</span>
    </div>
    <script src="jquery.js"></script>
    <script>
        alert($("div").text());
    </script>
</body>
</html>

运行结果：

（2）对HTML内容操作

html()用于获取第一个匹配元素的HTML内容，text(val)用于设置全部匹配元素的HTML内容。均不能用于XML文档，但是可用于XHTML文档。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对值和内容进行操作</title>
</head>
<body>
    <div id="div1">
        <span id="clock">程潇小可爱</span>
    </div>
    <br>
    <div id="div2">
        <span id="clock2">程潇大可爱</span>
    </div>
    <script src="jquery.js"></script>
    <script>
        alert($("#div1").text("<span style='color: yellow'>text2()获取</span>"));
        alert($("#div2").html("<span style='color: yellow'>html()获取</span>"));
        alert($("#div1").text() + $("#div2").html());
    </script>
</body>
</html>

2、对元素值操作

val()：用于获取第一个匹配元素的当前值。

val(val): 用于匹配所有匹配元素的值。

val(arrVal): 用于为check、select和radio等元素进行设置值，参数为字符串数组。

示例：

    <select name="like" id="like" size="2" multiple="multiple">
        <option value="北京">北京</option>
        <option value="上海" selected>上海</option>
        <option value="广州">广州</option>
        <option value="深圳"selected>深圳</option>

    </select>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {
           $("select").val(["北京","广州"]);
           alert($("select").val());
        });
    </script>

运行结果：

二、对DOM节点进行操作

1、查找节点（选择器查找）

2、创建节点

(1)创建元素（2）将新元素插入到文档中（即父元素中）

示例：

 <script>
        $(document).ready(function () {
           var $txtP = $("<p><span style='color: yellow'>程潇</span></p>")
            $("body").append($txtP);
        });
 </script>

3、插入节点（创建节点时使用append()方法将节点添加到指定元素）

(1)在元素内部插入：在元素内部插入新的元素和内容。

append():为所选中的元素内部追加内容

appendTo():将所选中元素添加到另一个元素的元素集合中

prepend():在所选中元素的内部前置内容

prependTo(): 将所选中元素前置到另一个元素集合中

(2)在元素外部插入:在元素外部插入就是将要添加的内容添加到元素之前和元素之后。

after(): 在每个选中元素之后添加内容

insertAfter(): 将所有选中元素插入到另一个指定的元素的元素集合后面

before(): 在每一个选中元素之前添加内容

insertBefore(): 将所有选中元素插入到另一个指定的元素的元素集合前面

4、删除、复制与替换节点

（1）删除节点

①empty()用于删除所选元素中所有子节点，并不删除该元素

②remove([expr])用于从DOM中删除所有选中的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>删除节点</title>
</head>
<body>
    div1:
    <div id="div1"><span style="color: yellow">程潇小可爱</span></div>
    div1:
    <div id="div2"><span style="color: greenyellow">程潇大可爱</span></div>
    <script>
        $(document).ready(function () {
           $("#div1").empty();
           $("#div2").remove();
        });
    </script>
</body>
</html>

运行结果：

（2）复制节点 clone()

①不带参数，用于克隆匹配的DOM元素并且选中这些克隆的副本

②带有布尔型参数。参数=ture时，表示克隆选中元素及其所有的事件处理，并且选择这些克隆的副本；参数=false时，表示不复制元素的事件处理。

（3）替换节点 replaceAll()、replaceWith()

①replaceAll()用于使用选中的元素替换所有selector匹配的元素

②replaceWith()用于将所有选择的元素替换成指定的HTML或者DOM元素

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的开心农场</title>
    <style>
        div{
            font-size: 12px;
            border:yellow 1px solid;
            padding: 5px;
        }
        #bg{
            width: 456px;
            height: 266px;
            background-image: url(images/plowland.jpg);
        }
        img{
            position: absolute;
            top:85px;
            left: 195px;
        }
        #seed{
            background-image: url(images/btn_seed.png);
            width: 56px;
            height: 56px;
            position: absolute;
            top:229px;
            left: 49px;
            cursor: hand;
        }

        #grow{
            background-image: url(images/btn_grow.png);
            width: 56px;
            height: 56px;
            position: absolute;
            top:229px;
            left: 154px;
            cursor: hand;
        }
        #bloom{
            background-image: url(images/btn_bloom.png);
            width: 56px;
            height: 56px;
            position: absolute;
            top:229px;
            left: 259px;
            cursor: hand;
        }
        #fruit{
            background-image: url(images/btn_fruit.png);
            width: 56px;
            height: 56px;
            position: absolute;
            top:229px;
            left: 368px;
            cursor: hand;
        }
    </style>
</head>
<body>
    <div id="bg">
        <span id="seed"></span>
        <span id="grow"></span>
        <span id="bloom"></span>
        <span id="fruit"></span>
    </div>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {
           $("#seed").bind("click",function () {
              $("img").remove();
              $("#bg").prepend("<img src='images/seed.png'>");
           });
           $("#grow").bind("click",function () {
              $("img").remove();
              $("#bg").append("<img src='images/grow.png'>");
           });
           $("#bloom").bind("click",function () {

              $("img").replaceWith("<img src='images/bloom.png'>");
           });
           $("#fruit").bind("click",function () {

              $("<img src='images/fruit.png'>").replaceAll("img");
           });
        });
    </script>
</body>
</html>

运行结果：

三、对元素属性进行操作

attr(name):获取选择的第一个元素的属性值（无值时返回undefined）

attr(key,value):为选择的元素设置一个属性值(value是设置的属性值)

attr(key,fn)：为选择的元素设置一个函数返回的属性值

attr(多个属性): 为所有的选择元素以集合({name:value,name:value})形式同时设置多个属性值

removeAttr(name): 为选择的元素删除一个属性

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对元素属性进行操作</title>
</head>
<body>
    <form name="form1">
        <div align="center">
             <p class="style1">学生登记表</p>
             <table width="600" border="1" bgcolor="#adff2f">
                 <tr>
                     <td width="50">
                         <div align="right">账户</div>
                     </td>
                     <td width="267">
                         <div align="left">
                             <input type="text" name="textfield">
                             <span class="style2">*</span>
                         </div>
                     </td>
                 </tr>
                 <tr>
                     <td >
                         <div align="right">密码</div>
                     </td>
                     <td >
                         <div align="left">
                             <input type="text" name="textfield2">
                             <span class="style2">*(6-15)位</span>
                         </div>
                     </td>
                 </tr>
                 <tr>
                     <td >
                         <div align="right">确定密码</div>
                     </td>
                     <td >
                         <div align="left">
                             <input type="text" name="textfield3">
                             <span class="style2">*</span>
                         </div>
                     </td>
                 </tr>
                 <tr>
                     <td>
                         <div align="right">性别</div>
                     </td>
                     <td>
                         <div align="left">
                             <select name="select" id="">
                                 <option value="">男</option>
                                 <option value="">女</option>
                                 <option value="" selected>--</option>
                             </select>
                         </div>
                     </td>
                 </tr>
                 <tr>
                     <td height="">
                         <div align="right">城市</div>
                     </td>
                     <td>
                         <div align="left">
                             <p>
                                 <input type="checkbox" name="checkbox" value="checkbox">
                                 北京
                                 <input type="checkbox" name="checkbox" value="checkbox">
                                 上海
                                 <input type="checkbox" name="checkbox" value="checkbox">
                                 广州
                                 <input type="checkbox" name="checkbox" value="checkbox">
                                 深圳
                             </p>
                         </div>
                     </td>
                 </tr>
                 <tr>
                     <td height="">
                         <div align="right">建筑</div>
                     </td>
                     <td>
                         <div align="left">
                             <p>
                                 <input type="checkbox" name="checkbox" value="checkbox">
                                 故宫
                                 <input type="checkbox" name="checkbox" value="checkbox">
                                 外滩
                                 <input type="checkbox" name="checkbox" value="checkbox">
                                 广州塔
                                 <input type="checkbox" name="checkbox" value="checkbox">
                                 小梅沙
                             </p>
                             <p>
                                 <input type="checkbox" name="checkbox" value="checkbox">
                                 颐和园
                                 <input type="checkbox" name="checkbox" value="checkbox">
                                 东方之珠
                                 <input type="checkbox" name="checkbox" value="checkbox">
                                 长隆欢乐乐园
                                 <input type="checkbox" name="checkbox" value="checkbox">
                                 大梅沙
                             </p>
                             <p align="right">
                                 <input type="button" name="submit1" id="checkAll" value="全选">
                                 <input type="button" name="submit2" id="inverse" value="反选">
                                 <input type="button" name="submit" id="checkNo" value="全不选">
                             </p>
                         </div>
                     </td>

                 </tr>
                 <tr>
                     <td>
                         <div align="right">
                             邮箱
                         </div>
                     </td>
                     <td>
                         <div align="left">
                             <input type="email" name="textfield4">
                         </div>
                     </td>
                 </tr>
                 <tr>
                     <td>
                         <div align="right">
                             验证码
                         </div>
                     </td>
                     <td>
                         <div align="left">
                             <input type="text" value="GO" name="textfield5">
                         </div>
                     </td>
                 </tr>
                 <tr>
                     <td>
                         <div align="right">
                             确认验证码
                         </div>
                     </td>
                     <td>
                         <div align="left">
                             <input type="text" value="" name="textfield6">
                         </div>
                     </td>
                 </tr>
                 <tr>
                     <td colspan="2">
                         <div align="center">
                             <input type="button" name="submit3" value="确定">
                             <input type="reset" name="submit4" value="重置">
                         </div>
                     </td>
                 </tr>
             </table>
        </div>
    </form>
    <script src="jquery.js"></script>
    <script>
        $(function () {
            $("#checkAll").click(function () {
                $('[name=checkbox]:checkbox').attr('checked',true);

            });
            $("#inverse").click(function () {
               $('[name=checkbox]:checkbox').each(function () {
                   if($(this).attr('checked')){
                       $(this).attr('checked',false);
                   }else{
                       $(this).attr('checked',true);
                   }
               }) ;
            });
            $("#checkNo").click(function () {
               $('[name=checkbox]:checkbox').attr('checked',false);
            });
        });
    </script>
</body>
</html>

运行结果：

四、对元素的CSS样式操作

1、通过修改CSS类实现样式操作

addClass():为所有选中元素添加指定的CSS类

removeClass():从所选元素中删除全部或者指定的CSS类

toggleClass():如果存在(不存在)就删除（添加）一个CSS类

toggleClass(class,switch):如果switch参数为true则加上响应的CSS类，否则就删除相应的类。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改CSS类实现样式操作</title>
    <style>
        form{
            background-color: #fff;
            width: 300px;
            height: 500px;
        }
        .form{
            background-color: yellow;
        }
        input{
            margin:5px;
        }
        .input{
            font-size: 12pt;
            color: #333333;
            background-color: #cef;
            border:1px solid #000000;
        }
    </style>
</head>
<body>
    <form id="form1" name="form1" method="post">
        姓&nbsp;&nbsp;名:<input type="text" name="name" id="name"/>
        <br>
        籍&nbsp;&nbsp;贯:<input type="text" name="native" id="native"/>
        <br>
        生&nbsp;&nbsp;日:<input type="text" name="birthday" id="birthday"/>
        <br>
        E-mail:<input type="text" name="email" id="email"/>
        <br>
        <span>
            <input type="button" name="change" id="change" value="换肤">
        </span>
        <input type="button" name="default" id="default" value="恢复默认">
        <br>

    </form>
    <script src="../jquery.js"></script>
    <script>
        $(document).ready(function () {
           $("#change").click(function () {
               $("form>input").addClass("input");
               $("form").addClass("form");
           }) ;
           $("#default").click(function(){
              $("form>input").removeClass("input");
           });
        });
    </script>

</body>
</html>

运行结果：

2、通过修改CSS属性实现样式操作

css(name)：返回第一个所选择元素的样式属性

css(name,value):为所选元素的指定样式设置值

css(属性：值，属性：值；。。。):以属性-值对的形式为所选元素设置样式属性

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改css属性</title>
    <style>
        table{
            border:1px solid black;
            border-collapse: collapse;
            width: 400px;
        }
        table th{
            border:1px solid black;
            width: 50%;
        }
        table td{
            border:1px solid black;
            width: 50%;
        }
        tbody th{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th colspan="2">点击学号编辑表格</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>学号</th>
                <th>姓名</th>
            </tr>
            <tr>
                <td>001</td>
                <td>李晓凡</td>
            </tr>
            <tr>
                <td>002</td>
                <td>崔月红</td>
            </tr>
            <tr>
                <td>003</td>
                <td>柳博文</td>
            </tr>
            <tr>
                <td>004</td>
                <td>舒百一</td>
            </tr>
        </tbody>
    </table>
    <script src="jquery.js"></script>
    <script>
        $(document).ready(function () {
           $("tbody>tr:even").css("background-color","yellowgreen");
           var numTd = $("tr>td:even");
           numTd.click(function () {
               var tdobj = $(this);
              if(tdobj.children("input").length>0){
                  return false;
              }
              var tdtext = tdobj.html();
              tdobj.html("");
              var inputobj = $("<input type='text'>");
              inputobj.appendTo(tdobj);
              inputobj.width(tdobj.width());
              inputobj.css("border-width","0");
              inputobj.css("background-color",tdobj.css("background-color"));
              inputobj.val(tdtext);
              inputobj.css("font-size","16px");
              inputobj.trigger("focus").trigger("select");
              //处理回车键操作
               inputobj.keyup(function (event) {
                   var keycode = event.which;
                   if(keycode == 13){
                       var inputvalue = $(this).val();
                       tdobj.html(inputvalue);
                   }
                   if(keycode == 27){
                       tdobj.html(tdtext);
                   }
               });
           });

        });
    </script>
</body>
</html>

运行结果：

本期学习到此结束，欢迎关注批评指正。

宇宙一码平川

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery大法--jQuery控制页面

一、对元素内容和值进行操作元素的内容是指定义元素的起始标记和结束标记之间的内容，可分为文本内容和HTML内容。<div> <p>测试内容</p></div>div元素的文本内容是“测试内容”，文本内容是不包含元素的子元素，质保函元素的文本内容。而“<p>测试内容</p>”就是元素的HTML内容，HTML...
复制链接

扫一扫