使用jQuery

最新推荐文章于 2024-04-27 18:00:34 发布

Cabu_husky

最新推荐文章于 2024-04-27 18:00:34 发布

阅读量355

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/Cabu_husky/article/details/106041232

版权

jQuery 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

简介

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互

选择器

元素选择器

	$("p") //选取所有<p>元素 
	$("p.intro") //选取所有class="intro" 的 <p> 元素
	$("p#demo") //选取所有 id="demo" 的 <p> 元素

属性选择器

	$("[href]") //选取所有带有 href 属性的元素
	$("[href='#']") //选取所有带有 href 值等于 "#" 的元素
	$("[href!='#']") //选取所有带有 href 值不等于 "#" 的元素
	$("[href$='.jpg']") //选取所有 href 值以 ".jpg" 结尾的元素

css选择器

	$("p").css("background-color","red"); //将所有 p 元素的背景颜色更改为红色

事件

点击按钮隐藏所有<p>元素

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

常用事件

事件	作用
ready	文档加载完成时
change	改变事件
click	点击事件
dbclick	双击事件
focus	获取焦点事件
blur	失去焦点事件
mouseover	鼠标悬停事件
mouseout	鼠标移开事件

效果

显示/隐藏元素

	$("#hide").click(function(){
	  $("p").hide(); //隐藏元素
	});
	
	$("#show").click(function(){
	  $("p").show(); //显示元素
	});

滑动

slideToggle() 可操作向上/向下滑动，结合了slideDown() 与 slideUp() 方法

	$(selector).slideToggle(speed,callback);

speed可取值 slow、fast 或毫秒数

自定义动画

使用animate() 方法创建自定义动画 (生成动画时可以同时操作多个属性)

	<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				border: 1px solid #000;
				background-color: #000;
				position: relative;
			}
		</style>
	</head>
	<body>
		<div></div>
		<button>点击开始动画</button>
	</body>
	</html>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<script type="text/javascript">
		$(this).ready(function(){
		  $("button").click(function(){
		    $("div").animate({
		    	width:'200px',
		    	height:'200px',
		    	left:'200px',
		    	opacity:'0.4',
		    });
		  });
		});
	</script>

停止动画

stop() 方法用于在动画或效果完成前对它们进行停止
callback函数可以在动画之后执行语句

方法链接

我们可以在相同元素上设置多条jQuery语句，使其逐句执行

	$("button").click(function(){
	    $("p").slideUp(2000).slideDown(2000);
	});

DOM操作

设置和获取内容

方法	作用
text	设置或返回所选元素的文本内容
html	设置或返回所选元素的内容（包括 HTML 标记）
val	设置或返回表单字段的值

获取属性

	$("a").attr("href") //获取a标签的链接地址

添加和删除元素

	$("p").append("Hello World"); // 元素后追加文本

方法	作用
remove	删除被选元素（及其子元素）
empty	从被选元素中删除子元素

操作css

方法	作用
addClass	向被选元素添加一个或多个类
removeClass	从被选元素删除一个或多个类
toggleClass	对被选元素进行添加/删除类的切换操作
css	设置或返回样式属性

$("p").css("background-color","black"); //设置所以p元素background-color为black

获取和设置尺寸

方法	值
width / height	元素宽高（不包括margin border padding）
innerwidth / innerheight	元素宽高（包括padding）
outerWidth / outerHeight	元素宽高（包括padding border）
outerWidth(+margin) / outerHeight(+margin)	元素宽高（包括margin border padding）

Cabu_husky

关注

0
点赞
踩
1

收藏

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

选择器元素选择器 $("p") //选取所有<p>元素 $("p.intro") //选取所有class="intro" 的 <p> 元素 $("p#demo") //选取所有 id="demo" 的 <p> 元素属性选择器 $("[href]") //选取所有带有 href 属性的元素 $("[href='#']") //选取所有带有 href 值等于 "#" 的元素 $("[href!='#']") //选取所有带有 href 值不等于 "#" 的
复制链接

扫一扫

专栏目录