JQuery文档操作

时间：2019-07-12 22:31:22 阅读：217 评论：0 收藏：0 [点我收藏+]

标签：pre before index insert script ESS title 刘强东阿里

JQuery文档操作

obj.val()

相当于jS里的value，用于表单控件的取值和赋值。赋值带参数，取值无参数。

技术图片

<head>
    <meta charset="UTF-8">
    <title>val</title>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script>
        $(function() {
            // 赋值
            $(":text").val("AAAAA");
            //--------------
            $(":button").click(function() {
                //取值
                var v = $("input").val();
                console.log(v);
            });
        });
    </script>
</head>

<body>
    <input type="text" />
    <input type="button" value="显示" />
</body>

html()和text()

相当于jS里的indeHtml和innerText。

<html>

    <head>
        <meta charset="UTF-8">
        <title>text和html</title>
    </head>

    <body>
        <p id="idP1"></p>
        <p id="idP2"></p>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script>
            $("#idP1").text("jQuery对象");
            $("#idP2").html("<hr/>");
        </script>
    </body>

</html>

下列示例使用text()函数，顺便展示了keypress事件和keydown的区别。

<html>
    <head>
        <meta charset="UTF-8">
        <title>text()方法示例：显示keyCode</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script>
            $(function() {
                $(document).keypress(function() {
                    // 有大小写的区别
                    $("#press").text("keypress:" + event.keyCode);
                });
                $(document).keydown(function() {
                    // 不区分大小写
                    $("#down").text("keydown:" + event.keyCode);
                });
            });
        </script>
    </head>
    <body>
        <p id="press"></p>
        <p id="down"></p>
    </body>
</html>

class操作

$().addClass("cls1");//添加class属性指定的式样
$().removeClass("cls1");//删除
$().toggleClass("cls1");// 不在就加，存在就删

<html>

    <head>
        <meta charset="UTF-8">
        <title>添加CSS，切换CSS</title>
        <style>
            .cls1 {
                color: red;
            }
        </style>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script>
            $(function() {
                $("#contentAdd").click(function() {
                    $(this).addClass("cls1");
                });
                $("#btn").click(function() {
                    $("#contentAdd").removeClass("cls1");
                });
                $("#contentToggle").click(function() {
                    $(this).toggleClass("cls1");
                });
            });
        </script>
    </head>

    <body>
        <p id="contentAdd">点击：添加式样</p>
        <input type="button" id="btn" value="取消式样" />
        <p id="contentToggle">点击：切换式样</p>

    </body>

</html>

节点操作

元素内加

$("ul").append($li);//append：追加
$li.appendTo($("ul"));
$("ul").prepend($li);// prepend：前置
$li.prependTo($("ul"));

<html>

    <head>
        <meta charset="UTF-8">
        <title>append（To）/prepend(To)</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script>
            $(function() {
                $("#id_append").click(function() {
                    var $li = $("<li>" + $(this).val() + "</li>");
                    // 在XX后面加
                    $("ul").append($li);
                });
                $("#id_appendTo").click(function() {
                    var $li = $("<li>" + $(this).val() + "</li>");
                    // 加在XX后面
                    $li.appendTo($("ul"));
                });
                $("#id_prepend").click(function() {
                    var $li = $("<li>" + $(this).val() + "</li>");
                    // 在XX前面加
                    $("ul").prepend($li);
                });
                $("#id_prependTo").click(function() {
                    var $li = $("<li>" + $(this).val() + "</li>");
                    // 加在XX前面
                    $li.prependTo($("ul"));
                });
            });
        </script>
    </head>

    <body>
        <ul>
            <li></li>
        </ul>
        <input type="text" id="id_append" value="一脸正气——李连杰" />
        <br>
        <input type="text" id="id_appendTo" value="悔创阿里——杰克马" />
        <br>
        <input type="text" id="id_prepend" value="坐怀不乱——刘强东" />
        <br>
        <input type="text" id="id_prependTo" value="一无所有——王健林" />

    </body>

</html>

元素外加

$(this).after($ul);
$ul.insertAfter($(this));
$ul.insertBefore($(this));

<html>

    <head>
        <meta charset="UTF-8">
        <title>元素外部插入同辈节点</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script>
            $(function() {
                $("h3").click(function() {
                    var $ul = $("<ul></ul>");
                    var $li1 = $("<li>夸秦皇，赞唐主，</li>");
                    var $li2 = $("<li>更说民国耀中土。</li>");
                    var $li3 = $("<li>前闻袁贼称洪武，</li>");
                    var $li4 = $("<li>后见北洋军政府。</li>");
                    $(this).after($ul);
                    $ul.append($li1);
                    $ul.append($li2);
                    $ul.append($li3);
                    $ul.append($li4);
                });
                $("#insertAfter").click(function() {
                    var $ul = $("<ul></ul>");
                    var $li1 = $("<li>群星闪耀名门懦，</li>");
                    var $li2 = $("<li>几许贫儿可读书?</li>");
                    var $li3 = $("<li>战场血海污田亩，</li>");
                    var $li4 = $("<li>小兵落得几斗谷?</li>");
                    $ul.insertAfter($(this));
                    $ul.append($li1);
                    $ul.append($li2);
                    $ul.append($li3);
                    $ul.append($li4);
                });
                $("#before").click(function() {
                    var $ul = $("<ul></ul>");
                    var $li1 = $("<li>蒋公成，蒋公武，</li>");
                    var $li2 = $("<li>蒋公政绩垂千古。</li>");
                    var $li3 = $("<li>才有黄河花园瀑，</li>");
                    var $li4 = $("<li>金陵夜夜闻鬼哭。</li>");
                    $(this).before($ul);
                    $ul.append($li1);
                    $ul.append($li2);
                    $ul.append($li3);
                    $ul.append($li4);
                });
                $("#insertBefore").click(function() {
                    var $ul = $("<ul></ul>");
                    var $li1 = $("<li>五次围剿威风树，</li>");
                    var $li2 = $("<li>东北未复割蒙古。</li>");
                    var $li3 = $("<li>开疆强国地图绘，</li>");
                    var $li4 = $("<li>金元满地随风舞。</li>");
                    $ul.insertBefore($(this));
                    $ul.append($li1);
                    $ul.append($li2);
                    $ul.append($li3);
                    $ul.append($li4);
                });
            });
        </script>
    </head>

    <body>
        <h3>蒋公赞</h3>
        <input type="button" value="insertAfter" id="insertAfter" />
        <input type="button" value="before" id="before" />
        <input type="button" value="insertBefore" id="insertBefore" />
    </body>

</html>

replaceWith/All

<html>

    <head>
        <meta charset="UTF-8">
        <title>replace/remove</title>
        <script src="js/jquery-3.3.1.min.js"></script>
        <script>
            $(function() {
                $("input[value='replaceWith']").click(function() {
                    var $li = $("<li>六耳猕猴</li>");
                    $("ul li:first").replaceWith($li);
                });
                $("input[value='replaceAll']").click(function() {
                    var $li = $("<li>六耳猕猴</li>");
                    $li.replaceAll($("ul li"));
                });
                $("input[value='remove']").click(function() {
                    //删除所有的列表项
                    $("ul li").remove();
                    //$("ul li").remove("ul li:eq(0)");
                });
            });
        </script>
    </head>

    <body>
        <ul>
            <li>孙悟空</li>
            <li>猪八戒</li>
            <li>沙和尚</li>
            <li>玄奘</li>
        </ul>
        <input type="button" value="replaceWith" />
        <input type="button" value="replaceAll" />
        <input type="button" value="remove" />
    </body>

</html>

clone()/each()

<html>

    <head>
        <meta charset="UTF-8">
        <title>clone/each</title>

        <script src="js/jquery-3.3.1.min.js"></script>
        <script>
            $(function() {
                $("input[value='克隆图片']").click(function() {
                    $("img").clone(true).insertAfter("#p1");
                });
                $("input[value='添加边框']").click(function() {
                    $("img").each(function(index) {
                        $(this).css("border", "3px solid #f00");
                        $(this).attr("title", "第" + (index + 1) + "幅风景画"); //jQuery对象
                        // this.style.border = "1px solid #f00"; //this:DOM对象
                        // this.title = "第" + (index + 1) + "幅风景";
                    });
                });
            });
        </script>
    </head>

    <body>
        <p ID="p1"></p>
        <img src="img/img2.jpg" width="200" />
        <br>
        <input type="button" value="克隆图片" />
        <input type="button" value="添加边框" />
    </body>

</html>

JQuery文档操作

标签：pre before index insert script ESS title 刘强东阿里

原文地址：https://www.cnblogs.com/tigerlion/p/11178731.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行