jQuery 常用的方法

Posted 2021-01-13 Travelerᘗ

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 常用的方法相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>品牌列表案例</title>
    <script src="js/jquery-2.1.1.min.js" rel="script"></script>
    <script>
        $(document).ready(function () {
            var $text =$("ul li:eq(2)"); //获取ul的第三个子节点
            var $text_v1 = $text.text();//获取指定元素的文本内容
            var $text_v2 = $("p").append("<b> world</b>");//向匹配的元素内部追加内容
            ($("<b>世界</b>").appendTo("p")); //向匹配的元素内部添加文本内容到末尾，
            $("a").prepend("<b>标签</b>");//在每一个匹配元素的文本前面添加指定内容
            $("<b>加在后面</b>").appendTo("a");//在每一个匹配元素的文本后面添加指定内容
            $("i").after("<b>内容加在倾斜文本之后</b>");//在匹配的元素之后添加文本内容
            //按照字面顺序来理解即可，就是将b标签内的内容添加到em标签的文本之后
            $("<b>的文本</b>").insertAfter("em");
            //添加到匹配元素的文本之前，因为div是块元素，所以添加的内容也是块元素
            $("div").before("<b>前面的文本</b>");
            //按照字面的反顺序来理解，也就是b标签文本添加到ol li:eq(1)元素文本的后面，不是前面
            $("<b>hello </b>").insertBefore($("ol li:eq(1)"));

            $("p").click(function(){
                //点击p标签文本时将p标签本身的文本复制（克隆）一次追加在em标签之后。
                $(this).clone().appendTo("em");
            });
                //将ol li:eq(2)元素的文本内容替换成指定的文本内容。
            $("ol li:eq(2)").replaceWith("<b>刘备</b>");
            $("em").wrap("<b></b>");//用b标签将em标签包裹起来

            alert($("strong").attr("title"));//获取匹配元素的属性的值
        })
    </script>
    </head>
<body>
   <ul>
       <li>demo1</li>
       <li>demo2</li>
       <li>demo3</li>
       <li>demo4</li>
       <li>demo5</li>
       <li>demo6</li>
   </ul>
<p>hello</p>
<a>box</a>
<a>title</a>
<a>test</a><br><br>
<i>倾斜文本</i><br><br>

<em>颠倒常理</em><br>
<div>hello</div>
<ol>
    <li>张三</li>
    <li>李四</li>
    <li>王二</li>
</ol>

<strong title="stronger">strong</strong>
</body>
</html>

以上是关于jQuery 常用的方法的主要内容，如果未能解决你的问题，请参考以下文章