jQuery学习笔记
DOM操作
查找节点
[1]元素节点：jQuery选择器
[2]元素属性：attr()或其他方法
[3]文本节点：text()读写
创建节点
$(html代码) $("<li id='gz'>广州</li>")
注意：HTML代码格式规范
新创建的节点，不会自动添加到文档中
插入节点
[1]根据父子关系插入
父对象.append() 干爹.append(郭美美)
子对象.appendTo(父对象) 郭美美.appendTo(干爹)
append()
$("#city").append($("<li id='gz'>广州</li>"));//相当于 dom对象.appendChild()
appendTo()
$("<li id='sz'>深圳</li>").appendTo("#city");
prepend()
$("#game").prepend("<li>丢沙包</li>");
prependTo()
$("<li>跳房子</li>").prependTo("#game");
[2]根据兄弟关系插入
after() 大哥.after(小弟) 大哥后面跟着一个小弟
$("#bj").after("<li>长春</li>");
insetAfter() 小弟.insertAfter(大哥) 大哥我要跟着你
$("<li>重庆</li>").insertAfter("#bj");
before() 小弟.before(大哥) 大哥请你罩着我
$("#rl").before("<li>跳皮筋</li>");
insertBefore() 大哥.insertBefore 大哥说：我来罩着你
$("<li>弹球</li>").insertBefore("#rl");
删除节点
在JS中，是父元素.removeChild(要删除的节点) 父亲把儿子扫地出门
在jQuery中，要删除的节点.remove() 儿子离家出走
$("#jpfc").remove();
父元素.empty()删除全部子节点和后代节点
$("#city").empty();
复制节点
clone()不复制行为
clone(true)连同绑定的事件一同复制
$("#bj").click(function(){
alert($(this).text());
}).clone(true).appendTo("#game");
替换节点
replaceWith(): 将所有匹配的元素都替换为指定的 HTML 或 DOM 元素
$("#bj").replaceWith("<li>大连</li>");
replaceAll():颠倒了的 replaceWith() 方法
$("<li>青岛</li>").replaceAll("#city li"); city下所有的li都被换成了<li>青岛</li>
包裹节点
<UL id=city>
<FONT color=blue><LI id=bj>北京</LI></FONT>
<FONT color=blue><LI>上海</LI></FONT>
<FONT color=blue><LI>东京</LI></FONT>
<FONT color=blue><LI>首尔</LI></FONT>
</UL>
$("#city li").wrap("<font color='blue'></font>");
<UL id=city>
<FONT color=red>
<LI id=bj>北京</LI>
<LI>上海</LI>
<LI>东京</LI>
<LI>首尔</LI>
</FONT>
</UL>
$("#city li").wrapAll("<font color='red'></font>");
<LI id=bj><FONT color=blue>北京</FONT></LI>
$("#city li").wrapInner("<font color='blue'></font>");
属性操作
attr(属性名,属性值) 设置属性
$("#username").attr("disabled","disabled");
removeAttr(属性名) 移除属性
$("#username").removeAttr("disabled");
html()方法
alert($("#city").html());
不是替换元素节点本身的HTML代码，而是替换其内部的HTML代码
$("#bj").html("<font color='blue'>南京</font>"); <li>北京</li> --> <li><font color='blue'>南京</font></li>
父对象.children()获取全部子节点，不包括后代节点
$lis = $("#city").children();
eq(索引值) 可以返回指定索引对应的对象
alert($lis.eq(0).text());
alert($lis.eq(1).text());
alert($lis.eq(2).text());
alert($lis.eq(3).text());
CSS操作
1.hasClass(class名) 返回布尔值，真：存在，假：不存在
var $sub = $("div.SubCategoryBox");
alert($sub.hasClass("SubCategoryBox"));
2.removeClass(class名) 移除 class
$sub.removeClass("SubCategoryBox");
alert($sub.hasClass("SubCategoryBox"));
3.addClass(class名) 添加 class
$sub.addClass("SubCategoryBox");
4.toggleClass(class名) 切换 class
$("div.showmore a").click(function(){
$sub.toggleClass("SubCategoryBox");
return false;
});
5.css(样式属性) 返回属性值 css(样式属性,属性值) 设置样式为指定的属性值
$sub.css("background","#bbffaa");
6.opacity属性透明度
alert($sub.css("opacity"));
$sub.css("opacity",0.5);
7.height()高度 width()宽度
alert("height="+$sub.height());
alert("width="+$sub.width());
$sub.height("200px");
$sub.width("800px");
8.offset()获取元素在当前视窗中的相对位移。返回值属性：top距视窗上边框距离，left距视窗左边框距离
alert("top="+$sub.offset().top);
alert("left="+$sub.offset().left);
$sub.offset().top = "120px";
从jQuery的角度看事件
1.window.onload和$(document).ready()的区别
[1]执行的时机不同
window.onload要等整个窗口（包括图片）都加载完才触发执行
$(document).ready()在DOM结构绘制完成后就可执行
[2]编写的个数
window.onload编写多个时，只有最后的那个起作用
$(document).ready()可以编写多个，都生效
[3]简化写法
window.onload 无
$(document).ready()可简写为 $()
Tip：jQuery中真正与window.onload 完全等价的是$(window).load()方法
2.事件的绑定
bind(type,[data],fn)
type:事件类型 [data]:与事件有关的数据 fn:响应函数
3.事件的合成
hover()方法 hover(function(){鼠标移入时的操作},function(){鼠标移出时的操作}) mouseover+mouseout
toggle(fn1,fn2,...,fnn) 用于把多个鼠标单击事件合并在一起，所传入的响应函数会依次执行，并循环
切换元素的显示状态，例：
$(":header").click(function(){
$("div.content").toggle();
})
4.事件的冒泡
产生的原因是：监听区域的重合。取消的方式是return false;
return false 还可以取消元素的默认行为
表单里提交按钮的提交行为
超链接的跳转行为
5.事件对象的属性
事件对象：封装了与事件有关的一系列信息，在事件触发时创建
接收事件对象：给响应函数增加一个形式参数 function(event){event.pageX...}
event.pageX 事件发生时，鼠标距离页面左边框的距离
var x = event.pageX;
event.pageY 事件发生时，鼠标距离页面上边框的距离
var y = event.pageY;
6.事件的移除
$("li").click(function(){
alert($(this).text());
});
//使用unbind(事件类型)函数 移除事件
$("#bj").unbind("click");
//使用one(事件类型,响应函数) 事件只执行一次，然后会被移除
$("#bj").one("click",function(){
alert($(this).text());
});
动画
1.show() hide()
可以传入一个毫秒值控制显示/隐藏的速度，也可以是三种预定速度之一的字符串("slow","normal", or "fast")
2.fadeIn()淡入fadeOut()淡出
三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
3.slideDown(), slideUp()
三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
4.slideToggle()
通过高度变化来切换所有匹配元素的可见性
5.fadeTo(速度值，不透明度) 不透明度0为完全透明，1为完全不透明
