学习JQuery——简介-编程知识

学习JQuery——简介

前言

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 () {// 执行代码
}

区别：

	JQuery	JavaScript
执行时机	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 事件。