首页 前端知识 《jQuery第三章》

《jQuery第三章》

2024-03-11 10:03:40 前端知识 前端哥 229 287 我要收藏

一、使用jquery操作DOM

dom : 文档对象模型    就是HTML元素。

$()   函数的2个用法:

用法1:放入一个字符串(选择器)表示获取元素   例如$("p") $("#abc")  $(".del")

用法2:放入一个函数,表示文档就绪函数   例如  $(function(){代码...})

用法3:如下所示

jquery创建节点的方法如下:

1.创建节点 语法如下:

$("xxxxx"); xxx表示你要创建的dom元素   例如  $("<p>我是p标签<p>");

此时仅仅是创建了节点.理解为是孤儿节点.  需要将其插入到某个节点中.

例如 放入body标签中 方法div标签中等等.

           

插入方法1:append() 表示插入到指定元素内部的尾端.

语法: $("aa").append("bb")  表示将bb插入到aa内部的尾端

   

需求如下:

在div的尾端插入一个值为555的p标签     

1.创建一个值为555的p标签

let a =  $("<p>555<p>");

调用方法即可

$("div").append(a);

           

插入方法2:prepend() 表示插入到指定元素内部的首端.

语法: $("aa").prepend("bb")  表示将bb插入到aa内部的首端

           

需求如下:

在div的首端插入一个值为000的p标签

1.创建一个值为000的p标签

let a =  $("<p>000<p>");

调用方法即可

$("div").prepend(a);

           

插入方法3:after() 表示插入到指定元素的后面. 兄弟关系

语法: $("aa").after("bb")  表示将bb插入到aa的后面

           

需求如下:

在111的后面插入一个1.5 1.5 1.5

1.创建一个值为000的p标签

let a =  $("<p>1.5 1.5 1.5<p>");

调用方法即可

$("p:eq(0)").after(a);

           

插入方法4:before() 表示插入到指定元素的前面. 兄弟关系

语法: $("aa").before("bb")  表示将bb插入到aa的前面

           

需求如下:

在333的前面插入一个2.5 2.5 2.5

1.创建一个值为2.5 2.5 2.5的p标签

let a =  $("<p>2.5 2.5 2.5<p>");

调用方法即可

$("p:eq(2)").before(a);

           

上述的方法 可以实现 在任意位置创建新的节点.

           

下述的方法 可以实现 删除任意位置的节点:

           

方法1:  remove()

语法如下:  $("xx").remove();  将xx元素彻底删除  不仅删除了值 而且删除了标签  

           

需求如下: 将444的p标签删除

$("p:eq(3)").remove();

           

方法2:  empty()  清空

语法如下:  $("xx").empty();  将xx元素删除值 但是不删除标签  

           

需求如下: 将444的p标签删除

$("p:eq(3)").empty();

           

方法3:  clone()  克隆节点

语法:  $("xxx").clone();  将xxx元素复制一份

注意事项:上一步仅仅只是复制   此时理解为孤儿节点. 任然需要通过append  prepend  after  before进行粘贴

二、show和hide方法 

$("xx").hide();隐藏XX元素

$("xx").show();显示XX元素

$("xx").toggle();来回切换:显示或隐藏XX元素

三、addClass()和removeClass()方法 

$("xx").addClass("a");给元素添加类名为a

$("xx").removeClass("aa);给元素移除类名为a

四、 如何获取当前元素

$(this);获取当前的元素

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

        <button>按钮1</button>

        <button>按钮2</button>

        <button>按钮3</button>

        <button>按钮4</button>

        <button>按钮5</button>

        <button>按钮6</button>

        <button>按钮7</button>

       

        <script src="js/jquery.js"></script>

        <script>

           

            //$("xx").index();返回当前元素在兄弟中下标

           

            $("button").click(function(){

                // $(this);获取当前的元素

                alert(  $(this).index()  )  

            });

           

        </script>

    </body>

</html>

五、 each方法

each方法的语法:   $("xx").each(   function(){  代码体   }   );

遍历xx元素.每遍历一次  就执行一次代码体

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

    </head>

    <body>

       

        <p></p>

        <p></p>

        <p></p>

        <p></p>

        <p></p>

       

        <script src="js/jquery.js"></script>

        <script>

           

            //each方法的语法:   $("xx").each(   function(){  代码体   }   );

            //遍历xx元素.每遍历一次  就执行一次代码体.

           

           

            //这种写法 较为局限 但是也很重要  

            // $("p").text("你好");

           

           

            var arr = ["这是第1条新闻","这是第2条新闻","这是第3条新闻","这是第4条新闻","这是第5条新闻"]

           

            $("p").each(function(){

                $(this).text(  arr[$(this).index()]   );

            });

           

                  

        </script>

    </body>

</html>

           

           

        

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3630.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!