jQuery入门学习打卡

最新推荐文章于 2022-11-23 12:20:37 发布

gegejiawei

最新推荐文章于 2022-11-23 12:20:37 发布

阅读量173

点赞数

分类专栏： Web组件化结构开发文章标签： jquery

本文链接：https://blog.csdn.net/gegejiawei/article/details/106691167

版权

Web组件化结构开发专栏收录该内容

16 篇文章 0 订阅

订阅专栏

思维导图

在这里插入图片描述

jQuery是什么？

Write less,do more!
jquery是一个快速，小巧而且功能丰富的JavaScript库。
1、jQuery是一个JavaScript函数库
2、jQuery是一个轻量级“写得少，做得多”的JavaScript库

jQuery历史

John Resig – jQuery的创始人和技术领秀
2006.1.14 正式发布以jQuery发布自己的程序库
2006.8 产生了第一个稳定版本支持css选择符，事件处理和ajax交互

jQuery的作用

1、HTML元素选取
2、HTML元素操作
3、css操作
4、事件函数
5、JavaScript特效和动画
6、DOM遍历
7、ajax

jQuery的目的

1、化大为小，化简为繁 – 简化代码，使得程序更加高效
2、主要代替繁琐的原生的JavaScript

jQuery的优势

1、轻量级
2、强大的选择器
3、出色的DOM操作及封装
4、可靠的事件处理机制
5、完善的ajax

jQuery的基本使用

常规引入

需要在head标签中引入jQuery文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script type="text/javascript" src="js/jquery.js"></script>
</head>
<body>
  
</body>
</html>

jquery官网：https://jquery.com/

$符号 – jQuery符号

jQuery将所有的功能全部封装在一个全局变量jQuery中，而它是一个合法的变量名，他是jQuery的别名。绝大多数时候，我们直接使用
如果$符号变量占用，只能使用jQuery这个变量

页面就绪函数

window.onload = function(){}
//原始格式
$(document).ready(function(){  });
//缩写形式
$().ready(function(){....});
//缩写
$(function(){});

通过ID获取一个HTML元素

JavaScript：var obj = document.getElementById("id");
jQuery：var obj = $("id");

将一个HTML元素隐藏

JavaScript：document.getElementById("id").style.display="none";
jQuery：var obj = $("id").hide();

把一个HTML元素宽度变成200px

JavaScript：document.getElementById("id").style.width="200px";
jQuery：var obj = $("id").css("width","200px");

注意点

1、HTML() 可以插入值还可以解析html标签
2、CSS() 可以添加css样式，可以改变css样式
3、TEXT() 可以插入文本但是不可以解析标签

jQuery操作小案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQuery入门</title>
	<script type="text/javascript" src="PhotoWallDemo/js/jQuery.js"></script>
	<script type="text/javascript">
		console.log($ === jQuery); // true

		$(document).ready(function(){
			$('.btn').click(function(){
				$('p').slideToggle();
			});
		});
	</script>
</head>
<body>
	<p>This is a paragraph</p>
	<button class="btn">按钮</button>
</body>
</html>

项目：照片墙案例

在这里插入图片描述

gegejiawei

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery入门学习打卡

思维导图jQuery是什么？Write less,do more!jquery是一个快速，小巧而且功能丰富的JavaScript库。1、jQuery是一个JavaScript函数库2、jQuery是一个轻量级“写得少，做得多”的JavaScript库jQuery历史John Resig – jQuery的创始人和技术领秀2006.1.14 正式发布以jQuery发布自己的程序库2006.8 产生了第一个稳定版本支持css选择符，事件处理和ajax交互jQuery的作用
复制链接

扫一扫