68、JavaScript jquery

JQuery简介

1、 一个快速、简洁的JavaScript框架;

2、 设计的宗旨是‘writeLess,DoMore’(写的更少,做得更多);

3、 JQuery兼容各种主流浏览器,如IE6.0+、FF1.5+、Safari2.0+、Opera9.0+;

JQuery好处

1、 简化JS的复杂操作;

2、 不再需要关心兼容性;

3、 提供大量实用方法;

Jquery版本区别

1、 x可以兼容到IE8以下;

2、 x只兼容IE8以上;

如何学习JQ?

1、 https://jquery.com/JQ的官方网站(查阅中文文档);

2、 JQ只是辅助工具,要正确面对;

3、 需要分阶段学习;

前序准备工作:在官网,下载相应的jquery的根据需求的版本源码。
在需要jquery操作的网页引入该源码。
JQuer设计思想

一、选择网页元素

1、 模拟css选择元素;

请参阅CSS选择器参考手册。http://www.runoob.com/cssref/css-selectors.html
 
2、 独有表达式选择(功能与类似于结构伪类选择器);

注::eq 相当于nth-child( )/nth-of-type() 。下标从0开始,与结构伪类选择器有区别
 
3、 多种筛选方法;
 

二.Jquery写法

1、 方法函数化;

(d o c u m e n t ) . r e a d y ( f u n c t i o n ( ) ) < = = = = > (document).ready(function(){})<====> (document).ready(function())<====>(function),下一篇博文juqery方法我会提到与window.onload的区别

window.onload功能:等待页面加载完毕后,在加载该代码。这样不管script标签在哪,都能够获取到页面上的元素了
 
事件绑定更改了从node.on+‘事件类型’=function(){…}变成node.事件类型(function(){…})或者node.on(…)
 
这也说明JQ一个特点:在JQ是基本见不到=符号的。基本所有的赋值方式都是函数传参方式。
2、 链式操作;

当我们对同一个元素进行多种操作时,可以使用链式操作简化代码。
 
3、 取值赋值合体;

同一个函数既能够获取值,也能够设置值。

注:JQ取值只能取出第一个符合条件元素的值,赋值批量操作。
 
三:JQ与JS的关系

可以共存但是不能混用。比如我们刚刚上述例子中的方法函数化:$(’#btn’).οnclick=function(){} //完全没有作用的。但是可以出现两种类型代码行出现在同一模块中。

这个不难理解,因为$(’…’)返回的就是一个对象,而对象只能调用原型上的方法,而非原型上的方法是无法使用的。document绑定事件的方式也一样,返回的也是一个事件对象,本身也是只能调用自己原型上的方法。