欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JQuery入门

程序员文章站 2022-07-14 22:52:13
...

JQuery入门

 

什么JQuery:

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

jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

 

JQuery的作用:

1. 写更少的代码,做更多的事情: write Less ,Do more

2. 将我们页面的JS代码和HTML页面代码进行分离

 

JQ的开发步骤: (将我们页面的JS代码和HTML页面代码进行分离)

1. 导入JQ相关的文件
2.  文档加载完成事件: $(function)  : 页面初始化的操作: 绑定事件, 启动页面定时器
3. 确定相关操作的事件
4. 事件触发函数
5. 函数里面再去操作相关的元素

 

JQ的入门

首先要向项目文件夹下的js文件夹中导入js库jquery-1.11.0

然后在script中导入这个文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--导包,引入JQ的文件-->
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		
		<script>
			//js文档加载完成的事件
			window.onload = function(){
				alert("window.onload   111");
			}
			
			window.onload = function(){
				alert("window.onload   222");
			}
			
			/*文档加载完成的事件*/
			jQuery(document).ready(function(){
			 	alert("jQuery(document).ready(function()");
			});
			/*
			 	jQuery  简写成 $
			 */
			$(document).ready(function(){
			 	alert("$(document).ready(function()");
			});
			
			/*
				最简单的写法 
			*/
			$(function(){
				alert("$(function(){");
			});
			
		</script>
	</head>
	<body>
	</body>
</html>

 

相关标签: JQuery入门

上一篇: jq事件

下一篇: CSS——浮动