第四部分：jQuery

一：jQuery

1.1：jQuery介绍

什么是jQuery？

jQuery是JavaScript和查询（Query），它是辅助JavaScript开发的js类库

jQuery的核心思想

核心思想是write less，do more，所以它实现了很多浏览器的兼容问题

jQuery的流行程度

jQuery现在已经成为最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过%55的人在使用jQuery

jQuery优点

jQuery是免费的、开源的，jQuery的语法设计可以使开发更加便捷，例如操作文档对象，选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能

我们可以在浏览器的 Console 窗口中使用 $.fn.jquery 命令查看当前 jQuery 使用的版本

jQuery 语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： $(selector).action()

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 <p> 元素
$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隐藏 id="test" 的元素

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Insert title here</title><script src="jQuery.js"></script><!-- 常见问题：1.使用jQuery一定要引入jQuery库吗？是，必须引入2.jQuery中的$是什么？$是一个函数3.怎么为按钮添加点击响应函数的？①使用jQuery查询到标签对象②使用标签对象.click(function({}));--><script>// window.onload = function () {//     var btnObj = document.getElementById("btnId");//     // alert(btnObj);//[object HTMLButtonElement]//     btnObj.onclick = function () {//         alert("js 原生的单击事件");//     }// }$(function () {//表示页面加载完成之后，相当于window.onload = function () {}var $btnObj = $("#btnId");//表示按id查询标签对象$btnObj.click(function () {alert("jQuery的单击事件");});});</script>
</head><body><button id="btnId">SayHello</button>
</body></html>

1.2：jQuery核心函数

$是jQuery的核心函数，能完成jQuery的很多功能。$()就是调用这个函数

核心函数的4个作用：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>核心函数</title><script src="jQuery.js"></script><script>//核心函数的4个作用$(function () {alert("页面加载完成之后，自动调用！");$("<div>" +"<span>div-span1</span>" +"<span>div-span2</span>" +"</div").appendTo("body");var btnObj = document.getElementById("btn01");// alert(btnObj);//[object HTMLButtonElement]alert($(btnObj));//[object Object]/* 1.传入参数为[函数]时，在文档加载完成后执行这个函数2.传入参数为[HTML字符串]时，根据这个字符串创建元素节点对象3.传入参数为[选择器字符串]时，根据这个字符串查找元素节点对象4.传入参数为[DOM对象]时，将DOM对象包装为jQuery对象返回*/});</script>
</head><body><button id="btn01">按钮1</button><button>按钮2</button><button>按钮3</button>
</body></html>

1.3：jQuery对象和DOM对象区分

DOM对象：

①通过getElementById()查询出来的标签对象是DOM对象

②通过getElementsByName()查询出来的标签对象是DOM对象

③通过getElementsByTagName()查询出来的标签对象是DOM对象

④通过createElement()方法创建的对象是DOM对象

DOM对象Alert出来的效果是：[object HTML 标签名 Element]

jQuery对象：

①通过jQuery提供的API创建的对象，是jQuery对象

②通过jQuery包装的BOM对象，是jQuery对象

③通过jQuery提供的API查询到的对象，是jQuery对象

jQuery对象Alert出来的效果是：[object Object]

1.4：jQuery对象的本质

jQuery对象是DOM对象的数组+jQuery提供的一系列功能函数

1.5：jQuery对象和DOM对象的使用区别

jQuery对象不能使用DOM对象的属性和方法

DOM对象也不能使用jQuery对象的属性和方法

1.6：DOM对象和jQuery对象互转

①DOM对象转化为jQuery对象

a：先有DOM对象

b：$(DOM对象)就可以转化成为jQuery对象

②jQuery对象转化为DOM对象

a：先有jQuery对象

b：jQuery对象[下标]取出相应的DOM对象

1.7：jQuery选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器

jQuery 中所有选择器都以美元符号开头：$()。

1.7.1：元素选择器

jQuery 元素选择器基于元素名选取元素。

1.7.2：#id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法：$("#test")

1.7.3：.class 选择器

jQuery 类选择器可以通过指定的 class 查找元素。

语法：$(".test")

语法	描述	实例
$("*")	选取所有元素	在线实例
$(this)	选取当前 HTML 元素	在线实例
$("p.intro")	选取 class 为 intro 的 <p> 元素	在线实例
$("p:first")	选取第一个 <p> 元素	在线实例
$("ul li:first")	选取第一个 <ul> 元素的第一个 <li> 元素	在线实例
$("ul li:first-child")	选取每个 <ul> 元素的第一个 <li> 元素	在线实例
$("[href]")	选取带有 href 属性的元素	在线实例
$("a[target='_blank']")	选取所有 target 属性值等于 "_blank" 的 <a> 元素	在线实例
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素	在线实例
$(":button")	选取所有 type="button" 的 <input> 元素和 <button> 元素	在线实例
$("tr:even")	选取偶数位置的 <tr> 元素	在线实例
$("tr:odd")	选取奇数位置的 <tr> 元素	在线实例