乌鸦的年假马上就结束了,随之结束的还有乌鸦最喜欢的夏天。
本来有许多的计划,但是被落实的实在太少了,少到惨不忍睹,勤奋与懒惰也许就差在这里。

很久之前计划的看一下codeschool(http://www.codeschool.com/)的jQuery视频,一直拖到今天才看了一些,很无耻的看了网友翻译加上中英文字幕的版本,在这里乌鸦感谢这些无私奉献的网友。另外,codeschool的视频真的很不错,即使没有这些字幕,单看视频也完全能看懂要讲什么。

以下是乌鸦做的一些随笔:

第四集:

使用.first() 的效率比使用伪类:first效率更高。经乌鸦测试,使用方法比伪类效率确实高。

[code=php]
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
for(var j=0; j<20; j++){
var startClass = new Date();
for(var i=0;i<1000;i++){
$('#menuList :first');
}
var resultClass = new Date() - startClass;

var startMethod = new Date();
for(var i=0;i<1000;i++){
$('#menuList').first();
}
var resultMethod = new Date() - startMethod;

$('#result').append('<div>resultMethod:'+resultMethod+',resultClass:'+resultClass+'</div>');
}
});
</script>
</head>
<body>
<div id='menuList'>
<li>葱爆羊肉</li>
<li>玉米排骨</li>
<li>蒜蓉扇贝</li>
<li>地三鲜</li>
<li>炝炒圆白菜</li>
</div>
<div id='result'></div>
</body>
</html>
[/code]

1



第五集:

记录几个方法,
.append()/.prepend()/.after()/.before()
把元素添加到目标元素的下级的后面/下级的前面/同级的后面/同级的前面

.appendTo()/.prependTo()/.insertTo()/.insertBefort()
把目标元素添加到元素下级的后面/下级的前面/同级的后面/同级的前面

第七集:

.closest() / .parents()
前者从当前元素开始遍历,沿DOM树向上遍历,直到找到已应用选择器的一个匹配为止,返回包含零个或一个元素的 jQuery 对象。
后者从父元素开始遍历,沿 DOM 树向上遍历,直到文档的根元素为止,将每个祖先元素添加到一个临时的集合;如果应用了选择器,则会基于该选择器对这个集合进行筛选。

[code=php]
<html>
<head>
<title>Test2</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#result_closest').text( $('.memo').closest('.baseFood').html() );
$('#result_parents').text( $('.memo').parents('.baseFood').html() );
$('#result2_closest').text( $('#lamb').closest('li').length);
$('#result2_parents').text( $('#lamb').parents('li').length );
});
</script>
<style>
.memo{font-size:10px;}
</style>
</head>
<body>
<div id='menuList'>
<ul>
<li>葱爆羊肉
<ul>
<li class='baseFood'>羊肉<span id='lamb' class='memo'>(最好是羊肉卷)</span></li>
<li class='baseFood'>大葱<span class='memo'>(葱白)</span></li>
<li class='baseFood'>孜然粒<span class='memo'>(孜然粉不如孜然粒香)</span></li>
</ul>
</li>
<li>乌鸦炸酱面
<ul>
<li>乌鸦</li>
<li>酱面</li>
</ul>
</li>
<li>玉米排骨</li>
<li>蒜蓉扇贝</li>
<li>地三鲜</li>
<li>炝炒圆白菜</li>
</ul>
</div>
closest:<div id='result_closest'></div>
patents:<div id='result_parents'></div>
closest2:<div id='result2_closest'></div>
patents2:<div id='result2_parents'></div>
</body>
</html>
[/code]

1



第八集:

获取自定义元素的值

  • 羊肉(最好是羊肉卷)
  • 使用 $('#lamb').data('myself') 可以获得 东来顺羊肉卷 。

    第九集:

    .slideDown()/.slideUp()/.slideToggle()
    使目标元素以滑动的方式显示/隐藏/显示隐藏交替,滑动方式比直接使用hide()/show()体验性要好一点儿,不会太突兀。

    第十集:

    在js中进行数值计算时,通常都是使用Number或Float进行转换,但是对于jQuery来说,在数值字符串前加一个'+'就可以进行加减乘除了。但是如果是非数值,也只能是转换失败了。

    分享一下新拍的照片:

    1


    参考资料:
    http://www.w3school.com.cn/
    http://www.codeschool.com/



    更多文章请访问:wang153723482.blog.163.com