锋利的jQuery第1、2章学习笔记

学习前端的朋友应该都知道有那么基本比较经典的书籍，像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的用户少之又少，所以感觉了解一下有这么一个方法就好了。