前端(JQuery语言）

一、jQuery的优势

• jQuery是一个轻量级的、兼容多浏览器的JavaScript库
• 链式表达式：jQuery的链式操作可以把多个操作写在一行代码里，更加简洁
• Ajax操作支持：jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信

二、jQuery的引入方式

注意：
直接下载文件到本地（最常用），从本地中导入
使用文件的网络地址
示例：
<script src="jquery-3.4.1.js"></script>    // 本地导入
<<script src="https://cdn.bootcss.com/jquery/3.4.1/core.js"></script>    // 网络地址导入(bootcdn)

三、jQuery对象

注意：
通过jQuery包装DOM对象后产生的对象
jQuery对象是 jQuery独有的(jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法)
通过jQuery找到的标签对象就是一个jQuery对象，用原生JS找到的标签对象叫做DOM对象

jQuery与dom语法对比：
var $variable = jQuery对像    // 声明一个jQuery对象变量的时候在变量名前面加上$
var variable = DOM对象

jQuery与dom转换：
$variable[0]                // jQuery对象转成DOM对象（通过一个jQuery对象+[0]索引零，就变成了DOM对象，就可以使用JS的代码方法了)
$(DOM对象)               // DOM对象转换成jQuery对象($(DOM对象)，通过$符号包裹一下就可以了)

jQuery与dom示例对比：
$("#i1").html();                      // jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;           // DOM对象使用DOM的方法

$(selector).action() // $(selector)找到某个标签，.action()通过这个标签对象调用它的一些方法

四、jQuery基础语法( 查找标签)

• html语法：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            height: 100px;
            width: 100px;
            background-color: red;
        }
    </style>
</head>
<body>


<script src="jquery-3.4.1.js"></script>

<div id="d1" class="c1">
    <div class="c3">
        儿子标签
        <div class="c4">孙子标签1</div>
        <div class="c5">孙子标签2</div>
    </div>
</div>

<p id="d4">毗邻标签</p>
<div id="d2" class="c1"></div>
<div id="d3" class="c2"></div>

</body>
</html>

html文件