学习前端的朋友应该都知道有那么基本比较经典的书籍,像head first系列,动物书系列等。在前端3要素最难的一个js学习的过程当中,也是有那么几本比较有名的书,像DOM编程艺术,锋利的jQuery,javascript语言精粹,javascript高级程序设计,javascript权威指南等;
这其中,比较适合我们初学者的是前面三本,后面两本的话到有一定js基础了再去看可能会比较好,权威指南其实更像是一本js的字典。
双11的时候我就买了锋利的jQuery,javascript语言精粹,在昨天晚上,11月18号终于到了,新书到手,总有一种想要立刻翻阅的好奇感,于是花了一个晚上,把锋利的jQuery的前两章看了一遍,都是一些还算基础的内容,但是也发现了不少 我之前没有注意到的知识点,因此想着将知识点整理出来,以后回过头来看看获取会有更大的收获。
我也将在这里分享我读完书中每一章我自己觉得需要注意的地方,因为我现在需要学习的东西还很多,所以,暂时就先看前两章了。
--------------------------------------------------------------------------我是分割线
第一章知识点补足:
jQuery对象和DOM对象的相互转换:------------------------------------------------
将jQuery转换成为DOM对象:
第一种如下:
var $x=$("#x")是jQuery对象
var x=$x[0]是DOM对象
第二种如下:
var $x=$("#x")是jQuery对象
var x=$x.get(0)是DOM对象
alert(x.checked)//检测
------------------------------------------------
将DOM对象转换成为jQuery对象:
var x=document.getElementById("x")//DOM对象
var $x=$(x)//jQuery对象
记住:$()函数就是jQuery对象的制作工厂,平时用的jQuery对象都是通过它制造出来的
第二章知识点补足:
在我们的html文档里面没有一个id为dd的元素,在我们的js引用当中会报错,
但是在jQuery里面是不会报错的,就是说我们写了如下代码,是会弹出111的
$(function(){
if($("#dd")){
alert("111");
}else{
alert("boom")
}
})
那我们可以通过下面两个方法来改进:下面两个都是会弹出boom的,证明不存在id为dd的元素
$(function(){
if($("#dd").length>0){
alert("111");
}else{
alert("boom")
}
})
--------------------------------------
$(function(){
if($("#dd")[0]){
alert("111");
}else{
alert("boom")
}
})
<div id="div1">
</div>
<div id="div2">
<p class="qw2">si</p>
</div>
写成这样的形式,做如下的操作:
$(function(){
$("div:parent").css("background","#f00");
})
发现两个div都会变红,仔细看:parent的介绍,含有子元素(包括文本元素)的
这里第一个div中这样的写法其实是有算一个空格的,因此第一个div也变红了,
当改成下面这样的形式时:第一个div的颜色就不会变了,因为空文本也是文本
<div id="div1"></div>
<div id="div2">
<p class="qw2">si</p>
</div>
然后对于:hidden
我写了如下的代码:发现弹出来的不是1,竟然是7,貌似是这个整个文档有一些隐藏元素,目前还没去了解过
<div id="div1">
<input type="text">
<input type="hidden" />
<input type="button" value="我是按钮">
</div>
<script>
$(function(){
alert($("#div1 :hidden").length);
})
</script>
当我稍微改动了一下代码:
<script>
$(function(){
alert($("#div1 :hidden").length);
})
</script>
在:hidden之前加了一个范围以后,弹出的是1,证明对了。
注意这里的:hidden,不单单指的是input:hidden 还包括display:none和visibility:hidden的元素
子元素选择器中;nth-child系列索引都是从1开始的,eq()的索引则是从0开始的,而且eq()只能匹配一个元素在选择器中要注意:如果在实际项目中遇到类似与 div#w这样的id的话,在$()中要加两个斜杠进行转义,$("div\\#w")这样
另外在做第二章的案例分析的时候,又发现了一个自己以前没有注意到的地方,就是filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")这样的写法filter里面的参数可以是多个选择器的组合.在整个案例中,值得注意的一点是,在案例的最后面,书中说到了在给a标签添加了onclick事件之后,为了阻止a标签的跳转,要写上一句return false,阻止a标签的默认行为,刚开始觉得奇怪,这里为什么要给a标签加上一个跳转链接,原来如果用户在浏览网页的时候禁用了javascript的功能的时候,a标签上的链接能够将用户引向另外一个网页,而不至于看不到网页内容,但是现在不开js的用户少之又少,所以感觉了解一下有这么一个方法就好了。