JQuery文档操作

Posted tigerlion

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JQuery文档操作相关的知识,希望对你有一定的参考价值。

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文档操作的主要内容,如果未能解决你的问题,请参考以下文章

24-[jQuery]-属性,文档,位置,筛选

06-jQuery的文档操作(重点)

jQuery文档操作

jquery文档操作

JQuery文档操作

jQuery 文档操作方法