jQuery学习笔记

复制节点

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

 

 

本教程由尚硅谷教育大数据研究院出品，如需转载请注明来源。