JQuery概述和一个简单案例

最新推荐文章于 2023-05-08 13:46:02 发布

小李讲源码

最新推荐文章于 2023-05-08 13:46:02 发布

阅读量460

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/ncut_LJD/article/details/50902693

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JQuery是什么？

在javascript基础上开发出来的，对javascript进行了封装，功能更强大，操作更方便的一种javascript库。

JQuery=Javascript + Query = 通过Javascript从文档中查询元素，并对其进行操作。

2006年1月 John Resig 开源(open source)

轻量级的javascript库。

特点：简洁的语法，跨浏览器的兼容性，适合用于文档遍历，DOM操作，事件处理，动画特效，AJax等

设计理念：write less，do more

主要功能：
获取网页元素、设置网页外观、更改网页内容、响应用户操作（事件）,添加动画效果，实现AJax交互

获得青睐的原因
1.轻量级，只有几十K
2.跨浏览器兼容性
3.基于CSS选择器
4.链式操作
5.面向集合
6.详细的文档
7.丰富的UI控件(easy ui) ui=user interface=用户界面
8.与其他js库可以共存（Dojo,extjs）
9.免费开源

开发环境配置

下载JQuery，jquery.com
jQuery 1.x 和 jQuery2.x(不支持ie6,7,8)
压缩版与非压缩版

DW CS6 本身支持JQuery，用早期版本的DW，需要安装插件，才会有JQuery语法提示。

一个简单的例子

一个隐藏的Div 点击显示按钮就会在一定时间内显示出来

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jQuery/jquery-1.12.1.js"></script>
<script type="text/javascript">
$(function(){
	$("#info").click(function(){
		$("#dv").show(3000);
	});
});
</script>
<style type="text/css">
#dv
{
	width:500px;
	height:500px;
	background-color:red;
	display:none;
}
</style>
</head>

<body>
<input type="button" value="提示" id="info"/>
<div id="dv">
</div>
</body>
</html>

没有点提示前