jQuery学习笔记
1:vs2010提供jQuery智能提示功能,vs2008则需要安装vs2008sp1补丁(补丁全名: VS2008SP1CHSX1512981,大概900MB),可以上MS搜索下载.
2:jQuery脚本库分为vdoc和min版本.只有vodc版本才具备智能提示的功能,正式上线的web产品必须引用min版本.所有可以在开发环境下引用vodc版本. 如果我们更新了脚本, 可以通过"Ctrl+Shift+J"快捷方式更新VS的智能感知,或者单击 编辑->IntelliSense->更新JScript Intellisense
1.2.6版本下载地址(支持中文智能提示)
http://files.cnblogs.com/freegarden/jQuery脚本库.rar
3:当然独立的js文件添加如下语句后同样可启动智能提示功能
/// <reference path="jquery-1.2.6-cn-vsdoc.js" />
JQuery核心函数(api文档-核心-Jquery核心函数)
1:$(elements):获取dom对象集合,返回jQuery
用的最多,传统的js获取dom对象一般通过getElementById,ByName或ByTagName
Jquery中获取的方式很多(参考api文档)
2:$(callback):DOM文档加载后执行函数
$(document).ready(fn)的缩写,可多次书写
3:$(html,[ownerdocument]): 根据提供的原始 HTML 标记字符串，动态创建由 jQuery 对象包装的 DOM 元素
4:$(expression,[context]):以上核心函数的基本函数
在context范围内查找,匹配,或选择,包含选择器的字符串
DOM对象和jQuery包装集(合)
这里说的jQuery包装集,API帮助文档中指Array<Element>,所以jQuery
包装集里面的对象类型是DOM对象
<div id=”hello”>hello</div>
<div class=”world”>world</div>
Var DOMObject=document.getElementById(”hello”)//这是一个DOM对象
Var jQueryObject=$(”#hello”)// 这是一个jQuery包装集
Var DOMObject2=$(”.world”)[0]//因为是一个Array,所以可以通过索引访问,前面说过集合对象是DOM类型.所以这个时候返回的是DOM对象
Var jQueryObjcet2=$(DomObject)// DOM对象转为jQuery包装集,这个时候就可以用jQuery的各种方法操作DOM对象了
推荐API文档学习先后顺序 1:选择器(用法感觉像CSS,俩者相连更容易学习了)选择器类别:基本(必须,用的最多),属性过滤器和表单选择器用的也比较多,其他的感觉用的少.
动态创建元素
例子:在id为test的div中添加元素p,内容为hello,红色字体
1:传统写法:通过使用 document.createElement 方法创建Dom元素, 然后通过appendChild方法为添加到指定对象上
var child = document.createElement("p");
child.innerText = "hello";
child.style.color = "#ff0000";
var owner = document.getElementById("test");
owner.appendChild(child);
2:jQuery写法,用到jQuery核心函数jQuery(html,[ownerDocument]),再使用appendTo追加到指定元素中
$("<p style='color:#ff0000;'>hello</p>").appendTo($("#test"));或者
$("<p/>").css("color", "#ff0000").html("jquery").appendTo($("#test"));
可以发现,使用jQuery代码少很多
操作元素的属性和样式
例子:改变字体颜色
<style type="text/css">
.a{ color:Red;}
.b{ color:Blue;}
</style>
<p class="a">测试1</p>
<p class="a">测试2</p>
<input id="send" type="button" value="改变颜色" />
jQuery代码:可以参考API中属性和css介绍,下面的代码效果一样
$("p").toggleClass("a");
$("p").toggleClass("b");
js代码:通常使用getAttiribute和setAttribute操作元素的属性
<script type="text/javascript">
function change() {
var p = document.getElementsByTagName("p");
for (i = 0; i < p.length; i++) {
if (p[i].getAttribute("className") == "a")
p[i].setAttribute("className", "b");
else
p[i].className = "a";
}
}
</script>
jquery中最吸引人的就是动画效果和ajax了,学习者认真看看api说明文档应该可以很好的入门.动画效果的例子(手风琴菜单)和ajax请求的例子(用户注册前判断用户是否存在)
可以在地址http://www.cnblogs.com/freegarden/archive/2009/12/26/1632492.html中下载demo参考第4个和第15个例子