jquery链接导入和基本选择器的使用

一、使用链接引入jquery库

<script src="https://labfile.oss.aliyuncs.com/courses/3774/jquery-3.6.0.min.js"></script>

二、jquery的基本的选择器

<1>元素选择器(标签选择器)

$(
    function(){
        $("div").css("color","blue");
        $("div").css("text-align","center");
    }
)

1.$(function(){})的意思是文档加载完成以后执行他内部的代码

2.$("div").css("color","blue")用来设置指定标签的样式的方法。

3.总结：jQ的对象.css("属性","属性值")来设置对象的样式

4.当css设置多个的时候代码有点冗余，所以我们可以简写成一个对象的形式，jQ对象.css({"属性一":"数值1","属性2":"数值2"...})

<2>Id选择器（$（"#id值"））

$(
    function(){
        $("div").css("color","blue");
        $("#jq").css("color","yellow");
        $("div").css("text-align","center");
    }
)

1.不同之处就是id前边加#,有点像css中布局的时候写style样式。下边的也是一样

<3>类选择器（$(".类名")）

$(
    function(){
        $("div").css("color","blue");
        $("div.red").css("color","red");
        $("#jq").css("color","yellow");
        $(".div").css("text-align","center");
        $("div#jq").css("color","black");

    }

当我们$("div.div1")的时候代表选中class是div1的div标签，当然id选择器也可以这么用。

扫描二维码关注公众号，回复： 14852732 查看本文章

<4>群组选择器（$("选择器1, 选择器2,...");）

同时设置多个选择器的样式。

$(
    function(){
        $("div#jq，div.red").css("color","black");

    }

<5>通配符选择器($("*"))

使用这个的时候代表全部标签。