【jQuery】1.jquery基础知识1

最新推荐文章于 2025-06-24 08:45:44 发布

原创最新推荐文章于 2025-06-24 08:45:44 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ajax #javascript #dom #html

jQuery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了jQuery框架的基本概念，展示了其在简化DOM操作、事件处理及AJAX应用方面的优势，并通过实例对比了原生JavaScript与jQuery的不同之处。

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

1.jquery简介
Jquery是继prototype之后又一个优秀的Javascript框架。它是轻量级的js库，它兼容CSS3，兼容
各种浏览器(IE6+,FF1.5+,safari2.0+,opera9.0+)
jquery凭借简洁的语法，出色的兼容性，小巧的体积迅速占领前端开发这一阵地。
它极大地简化了js开发人员遍历html文档，操作DOM，处理事件，执行动画和开发ajax的操作。

2.jquery的优势
(1)轻量级
(2)强大的选择器
(3)出色的DOM操作封装
(4)完善的事件和事件对象兼容机制
(5)完善的ajax
(6)不污染全局变量($可以随时交出控制权)
(7)出色的浏览器兼容
(8)方便的链式操作
(9)隐式迭代（一般情况下不需要for循环遍历dom对象）
(10)完善的文档（官方文档相当完备，官方blog每次更新都会有详细说明）
这里给大家提供一份中文的jQuery开发文档:链接
(11)丰富的插件

例如下面这个:

<!doctype html>
<html lang="en">
<head>
	<title>demo1</title>
</head>
<body>
	<a href="#">aaaaaaaaaaaaaaaaaaa</a>
	<!-- 当页面加载完毕的时候，我要让a标签的文字变成红色
	当我点击这个a标签的时候，我需要让这个a标签有一个黄色的边框-->
	<script>
		alert(1);
		var a=document.getElementsByTagName('a')[0];
		a.style.color="red";
		a.onclick=function(){
		    this.style.border="10px solid #f90";
		}
	</script>
</body>
</html>

我们利用jQuery可以改写成这样:

<!doctype html>
<html lang="en">
<head>
	<title>demo1</title>
	<script src="jquery-1.8.0.min.js"></script>
</head>
<body>
	<a href="#">aaaaaaaaaaaaaaaaaaa</a>
	<!-- 当页面加载完毕的时候，我要让a标签的文字变成红色
	当我点击这个a标签的时候，我需要让这个a标签有一个绿色的边框-->
	<script>
		alert(1);
		var a=$('a');
		a.css('color','red').click(function(){
			$(this).css('border','10px solid #38a38a');
		});
		
	</script>
</body>
</html>

可以看到原来获取一个节点对象要写很长的语句，用jQuery就很简洁。onclik事件也不用分开去写，十分方便。

关于隐式迭代，我们来看下一个样例:

<!doctype html>
<html lang="en">
<head>
	<meta charset="GBK">
	<title>demo2</title>
</head>
<body>
	<p>我是第1个标签</p>
	<p>我是第2个标签</p>
	<p>我是第3个标签</p>
	
	<!-- 当我点击每个p标签的时候，我要弹出当前p标签里的内容 -->
	<script>
		var p=document.getElementsByTagName('p');
		
		for(var i=0;i<p.length;i++){
			p[i].onclick=function(){
				alert(this.innerHTML);
			};  
		}
	</script>
</body>
</html>

使用jQuery改写为:

<!doctype html>
<html lang="en">
<head>
	<meta charset="GBK">
	<title>demo2</title>
	<script src="jquery-1.8.0.min.js"></script>
</head>
<body>
	<p>我是第1个标签</p>
	<p>我是第2个标签</p>
	<p>我是第3个标签</p>
	
	<!-- 当我点击每个p标签的时候，我要弹出当前p标签里的内容 -->
	<script>
		var p=$('p');
		p.click(function(){
			alert($(this).html());
		});
	</script>
</body>
</html>

可以看到，使用jQuery我们可以不使用for循环，实际上是使用了隐式循环，一般情况下不需要for循环遍历dom对象，很灵活。

3.jquery的不足
(1)不能向后兼容。
新版本可能不兼容早期版本，如果想要升级jquery版本可能会付出额外的维护成本

(2)插件兼容
和上一点相同

(3)插件之间的冲突
如果在同一张页面上引用多个插件时，可能会引起冲突现象，特别是用这些插件依赖
相同事件或相同选择器时最容易出错，虽然这不是jquery本身的错误。

(4)在大型框架框架中，特别是在开发后台UI框架的时候，jquery对于动画支持相对来说不太给力，需要用引用jquery UI来进行弥补

4.获取jquery，版本的选择
(1)官方网站： http://www.jquery.com

(2)cdn获取：
a) 谷歌CDN： http://www.google-jquery-cdn.com/
b) 百度CDN： http://developer.baidu.com/wiki/index.php?title=docs/cplat/libs
c) 微软CDN： http://msdn.microsoft.com/zh-cn/library/ee517318.aspx
d) 新浪CDN： http://sae.sina.com.cn/?m=devcenter&catId=147

5.jQuery的引入
(1)引入jquery

<script src="jquery-1.8.0.min.js"></script>

(2)引入CDN的jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js"></script>

(3)优先引入CDN上的jquery,如果失效再引入本地的jquery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-1.8.0.min.js"></script>')</script>

6.编写第一个jquery程序

<script>
    $(document).ready(function(){
        alert('hello world!!!');
    });
</script>

7.$(document).ready()和window.onload的区别
由于html是自上而下读取的文档流，如果javascript代码写在html中文档的前面，而导致先读取javascript代码后读取html文档，造成html文档流失。

如果将代码包裹在window.onload中就会防止这种情况:

<!doctype html>
<html lang="en">
<head>
	<meta charset="GBK">
	<title>demo2</title>
	<script>
		window.onload=function(){
			alert(1);
		}
	</script>
</head>
<body>
	<p>我是文字</p>
	
</body>
</html>

弹出对话框的同时会将下面的“我是文字”加载出来

jQuery使用的是$(document).ready()
那么$(document).ready()和window.onload有什么不同呢？

不同点1: 执行时机
window.onload执行时机:等网页中所有的资源加载完毕后(包括图片，flash，音频，视频)才能执行。

$(document).ready()执行时机:等dom树加载完毕后就可以执行

不同点2: 编写个数
window.onload只能写一个，而$(document).ready()可以写N个

不同点3: 简化写法
window.onload无简化写法，而$(document).ready()简化方法可以写为$(function(){})

测试:

<!doctype html>
<html lang="en">
<head>
	<meta charset="GBK">
	<title>demo2</title>
	<script src="jquery-1.8.0.min.js"></script>
	<script>
		$(document).ready(function(){
			alert('我是jQuery的');
		});
	
		$(function(){
			alert('我是简写的');
		});
	</script>
</head>
<body>
	<p>我是文字</p>
	
</body>
</html>

转载请注明出处：http://blog.youkuaiyun.com/acmman/article/details/48971465