Js框架Jquery学习笔记

  简介

概述

什么是框架:

随着WEB2.0及ajax思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等，通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来，将关注点转向功能需求而非实现细节上，从而提高项目的开发速度。
什么是框架?
框架就是：一套包含工具、函数库、约定，以及尝试从常用任务中抽象出可以复用的通用模块，目标是使设计师和开发人员把重点放在任务项目所特有的方面，避免重复开发。

jquery有什么优势:

jQuery的设计会改变你写JavaScript代码的方式，降低你学习使用JS操作网页的复杂度，提高网页JS开发效率，无论对于js初学者还是资深专家，jQuery都将是您的首选。

jquery有哪些特点:

代码简练、语义易懂、学习快速、文档丰富。
jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。
jQuery支持CSS1-CSS3,以及基本的xPath。
jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。
可以很容易的为jQuery扩展其他功能。
能将JS代码和HTML代码完全分离，便于代码和维护和修改。
插件丰富，除了jQuery本身带有的一些特效外，可以通过插件实现更多功能，如表单验证、tab导航、拖放效果、表格排序、DataGrid，树形菜单、图像特效以及ajax上传等。

  jquery技巧总结

jquery能帮我们做到什么呢？

jquery页面元素的引用

jquery通过$()引用页面中的元素，包括通过id,class,元素名以及元素的层级关系以及dom,xpath等方法，并且返回的对象都是jquery对象本身。

jquery对页面匹配原属集合添加相同类的函数

这里用到.css的用法，需要了解的两个表达式分别是：
.css向页面对象添加属性表达式1：
$("对象").css({属性1："参数1",属性2："参数2",属3性："参数3"……});
.css向页面对象添加属性表达式2：
$("对象").each(function(i){this.style.属性=['第一个元素的参数','第而个元素的参数',……][i]});
html:

jquery:

示例总结：

通过这个示例我们可以学到一个例遍同级匹配元素的方法，我们叫它"例遍方程式"，基本的语法结构是这样的：
$("匹配的元素").each(function(i){
this.style.样式名（width,color,background……）=['分别的样式值','分别的样式值','分别的样式值','分别的样式值',……][i]
});

.eq(index)的用法

1>.使用方法：
获取第N个元素
这个index参数是从0算起的。
示例：
html: jquery:

完善的事件处理功能

jquery为我们提供了完善的事件处理功能，任何鼠标效果对jquery都非常的easy,从而无需在html元素上添加事件，而是通过jquery获取对象并添加事件.
我们可以给jquery的这种事件处理方式起个名字叫“事件处理方程式”，其语法结构是这样的：
$("事件处理对象").jquery自定义事件方法(hover,toggle,ready,click……)(function(){
},function(){
});

.click(fu)与.toggle(fu1,fu2)的使用方法总结

1>.click(fu)是指向匹配元素绑定一个点击事件，并且点击事件触发后边的fu函数，这里只能绑定一个函数。
2>.toggle(fu1,fu2)也是向匹配元素添加并且绑定一个点击事件，第一次点击时触发第一个函数fu1，再一次点击时触发第二个函数fu2,再一次点击的时候就会轮回到第一个函数，以后的点击就是这样循环的。 html:
jquery: