JQuery第一章入门

最新推荐文章于 2024-10-16 10:17:39 发布

LW0512

最新推荐文章于 2024-10-16 10:17:39 发布

阅读量255

点赞数

分类专栏： jq基础文章标签： jquery

本文链接：https://blog.youkuaiyun.com/LW0512/article/details/108912404

版权

jq基础专栏收录该内容

1 篇文章

订阅专栏

该博客介绍了jQuery的基本概念，包括它的作用，如DOM操作、CSS控制、简化JavaScript、事件处理、动画效果、Ajax支持以及丰富的插件生态。同时，讨论了jQuery的引入方式，包括本地引入和网站引入的优缺点，并提供了相关实例。

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

总结

1:什么是jQuery?

它通过封装原生的 JavaScript 函数得到一整套定义好的方法

2：jQuery的作用？

1.像 CSS 那样访问和操作 DOM
2.修改 CSS 控制页面外观
3.简化 JavaScript 代码操作
4.事件处理更加容易
5.各种动画效果使用方便
6.让 Ajax 技术更加完美
7.基于 jQuery 大量插件
8.自行扩展功能插件

3：jQuery的优点？

以更少的代码、实现更多的功能

4：jQuery的引入方式？

1：本地引入（外链接）
<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>

2：网址引入 
百度：
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
又拍云：
	<script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
新浪：
	<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
	Google 谷歌
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

实例：

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
//必须有网
	<script type="text/javascript">
		$('.btn').click(function(){
			alert('你好')
		})
	</script>

$(function(){})类似window.onload,告诉浏览器先加载html和css在加载js代码

6.本地引入和网站的引入的区别：
本地引入的优缺点：
优点：
1：本地引入JQ加载的时候速度更快 2：本地引入更加稳定。
缺点：
但是会增加项目的体积，本地引入的库或者框架或者插架太多让网站打开速度变慢。
网站引入的优缺点：
优点：
不必担心增加项目的体积
缺点：
引入有时会不稳定
7：拓展：
写法不同
实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button>点击</button>
	</body>
	<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
//		$(function(){
//			$('button').click(function(){
//				alert('卡卡卡')
//			})
//		})
//		$这个美元符号是简写,展开的写法是jQuery  jQuery===$
//		jQuery(function(){
//			jQuery('button').click(function(){
//				alert('急急急')
//			})
//		})

//		alert(jQuery===$)//true
		//下面的写法是Jq中 古老的一种写法，一般不用
//		$(document).ready(function(){
//			$('button').click(function(){
//				alert('通天塔')
//			})
//		})
	</script>
</html>

8：jq库的版本：

旧版本和新本版的问题。
旧版本更稳定，兼容性更好。
新版本只是增加了一些新的方法，最新版本不建议用，因为稳定性不好。
jq 2.0以上版本不在支持ie6/7/8浏览器。