前端之jQuery

2023-10-03 22:19:04

什么是jQuery

Query 是一个 JavaScript 函数库。

jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

jQuery 库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

jQuery安装

　　　　方式一

从官网下载，之后将代码放在本地的js文件中，如果要使用jQuery导入便可以

有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

以上两个版本都可以从 jquery.com 中下载。

<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

　　　　方式二

如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它。

Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。

这里以bootcdn为例

<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.js">
</script>
</head>

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。

$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。

相当于： document.getElementById("i1").innerHTML;

虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：

var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象

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

jQuery 语法

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

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

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

基本选择器

$("#d1")    id选择器
$(".c1")      类选择器
$("tagName") 标签选择器
$("*") 所有元素选择器
$('div.c1')  # 查找class含有c1的div标签
$("#d1, .c1, p")  # 并列查找
$("x y")    // x的所有后代y（子子孙孙）
$("x > y")    // x的所有儿子y（儿子）
$("x + y")    // 找到所有紧挨在x后面的y
$("x ~ y")    // x之后所有的兄弟y

基本筛选器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

例子

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

表单筛选器

:text        //查找type属性为text的标签
:password　　 //查找type属性为password的标签
:file            //查找type属性为file的标签
:radio        //查找type属性为radio的标签
:checkbox    //查找type属性为checkbox的标签

:submit        //查找type属性为submit的标签
:reset        //查找type属性为reset的标签
:button       //查找type属性为button的标签

表单对象属性

:enabled
:disabled
:checked
:selected

例子

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input标签

码农公寓