jQuery

忽晚♪‎( ᷇࿀ ᷆ و(و

于 2024-09-01 10:41:37 发布

阅读量539

点赞数 12

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/zhaogx233/article/details/141760423

版权

1.简述

中文文档：jQuery中文网
官网：jQuery

jQuery是一个快速、简洁的JavaSrcipt框架。是一款免费的开放源代码的轻量级JavaScript代码库。

2.环境配置

jQuery库不需要安装，将库文件复制到站点中的某个文件夹即可。

<head>
    <meta charset="utf-8" />
    <title>jQuery的引入</title>
    <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
</head>

3.jQuery的使用

jQuery程序中的函数，以“$”起始，$()等效于jQuery()，称为jQuery工厂函数。

$(function()){
    页面加载事件
}
jQuery(function){
    页面加载事件
};

jQuery语法

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

基础语法：

$(selector).action()

$ : 定义jQuery
(selector) ：查询和查找HTML元素
action() ：执行对元素的操作

实例：

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

文档就绪事件

如果文档没有完全加载之前就运行函数，操作可能失败。（隐藏一个不存在的元素等）

使用文档就绪事件，防止文档在完全加载之前就运行jQuery代码

$(document).ready()：是整个jQuery运行的核心

语法：

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

两种写法一致，第二种是第一种的简写方式。

元素选择器：

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

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

当点击 <button> 时，所有的 <p> 元素会隐藏

#id 选择器

#id 选择器通过HTML的元素中的id属性选取指定元素，由于id的唯一性，所以用#id选择器选取唯一元素

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

当点击 <button> 时，id="test" 的元素会被隐藏

.class 选择器

通过指定的class查找元素

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

点击 <button> 时，所有 class="test" 的元素会被隐藏

常用语法
语法	描述
$("*")	选取所有元素
$(this)	选取当前 HTML 元素
$("p.className")	选取 class 为 className 的 <p> 元素
$(":button")	选取所有 type="button" 的 <input> 元素和 <button> 元素

jQuery事件

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

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

基本语法：

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

常见事件：

1.鼠标事件

click事件：

当鼠标点击触发后调用函数

$(function(){
    $("#test").click(function(){
        alert(123);
    });
})

当点击 id="test" 元素时触发弹窗

dblclick事件：

当鼠标双击触发后调用函数

$(function(){
    $("#test").dblclick(function(){
	    alert(123);
	});
})

双击 id="test" 元素时触发弹窗

hover事件：

鼠标悬停时触发后调用函数

$(function(){
    $("#test").hover(function(){
	    alert(123);
	},
	function(){
		alert(321);
	});
})

当鼠标移动到 id="test" 元素上时触发第一个function函数，移出后触发第二个function函数

2.表单事件：

focus事件：

元素获得焦点时触发

$(function(){
    $("#test").focus(function(){
	    alert(123);
	});
})

当 id="test" 的元素获得焦点后触发弹窗

focus事件与click事件的区别：

focus事件不局限与使用鼠标点击，还包括使用键盘使元素获取焦点，常用于获得焦点后改变样式
click事件仅当用户点击元素时触发，常用于表单提交等

biur事件：

当元素失去焦点后触发

$(function(){
    $("#test").blur(function(){
	    alert(123);
	});
})

当 id=“test” 的元素失去焦点后触发弹窗

忽晚♪‎( ᷇࿀ ᷆ و(و

关注

12
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
jQuery

id 选择器通过HTML的元素中的id属性选取指定元素，由于id的唯一性，所以用#id选择器选取唯一元素。$("p.test").hide()：隐藏所有 class="test" 的 <p> 元素。点击 <button> 时，所有 class="test" 的元素会被隐藏。$("#test").hide()：隐藏所有 id="test" 的元素。当点击 <button> 时，id="test" 的元素会被隐藏。当 id="test" 的元素获得焦点后触发弹窗。当点击 id="test" 元素时触发弹窗。
复制链接

扫一扫