jQuery攻略

一、简介

1.介绍
  jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,
即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

2.优势

  • 一款轻量级的JS框架。jQuery核心js文件才几十kb,不会影响页面加载速度。
  • 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定。
  • 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里,更加简洁。
  • 事件、样式、动画支持。jQuery还简化了js操作css的代码,并且代码的可读性也比js要强。
  • Ajax操作支持。jQuery简化了AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信。
  • 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。
  • 插件扩展开发。jQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件,并且用jQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用。

3.jQuery内容:

  • 选择器
  • 筛选器
  • 样式操作
  • 文本操作
  • 属性操作
  • 文档处理
  • 事件
  • 动画效果
  • 插件
  • each、data、Ajax

4.jQuery对象
  jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象,那么它就可以使用jQuery里的方法:例如$(“#i1”).html()。

  $("#i1").html()的意思是:获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。

  相当于: document.getElementById("i1").innerHTML;

  虽然 jQuery对象是包装 DOM对象后产生的,但是 jQuery对象无法使用 DOM对象的任何方法,同理 DOM对象也没不能使用 jQuery里的方法。

  一个约定,我们在声明一个jQuery对象变量的时候在变量名前面加上$:

var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象

  拿上面那个例子举例,jQuery对象和DOM对象的使用:

$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

  








猜你喜欢

转载自www.cnblogs.com/Felix-DoubleKing/p/10249195.html