JQuery认识

最新推荐文章于 2024-04-24 10:00:20 发布

月光派件中。

最新推荐文章于 2024-04-24 10:00:20 发布

阅读量823

点赞数

本文链接：https://blog.csdn.net/weixin_46064684/article/details/108911625

版权

JQuery

什么是jQuery

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

jQuery的作用

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

Query的优点

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

jQuery的引入方式

本地引入（外链接）
<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
网址引入
百度：
<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>
$(function(){})类似window.onload,告诉浏览器先加载html和css在加载js代码

本地引入和网站的引入的区别：

本地引入的优缺点：
优点：
1：本地引入JQ加载的时候速度更快.
2：本地引入更加稳定。
缺点：
1：但是会增加项目的体积，本地引入的库或者框架或者插架太多让网站打开速度变慢。

网站引入的优缺点：
优点：
1：不必担心增加项目的体积。
缺点：
1：引入有时会不稳定。

拓展：

写法不同（参考4拓展html页面）

jq库的版本：

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

如果想了解学习jq，建议去jq官网自学API

$==document.getElementById(); $('属性')

本地引入JQ库

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button id="btn">点击</button>
	</body>
	<script src="../js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
	<!--我们本地引入JQ库就像引入本地js一样就行-->
	<script type="text/javascript">
//		var obtn=document.getElementById('btn');
//		btn.οnclick=function(){
//			alert(1)
//		}

		$(function(){
			$('#btn').click(function(){
				alert(2)
			})
		})
	</script>
</html>

网站引入JQ

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button class="btn">点击</button>
	</body>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<!--
		1：家里必须有网
	-->
	<script type="text/javascript">
		$('.btn').click(function(){
			alert('你好')
		})
	</script>
</html>