前端基础（10）：jQuery学习-1（概念/选择器/事件）

最新推荐文章于 2022-05-31 21:12:53 发布

原创最新推荐文章于 2022-05-31 21:12:53 发布 · 247 阅读

0 ·

CC 4.0 BY-SA版权

前端js/html/css/jQuery/DataTable 专栏收录该内容

20 篇文章

订阅专栏

2018年2月6日

【0】jQuery 概念

1、jQuery 是一个 JavaScript 库。
2、jQuery 极大地简化了 JavaScript 编程。
3、jQuery 很容易学习。

4、jQuery 库可以通过一行简单的标记被添加到网页中。

如:

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">

百度CDN：

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

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

jQuery库包含以下功能：

HTML 元素选取+HTML 元素操作+CSS 操作+HTML 事件函数+JavaScript 特效和动画+HTML DOM 遍历和修改+AJAX+Utilities
提示：除此之外，Jquery还提供了大量的插件。

6、目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。

7、目前jQuery兼容于所有主流浏览器, 包括Internet Explorer 6!

【1】实例1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script src="http://cdn.static.runoob.com/libs/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】jQuery语法

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

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()：
（1）美元符号定义 jQuery
（2）选择符（selector）"查询"和"查找" HTML 元素
（3）jQuery 的 action() 执行对元素的操作

实例:

$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有 元素
$("p.test").hide() - 隐藏所有 class="test" 的 元素
$("#test").hide() - 隐藏所有 id="test" 的元素

2、文档就绪事件

实例中的所有 jQuery 函数位于一个 document ready 函数中：

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

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

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

下面是两个具体的例子：试图隐藏一个不存在的元素、获得未完全加载的图像的大小；

提示：简洁写法（与以上写法效果相同）:

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

以上两种方式你可以选择你喜欢的方式实现文档就绪后执行 jQuery 方法。

3、jQuery 选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。jQuery 中所有选择器都以美元符号开头：$()。

==3.1、元素选择器

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

在页面中选取所有 元素:

   $("p")
 

实例

用户点击按钮后，所有 元素都隐藏：

实例

 
   $
   (
   document
   )
   .
   ready
   (
   function
   (
   )
   {
  
 
   $
   (
   "
   button
   "
   )
   .
   click
   (
   function
   (
   )
   {
  
 
   $
   (
   "
   p
   "
   )
   .
   hide
   (
   )
   ;
  
 
   
   }
   )
   ;
  
 
   }
   )
   ;
  

==3.2、#id 选择器

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

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

通过 id 选取元素语法如下：

   $("#test")
 

实例

当用户点击按钮后，有 id="test" 属性的元素将被隐藏：

实例

 
   $
   (
   document
   )
   .
   ready
   (
   function
   (
   )
   {
  
 
   $
   (
   "
   button
   "
   )
   .
   click
   (
   function
   (
   )
   {
  
 
   $
   (
   "
   #test
   "
   )
   .
   hide
   (
   )
   ;
  
 
   
   }
   )
   ;
  
 
   }
   )
   ;
  

==3.3 .class 选择器

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

语法如下：

   $(".test")
 

实例

用户点击按钮后所有带有 class="test" 属性的元素都隐藏：

实例

 
   $
   (
   document
   )
   .
   ready
   (
   function
   (
   )
   {
  
 
   $
   (
   "
   button
   "
   )
   .
   click
   (
   function
   (
   )
   {
  
 
   $
   (
   "
   .test
   "
   )
   .
   hide
   (
   )
   ;
  
 
   
   }
   )
   ;
  
 
   }
   )
   ;
  

==3.4 More

语法	描述
$("*")	选取所有元素
$(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> 元素

PS：

1.DOM 是 W3C（万维网联盟）的标准，定义了访问 HTML 和 XML 文档的标准，DOM 是 Document Object Model（文档对象模型）的缩写。

4、jQuery 事件

jQuery 是为事件处理特别设计的。页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

实例：

在元素上移动鼠标。
选取单选按钮
点击元素

常见 DOM 事件：

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

==4.1 jQuery 事件方法语法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件：

 
   $
   (
   "
   p
   "
   )
   .
   click
   (
   )
   ;
  

下一步是定义什么时间触发事件。可以通过一个事件函数实现：

 
   $
   (
   "
   p
   "
   )
   .
   click
   (
   function
   (
   )
   {
  
 
   
   //
    动作触发后执行的代码!!
  
 
   
   
   }
   )
   ;
  

==4.2 常用的 jQuery 事件方法

$(document).ready()

$(document).ready() 方法允许我们在文档完全加载完后执行函数。

click()

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

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

在下面的实例中，当点击事件在某个 元素上触发时，隐藏当前的 元素：

实例

 
   $
   (
   "
   p
   "
   )
   .
   click
   (
   function
   (
   )
   {
  
 
   $
   (
   this
   )
   .
   hide
   (
   )
   ;
  
 
   }
   )
   ;
  

dblclick()

当双击元素时，会发生 dblclick 事件。

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

实例

 
   $
   (
   "
   p
   "
   )
   .
   dblclick
   (
   function
   (
   )
   {
  
 
   $
   (
   this
   )
   .
   hide
   (
   )
   ;
  
 
   }
   )
   ;
  

mouseenter()

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

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

实例

 
   $
   (
   "
   #p1
   "
   )
   .
   mouseenter
   (
   function
   (
   )
   {
  
 
   
   alert
   (
   '
   您的鼠标移到了 id="p1" 的元素上!
   '
   )
   ;
  
 
   }
   )
   ;
  

mouseleave()

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

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

实例

 
   $
   (
   "
   #p1
   "
   )
   .
   mouseleave
   (
   function
   (
   )
   {
  
 
   
   alert
   (
   "
   再见，您的鼠标离开了该段落。
   "
   )
   ;
  
 
   }
   )
   ;
  

hover()

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

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

实例

 
   $
   (
   "
   #p1
   "
   )
   .
   hover
   (
  
 
   
   function
   (
   )
   {
  
 
   
   alert
   (
   "
   你进入了 p1!
   "
   )
   ;
  
 
   
   }
   ,
  
 
   
   function
   (
   )
   {
  
 
   
   alert
   (
   "
   拜拜! 现在你离开了 p1!
   "
   )
   ;
  
 
   
   }
   
   )
   ;
  

focus()

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

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

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

实例

 
   $
   (
   "
   input
   "
   )
   .
   focus
   (
   function
   (
   )
   {
  
 
   $
   (
   this
   )
   .
   css
   (
   "
   background-color
   "
   ,
   "
   #cccccc
   "
   )
   ;
  
 
   }
   )
   ;
  

blur()

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

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

实例

 
   $
   (
   "
   input
   "
   )
   .
   blur
   (
   function
   (
   )
   {
  
 
   $
   (
   this
   )
   .
   css
   (
   "
   background-color
   "
   ,
   "
   #ffffff
   "
   )
   ;
  
 
   }
   )
   ;
  