Jquery选择器的基本选择器

基本选择器

最近在学习js的框架Jquery,从头学学习,感觉还是写一下笔记还是比较好理解的,这样容易自己记忆,和查询,也能帮助大家学习jquery,之前了解过js,后来再用Jquery发现,jquery的选择器真的是太强大了,下面我们来介绍下,常用的jquery选择器。

首先我们来了解下Juqery都有哪些基本选择器

  1. Id选择器
  2. .class选择器
  3. 元素选择器
  4. *选择器

1.Id选择器就是,通过元素的Id来选择要操作的DOM元素。是Jquery最常用的选择器。Id选择器的基本使用语法:$("#ID") 来选择元素,具体代码下

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="../js/jquery-2.1.0.min.js"></script>
        <style>
        </style>
    </head>
    <style>
         #name { 
            width: 100px;
            height: 100px;
            background: yellow;
            float: left;
            margin: 20px;
            padding: 10px;
        }
    </style>
    <body>
        <script>
            $(function() {
            //通过ID选择器来给div添加内容 
            $("#name").html("<p>Hello word</p>");
            });
        </script>
    <div id="name"> 
    </div>
    </body>
</html>

2.Class选择器,通过.class来选择DOM元素,也是比较常用的选择器,语法$(".class") 它和ID选择器不一样的地方及时,class在DOM中也可以用作改元素的样式,而ID就没有实际的意义,就是用来表示元素的不同。具体代码如下:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="../js/jquery-2.1.0.min.js"></script>
        <style>
        </style>
    </head>
    <style>
        #name {
            width: 100px;
            height: 100px;
            background: yellow;
            float: left;
            margin: 20px;
            padding: 10px;
        }
    </style>
    <body>
        <script>
            $(function() {//当html加载完成的时候指向方法中的代码想当于js的Window.onload=
                //这里class选择器,通过$(".name")可以选中class属性值为name的DOM元素
                $(".name").html("<p>Hello word</p>");
            });
        </script>
        <div class="name">
        </div>
    </body>
</html>

3.元素选择器,也是Jquery中常用的选择器语法为:$("div") 选中要操作得元素节点,$("div") 就是选中所有的div标签元素,我们要选中<p>你好</p> 就可以使用$("p") 具体代码示例如下:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="../js/jquery-2.1.0.min.js"></script>
        <style>
        </style>
    </head>
    <style>
        .name {
            width: 100px;
            height: 100px;
            background: yellow;
            float: left;
            margin: 20px;
            padding: 10px;
        }
    </style>
    <body>
        <script>
            $(function() {//当html加载完成的时候指向方法中的代码想当于js的Window.onload=
                //$("div")选中所有的div元素
                $("div").css("border","1px solid red");
            });
        </script>
    <div class="name">
        </div>
    </body>
</html>

4.*选择器,语法$("*") 选中页面的所有元素,不常用代码示例如下:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="../js/jquery-2.1.0.min.js"></script>
        <style>
        </style>
    </head>
    <style>
        .name {
            width: 100px;
            height: 100px;
            background: yellow;
            float: left;
            margin: 20px;
            padding: 10px;
        }
    </style>
    <body>
        <script>
            $(function() {//当html加载完成的时候指向方法中的代码想当于js的Window.onload=
                //$("*")选中所有的元素
                $("*").css("border","1px solid red");
            });
        </script>
        <div class="name">
        </div>
    </body>
</html>

以上都是基本的选择器,比较简单,但是都是比较常用的选择器,比如ID选择器和class选择器,元素选择器

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值