学习JQuery——简介

目录

前言

JQuery简介

JQuery语法

JQuery入口函数

[对比JavaScript 入口函数](#对比JavaScript 入口函数)

JQuery选择器

元素选择器

JQuery事件

鼠标事件

键盘事件


前言

前言

JQuery简介

JQuery官网

官方描述:

jQuery是一个快速、小巧且功能丰富的JavaScript库。它使诸如HTML文档遍历和操作、事件处理、动画和Ajax等简单易用的应用程序接口可以在多种浏览器上工作。通过多功能性和可扩展性的结合,JQuery改变了数百万人编写JavaScript的方式。

我的理解:

JQuery是一个轻量级的JavaScript函数库。"写更少的代码,做更多的事情"。

JQuery库包含的功能:

HTML元素选取(操作)、CSS操作、HTML事件函数、JavaScript特效和动画、HTML DOM遍历和修改、AJAX异步请求方式等。

JQuery语法

JQuery通过选取HTML元素,并对选取的HTML元素进行某些操作。

语法:$(selector ).action()

javascript 复制代码
$(this).hide() //隐藏当前元素

$("p").hide //隐藏所有标签未P的元素

$("p.btn").hide //隐藏所有class = "btn" 的标签是p的元素

$("#btn").hide() //隐藏id="btn"的元素

JQuery入口函数

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

就是在 DOM 加载完成后才可以对 DOM 进行操作。

对比JavaScript 入口函数

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

区别:

|------|-------------------|---------------------------------------|
| | JQuery | JavaScript |
| 执行时机 | jQuery入口函数可以书写多次 | window.onload只能书写一次,如果写多次,后面的会覆盖前面的 |
| 执行次数 | dom结构渲染完毕即可执行内部代码 | 等网页(页面文档、外部的js文件、css文件、图片)加载完毕才执行内部代码 |

JQuery选择器

  1. JQuery允许对HTML元素组或者单个元素进行操作。

  2. 基于已经存在的CSS选择器,也可以自定义选择器。

  3. 所有的选择器都以$()开头。

元素选择器

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

javascript 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>JQuery元素选择器</title> 
<script src="https://cdn.staticfile.net/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
	//$("button")选取button元素
  $("button").click(function(){
	 //$("p")选取p元素
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>JQuery标题</h2>
<p>JQuery段落。</p>
<button>点我JQuery段落隐藏</button>
</body>
</html>

除此之外,JQuery还有#id 选择器、.class 选择器。

JQuery事件

页面对不同访问者的响应叫做事件。

常见 DOM 事件:

鼠标事件

1.click() 方法是当按钮点击事件被触发时会调用一个函数。

javascript 复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>点击事件</title> 
<script src="https://cdn.staticfile.net/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>如果你点我,我就会消失。</p>
<p>点我消失!</p>
<p>点我也消失!</p>

</body>
</html>

2.dblclick()方法是当双击元素时,会发生 dblclick 事件

3.mouseenter()方法是当鼠标指针穿过元素时,会发生 mouseenter 事件。

4.mouseleave()方法是当鼠标指针离开元素时,会发生 mouseleave 事件。

5.mousedown()方法是当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。

6.mouseup()当在元素上松开鼠标按钮时,会发生 mouseup 事件。

7.hover()方法用于模拟光标悬停事件。

8.focus()当元素获得焦点时,发生 focus 事件。

9.blur()当元素失去焦点时,发生 blur 事件。

键盘事件

  1. keydown- 键按下的过程,keypress 事件不会触发所有的键(比如 ALT、CTRL、SHIFT、ESC)
  2. keypress - 键被按下
  3. keyup - 键被松开
相关推荐
Aotman_13 小时前
el-input textarea 禁止输入中文字符,@input特殊字符实时替换,光标位置保持不变
前端·javascript·vue.js·前端框架·es6
Nan_Shu_61413 小时前
Web前端面试题(1)
前端·面试·职场和发展
lypzcgf13 小时前
Coze源码分析-资源库-创建知识库-前端源码-核心组件
前端·typescript·react·coze·coze源码分析·ai应用平台·agent开发平台
百思可瑞教育13 小时前
在Vue项目中Axios发起请求时的小知识
前端·javascript·vue.js·北京百思教育
患得患失94914 小时前
【个人项目】【前端实用工具】OpenAPI to TypeScript 转换器
前端·javascript·typescript
大前端helloworld14 小时前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·javascript·面试
The_Killer.14 小时前
格密码--从FFT到NTT(附源码)
学习·线性代数·密码学·格密码
trsoliu14 小时前
前端基于 TypeScript 使用 Mastra 来开发一个 AI 应用 / AI 代理(Agent)
前端·人工智能
鸡吃丸子14 小时前
前端权限控制:深入理解与实现RBAC模型
前端
Larry_zhang双栖14 小时前
低版本Chrome 内核兼容性问题的优美解决
前端·chrome