jQuery基本语法、选择器和dom

最新推荐文章于 2022-01-04 19:06:31 发布

tanranranranran

最新推荐文章于 2022-01-04 19:06:31 发布

阅读量237

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/weixin_45638522/article/details/108174322

版权

jquery基本语法、选择器和dom操作

前言：jQuery是一个轻量级的"写的少，做的多"的JavaScript库。如今，市面上有大量的js的开源框架，而jQuery应用广泛。jQuery包含以下功能：

HTML元素的选取
HTML元素的操作
css的操作
HTML事件函数
js的特效和动画
dom遍历和修改
ajax
utilities
除此之外，jQuery还提供了大量的插件。

一、jQuery的基本语法和选择器

A、基本语法$(selector).action();

（1）、jQuery 中的$()。

$()，括号中可以放入，选择器、函数和代码块

$是jQuery的别称

<script>
        jQuery(function() {
            alert(11);//用jQuery代替了$
        });
    </script>
    <script>
        $(function() {
            alert(11);//这两种方式是等效的
        });
    </script>

同时 $ 是jQuery的顶级对象，相当于原生js中的window，把元素利用$包装成jQuery对象，都可以用jQuery方法。

（2）、文档就绪事件

方法一

<body>
    <script>
        $(function() {
             $('div').hide();
            //  此处是dom加载完成的入口
        });
    </script>
    <div>今天是2020.8.22</div>
</body>

方法二

<body>
    <script>
        $(document).ready(function() {
            $('div').hide();
            //  此处是dom加载完成的入口
        });
    </script>
    <div>今天是2020.8.22</div>
</body>

注意：

等dom结构渲染完毕执行内部代码，不必等外部资源加载完毕，jQuery帮助完成了封装。
相当于原生js的DOMContentLoaded。
js的load事件是等页面的文档，外部js文件，css文件都加载完毕后执行内部代码。
$(function(){})不会被覆盖，而window.onload会被覆盖。

（3）、dom对象和jQuery对象。

通过原生js获取的是dom对象，通过jQuery获取的是jQuery对象，本质是将原生js进行了包装。

<script>
        var div = document.querySelector("div");
        console.dir(div);
        //dom对象
    </script>

<script>
   
        $(function() {
            console.dir($('div'));
        });//jQuery对象
    </script>

注意：jQuery只能使用jQuery方法，dom对象则只能使用原生的js的属性和方法。

B、选择器

（1）、基础选择器

$(“选择器”)，例如 $ ("#id")， $ (".类")， $ ("*")， $ (“div”)， $ (“div,p,li”), $ (“li.current”)(交集选择器)

（2）、层级选择器

方法	用法
子代选择器:获取亲儿子层级的元素	$(“ul>li”)
后代选择器:获取后代包括子孙元素	$(“ul li”)

（3）、隐式迭代

遍历内部dom元素的过程叫做隐式迭代。
给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们进行再次循环。

    <div>今天是2020.8.23</div>
    <div>今天是2020.8.23</div>
    <div>今天是2020.8.23</div>
    <script>
        $("div").css("background", "pink");//自动对div进行遍历
    </script>

（4）、筛选选择器

语法	用法
:first获取第一个li元素	$(“li:first”)
:last获取最后一个li元素	$(“li:last”)
:eq(index)获取索引号为2的li元素	$(“li:eq(2)”)
:odd获取li元素中索引号为奇数的元素	$(“li:odd”)
:even获取li元素中索引号为偶数的元素	$(“li:even”)

 <ul>
        <li>今天是2020.8.23</li>
        <li>今天是2020.8.23</li>
        <li>今天是2020.8.23</li>
        <li>今天是2020.8.23</li>
    </ul>
    <ol>
        <li>今天是2020.8.23</li>
        <li>今天是2020.8.23</li>
        <li>今天是2020.8.23</li>
        <li>今天是2020.8.23</li>
    </ol>

    <script>
        $("ul li:first").css("color", "red");
        $("ul li:eq(2)").css("color", "blue");
        $("ol li:odd").css("color", "pink");
    </script>

（5）、筛选方法

语法	用法
parent()查找父级元素	$(“li”).parent();
children(selector)最近一级的亲儿子	$(“li”).children(“li”);
find（selector）相当于$(“ul li”)后代选择器	$(“ul”).find(“li”);
silblings(selector)查找兄弟节点，不包括自身	$(".first").siblings(“li”);
nextAll()当前元素之后的所有同辈元素	$(".first").nextAll()
prevAll()获取指定元素前面的所有兄弟元素	$(".first").prevAll()
hasClass()检查匹配的元素是否含有指定的类	$(".first").hasClass(“div”)
eq(index)筛选指定索引号的元素	$(".first").eq(2)

二、jQuery的dom操作

元素操作、属性操作、样式操作

A、元素操作

（1）、遍历元素

方法一、 $(“div”).each(function(index,domEle){xxx;})
注意：

each()方法遍历匹配的每一个元素，主要用dom处理，each每一个。
里面回调函数有两个参数：index索引号，demEle是每个dom元素对象，不是jQuery对象
所以要想使用jQuery方法，需要dom元素转换为jQuery对象$(domEle)

<div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            arr = ["red", "blue", "green"];
            $("div").each(function(index, domEle) {
                console.log(index);
                console.log(domEle); //注意这里的domEle是dom对象
                $(domEle).css("color", arr[index]);

            })
        })
    </script>

方法二、$.each()方法遍历元素，主要用于遍历数据（数组，对象），处理数据

 <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            $.each($("div"), function(i, ele) {
                console.log(i);
                console.log(ele);
            })
        })
    </script>

（2）、创建、添加元素

a）、内部添加：生成完是父子关系
$(“ul”).append(li);
$(“ul”).prepend(li);

<ul>
        <li>2020.8.23</li>
    </ul>
    <script>
        $(function() {
            var li = $("<li>星期日</li>");
            //（1）内部添加
            $("ul").append(li); //添加到后面
            $("ul").prepend(li);//添加到前面
        })
    </script>

b）、外部添加：生成完是兄弟关系
$(".two").before(div);
$(".two").after(div);

<div class="two">2020.8.23</div>
    <script>
        $(function() {
            var div = $("<div>星期天</div>");
            $(".two").before(div);
            $(".two").after(div);
        })
    </script>

（3）、删除元素

a）、remove删除匹配元素

<div>2020.8.23</div>
    <p>星期天</p>
    <script>
        $(function() {
            $("p").remove();
        })
    </script>

b）、empty和html删除匹配元素集合中的所有子节点
（其中，html() 方法返回或设置被选元素的内容 (inner HTML)。
如果该方法未设置参数，则返回被选元素的当前内容。）

 <ul>
        <li>2020.8.23</li>
        <li>星期天</li>
    </ul>
    <script>
        $(function() {
            $("ul").empty();
             $("ul").html("");
        })
    </script>

c）、detach() 方法移除被选元素，包括所有文本和子节点。这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。

<ul>
        <li>2020.8.23</li>
        <li>星期天</li>
    </ul>
    <script>
        $(function() {
            $("ul").detach();

        })
    </script>

（4）、克隆元素

clone（），参数：可以传true,克隆的元素连带事件一同复制。

 <ul>
        <li>2020.8.23</li>
        <li>星期天</li>
    </ul>
    <script>
        $(function() {

            var $wht = $("li:first").clone(false);
            $("ul").append($wht);
        })
    </script>

（5）、替换元素

replaceWith() 用指定的 HTML 内容或元素替换被选元素。replaceAll() 与 replaceWith() 作用相同。差异在于语法：内容和选择器的位置，以及 replaceWith() 能够使用函数进行替换。

  <ul>
        <li>2020.8.23</li>
        <li>星期天</li>
    </ul>
    <script>
        $(function() {
            $("li:first").replaceWith("<li>现在是19:31</li>");

        })
    </script>

（6）、val()设置被选元素的值和方法返回

a）、设置被选元素的值

<input type="text" value="2020.8.23">
    <script>
        $(function() {
            $("input").val("星期天");
        })
    </script>

b）、返回方法的值

<input type="text" value="2020.8.23">
    <script>
        $(function() {
            console.log($("input").val());
        })
    </script>

（7）、包裹元素

wrapAll();①参数：Xhtml语言文本。②特点：会把匹配到的元素用参数元素包裹起来（一包多）。
wrap();①参数：Xhtml语言文本。②特点：会把匹配到的元素用参数元素包裹起来（一包一个）。
wrapinner();①参数：Xhtml语言文本。②特点：会把匹配到的元素的子元素（包括文本节点）用参数元素包裹起来（一包多）。

（8）、其他操作元素方法

appendTo() 向目标结尾插入匹配元素集合中的每个元素。
insertAfter() 把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore() 把匹配的元素插入到另一个指定的元素集合的前面。
prependTo() 向目标开头插入匹配元素集合中的每个元素。
text() 设置或返回匹配元素的内容。
unwrap() 移除并替换指定元素的父元素。

B、属性操作

（1）、prop（）

获取属性值、修改属性值

<a href="https://www.baidu.com/" title="百度"></a>
    <script>
        $(function() {
            console.log($("a").prop("href"));
            $("a").prop("title", "百度一下，马上知道")

        })
    </script>

（2）、attr（）和removeAttr()

a）、获取自定义属性值、修改自定义属性值

<a href="https://www.baidu.com/" title="百度" index="4"></a>
    <script>
        $(function() {
            console.log($("a").attr("index"));
            $("a").attr("index", "5")

        })
    </script>

b）、removeAttr() 方法从被选元素中移除属性。

  <a href="https://www.baidu.com/" title="百度" index="4" style="color:red">百度</a>
    <script>
        $(function() {

            $("a").removeAttr("style");

        })
    </script>

（3）、data（）

数据缓存，这里面的数据放在元素的缓存中，获取data-index 的自定义属性

 <span>2020.8.23</span>
    <p data-id="tanr">星期天</p>
    <script>
        $(function() {
            $("span").data("name", "tran");
            console.log($("span").data("name"));
            console.log($("p").data("id"));
        })
    </script>
    </script>

（4）、关于class的操作

a）、addClass() 向匹配的元素添加指定的类名。

 <p>2020.8.23</p>
    <script>
        $(function() {
            $("p").addClass("datatime");

        })
    </script>

b）、hasClass()检查匹配的元素是否拥有指定的类。

<p>2020.8.23</p>
    <script>
        $(function() {
            console.log($("p").hasClass("datatime"));

        })
    </script>

c）、removeClass()从所有匹配的元素中删除全部或者指定的类。

  <p class="datatime">2020.8.23</p>
    <script>
        $(function() {
            $("p").removeClass("datatime");

        })
    </script>

d）、toggleClass()从匹配的元素中添加或删除一个类。

C、样式操作

（1）、改变样式通过添加，删除class来实现

（2）、css()

css() 方法返回或设置匹配的元素的一个或多个样式属性。
a）、返回值

   <p style="color:red;">2020.8.24</p>
    <script>
        $(function() {
            console.log($("p").css("color"));
        })
    </script>

b）、设置样式

<p style="color:red;">2020.8.24</p>
    <script>
        $(function() {
            $("p").css("color", "blue");
        })
    </script>

（3）、height() 和width()

方法返回或设置匹配元素的高度或者宽度。
a）、返回值

<p style="color:red;">2020.8.24</p>
    <script>
        $(function() {
            console.log($("p").height());
        })
    </script>

b）、设置高度(宽度)

 <p style="color:red;background:blue;">2020.8.24</p>
    <script>
        $(function() {
            console.log($("p").height("100"));
        })
    </script>

（3）、offset()

offset() 方法返回或设置匹配元素相对于文档的偏移（位置）。该方法返回的对象包含两个整型属性：top 和 left，以像素计。
a）、返回值

<script>
        $(document).ready(function() {
            $("button").click(function() {
                x = $("p").offset();
                $("#span1").text(x.left);
                $("#span2").text(x.top);
            });
        });
    </script>
    <p>本段落的偏移是 <span id="span1">unknown</span> left 和 <span id="span2">unknown</span> top。</p>
    <button>获得 offset</button>

b）、设置偏移

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").offset({top:100,left:0});
  });
});
</script>
<p>This is a paragraph.</p>
<button>设置新的偏移</button>

（4）、offsetParent()

offsetParent() 方法返回最近的祖先定位元素。

<script>
        $(document).ready(function() {
            $("button").click(function() {
                $("p").offsetParent().css("background-color", "red");
            });
        });
    </script>
    <div style="width:70%;position:absolute;left:100px;top:100px">
        <div style="margin:50px;background-color:yellow">
            <p>最近的父元素变色</p>
            </div>
            </div>
            <button>点击这里</button>

（5）、position()

方法返回匹配元素相对于父元素的位置（偏移）

<script>
        $(document).ready(function() {
            $("button").click(function() {
                x = $("p").position();
                alert("Left position: " + x.left + " Top position: " + x.top);
            });
        });
    </script>
    <p>This is a paragraph.</p>
    <button>获得 p 元素的位置坐标</button>

（6）、scrollLeft()和scrollTop()

scrollLeft() 方法返回或设置匹配元素的滚动条的水平位置。scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。

<script type="text/javascript">
        $(document).ready(function() {
            $(".btn1").click(function() {
                $("div").scrollTop(100);
            });
            $(".btn2").click(function() {
                alert($("div").scrollTop() + " px");
            });
        });
    </script>
    <div style="border:1px solid black;width:200px;height:200px;overflow:auto">
        This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This
        is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This
        is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
    </div>
    <button class="btn1">把 scroll top offset 设置为 100px</button>
    <br />
    <button class="btn2">获得 scroll top offset</button>

tanranranranran

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基本语法、选择器和dom

jquery选择器和dom操作前言：jQuery是一个轻量级的"写的少，做的多"的JavaScript库。如今，市面上有大量的js的开源框架，而jQuery应用广泛。jQuery包含以下功能：HTML元素的选取HTML元素的操作css的操作HTML事件函数js的特效和动画dom遍历和修改ajaxutilities除此之外，jQuery还提供了大量的插件。一、jQuery的选择器和基本语法jQuery 中所有选择器都以美元符号开头：$()。jQuery 选择器基于元素的 id、类
复制链接

扫一扫