跳到主要内容

[toc]

jQuery基础

jQuery初识​

信息

var d1 = $('#d1'); --> jquery对象 --> jQuery.fn.init [div#d1]

var d = document.getElementById('d1'); --> 原生dom对象 -- <div id='d1'></div>

jquery对象和dom对象之前不能调用互相的方法

jquery对象和dom对象(原生js代码)可以互相转换

d1[0] --> dom对象 $(d) --> jquery对象

1.jQuery引入​

第一种方式 外部网址引入

登陆bootcnd搜索jquerry

iShot_2024-09-02_14.44.26

选择相应的版本

iShot_2024-09-02_14.45.27

html代码

<body>
<!--仅仅是引入jQuery-->
<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
</body>

第二种方式 本地文件引入(复制上述网络链接中的文件内容到本地一个文件中)

html代码

<body>
<!--仅仅是引入jQuery-->
<script src="jquery.js"></script>
<script>再起一个script标签写jquery代码</script> 
</body>

jquery引入简单示例​

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            background-color: green;
            height: 100px;
            width: 100px;
            border-bottom: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="d1">我是一个div标签</div>
</body>
<!--    <script src="jquery.js"></script>-->
<script>
</script>
</html>

上述html代码中注释了引入的jquery，在浏览器中是可以使用jquery代码进行操作的，但是操作后的结果并不是jquery

iShot_2024-09-02_14.46.45

把注释的jquery代码打开，再次在浏览器中打开，操作后的结果就是jquery对象

iShot_2024-09-02_14.57.39

2.jQuery选择器​

html代码

##2.1id选择器

2.2 类选择器​

2.3 元素选择器​

2.4 组合选择器​

2.5 层级选择器​

2.6 属性选择器​

3.文本操作​

4.样式操作​