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

很久之前计划的看一下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