《锋利的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键
《锋利的jQuery》读书笔记(DOM+事件)的更多相关文章
- 锋利的jQuery读书笔记---jQuery中操作DOM
一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点 查找元素节点 查找属性节点 创建节点 创建元素节点 创 ...
- 锋利的jQuery读书笔记---选择器
前段时间入手了锋利的jQuery(第二版),想着加强下自己的js能力,可前段时间一只在熟悉Spring和Hibernate.最近抽时间开始读这本书了,随便也做了些记录. 读书的过程是边看边代码测试,所 ...
- 锋利的jQuery读书笔记---jQuery中Ajax--序列化元素、Ajax全局事件
serialize()方法: 作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求. <!DOCTYPE html> <html> <hea ...
- 锋利的jQuery读书笔记---jQuery中的事件
jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE ...
- 锋利的jQuery读书笔记---jQuery中Ajax--get、post等方法
load()方法通常用来从Web服务器上获取静态的数据文件,然而这并不能体现ajax的全部价值. 在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或 ...
- 锋利的jQuery读书笔记---jQuery中动画
jQuery中的动画: 1.show和hide 2.fadeIn和fadeOut 3.slideUp和slideDown <!DOCTYPE html> <html> < ...
- 锋利的jQuery读书笔记---jQuery中Ajax--load方法
第一个Ajax例子 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- <锋利的jQuery>读书笔记
- jQuery:自学笔记(4)——事件与事件对象
jQuery:自学笔记(4)——事件与事件对象 jQuery中的事件 什么是事件 所谓事件,就是被对象识别的操作,即操作对象队环境变化的感知和反应,例如单击按钮或者敲击键盘上的按键. 所谓事件流,是指 ...
- Javascript & JQuery读书笔记
Hi All, 分享一下我学JS & JQuery的读书笔记: JS的3个不足:复杂的文档对象模型(DOM),不一致的浏览器的实现和便捷的开发,调试工具的缺乏. Jquery的选择器 a. 基 ...
随机推荐
- C/C++中浮点数输出格式问题
在C语言中,浮点数的输出格式有三种:%g, %f, %e 首先要说的是%e是采用科学计数法来显示. %g与后两者有一个重要的差别,就是设置输出精度的时候,(C中默认浮点输出精度是6),%g认为,包括整 ...
- LeetCode:前K个高频单词【692】
LeetCode:前K个高频单词[692] 题目描述 给一非空的单词列表,返回前 k 个出现次数最多的单词. 返回的答案应该按单词出现频率由高到低排序.如果不同的单词有相同出现频率,按字母顺序排序. ...
- thinkphp api架构搭建
1.结构搭建 模块下面使用 controller , model ,service,validate分别对应的作用 controller控制器里面可以进行分版本 v1,v2之类的,不过要访问通必须配置 ...
- 《网络攻防》 MSF基础应用
20145224陈颢文 <网络攻防>MSF基础应用 基础问题回答 用自己的话解释什么是exploit,payload,encode: exploit:攻击手段,是能使攻击武器(payloa ...
- StringUtils用法(isNotEmpty和isNotBlank)
isNotEmpty将空格也作为参数,isNotBlank则排除空格参数 参考 Quote StringUtils方法的操作对象是java.lang.String类型的对象,是JDK提供的String ...
- tinyxml优化之一
原文链接:http://www.cnblogs.com/zouzf/p/4154569.html 最近在搞XML解析优化,公司引擎用了tinyxml1和tinyxml2两个XML库,后者的效率比前者高 ...
- SElinux 读懂.te 定义自己的 .te【转】
本文转载自:https://blog.csdn.net/kongbaidepao/article/details/61417291 一. .te 文件定义中的一些宏 1.1 unix_socket_c ...
- 【转载】User notification 的实现方法
原帖请看:http://cocoathings.blogspot.com/2013/01/introduction-to-user-notifications-in.html 想要实现如图这样的not ...
- dubbo用户指南-总结
dubbo用户指南-总结 入门 背景 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. 单一应用 ...
- BI项目中的ETL设计详解(数据抽取、清洗与转换 )(转载)
原文:http://www.cnblogs.com/reportmis/p/5939732.html ETL是BI项目最重要的一个环节,通常情况下ETL会花掉整个项目的1/3的时间,ETL设计的好坏直 ...