01. JQuery 选择器与事件

最新推荐文章于 2023-04-23 17:34:04 发布

Al_assad

最新推荐文章于 2023-04-23 17:34:04 发布

阅读量452

点赞数

分类专栏： JQuery 文章标签： jquery 选择器事件

本文链接：https://blog.csdn.net/Al_assad/article/details/76093266

版权

JQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jQuery 的下载安装

JQuery库下载：https://jquery.com/download/

JQuery导入页面：

 
<head><script src="jquery-1.10.2.min.js"></script></head>

或者使用CDN服务导入；

 
百度CDN：
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
新浪 CDN:
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
Google CDN:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
Microsoft CDN:
<script src="http://ajax.htmlnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js">

使用CDN服务，当用户请求已经加载过CDN的JQuery库时，在请求到达站点时，直接从缓存中加载CDN，而站点响应传输时，会从距离用户最近的服务器上加载JQuery，可以提高加载速度；

基本语法

Query 语法是 Xpath 和 CSS选择器语法的组合

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

美元符号定义 jQuery
选择符（selector）"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作

示例：

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

$("p").hide() - 隐藏所有段落

$("p .test").hide() - 隐藏所有 class="test" 的段落

$("#test").hide() - 隐藏所有 id="test" 的元素

文档就绪事件

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

 
$(document).ready(function(){
   //JQuery代码块
});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

以上函数的简洁语法

 
$(function(){
   //JQuery代码块
});

选择器

元素选择器

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

在页面中选取所有 <p> 元素:

 
$("p")

#id 选择器

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

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

 
$("#test")

.class 选择器

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

 
$(".test")

其他基于 xpath 的选择器

JQuery的选择器语法可以直接使用CSS选择器和xpath选择器

通用的语法如下：

 
$("css选择器或xpath路径")

以下是一些示例：

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

关于选择器的完整更多示例参见 w3cshool 的参考手册：https://www.w3cschool.cn/jquery/jquery-ref-selectors.html

事件

JQuery中，大多数DOM事件都有一个等效的JQuery方法，如click()事件等；
这些方法直接空参数调用，大多是直接触发元素该事件，添加 function 参数调用则是为元素该事件添加监听器，如以下示例：

 
$("button").click();     //直接触发button元素的click()事件
​
$("button").click(function(){   //为button的click动作注册function方法，并不触发button，该事件监听方法可以独立独立出来
    $("p").hide();
});

JQuery 同一个元素的事件方法注册可以叠加使用；

一般JQuery的元素事件注册和触发会放置在文旦加载后才进行，如下：

 
      
    
$(document).ready(function(){
    $("button").click(function(){ 
        $("p").hide();
    });
    $("button").click();     
});
//或者使用简练语法
$(function){
    $("button").click(function(){ 
        $("p").hide();
    });
    $("button").click();     
}

常用的Jquery事件如下：

click()	添加/触发点击事件
dblclick()	添加/触发双击事件
hide()	隐藏元素
show()	显示元素
hover()	模拟光标悬停事件
focus()	模拟元素获取焦点事件
blur()	模拟元素失去焦点事件
mouseenter()	鼠标指针进入元素时，触发该事件
mouseleave()	鼠标指针离开元素时，触发该事件
mousedown()	当鼠标指针移动到元素上方，并按下鼠标按键时，触发该事件
mouseup()	当在元素上松开鼠标按钮时，触发该事件
trigger()	触发绑定在元素上的所有事件
submit()	主要用于表单，触发submit表单元素的提交事件
select()	主要用于表单，触发单选框，复选框元素的select事件