imovies
当前位置:首 页>> 百 宝 箱 >>jQuery : Write less , Do more 初步学习

jQuery : Write less , Do more 初步学习

  jQuery 早就用到了,基本折腾网站的人应该都有所了解,很多网页上的特效都和它有关。只是之前都是用别人现成的东西,拿来自己配置换换样式而已,没有认真的去研究学习一下。前阵子做项目,个别搞不定的地方,可用 jQuery 搞定,于是乎又勾起了俺的好奇心,研究一下 jQuery 到底是个啥,能干什么。于是乎官网去瞅瞅,然后Google一些中文的资料和教程,花了几天时间从头到尾彻底的了解了个大概。本身俺是对编程写代码有恐惧的,什么变量,运算,条件,循环,事件,方法,属性,不出半小时俺就被它们弄奔溃了。所以这次是硬着头皮啃完,也仅仅是想在自己需要的时候,能知道怎么用 jQuery 来解决一些小问题。想一下子吃成胖子那是不现实的,只能慢慢积累了,下面就是俺啃完之后的一点小小的总结。 jQuery : Write less , Do more 初步学习
  jQuery 是一个优秀的 Javascript 库,封装了很多方法和事件的函数,可以让你对 DOM(Document object model:文档对象模型)进行操作,先找到你要操作的元素,然后你可以对这些元素进行改变,比如改变样式,显示还是隐藏,当然也包括做一些动画之类。在 jQuery 的基础上,还有很多Plugin被开发出来用于各个方面,如果无法满足你的需求,你也能自己写个专用的。更多介绍自己想看的话可以自行搜索,资料一大把,俺就唠叨这么点。
  上面的图片,俺把 jQuery 能干的事形象化了一下,也不知道是否合适,俺是觉得挺像的。漂亮 MM[$(".btn-slide")] 就是你想要操作的元素,看见 [click] 就是事件,心花怒放 [slideToggle("fast")] 就是结果,所以简化来说就是:俺 [$("#panel")] 看见 [click] 漂亮 MM[$(".btn-slide")] 就心花怒放 [slideToggle("fast")]......
  jQuery 要干的事情就比较明朗了,先找到你要操作的元素,再给元素添加事件,一旦事件触发,去实现你想要的结果,就这么简单。其实也不简单,jQuery 提供了很多方法来让你找到你想操作的元素,class,id,tagname 等等,需要你了解 css 和 html,否则寸步难行。找到之后,再给元素赋予一个事件,比如元素被鼠标单击、双击、经过,按下键盘上的按键,被选择等等,一旦事件被触发,你可以对这个元素本身赋予一个动作,也就是让元素做出什么改变,当然也可以对其他元素进行改变。这样就完成了一个完整的交互过程,网页上的内容不再是纯静态,而是可以给用户带来不一样的体验。下面是个简单的实例,区区几行Javascript代码就搞定:

心花怒放啊......
可是 MM 走光了......

<script type="text/javascript">
$(document).ready(function(){
	$(".button_s").click(function(){
		$("#panel").slideToggle("fast");
		$(this).toggleClass("button_s_active");
		$(".slidex").toggleClass("slidex_active");
		$(".arrow").toggleClass("arrow_active");
		return false;
	});	 
});
</script>
HTML代码:
<!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" />
<title>jQuery : Write less , Do more . </title>
<link href="demo.css" rel="stylesheet" type="text/css" />
<!-- 先引入样式表,具体位置看你自己了 -->
<script type="text/javascript" src="jquery.js"></script>
<!-- 上面先引入jQuery,具体版本和位置看你自己了 -->

<script type="text/javascript">
$(document).ready(function(){
	$(".button_s").click(function(){
		$("#panel").slideToggle("fast");
		$(this).toggleClass("button_s_active");
		$(".slidex").toggleClass("slidex_active");
		$(".arrow").toggleClass("arrow_active");
		return false;
	});	 
});
</script>

</head>
<body>
<div class="boxer">
<div id="panel" title="你心花怒放了不?">
	<p>心花怒放啊......<br />可是 MM 走光了......</p>
</div>
<p class="slidex"><a href="#" class="button_s" title="看见漂亮MM了吗?"></a></p>
<p class="arrow"></p>
</div>
</body>
</html>
CSS样式表:
body {
	margin: 0 auto;
	padding: 0;
	font: 75%/120% '微软雅黑',Arial, Helvetica, sans-serif;
}
.boxer {
	width: 800px;
	margin:0 auto;
}
a:focus {
	outline: none;
}
#panel {
	background: url(images/back.png) repeat;
	height: 200px;
	border:solid 4px #f68e1c;
	text-shadow:2px 2px 1px rgba(0,0,0,0.4);
	border-bottom:0px;
	color:yellow;
	display: none;
}
#panel p {
	width:80%;
	font-size:36px;
	height:150px;
	line-height:50px;
	padding:30px 0 0 0;
	margin:10px auto;
	background: url(images/h1_128.png) no-repeat right center;
}
.slidex {
	margin: 0;
	padding: 0;
	height:40px;
	overflow:hidden;
	border-top: solid 4px #f68e1c;
	background: url(images/btn-slide.gif) no-repeat center top;
}
.slidex_active {
	background-position: center -40px;
}
.button_s {
	background: url(images/white-arrow.gif) no-repeat right -50px;
	text-align: center;
	width: 144px;
	height: 31px;
	padding: 10px 10px 0 0;
	margin: 0 auto;
	display: block;
	color: #fff;
	text-decoration: none;
}
.button_s_active {
	background-position: right 12px;
}
.arrow {
	padding:0 0 0 0px;
	height:50px;
	width:300px;
	margin:0px auto;
	background: url(images/arrow.png) no-repeat center top;
}
.arrow_active {
	background-position: center -50px;
}
参考资料:http://webdesignerwall.com/tutorials/jquery-tutorials-for-designers
推荐资料:http://www.cssrain.cn/jquery/index.htm
微信支付宝

标 签:CSSjQueryHTML学习编程Javascript

评 论0 引 用0 浏 览5400

上一篇知名网站 in Fashion

下一篇《乌鲁木齐市物业管理条例》 留下备用

说点什么:

正文内容:

 

图片博文

点击查看原图,原图模式下ESC键退出。House of Cards 纸牌屋

扫一扫分享之

人到穷途应一笑,几凡失意仍能傲。成败何须问江湖,我心依旧任逍遥。
这一生只想好好做个平凡的人,有个家有个梦,陪我迎接每一个早晨。
这一生只想好好做个平凡的人,何必争何必问,只有快乐开心才是真。