jQuery学习笔记--开篇(一)
来源:互联网 发布:windows ping命令 编辑:程序博客网 时间:2024/06/04 18:25
优势
之前写的关于前端的东西很少,最近几天想写点关于Jquery的东西,于是就开始翻以前的笔记,接下来断断续续的整理几篇认为重要的东西,等写完jQuery,倒回去写Javascript。前台框架很多,都很优秀,但jQuery绝对是需要了解的,选择它的优势有以下几点:
1. 轻量级:大小不到30KB;
2. 强大的选择器:支持css1到css3几乎所有的选择器;
3. 出色的DOM操作的封装:提供了很多DOM操作;
4. 可靠的事件处理机制:后面介绍;
5. 完善的Ajax:将所有Ajax操作封装到一个$.ajax()里;
6. 不污染顶级变量:只建立一个jQuery对象,其所有的函数方法都在这个对象下,其别名$随时交出控制权,不会污染其他对象,在项目中不必考虑后期冲突问题;
7. 出色的浏览器兼容性;
8. 链式操作方式:对发生在同一个jQuery对象上的一组动作,可以直接连写而无需重复获取对象,代码无比优雅;
9. 隐式迭代:当用jQuery找到带有“.myClass”类的全部元素,然后隐藏他们时,无需循环遍历每一个返回的元素。相反,jQuery里的方法都被设计成自动操作对象集合,而不是单独的对象,这使得大量的循环结构变得不再必要,大幅减少代码量;
10.行为层和结构层分离:开发者可以使用jQuery选择器选中元素,然后直接给元素添加事件。这种将行为层与结构层完全分离的思想,使jQuery开发人员和HTML或其他开发人员各司其职;
11.丰富的插件支持:谁用谁知道;
12.完善的文档:确实不少;
13.开源:谁不喜欢?
后面的文章中将会一一体会到以上这些的好处。
代码风格
谈完JQuery优势,就来谈谈代码格式的书写规范了,统一的代码编写
习惯风格,对日后代码的维护是非常有利的。下面是两条重要的编写规范:
一. 链式操作风格
举个例子,下面是一个导航栏,HTML代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>1-5-1</title><style type="text/css">#menu { width:300px; }.has_children{background : #555;color :#fff;cursor:pointer;}.highlight{color : #fff;background : green;}div{padding:0;}div a{background : #888;display : none;float:left;width:300px;}</style></head><body><div id="menu"><div class="has_children"><span>第1章-认识jQuery</span><a>1.1-JavaScript和JavaScript库</a><a>1.2-加入jQuery</a><a>1.3-编写简单jQuery代码</a><a>1.4-jQuery对象和DOM对象</a><a>1.5-解决jQuery和其它库的冲突</a><a>1.6-jQuery开发工具和插件</a><a>1.7-小结</a></div><div class="has_children"><span>第2章-jQuery选择器</span><a>2.1-jQuery选择器是什么</a><a>2.2-jQuery选择器的优势</a><a>2.3-jQuery选择器</a><a>2.4-应用jQuery改写示例</a><a>2.5-选择器中的一些注意事项</a><a>2.6-案例研究——类似淘宝网品牌列表的效果</a><a>2.7-还有其它选择器么?</a><a>2.8-小结</a></div><div class="has_children"><span>第3章-jQuery中的DOM操作</span><a>3.1-DOM操作的分类</a><a>3.2-jQuery中的DOM操作</a><a>3.3-案例研究——某网站超链接和图片提示效果</a><a>3.4-小结</a></div></div></body></html>
项目需求是做一个导航栏,单击不同的章节名称链接,显示相应的内容,同时高亮显示当前选择的章节。针对这个需求,用jQuery编写的代码如下:
<script type="text/javascript">//等待dom元素加载完毕.$(document).ready(function(){$(".has_children").click(function(){$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();});});</script>
这段代码的作用是,当鼠标单击到class中含有has_children的元素上的时候,给其添加一个为hightlight的class,然后将其内部<a>子元素都显示出来,并且被单击的class中含有has_children元素的同辈元素都去掉一个名为hightlight的class,同时同辈元素内部的<a>子元素全部隐藏。
这就是jQuery强大的链式操作,一行代码就完成了导航栏的功能,我们读这段代码,就像读文章一张,从前到后,就明白他的意思了,如同我们写文章一样,为了增强阅读体验,根据不用的意思需要分句分段,因此,上面这段jQuery代码可以进一步改善为以下这种方式:
<script type="text/javascript">//等待dom元素加载完毕.$(document).ready(function(){$(".has_children").click(function(){$(this).addClass("highlight")//为当前元素增加highlight类.children("a").show().end()//将子节点的a元素显示出来并重新定位到上次操作的元素.siblings().removeClass("highlight")//获取元素的兄弟元素,并去掉他们的highlight类.children("a").hide();//将兄弟元素下的a元素隐藏});});</script>
其中,像上面这种分法,需要掌握4中情况:
1) 对于同一个对象不超过3个操作的,可以直接写成一行。,代码如下:
$("li").show().unbind("click");
2) 对于同一个对象的较多操作,建议每行写一个操作,代码如下:
$(this).removeClass("mouseout").addClass("mouseover").stop().fadeTo("fast",0.6).fadeTo("fast",1).unbind("click").click(function(){//dosomething});
上面代码如果代码行过多,也可以按照功能分行,灵活多变吧。
3) 对于多个对象的少量操作,可以每个对象写一行,如果涉及子元素,可以考虑适当的缩进,代码如下:
$(this).addClass("hightlight").children("li").show().end().siblings().removeClass("hightlight").children("li").hide();});
4) 待遇多个对象的较多操作,建议结合(2)(3)条。
二. 为代码添加注释
这个就不用多说了,每个开发人员深有体会。
jQuery对象和DOM对象
区别
DOM,每一份DOM都可以表示成一棵树,把一个HTML结构描述为一颗DOM树,在DOM树中,有<div><p><ul>等节点,这都是DOM元素节点。可以通过JavaScript中的getElementsTagName或getElementById来获取元素节点。像下面这样得到DOM元素就是DOM对象。DOM对象可以使用JavaScript中的方法:
var domObj = document.getElementById("id"); //获得DOM对象var ObjHTML = domObj.innerHTML; //使用JavaScript中的方法
JQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的。如果一个对象时jQuery对象,那么就可以使用jQuery里的方法,如:
$("#foo").html(); //获取id为foo的元素内的html代码。.html()是jQuery里的方法
这段代码等同于:
document.getElementbyId("foo").innerHTML;
在jQuery对象中无法使用DOM对象的任何方法。例如$(“#id”).innerHTML和$(“#id”).checked之类的写法都是错误的,可以用$(“#id”).html()和$(“#id”).attr(“checked”)之类的jQuery方法来代替。通用,DOM对象也不能使用jQuery里的方法。
DOM对象和jQuery对象之间的转换
一般习惯获取到的是jQuery对象在变量名之前加上$符号,以示和DOM对象的区别,比如var$cr = $(“#cr”);,如果是DOM对象,就不用加$符号。
将jQuery对象转换成DOM对象有两种方法:
1. 如果jQuery对象是数组对象,可用[index]的方式获取:
var $cr = $("#cr"); //jQuery对象var cr = $cr[0]; //DOM对象alert(cr.checked)//检测这个checkbox是否被选中了
2. 还有一种方法就是利用jQuery自身提供的get(index)方法,如下:
var $cr = $("#cr"); //jQuery对象var cr = $cr.get(0); //DOM对象alert(cr.checked)//检测这个checkbox是否被选中了
将DOM对象转换成jQuery对象:
对于一个DOM对象首先要把它用$()包起来,就可以获得一个jQuery对象,如下:
var cr = document.getElementById("cr"); //DOM对象var $cr = $(cr);//jQuery对象
此转换非重点,但可是面试出现几率较高的问题。
- jQuery学习笔记--开篇(一)
- 深度学习笔记开篇(一)
- Tcc学习笔记(一) 开篇
- Redis学习笔记一、开篇
- 微软企业库4.1学习笔记(一)开篇乱弹
- 建站学习笔记(一)开篇+WWW
- 学习笔记:架构 移动应用架构 开篇(一)
- IBatis.Net学习笔记一--开篇
- JQuery学习笔记(一)
- Jquery学习笔记(一)
- jQuery学习笔记(一)
- jQuery学习笔记(一)
- jquery学习笔记(一)
- JQuery 学习笔记(一)
- jQuery学习笔记(一)
- JQuery学习笔记(一)
- jQuery学习笔记(一)---
- jQuery学习笔记(一)
- 安卓开发24:FrameLayout布局
- 软件设计之UML中的六大关系
- POJ_2891_Strange Way to Express Integers(非互质的中国剩余定理)
- C语言深度解剖读书笔记(3.预编译处理)
- HTML中的转义字符
- jQuery学习笔记--开篇(一)
- 设计模式--单例模式(Singleton)
- linux---任务分配(PBS)
- 可视化平台VisualNet的优势
- 创建JSP自定义标签
- sql子查询 嵌套SELECT语句
- eclipse 下创建maven web工程
- 随笔
- 程序员悲催的爱情故事(2)