蚂蚁部落

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1384|回复: 0

jQuery的简介

[复制链接]
发表于 2013-1-23 14:47:08 | 显示全部楼层 |阅读模式
基本教程
基本教程: -
本帖最后由 antzone 于 2014-3-23 16:41 编辑

jQuery是什么:
jQuery是一个轻量级的JavaScript库。所以遵循javascript的语法,并具有自身的特点。
jQuery是现在网页中不可或缺的一种高效简洁的语言,为浏览者呈现缤纷的网页有着重要的意义。
jQuery的优势:
1.具有良好的浏览器兼容性,所有的主流浏览器对jQuery有着良好的支持。
2.实现了脚本与页面分离。让页面更加清晰,也有利于搜索引擎优化。
3.高效性。往往简短的代码能够实现良好的效果。
4.简单易学。没有编程经验的前台人员也能够很快上手。
jQuery的使用方式:
一.在页面<script></script>标签内直接编写代码。例如:
[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  alert("蚂蚁部落欢迎您"); 
}) 
</script> 
</head> 
<body> 
</body> 
</html>

以上方法可能会造成页面非常的庞大。
2.引入外部js文件。就是把网页所需要的jQuery代码组织在独立的js文件中,然后引入,和CSS中的外部样式表一个道理。例如:
[HTML] 纯文本查看 复制代码运行代码
<head>
<title>蚂蚁部落</title>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/function.js"></script>
</head>

实例代码:
[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div 
{
  height:150px;
  width:150px;
  background-color:green;
}
</style>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("button").click(function(){ 
    $("div").hide(); 
  }); 
}) 
</script>
</head>
<body>
<div></div>
<button>点击隐藏上面方块</button>
</body>
</html>

点击按钮可以将绿色的div隐藏。

发表回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复返回顶部 返回列表