1. jQuery简介

1.1 什么是jQuery

jQuery是一款跨浏览器的开源Javascript库。

jQuery最初是由John Resig在2006年1月正式发布。

作用：实现代码更加简洁，有效的提高程序开发效率。

jQuery优势：

  • 轻量级：文件小巧，大小仅有94.8KB；
  • 简洁：语法简洁易懂，学习速度快；
  • 全面：方便开发者使用；
  • 强大选择器：获取元素的方式更加灵活；

1.2 jQuery的版本

jQuery的版本和兼容性：

  • jQuery 1.x：兼容IE6/7/8，官方只做BUG维护；
  • jQuery 2.x：不兼容IE6/7/8，官方也只做BUG维护；
  • jQuery 3.x：不兼容IE6/7/8，只支持最新的浏览器。

2. 如何使用jQuery

2.1 jQuery的下载和 引入

下载地址：https://jquery.com

jQuery压缩版本： 是将jQuery文件中的空白字符、注释、空行等与逻辑无关的内容删除，并进行一些优化。

优势：

  • 压缩版本：文件体积小，加载速度快。
  • 未压缩版本：代码可读性更好，有注释语句。

引入：

script标签引入:

  • 把下载好的jQuery文件保存到项目目录中
  • 在项目的HTML文件中使用
<!--script标签引入-->
<!-- 引入本地下载的jQuery -->
<script src="jquery-1.12.4.js"></script>

CDN引入:

  • 许多网站还提供了静态资源公共库。
  • 通过CDN（内容分发网络）可以提高jQuery的下载速度。
<!--CDN引入-->
 <!-- 引入CDN加速的jQuery -->
 <script  src="https://code.jquery.com/jquery-1.12.4.js">
 </script>
  • 在js里面使用$(document).ready()方法加载function函数，实现在页面加载时执行函数内的代码。
<!-- 引入本地下载的jQuery -->
<script src="jquery-3.4.1.js"></script>
<script>
    $(document).ready(function(){});
	$(function(){});
</script>

2.2 第一个jQuery程序

<!DOCTYPE html>
<html lang="en">
<head>
    <title>简单的程序</title>
    <script src="./jquery-3.6.3.js"></script>
</head>
<body>
    <button>hello world!</button>
    <script>
        $("button").click(function(){
            alert("hello world!")
        })
    </script>
</body>
</html>

2.3 jQuery的语法特点

1.选择器的使用

作用： jQuery选择器用于获取网页元素对象进行操作。

<div id="myId"></div>
   <script>
   $('#myId');   // 获取id值为myId的元素对象
   </script>
2.元素对象的操作

作用： jQuery中对获取的元素对象可以进行一系列的操作。

<div id="myId">content</div>
 <script>
     var html = $('#myId').html();     // 获取元素的内容；
     alert(html);                      // 输出结果：content
     $('#myId').html(‘Hello’);       // 执行后变为Hello
  </script>
3.事件的绑定

作用： jQuery中对获取的元素对象可以进行一系列的操作。

<button>say hello</button>
<script>
    // 绑定单击（click）事件，参数是事件的处理程序；   
    $('button').click(function() {
		alert('Hello');
    });
</script>
4.链式编程

作用： jQuery中支持多个方法链式调用的形式，编写最少的代码。

<ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
    ... 
</ul>
<script>
     // 索引为2的li元素的内容设置为Hello；
     $('ul').find('li').eq(2).html('Hello');
</script>

3. DOM对象与jQuery对象

3.1 什么是Dom对象

DOM对象指的是文档对象模型。
作用： 结构化的描述，并将HTML页面与脚本、程序语言联系;
结构： 层层嵌套的HTML标签就是一个类似树形的DOM文档;
元素： 所有的元素内容都是一个节点。

jquery调用浏览器创建快捷方式 jquery3.5.1支持浏览器_javascript

<!--DOM-->
<ul>
      <li>
           <a href="#">链接</a>
      <li>
</ul>
<script>
    //获取
    // 获取li标签对象集合        
    HTMLCollection(2) [li,li];
    var lis = document.getElementsByTagName('li'); 
    var firstLi = lis[0];	
    // 获取第1个li标签的DOM对象
    var text = firstLi.innerText; 
</script>

3.2 什么是jQuery对象

jQuery对象： 通过“$(参数)”的形式可以创建jQuery的实例对象。
用法： 调用jQuery中提供的html()方法获取元素内容；
创建方式： 使用$(“参数”)和jQuery(参数)；
简写： $(“div”).html()；

<div>Hello jQuery</div>
<script>
    // 创建div元素对象，保存为obj;
    var obj = $('div');
    // 判断obj是否为jQuery对象;
    alert(obj instanceof jQuery);	 // 输出结果：true
    // 调用html()方法获取元素内容;
    alert(obj.html());   // 输出结果：Hello jQuery 
</script>
扩展：jQuery的静态方法
  • “$.方法名()”的形式调用静态方法。
  • 可以进行DOM对象无关的操作，提供许多便利
<script>
     var str = ' test ';
     // 调用静态方法trim()过滤字符串两端的空白字符
     var result = '[' + $.trim(str) + ']';
     alert(result);	// 输出结果：[test]
</script>

3.3 jQuery对象与DOM对象的转换

jQuery对象： jQuery对象只能调用jQuery中的属性或方法；

DOM对象： DOM对象也只能调用DOM中的属性或方法；

// jQuery对象不存在innerHTML属性，访问结果为undefined
$('div').innerHTML;
// DOM对象不存在 html()方法，调用不存在的方法会出错
document.getElementById('myId').html();
1.jQuery对象转换成DOM对象

jQuery对象： 属于类数组对象，其内部将DOM对象作为数组元素。

转换方式：

(1) obj[index]；
<div>第1个div</div>
<div>第2个div</div>
<script>
    var divs = $('div');
    var div1 = divs[0];
    var div2 = divs[1];
    alert(div1.innerHTML);   // 第1个div
    alert(div2.innerHTML);   // 第2个div
</script>
(2) obj.get(index)；
<div>第1个div元素</div>
<script>
    //将第一个div元素内部的内容显示
    var result =$('div').get(0).innerHTML;      
    alert(result);
</script>
2.DOM对象转换成jQuery对象
<button id="btn">say hello</button>
<script>
      // 获取DOM对象btn;
      var btn = document.getElementById('btn');
     // 将DOM对象转换成jQuery对象;
      var btn1 = $(btn);
     // 验证转换结果;
      alert(btn === btn1[0]);       // true
</script>

4. 调试工具的使用

4.1 调试工具———Chrome开发者工具

打开方式:
  • 按F12键;
  • Ctrl + Shift+l快捷键;
  • 鼠标右击选择检查选项;
  • 更多工具中的开发者工具;
控制台面板:
  • Elements面板

Elements面板即元素面板。

  • 功能:
  • 可以直接操作DOM元素和样式。

特点:

  • 非常方便开发者调试HTML结构和CSS样式;
  • 与修改后的效果实时同步;
  • Console面板

Console面板即控制台面板。

  • 功能:
  • 使用控制面板输出日志信息;
  • 直接编写代码;
  • 作为与JavaScript进行交互的Shell命令行;
  • Sources面板

Sources面板即源代码面板。

  • 功能:
  • 在工作区打开本地文件，可以实时编辑代码;
  • 支持断点调试。
  • Network面板

Network面板:Network面板即网络面板。

  • 功能:
  • 记录网络请求详情信息;
    便开发者调试HTML结构和CSS样式;
  • 与修改后的效果实时同步;
  • Console面板

Console面板即控制台面板。

  • 功能:
  • 使用控制面板输出日志信息;
  • 直接编写代码;
  • 作为与JavaScript进行交互的Shell命令行;
  • Sources面板

Sources面板即源代码面板。

  • 功能:
  • 在工作区打开本地文件，可以实时编辑代码;
  • 支持断点调试。
  • Network面板

Network面板:Network面板即网络面板。

  • 功能:
  • 记录网络请求详情信息;
  • 进行网络性能优化;