锋利的jQuery读书笔记（一）

前阵子买了一批书，今天就从锋利的jQuery看起吧，400页估计一个礼拜差不多，书中一些太过常规以及

没有强记必要性的操作就不记录了。

1.DOM加载后执行JS

$(document).ready(function(){
//......
})

//简写
$(function(){
//......
})

特点：网页中所有DOM结构绘制完成后就执行，可能DOM元素关联的东西并没有加载完，可以同时编写多个

window.onload = function(){
//......
}

特点：必须等待网页中所有内容（包括图片）加载完毕之后才能执行，如果编写多个该语句，只会执行最后一个

2.jQuery代码风格

2.1链式风格

链式风格实际上就是对当前对象执行完操作之后，返回该对象，在jQuery里就是$(this)了。

2.2为代码添加注释

其实，不仅仅是jQuery，为代码添加注释，应该是每个程序员都应该养成的好习惯之一，有利于提高开发效率，尤

其是多人协作的时候。

3.DOM对象和jQuery对象

在此之前，我一直对DOM对象和jQuery对象不是很明白，总会犯一些在DOM对象上执行jQuery操作的错误。

DOM对象实际上就是通过原生js获得的对象，当然也是可以对其使用原生js进行操作：

var obj = document.getElementById("id");
var objHtml = obj.innerHtml;

jQuery对象就是通过jQuery包装DOM对象后产生的对象，当然也就可以对其使用jQuery的方法了：

var objHtml = $("#id").html;

注意：此方法获取到的永远是对象，哪怕网页上没有这个元素！！！所以要判断网页上有没有这个元素，要将其转为DOM对象

jQuery对象转DOM对象：

var obj = $("#id");
var dom = obj[0];
或者
var dom = obj.get(0);

DOM对象转jQuery对象：

var dom = document.getElementById("id");
var obj = $(dom);

4.jQuery获取元素

对网页中的元素绑定事件，有多种方式，例如：

//第一种
<p onclick="demo();">点击我</p>
<script type="text/javascript">
        function demo(){
            alert('Hello World');
        }
</script>    

//第二种
<p class="demo">点击我</p>
<script type="text/javascript">
$(".dmeo").click(function(){
            alert('Hello World');
        })
</script>

jQuery建议我们采用第二种，因为他体现了内容和行为相分离的思想。

<script type="text/javascript">
        document.getElementById("id").style.color="red";
</script>
//上面的写法如果该元素不存在浏览器就会报错，所以改进
<script type="text/javascript">
        if(document.getElementById("id")){
                document.getElementById("id").style.color="red";
        }
</script>

显然，如果元素多的话，每次都要判断很是麻烦，于是：

<script type="text/javascript">
        $("#id").css("color","red");
</script>

5.jQueryCSS选择器

这里就不详细说明了，详细说的话难免显得啰嗦，那就记一下css选择器属性值操作的一些问题吧：

//对于要改变写在style里的样式
<style>
    #id{
        color:red;
    }
</style>    
<script type="text/javascript">
    $("#id").css("color","green");
</script>


//对于要改变写在行间里的属性
<p id="id" title="点击我">Hello World</p>    
<script type="text/javascript">
    $("#id").attr("title","就不点");
</script>


//对于要改变写在行间里的style属性
<p id="id" style="color:red;">Hello World</p>    
<script type="text/javascript">
    $("#id").attr("style","color:green");
</script>

6.表单选择器

$(":input")-----------------所有的input、textarea、select、button
$(":text")------------------所有的单行文本框
$(":password")--------------所有的密码框
$(":radio")-----------------所有的单选框
$(":checkbox")--------------所有的多选框
$(":submit")----------------所有的提交按钮
$(":button")----------------所有的按钮
$(":file")------------------所有的上传域
$(":hidden")----------------所有的不可见域

锋利的jQuery读书笔记（一）

猜你喜欢