jQuery 简介及常见事件

阅读量：330 次

发布时间：2019-03-03

本文共 4454 字，大约阅读时间需要 14 分钟。

一、jQuery简介

（一）概述

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

（二）特性

核心特性：

具有独特的链式语法和短小清晰的多功能接口；
具有高效灵活的css选择器，并且可对CSS选择器进行扩展；
拥有便捷的插件扩展机制和丰富的插件。

兼容性：
jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

（三）功能

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

二、jQuery安装

1.下载 jQuery

从中下载。

jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的

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

2.从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

例如：百度CDN

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

三、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" 的元素

文档就绪事件：

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

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败。

也可以简化写成：

$(function(){    // jQuery 代码... });

四、jQuery选择器

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

（一）元素选择器

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

在页面中选取所有 <p> 元素:

$("p")

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>Title</title>    <script src="jquery-3.4.1.min.js">    </script>    <!--将h2元素隐藏-->    <script>        $(document).ready(function(){                $("button").click(function(){                    $("h2").hide();            });        });    </script></head><body><h2>这是一个标题</h2><p>这是一个段落。</p><p>这是另一个段落。</p><button>点我将h2标题隐藏</button></body></html>

在这里插入图片描述

（二）id 选择器

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

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

语法

$("#test")

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>Title</title>    <script src="jquery-3.4.1.min.js">    </script>    <script>        $(document).ready(function(){                $("button").click(function(){                    $("#test").hide();            });        });    </script></head><body><h2>这是一个标题</h2><p>这是一个段落</p><p id="test">这是另外一个段落</p><button>点我隐藏第二个p标签</button></body></html>

在这里插入图片描述

（三）.class 选择器

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

语法

$(".test")

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>Title</title>    <script src="jquery-3.4.1.min.js">    </script>    <script>        $(document).ready(function(){                $("button").click(function(){                    $(".test").hide();            });        });    </script></head><body><h2 class="test">这是一个标题</h2><p class="test">这是一个段落。</p><p>这是另外一个段落。</p><button>点我隐藏h2标签和第一个p标签</button></body></html>

在这里插入图片描述

（四）jQuery常见事件

（1）click事件

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>Title</title>    <script src="jquery-3.4.1.min.js">    </script>    <script>        $(document).ready(function(){                $("input").click(function(){                    alert("按钮被点击了");            });        });    </script></head><body><p>点击这个按钮</p><input type="button" value="按钮"></body></html>

在这里插入图片描述

（2）mouseenter和mouseleave事件

当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件；当鼠标指针离开被选元素时，会发生 mouseleave 事件。

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>Title</title>    <script src="jquery-3.4.1.min.js">    </script>    <script>        $(document).ready(function(){                $("p").mouseenter(function(){                    $("p").css("background-color","red");            });            $("p").mouseleave(function(){                    $("p").css("background-color","lightgray");            });        });    </script></head><body><p>哈哈哈哈哈哈</p></body></html>

鼠标放上来：
在这里插入图片描述
鼠标离开后：

（3）keypress事件

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>Title</title>    <script src="jquery-3.4.1.min.js">    </script>    <script>        i=0;        $(document).ready(function(){                $("input").keypress(function(){                    $("span").text(i+=1);            });        });    </script></head><body>输入数字: <input type="text"><p>按键盘的次数: <span>0</span></p></body></html>

在这里插入图片描述

（4）change事件

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>Title</title>    <script src="jquery-3.4.1.min.js">    </script>    <script>        $(document).ready(function(){                $("input").change(function(){                    alert("文本已被修改");            });        });    </script></head><body><input type="text"><p>在输入框写一些东西，然后按下回车键或点击输入框外部</p></body></html>

在这里插入图片描述

转载地址：http://lkwm.baihongyu.com/

你可能感兴趣的文章

mysql5.7.19安装图解_mysql5.7.19 winx64解压缩版安装配置教程

MySQL5.7.37windows解压版的安装使用

mysql5.7免费下载地址

mysql5.7命令总结

mysql5.7性能调优my.ini

MySQL5.7新增Performance Schema表

Mysql5.7深入学习 1.MySQL 5.7 中的新增功能

Webpack 之 basic chunk graph

Mysql5.7版本单机版my.cnf配置文件

mysql5.7的安装和Navicat的安装

mysql5.7示例数据库_Linux MySQL5.7多实例数据库配置

Mysql8 数据库安装及主从配置 | Spring Cloud 2

mysql8 配置文件配置group 问题 sql语句group不能使用报错解决 mysql8.X版本的my.cnf配置文件 my.cnf文件能够使用的my.cnf配置文件

MySQL8.0.29启动报错Different lower_case_table_names settings for server (‘0‘) and data dictionary (‘1‘)

MYSQL8.0以上忘记root密码

Mysql8.0以上重置初始密码的方法

mysql8.0新特性-自增变量的持久化

Mysql8.0注意url变更写法

Mysql8.0的特性