前端基础-jQuery的优点以及用法
2018-06-04 21:24
288 查看
一、jQuery介绍
jQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“
二、jQuery的优势
一款轻量级的JS框架。jQuery核心js文件才几十kb,不会影响页面加载速度。丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定。
链式表达式。jQuery的链式操作可以把多个操作写在一行代码里,更加简洁。
事件、样式、动画支持。jQuery还简化了js操作css的代码,并且代码的可读性也比js要强。
Ajax操作支持。jQuery简化了AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信。
跨浏览器兼容。jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。
插件扩展开发。jQuery有着丰富的第三方的插件,例如:树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件,并且用jQuery插件做出来的效果很炫,并且可以根据自己需要去改写和封装插件,简单实用。
三、jQuery版本
1.x:兼容IE678,使用最为广泛的,官方只做BUG维护,功能不再新增。因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日)2.x:不兼容IE678,很少有人使用,官方只做BUG维护,功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x,最终版本:2.2.4 (2016年5月20日)
3.x:不兼容IE678,只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
维护IE678是一件让人头疼的事情,一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少,PC端用户已经逐步被移动端用户所取代,如果没有特殊要求的话,一般都会选择放弃对678的支持。
四、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的方法
五、jQuery内容:
选择器、筛选器操作标签
事件
动画效果
each、data
下载链接:jQuery官网
中文文档:jQuery AP中文文档
相关文章推荐
- 前端学习-jQuery学习小笔记(1)——jQ基础以及各种选择器
- 前端基础-jQuery的事件的用法
- 前端基础进阶(十一):详细图解jQuery对象,以及如何扩展jQuery插件
- 前端基础进阶(八):详细图解jQuery对象,以及如何扩展jQuery插件
- web前端,jquery实现瀑布流总结1,eq()函数的用法
- 源码-JavaScript&jQuery交互式前端开发-第2章-JavaScript基础指令-使用变量来存储数字
- 前端框架技术--jQuery基础应用
- 【unity3d游戏开发之基础篇】unity3d射线的原理用法以及一个利用射线实现简单拾取的小例子
- css3的基础用法,新手必看哈(还有css3和jquery动画的对比)
- c语言编程基础------0.2GCC和GNU的关系,以及GCC的用法
- boost::any的用法、优点和缺点以及源代码分析
- jquery的each用法以及表单选择的自动响应。
- boost::any的用法、优点和缺点以及源代码分析
- 06.(java基础)面试题--03 abstract的用法,以及abstract和interface的异同
- 前端自动化测试神器-Katalon的基础用法
- web前端基础教程:javascript循环的用法
- Web前端开发——JQuery基础梳理
- JQuery基础用法
- select下拉框插件jquery.editable-select的用法以及注意事项
- [JQuery,前端]jQuery表格插件datatables用法详解