jQuery 学习笔记之二 (jQuery代码风格)

jquery 学习之代码风格

对于同一个对象的较多操作，建议每行写一个操作，代码如下：

$(this).removeClass()

.addClass()

.stop()

.fadeTo("fast",0.6)

.fadeTo("fast",1)

.unbind("click")

.click(function(){

// do something!

});

对于上面的代码，如果嫌代码行数过多，可以以功能块来进换行。

上段代码中，前两个是对class

的操作，接下来3 事动画操作，最后是取消并重新绑定click的事件的处理函数的操作，所以可以写成如下格式的代码：

$(this).removeClass("mouseout").addClass("mouseover")

.stop().fadeTo("fast",0.6).fadeTo("fast",1)

unbind("click").click(function(){

// do something!

});

对于多个多像的少量操作，可以每个对象写一行，如果涉及子元素，可以考虑适当地缩进。

$(this).addClass("highlight")

.children("li").show().end()

.siblings().removeClass("highlight")

.children("li").hiede();

javascript 中的getElementsByTagName 或者getElementById来获取元素节点。

像这样得到的Dom元素就是DOM对象。DOM对象可以使用JavaScript中的方法，

var domObj = document.getElementById("id");

var ObjHTML= document.innerHTML;

$("#foo").html();//获取id为foo的元素内的html代码。.html()是jquery里的方法。

这段代码等同于:

document.getElementById("foo").innerHTML;

在jquery对象中无法使用DOM对象的任何方法。例如$("#id").innerHTML和$("#id").checked之类的写法都是错误的。

jquery 对象和DOM对象的相互转换

在jquery 对象和DOM 对象的相互转换之前，先约定好定义变量的风格。如果获取的是JQuery对象，那么在变量前面加上$，例如:

var $variable = jquery对象；

如果获取的是DOM 对象，定义如下：

var variable = DOM 对象;

如果Jquery没有封装想要的方法，不得不使用DOM对象的时候，有以下两种处理方法。

jquery 提供了两种方法将一个jquery对象转换成DOM对象，即[index]和get(index).

(1)Juqery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象。

jqeury代码如下：

var $cr = $("#cr"); //jqeury对象

var cr = $cr[0]; //DOM 对象

alert(cr.checked); //检测这个checked是否被选中了。

(2)另外一种方法jquery本身提供的，通过get(index)方法得到的相应的DOM 对象。

jquery代码如下：

var $cr = $("#cr"); //jquery 对象

var cr = $cr.get(0); //DOM 对象

alert(cr.checked); // 检测这个checkbox 是否被选中了

DOM 对象转成Jquery对象

对于一个DOM 对象，只需要用$()把DOM对象包装起来，就可以获得一个jQeury对象了，方式为$(dom对象)。

jquery 代码如下：

var cr = document.getElementById("cr'); //dom对象

var $cr = $(cr); //jqeury 对象

通过转换后可以可以任意使用jquery中的方法.

出处：http://www.cnblogs.com/liuyong/

转载于:https://www.cnblogs.com/moyiqun/archive/2013/06/06/3121116.html

jQuery 学习笔记之二 (jQuery代码风格)相关推荐

JavaScript程序库jQuery学习笔记分享(二)jQuery对象和DOM操作，和其他js库冲突处理
今天我继续更新jQuery学习笔记,最近考试比较忙,也就更新的比较慢了,这里向大家说一声抱歉,嘻嘻. 让那不愉快的情绪过去吧,继续进行我们的jQuery之旅吧. 一:jQuery对象和DOM对象 1. ...
jQuery 学习笔记之二 (jQuery代码风格)
jquery 学习之代码风格对于同一个对象的较多操作,建议每行写一个操作,代码如下: $(this).removeClass() .addClass() .stop() .fadeTo("f ...
jQuery学习笔记（二）
jQuery学习笔记(二) 二.管理jQuery包装集 1.创建新的元素使用HTML DOM 创建元素 var select=document.createElement("select& ...
Windows保护模式学习笔记（二）—— 代码跨段跳转
Windows保护模式学习笔记(二)-- 代码跨段跳转要点回顾代码跨段跳转执行流程 1)段选择子拆分 2)查表得到段描述符 3)权限检查 4)加载段描述符 5)代码执行 6)总结一致代码段(共 ...
jQuery学习笔记（二）使用选择器一
jQuery选择器是jQuery框架的基础,jQuery对事件的处理.DOM操作.CSS动态控制.Ajax通信.动画设计都是在选择器基础上进行的注意,在jQuery中通过各种选择器和方法获取的结果集 ...
jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
Jquery学习笔记：获取jquery对象的基本方法
jquery最大的好处是将js对html页面的操作(读写)进行了封装,隔离了浏览器的差异性,并简化了操作,和提供了强大的功能. 在web页面中,所有的js操作都是围绕操作dom对象来的.而jquery ...
软件工程学习笔记《二》代码规范
文章目录软件工程学习笔记目录 google代码规范节选python来自google翻译错误注释的示例命名规范 import语句的规范 import this 源码软件工程学习笔记目录 [ht ...
jQuery学习笔记（二）—— 操作DOM元素
使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值. 例如,使用a ...

jQuery 学习笔记之二 (jQuery代码风格)

jQuery 学习笔记之二 (jQuery代码风格)相关推荐

最新文章

热门文章