初识jQuery及选择器

最新推荐文章于 2021-09-11 18:41:39 发布

饲养员的小仙女

最新推荐文章于 2021-09-11 18:41:39 发布

阅读量113

点赞数

文章标签： jQuery 选择器

本文链接：https://blog.csdn.net/weixin_43661426/article/details/84887261

版权

初识jQuery及选择器

一，什么是JQuery?

JQuery是一个javascript库，它通过封闭原生的javascrip函数得到一整套定义好的方法

二，JQuery的下载

打开终端小黑窗口，windows+R,在文件目录下输入(前提是事先下载好npm)，回车

npm i jQuery

三，简单方法：

(1) .text(“文本内容”) //添加文本内容
(2) .html("<标签></标签>") //替换标签
(3) .css(“属性”,“属性值”) //设置css样式，如果是多属性，括号里参数放入对象
(4) .eq(数字) //获取下标

四，基础选择器

$===JQuery,都是函数，它是构造函数，也是类，也是对象;

(注：JQuery对象是个类数组，不能使用数组的方法，也不能使用DOM的方法和属性)

JQuery对象和DOM的转换：

将JQuery对象转换为DOM对象：JQuery[0]
将DOM对象转换为JQuery对象：$(DOM对象)

1.标签选择器

$(“div”) 获取的是div标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.1.min.js"></script>
    <style>
        div{
            width:100px;
            height:100px;
            background: red;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        $("div").text("这是一个盒子");//给这个红盒子添加文本内容
    </script>
</body>
</html>

2.ID选择器

$("#box") 获取的是id为box的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
    <div id="box"></div>
    <script>
        $("#box").css({
	"width":"100px",
	"height":"100px",
	"background":"red"
	})       //给id为box的元素添加css样式
    </script>
</body>
</html>

3.class选择器

$(".box") 获取class为box的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
    <div class="box"></div>
    <script>
        $(".box").html("<span></span>")//给class为box的元素插入span标签
    </script>
</body>
</html>

4.进阶选择器

1)群组选择器：使用逗号分隔
$(“div,span”) //选中的是div标签和span标签
2)后代选择器：使用空格分隔，与.find()方法结果相同，后者速度相对较快
$(“div span”) //选中的是div标签下的span标签
3)通配符
$("*")

5.高级选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
    <ul id="list">
        <li class="li">1</li>
        <li>2</li>
        <li class="li0">3</li>
        <li>4</li>
        <li class="li1">5</li>
        <li>6</li>
    </ul>
    <script>
        //1.子代选择器 >
        $("#list>li").css("background","pink");//与.children()方法结果相同，所有li背景色为粉色

        //2.相邻兄弟选择器 +
        $(".li0+li").css("background","yellow")//内容为4的li背景色为黄色
        $(".li0").next().css("background","yellow")//等同于上一行结果,相邻弟弟，内容为4的li背景色为黄色
        $(".li0").prev().css("background","yellow")//相邻哥哥，内容为2的li背景色为红色

        //3.多个兄弟选择器 ~
        $(".li0~li").css("background","blue")//li0以下所有li背景色为蓝色，即4 5 6为蓝色
        $(".li0").nextAll().css("background","blue")//等同于上一行结果，所有弟弟
        $(".li0").prevAll().css("background","blue")//li0以上所有li背景色为蓝色，所有哥哥，即1 2为蓝色

        $(".li0").prevUntil(".li").css("background","green")//从.li0向上直到.li,不包括.li,即2的背景色为绿色
        $(".li0").nextUntil(".li1").css("background","green")//从.li0向下直到.li1,不包括.li1,即4的背景色为绿色

        $(".li0").siblings().css("background","orange");//除了.li0以外所有兄弟，即1 2 4 5 6背景色为橙色
    </script>
</body>
</html>

6.属性选择器

jQuery对象	注释
$("[title]")	获取到所有带title属性的元素
$(“a[title]”)	获取到所有带title属性的a标签
$("[title=‘box’]")	获取title属性值为box的元素
$("[class^=‘div’]")	获取class以div开头的元素
$("[class $=‘0’]")	获取class以0结尾的元素
$("[class ~=‘bn’]")	获取class包含bn的元素，也可能包含其他class
$("[class ！=‘box’]")	获取class不为box的元素,也包括没有class属性的元素
$("[class][class ！=‘box’]")	获取有class且class不为box的元素

7.过滤器

代码	注释
：first	第一个元素
：last	最后一个元素
：first-child	第一个子元素
：last-child	最后一个子元素
：first-of-type	同类型第一个元素
：last-of-type	同类型最后一个元素
：not	不包含
：even	偶数行
：odd	奇数行
：eq（num）	索引为num的元素
：lt（num）	小于索引为num的所有元素
：gt（num）	大于索引为num的所有元素

这里只是进行简单整理与总结，还有些没有详细列出的，大家可自行学习。这么多选择器没有人专门问你它的名字，包括我自己我也记不住所有的，一个不差的。对于程序员来说，只要能准确无误的查找出我想要的元素，并进行想要的操作，无论什么方法。

饲养员的小仙女

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识jQuery及选择器

初识jQuery及选择器一，什么是JQuery?JQuery是一个javascript库，它通过封闭原生的javascrip函数得到一整套定义好的方法二，JQuery的下载打开终端小黑窗口，windows+R,在文件目录下输入(前提是事先下载好npm)，回车npm i jQuery三，简单方法：(1) .text(“文本内容”) //添加文本内容(2) .html("&lt;标签...
复制链接

扫一扫