JQuery

最新推荐文章于 2023-05-23 11:56:06 发布

格林黄

最新推荐文章于 2023-05-23 11:56:06 发布

阅读量235

点赞数 1

分类专栏： web前段javascript知识点汇总

web前段javascript知识点汇总专栏收录该内容

17 篇文章

订阅专栏

本文介绍了JQuery的基本特性和使用方法，包括HTML元素的选择与操作、事件处理等，并通过实例展示了如何利用JQuery简化JavaScript编程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.JQuery库特性

HTML元素选取与操作

css操作

HTML事件函数

JavaSvript特效和动画

HTML DOM遍历和修改

AJAX

2.引用JQuery

从jQuery.com下载JQuery库

从CDN中下载JQuery

3版本介绍

V1.x:支持IE6+

V2.x:支持IE9+

4.官网www.jquery.com

5.jquery语法

$(selector).action()

美元符号定义JQuery

选择符（selector）“查询”和“查找”HTML元素

jQuery的action()执行选择元素的操作

6.文档就绪函数

为防止文档在完全加载（就绪）之前运行，如：

试图隐藏一个不存在的元素

获得未完全加载的图像的大小

$(document).ready(function(){});

7.元素选择器

$("*") 所有元素

$("#lastname") id="lastname"的元素

$(".intro") 所有class="intro"的元素

$("p") 所有<p>元素

$(".intro.demo")所有class="intro"且class="demo"的元素

$("p:first") 第一个<p>元素

$("p:last")最后一个<p>元素

$("tr:even")所有偶数<tr>元素

$("tr:odd")所有奇数<tr>元素

$("ul li:eq(3)") 列表中的第四个元素（index从0开始）

$("ul li:gt(3)") 列出index大于3的元素

$("ul li:lt(3)") 列出index小于3的元素
$("input:not(:empty)") 所有不为空的input元素

$(":header") 所有标题元素<h1>-<h6>

$:(":animated") 所有动画元素

6.JQuery事件

$(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时）

$(selector).click(function) 触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件

$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-3.2.1.min.js"> </script>
<script>
$(document).ready(function(){
	$("button").click(function(){
		$(this).hide();
	});

});
</script>
</head>

<body>

	<button id="btn">提交</button>
</body>
</html>

7.绑定和解除事件

bind&unbind

on&off(jQuery 1.7+)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-3.2.1.min.js"> </script>
<script>
$(document).ready(function(){
	$("button").bind("click",clickfunc);
	$("button").bind("click",clickfunc2);
	$("button").off("click",clickfunc2);

});
function clickfunc(e)
{
	console.log("click func1");
}
function clickfunc2(e)
{
	console.log("click func2");
}
</script>
</head>

<body>
	<button id="btn">提交</button>
</body>
</html>

8.事件冒泡

stopPropagation 阻止父层元素

stopImmediatePropagation 立即阻止(包括和它同一层的元素)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-3.2.1.min.js"> </script>
<script>
$(document).ready(function(){
	$("button").bind("click",clickfunc);
	$("button").bind("click",clickfunc2);
	$("div").on("click",clickDiv);

});
function clickfunc(e)
{
	console.log("click func1");
	//console.log(e);
	e.stopPropagation();
}
function clickfunc2(e)
{
	console.log("click func2");
	//console.log(e);
}
function clickDiv(e)
{
	console.log("click Div");
	//console.log(e);
}
</script>
</head>

<body>
	<div id="div1">
		<button id="btn">提交</button>
     </div>
</body>
</html>