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为完全不透明