读书笔记_锋利的jQuery

代码风格:

1.同一对象<=3个操作建议写一行

2.较多操作建议每行写一个

3.较多操作或按功能块换行

 

区分:JQ对象和DOM对象

1.JQ对象是通过JQ包装DOM对象后产生的对象

2.变量定义风格:JQ:$variable  ; DOM: variable

3.JQ对象转换为DOM对象

   1)JQ对象是一个数组对象,可以通过[index]得到DOM

      $("#A")[0];  

   2)$("#A").get(0);

 

解决JS库冲突

var $j = jQuery.noConflict();

$j(function(){ ... })

 

判断一个元素是否存在:

不能用if( $("#tt") ),因为JQ对象是数组对象,应该使用

if( $("#tt").length >0 ){}或转为DOM来判断

 

选择器

 

需要注意:hidden,不仅包括样式display:none的元素也包括<input type="hidden">和visibility:hidden的元素

 

需要注意空格:

$(".test :hidden")   //   后代选择器(选择.test里面的隐藏元素)

$(".test:hidden")    //  过滤选择器(选择.test集合中的隐藏元素)

 

 

第三章 DOM

=========

DOM分为:DOM Core; HTML-DOM; CSS-DOM

 

第四章 JQ中的事件与动画

==================

window.onload -所有元素加载完成后执行

$(document).ready() - DOM就绪时就可执行

注意事项:

例如:HTML加载完成,但图片没下载结束,则图片的高宽属性无效,执行程序可能会出现问题,此时用load()方法代替

$(window).load(function(){...})

 

触发自定义事件:

$("#a").bind("myClick",function(msg){});

$("#a").trigger("myClick",["msg"]);

 

动画队列:按先后顺序执行的动画效果

 

停止动画:stop([clearQueue] [,gotoEnd]) //两个可选参数为boolean值,因为stop()只会停止正在进行的动画;为了立即执行其它动画,要使用clearQueue参数;

 

第五章 JQ对表单表格的操作

===============

$(this)

   .addClass("se")

   .siblings().removeClass("se")   //这里已经改变了对象

   .end()    //回到原对象

.find(":radio").attr("checked",true);

//

var hasSe = $(this).hasClass("se");

$(this)[hasSe?"removeClass":"addClass"]("se");哈,这个写法相当简洁哦

 

 

 

第六章 JQ与Ajax

============

三层--

1.$.ajax();

2.load(),$.get(),$.post();

3.$.getScript(),$.getJSON();

 

$.get(),$.post()是JQ中的全局函数

 

因为serrialize()方法作用于JQ对象,所以不光表单,其它元素也可以使用

如:$(":checkbox, :radio").serialize();

serializeArray() //返回JSON格式的数据

param() /是serialize()的核心,用来对数组/对象进行K/V序列化

 

其它全局函数

$.ajaxComplete();

$.ajaxError();

$.ajaxSend();

$.ajaxSuccess();

如果希望某个Ajax不受全局方法的影响,则:

$.ajax({

   url:"test.html",

   global : false;

})

 

 

第七章 插件的使用和写法

===================

 

官方插件介绍(略过)

 

编写JQ插件

JQ插件的类型:

1.封闭对象方法的插件

2.封装全局函数的插件

3.选择器插件

 

要点:

1.推荐命名jquery.[插件名].js

 

JQ插件的机制

两个方法:

   jQuery.fn.extend() //用于扩展插件类型1

   jQuery.extend()    //2,3

jQuery.extend()还可用于扩展已有的Object对象

jQuery.extend(target, obj1, obj2... ...);

这个方法经常被用于设置插件方法的默认参数

function foo(options){

   options = jQuery.extend({

      name:"bar",

      length:5

   },options)

}

 

编写步骤:

1.框架:

(function($){

   //code

})(jQuery)

2.code

(function($){

   $.fn.extend({

      "color": function(value){

         return this.css("color",value); //注意,插件内部的this指向JQ对象      

      }

   })

})(jQuery)

 

选择器仅仅是jQuery.expr[":"]对象的一部分,同时也是一个object对象,可以直接利用jQuery.extend()对其进行扩展

 

第八章 打造个性网站

================

1.准备网站材料

2.网站结构

   2.1文件结构:images/; styles/; scripts/;

   2.2网页结构:title,header,wrap,footer

   2.3界面设计:

 

网站脚本:

1.准备工作,确定功能内容