首页 前端知识 学习JQuery——简介

学习JQuery——简介

2024-04-21 10:04:06 前端知识 前端哥 455 949 我要收藏

目录

前言

JQuery简介

JQuery语法 

 JQuery入口函数

对比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()

$(this).hide() //隐藏当前元素

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

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

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

 JQuery入口函数

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

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

对比JavaScript 入口函数 

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

 区别:

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

JQuery选择器

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

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

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

元素选择器 

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

<!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() 方法是当按钮点击事件被触发时会调用一个函数。

<!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 - 键被松开
转载请注明出处或者链接地址:https://www.qianduange.cn//article/5552.html
标签
评论
发布的文章

CSS(8)空间转换 动画

2024-04-29 12:04:29

CSS介绍(4)--背景属性

2024-04-29 12:04:26

Web学习记录---CSS(1)

2024-04-29 12:04:17

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!