首先说说我为什么想学jQuery,一是想完善一下http://ttt.yilee.info,二是想自己想写一些特效,用在WordPress上,这样就不用插件了,very cool。。。
jQuery是JavaScript的一个框架,它是轻量级的js库(压缩后只有几十k) ,兼容各种浏览器(觉得这点就够cool了)。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供Ajax交互。
首先见识一下jQuery的强大,最经典的例子就是斑马条纹的表格,即表格隔行换色,过去如果用纯JS的话,需要先得到表格对象,然后用for语句来遍历,判断如果是奇数行怎么样怎么样,但现在用jQuery只需一句话:
$(‘table tr:nth-child(even)’).addClass(‘striped’);
write less ,do more!
下面是一些基础知识,比较杂:
首先自然是最经典的Hello World:
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/JavaScript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<script type="text/JavaScript">
alert(‘jQuery ‘ + jQuery.fn.jquery);
</script>
</body>
</html>
这段代码可以作为任何时候添加Jquery到您Web页面的写法的模版,这里推荐使用Google-hosted方式加载minifled版的jQuery文件,这是因为使用Google存储的jQuery更加稳定、可靠、速度也更加快,当然在本地调试不能上网也可以下载下来的。
使用选择器及jQuery函数选择DOM元素
jQuery提供了2种方式以便使用者可以从DOM中选择你需要的元素。
2. $(document.getElementsByTagName(‘a’))
在特定的上下文中查找元素
《jQuery Cookbook》上的一个例子,理解起来很方便:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<form>
<input name="" type="checkbox" />
<input name="" type="radio" />
<input name="" type="text" />
<input name="" type="button" />
</form>
<form>
<input name="" type="checkbox" />
<input name="" type="radio" />
<input name="" type="text" />
<input name="" type="button" />
</form>
<input name="" type="checkbox" />
<input name="" type="radio" />
<input name="" type="text" />
<input name="" type="button" />
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/JavaScript">
//查询所有的form元素中的input,打印"8 inputs"
alert(‘selected ‘ + jQuery(‘input’, $(‘form’)).length + ‘ inputs’);
//使用DOM对象作为第2参数的方式,在第一个form元素下查找input元素,打印"4 inputs"
alert(‘selected’ + jQuery(‘input’, document.forms[0]).length + ‘ inputs’);
//使用jQuery对象作为第2参数的方式,在body下查询所有的input元素,打印"12 inputs"
alert(‘selected’ + jQuery(‘input’, ‘body’).length + ‘ inputs’);
</script>
</body>
</html>
如上例子:当你使用CSS选择器的时候,你可以向jQuery方法中传递2个参数,后面的参数是用以指定预查找的DOM元素的上下文,可以是一个DOM对象的引用,一个jQuery对象或是document对象。
关于JS代码放置的位置
从技术上来讲,你可以将JS文件放在代码的任意地方。
1,传统的JS文件放置的最优方法是在文档的head
之内,这种做法有个优点就是可以确保在文档显示之前,所有的 JavaScript 代码都已被加载执行,而这种方法的缺点则在于,你的脚本会延迟文档的显示。
2,根据JQuery Cookbook,当JS代码放在页面结束位置时页面加载是最快的,换句话说,当你将JavaScript代码放在web页面底部时,浏览器会在加载完整个页面后加载JavaScript代码。这是一件好事,因为大多数浏览器在JavaScript引擎将整个页面中的JS代码编译完成前会停止一切其他的加载操作,这种方法的缺点是 Html在你的 JavaScript 被加载之前就变得可用了,这会引发不可预知的问题。
最后所谓工欲善其事,必先利其器,
开发自然少不了IDE,eclipse有个Spket插件,具体安装方法可以参考《Eclipse安装Spket插件》 。
不错,我也开始学jQuery了。