jQuery基本选择器

最新推荐文章于 2024-07-29 13:58:45 发布

迷亭君

最新推荐文章于 2024-07-29 13:58:45 发布

阅读量256

点赞数 2

分类专栏： ajax+JQuery+Vue 文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_49044908/article/details/121262582

版权

ajax+JQuery+Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

jQuery基本选择器

选择器就是一个字符串,用来定位dom对象的,定位了dom对象,就可以通过jQuery的函数操作dom

id选择器

语法:$("#dom对象的id值")
通过dom对象的id定位dom对象,通过id找对象,这个id在当前页面是唯一的,不会重复.

class选择器

语法:$(".class样式名")
class是css中的样式,使用样式名来定位dom对象

标签选择器

语法:$(“标签名称”)
使用标签名称定位dom对象的

所有选择器

语法:$("*")
当前页面中的所有dom对象

组合选择器

组合选择器是多个被选择对象间使用分隔符后形成的选择器,可以组合id,class,标签名等.
语法:$("#id名,.class名,标签名")
它们直接是或的关系,满足上面一个条件就会选中.

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery选择器</title>
    <style type="text/css">
        div{
            background: gray;
            width: 200px;
            height: 100px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <script type="text/javascript">
        function fun1() {
            // id选择器
            var obj1 = $("#one");
            // 使用jQuery中改变样式的函数
            obj1.css("background", "red");
        }
        function fun2() {
            // class选择器
            var obj = $(".two");
            obj.css("background", "yellow");
        }
        function fun3() {
            // 标签选择器
            var obj = $("div");// 数组中有三个值,因为有三个div标签
            // jQuery的操作都是操作数组中的全部成员,所以三个div标签都改变了背景色
            obj.css("background", "blue");
        }
        function fun4() {
            // 所有选择器
            var obj = $("*");// 当前页面的所有dom元素
            obj.css("background", "green");
        }
        function fun5() {
            // 混合选择器
            var obj = $("#one,span");// 选择id为one,或者标签为span的dom元素
            obj.css("background", "orange");
        }
    </script>
</head>
<body>
    <div id="one">我是one的div</div>
    <br/>
    <div class="two">我是样式是two的div</div>
    <br/>
    <div>我是没有id和class的div</div>
    <br/>
    <span>我是span标签</span>
    <br/>
    <br/>
    <input type="button" value="获取id是one的dom对象" onclick="fun1()">
    <br/>
    <input type="button" value="使用class的样式获取dom对象" onclick="fun2()">
    <br/>
    <input type="button" value="使用标签选择器获取dom对象" onclick="fun3()">
    <br/>
    <input type="button" value="使用所有选择器获取所有dom对象" onclick="fun4()">
    <br/>
    <input type="button" value="使用混合选择器获取dom对象" onclick="fun5()">
</body>
</html>

迷亭君

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery基本选择器

jQuery选择器选择器就是一个字符串,用来定位dom对象的,定位了dom对象,就可以通过jQuery的函数操作domid选择器语法:$("#dom对象的id值")通过dom对象的id定位dom对象,通过id找对象,这个id在当前页面是唯一的,不会重复.class选择器语法:$(".class样式名")class是css中的样式,使用样式名来定位dom对象标签选择器语法:$(“标签名称”)使用标签名称定位dom对象的所有选择器语法:$("*")当前页面中的所有dom对象组合选择器
复制链接

扫一扫

专栏目录