jQuery安装、语法、选择器、事件

最新推荐文章于 2024-08-12 12:57:58 发布

彼岸啊

最新推荐文章于 2024-08-12 12:57:58 发布

阅读量381

点赞数

分类专栏： Web 前端学习

本文链接：https://blog.csdn.net/qq_44495081/article/details/104596055

版权

Web 前端学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jQuery

1、jQuery简介

jQuery是一个JavaScript代码库，是一个简洁、快速的JavaScript框架，宗旨是用更少的代码，作更多的事。封装了JavaScript常用的功能代码，提供了一种简便的JavaScript设计模式，优化HTML文档操作，事件处理，动画设计和Ajax交互。

核心特性可以总结为具有独特的链式语法和短小清晰的多功能接口，具有高效灵活的css选择器，并可对css选择器进行扩展，拥有便界的插件扩展机制和丰富的插件

jQuery的功能

HTML元素选取
HTML元素操作
CSS操作
HTML函数事件
JavaScript特效和动画
HTML DOM树遍历和修改
Ajax无刷新网页
Utilities

2、jQuery安装

jQuery安装分为两种方式

1、下载jQuery库（是一个JavaScript文件）

下载：

在 https://jquery.com/download/ 下载，目前有两个版本的jQuery可供下载

Production version ：用于实际的网站，压缩和精简过
Development version ：用于测试和开发，未压缩可以看见源码

引用：

jQuery是一个JavaScript文件，将下载的jQuery文件放在网页的同一目录下，使用<script>标签进行引用

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

2、引用jQuery

如果不想下载jQuery库文件，可以使用 CDN（内容分发网络）在线引用

常用CDN

Staticfile CDN

<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>

百度 CDN

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

又拍云 CDN

<head>
<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
</script>
</head>

新浪 CD

<head>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
</script>
</head>

Google CDN

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>

使用 Staticfile CDN、百度、又拍云、新浪、谷歌或微软的 jQuery，有一个很大的优势：

许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所以结果是，当他们访问你的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

3、jQuery语法

通过jQuery，可以选取/查询/操作HTML元素，jQuery的语法是西安通过选择器选取HTML元素，然后对选取的元素进行某些操作

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

$ ：用来定义jQuery
selector ：利用选择器查找HTML元素
action ：对查找到的元素进行的操作

举例：

$(this).hide()——隐藏当前元素
$(“p”).hide()——隐藏所有的p元素
$(“p.test”).hide()——隐藏所有的class="test"的p元素
$("#test").hide——隐藏左右的id="test"的元素

文档就绪事件，jQuery入口函数

在文档DOM加载完成后再对DOM进行操作，防止在文档未完全加载就绪之前运行jQuery代码

两种写法

$(document).ready(function(){
	//执行代码
});

简写版：

$(function(){
	//执行代码
});

jQuery入口函数与JavaScript入口函数区别

jQuery入口函数写法

$(document).ready(function(){
    // 执行代码
});
//或
$(function(){
    // 执行代码
});

JavaScript入口函数写法

window.onload = function () {
    // 执行代码
}

两者区别

jQuery入口函数是在HTML的DOM（所有标签）都加载完毕之后，去执行
JavaScript入口函数是在等所有的内容都加载完毕（DOM树和外部资源等）之后，去执行
jQuery入口函数可以执行多次，而且不会覆盖上一次的操作
JavaScript入口函数只能执行一次，如果有第二次操作，则会覆盖上一次的操作

4、jQuery选择器

jQuery选择器允许对HTML元素组或单个元素进行操作，它基于已经存在的CSS选择器，还可以自定义选择器。所有的jQuery选择器都以$()格式

1、元素选择器

选取HTML页面中的某一类型的所有元素

例如，选取页面中的所有的p元素

$("p")

2、# id选择器

通过元素的id属性选取指定的元素，元素的id在DOM中应该是唯一的，所以可以使用id选择器选取页面中的唯一元素

例如，选取页面中的id="test"的元素

$("#test")

3、. class选择器

通过元素的class属性选取元素，一个DOM中class属性值可以有多个，可以将样式相同的元素设置相同的class，便于管理

例如，选取页面中所有class="test"的元素

$(".test")

4、更多实例

语法	描述
$("*")	选取所有的元素
$(this)	选取当前元素
$(“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[target!=’_blank’]”)	选取target!="_blank"的元素
$(":button")	选取所有type="button"的button元素和input元素
$(“tr:even”)	选取偶数位置的tr元素
$(“tr:odd”)	选取奇数位置的tr元素
$(“button”)	选取所有type="button"的button元素

关于 : 和 [] 的理解

: 可以理解为种类的意思，表示某种元素

[] 可以理解为属性的意思，表示带有某个属性的元素

在这里插入图片描述

5、jQuery事件

为了处理对不同访问者的响应，或者说针对HTML元素所发生的某些事件所调用的方法

常见分为

在元素上光移动鼠标
选取单选多选按钮
点击元素

常见的DOM事件

在这里插入图片描述

在jQuery中，大部分的DOM事件都有一个等效的jQuery方法，比如点击事件

//当id="test"的元素被单击时
$("#test").click(function(){
	//当单击动作被触发以后要执行的代码
});

常见的jQuery事件方法

$(document).ready()

允许在文档DOM加载完毕后执行函数

click()

当元素被单击的时候触发

例如，当单击当前元素的时候，触发事件，隐藏当前元素

//当id="test"的元素被单击时，隐藏该元素
$("#test").click(function(){
    $(this).hide();
});

dblclick()

当元素被双击时触发

例如，当元素被双击时，隐藏元素

//当p元素被双击的时候隐藏
$("p").dblclick(function(){
    $(this).hide();
});

mouseenter()

当鼠标指针穿过元素时触发

例如，当鼠标移动到元素上时，弹窗提示

//当鼠标移动到id=p1的元素上时，弹窗提示
$("#p1").mouseenter(function(){
    alert("你的鼠标移动到了id=p1的元素上");
});

mouseleave()

当鼠标指针离开元素的时候触发

例如，当鼠标移开元素时，弹窗提示

//当鼠标移开元素时提示
$("#p1").mouseleave(function(){
    alert("再见，您的鼠标移开了id=p1的段落");
})

mousedown()

当鼠标指针落在元素上，并按下鼠标的时候触发

例如，当鼠标落在元素上，并按下时，弹窗提示

$("#p1").mousedown(function(){
    alert("鼠标在该元素上按下");
});

mouseup()

当鼠标在元素上松开时，触发

例如，当松开鼠标，弹窗提示

$("#p1").mouseup(function(){
    alert("鼠标在该元素上松开");
});

hover()

当鼠标移动到该元素上时触发

$("#p1").hover(function(){
    alert("你进入了id=p1的元素");
});

focus()

当元素获得焦点的时候触发

例如，当输入框获得焦点的时候，背景色发生变化

$("input").focus(function(){
    $(this).css("background-color","#cccccc");
});

blur()

元素失去焦点的时候触发

$("input").blur(function(){
    $(this).css("background-color","#ffffff");
});

keypress，keydown，keyup区别

keydown

在键盘上按下某个键时触发，一直按着会不断触发，返回键盘代码
keypress

在键盘上按下一个按键，并产生一个字符时触发，返回ASCII码，一直按着会不断触发。shift、alt、ctrl等键按下时不会产生字符，会监听无效，只有按在屏幕上能显示出来字符的案件才能触发
keyup

用户松开某一键盘时触发，返回键盘代码