jQuery基础的简单介绍

目录

 

jQuery的简介

什么是jQuery

jQuery的语法

文档就绪事件

jQuery选择器

常用的jQuery事件

---

jQuery的简介

jQuery库可以通过一行简单的标记被添加到网页中，且极大地简化了JavaScript编程。

什么是jQuery

jQuery 是一个 JavaScript 函数库。

jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

jQuery 库包含以下功能：

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

提示： 除此之外，jQuery 还提供了大量的插件。

jQuery的语法

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

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

通过jQuery，我们可以选取（查询，query）HTML元素，并对它们执行操作（actions）。

jQuery的action（）执行对元素的操作 实例：

01.$(this).hide() - 隐藏当前元素， 02. $("p").hide() - 隐藏所有 <p> 元素，

03. $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素，04. $("#test").hide() - 隐藏 id="test" 的元素

文档就绪事件

 

例：

$(document).ready(function(){

输入 jQuery 代码

});

这样写的用法是防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作，如果在文档没有完全加载之前就运行函数，操作可能失败。

提示:简易写法（效果和实例的效果相同）

$(function(){

 输入 jQuery 代码...

 });

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

1. jQuery的入口函数是在html所有标签（DOM）都加载之后就会去执行。
2. JavaScript的window.onload事件是等到所有内容，包括外部图片之类的文件加载完后才会执行。

window.onload：

执行时机：必须等待网页全部加载完毕（包括图片等），然后然后在执行包裹代码。

执行次数：只能执行一次，如果有第二次，那么第一次的执行会被覆盖

简写方案：无

$(document).ready():

执行时机：只需等待网页中的DOM结构加载完毕，就能执行包裹代码。

执行次数：可以多次执行，第N次也不存在被覆盖的问题

简写方案：$(function(){

             输入 jQuery 代码...

 });

jQuery选择器

01.jQuery 选择器允许我们对 HTML 元素组或单个元素进行操作。

02.jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素，它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

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

元素选择器

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

例：$ (“ 元素名 ”)；

#id 选择器

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

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

通过 id 选取元素语法如下：$ ( “ #id ” );

Class 选择器

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

语法：$（“ .class ”）;

选择器实例：

$("*")	选取所有元素	在
$(this)	选取当前 HTML 元素
$("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> 元素
$("a[target!='_blank']")	选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")	选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even")	选取偶数位置的 <tr> 元素
$("tr:odd")	选取奇数位置的 <tr> 元素

​​​​​​​

常用的jQuery事件

什么是事件

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

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

实例：1.在元素上移动鼠标 2.选取单选按钮 3.点击元素

01点击事件click（）；

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

该函数在用户点击 HTML 元素时执行。

语法：$(“selector”).click(function(){

            动作触发后执行的代码!!

       };

02 双击事件dbclick（）;

当双击元素时，事件触发。

dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：

语法：$(“selector”).dbclick(function(){

            动作触发后执行的代码!!

       };

03 mouseenter ()事件;

当鼠标指针穿过元素时，会发生 mouseenter 事件。

mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数;

04 mouseleave() 事件;

当鼠标指针离开元素时，会发生 mouseleave 事件。

mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数;

05 mousedown() 事件;

当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。

mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数;

06 mouseup() 事件;

当在元素上松开鼠标按钮时，会发生 mouseup 事件。

mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数;

07 hover() 事件;

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

当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。

08 focus() 事件;

当元素获得焦点时，发生 focus 事件。

当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数;

 

09 blur() 事件;

当元素失去焦点时，发生 blur 事件。

blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数;