《锋利的jQuery》读书笔记(DOM+事件)

前阵子买了一批书,就从锋利的jQuery看起吧,书中一些太过常规以及没有强记必要性的操作就不记录了。

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[];
或者
var dom = obj.get();

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")----------------所有的不可见域

 7.DOM操作

这块没什么好讲的,一些常规操作,DOM元素的增删改查取值等等,用的时候直接查吧。

8.事件(解除)绑定

通过bind()函数来为DOM元素绑定事件,例如:

$("DOM").bind("click",function(){
......
})

解除绑定如下:

$("DOM").unbind("click");

常见的事件有如下:

blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error...

合成事件:hover()、toggle()。

$("DOM").hover(function(){
  ...enter
},function(){
  ...leave
});

9.自定义事件

$("DOM_cur").bind("eco",function(){
.......dosomething
})

上面为DOM元素绑定了一个自定义事件,下面就是触发该事件

$("DOM_cur").trigger("eco");

trigger传参:

$("DOM_cur").trigger("eco",["arg1","arg2"]);

触发自定义事件之后,后执行该元素的浏览器默认事件,如果想要禁止:

$("DOM_cur").triggerHandler("focus");

10.事件的命名空间

//DOM绑定3个事件
$("DOM").bind("click1.plugin",function(){});
$("DOM").bind("click2.plugin",function(){});
$("DOM").bind("click3",function(){});
//解绑plugin空间下的所有事件
$("DOM").unbind(".plugin");

同名事件,不同命名空间:

//两个click事件
$("DOM").bind("click.plugin",function(){});
$("DOM").bind("click.core",function(){});
$("DOM").bind("click",function(){});
//触发不在命名空间中的事件(注意感叹号)
$("DOM").trigger("click!");
//触发所有事件
$("DOM").trigger("click");

11.事件对象event

jQuery封装了事件对象event(由于IE-DOM和标准DOM的不同,原生事件对象event=event || window.event)

事件对象,我一直以来就把他记作执行某个事件操作载体,比如A元素的单击事件中,鼠标就是事件对象。

事件对象的用处之一就是阻止事件冒泡:

$("DOM").bind("click",function(event){
  ...dosomething
  event.stopPropagation();
})

阻止默认行为(表单提交按钮的“提交”):

$(".submit").bind("click",function(event){
  ...something
  event.preventDefault();
})

如果想同时实现以上两种功能,可以在函数最后,将事件的处理改成:return  false。

补充:事件冒泡是由里向外,二事件捕获是由外向里。

除了以上两个属性,事件对象还有以下属性:

event.type------------------------单击事件的事件类型就是单击
event.target----------------------点击a链接事件的事件目标就是a元素
event.pageX-----------------------光标相对于页面的X坐标
event.clientX---------------------同上,不同浏览器不同写法
event.which-----------------------单击时获取鼠标的左中右(,,)
event.metaKey---------------------规定为键盘中获取ctrl键
上一篇:21.命名空间别名限定符::和global全局名称空间限定符


下一篇:关于android setTextSize() 以及 px dip/dp sp的说明。。。。