jQuery系列 第一章 jQuery框架简单介绍

时间:2021-09-11 10:13:08

第一章 jQuery框架简单介绍

  1.1 jQuery简介

  jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事件以及Ajax的操作。

  jQuery系列 第一章 jQuery框架简单介绍

主旨口号:写的更少, 干的更多(以更少的代码,实现更多的功能)

  1.2 作者和版本介绍

    jQuery最早由约翰·雷西格(John Resig)于2006年1月的BarCamp NYC上发布第一个版本。目前由Dave Methvin领导的开发团队进行开发,是目前最受欢迎的JavaScript库。

    jQuery系列 第一章 jQuery框架简单介绍

作者:John Resig(约翰·雷西格)

John Resig(约翰·雷西格),1984年5月8日出生于美国纽约。

个人著作:精通Javascript以及JavaScript忍者的秘密

工作经验:先后于Mozilla、可汗学院担任开发工程师。

jQuery框架版本相关介绍

开源许可协议: MIT许可证

官方网站: http://jquery.com/

托管仓库: https://github.com/jquery/jquery

版本情况:
JQuery目前分成1.x版、2.x版和3.x版本,从2.0.0开始不再支持IE 6/7/8,2.0.0版本之前通过jQuery Migrate plugin与先前版本保持兼容。

最新版本:3.3.1

    

1.3 jQuery的优点(特点)

    • 轻量级
    • 免费开源
    • 完善的文档
    • 丰富的插件支持
    • 完善的Ajax功能
    • 不会污染*变量
    • 强大的选择器功能
    • 出色的DOM操作封装
    • 出色的浏览器兼容性
    • 可靠的事件处理机制
    • 隐式迭代和链式编程操作

  1.4 jQuery的基本功能

    ①  访问和操作DOM元素 

     说明:使用jQuery库,可以很方便地获取和修改页面中的元素,无论是删除、移动、复制元素,jQuery都提供了一整套方便、快捷的方法,既减少了代码的编写,又大大提高了用户的体验。
     方法示例:append() prepend() remove() empty() html() text()等

    ② 控制页面的CSS样式

     说明:引入jQuery框架后,开发人员可以方便快捷的来操作页面中的CSS样式,而且jQuery已经帮我们完成了令人头疼的浏览器兼容性处理。
     方法示例:css() addClass() toggleClass() hasClass() removeClass()等

    ③ 完善的Ajax网络请求

     说明:Ajax是在原生页面中异步发送和读取服务器数据所采用的组合技术,使用Ajax实现网络通信提高了用户体验和程序性能,而jQuery框架中提供了专门处理网络请求的Ajax组件。
     我们可以方便的使用jQuery中提供的方法来实现Ajax网络请求。
     方法示例:ajax() get() post()等

    ④ 页面标签事件处理

     说明:jQuery框架中对标签的处理,让页面的表现层与功能开发分离,开发者只需要更多的关注业务逻辑方面的实现即可。
     方法示例:on() off() click() mouseenter() hover() 等

    ⑤ 优雅的动画特效实现

     说明:jQuery框架中提供了一整套的动画方法,可以满足开发中常见的动画效果实现,而且使用简单方便。
     方法示例:show() hide() slideDown() slideUp() Animate() 等

    ⑥ 好用的工具方法和强大的插件支持

     说明:jQuery框架中提供了插件机制,利用插件机制程序员可以方便的对原有的框架和功能进行扩展,另外框架本身也提供了表单、UI等大量的插件。
     这些插件的使用,极大丰富了页的展示效果。除了插件之外,jQuery框架中还为我们提供了很多好用的工具方法,我们可以通过调用这些工具方法来解决开发中一些常见的需求。
     方法示例:extend() each() map()等

1.5 第一个jQuery程序

  ① jQuery框架的使用步骤

    1. 下载jQuery框架在本地的电脑上(官网提供框架的下载链接,两个版本可供选择)
    2. 创建项目,在项目中使用script引入jQuery框架
    3. 使用jQuery框架来实现相关的功能

  ② jQuery框架示例程序

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--01 先下载(获取)jQuery框架到项目中-->
<!--02 把下载好的jQuery框架导入到项目中-->
<script src="jquery-3.2.1.js"></script>
</head>
<body>
<button>我是按钮</button>
<script>
/*03 直接使用jQuery框架里面的方法来实现指定的功能*/
$(document).ready(function () {
/*
* 04 表示等DOM加载后,获取页面中的按钮,并且给按钮添加点击事件
* 点击按钮后,在控制台打印消息
* */
$("button").click(function () {
console.log("点击了页面中的按钮");
})
})
</script>
</body>
</html>

1.6 jQuery框架的代码风格

① 美元起始风格

  在jQuery框架中,不管是页面元素的选择、内置的功能函数,都使用美元符号来起始的。

  这个美元符号其实就是jQuery框架当中最重要且独有的对象: jQuery对象

② 链式编程风格

  jQuery框架中为我们提供了链式编程操作,链式编程的特点中,几乎每个jQuery方法执行完毕后都会把当前正在操作的对象作为返回值返回,如果我们需要对某个标签执行多个操作,那么使用链式编程可以让代码更短更简洁。

  ex:$("#demoID").addClass("cur").siblings().removeClass("cur")

附: jQuery框架知识体系

    jQuery系列 第一章 jQuery框架简单介绍

jQuery系列 第一章 jQuery框架简单介绍的更多相关文章

  1. jQuery系列 第二章 jQuery框架使用准备

    第二章 jQuery框架使用准备 2.1 jQuery框架和JavaScript加载模式对比 jQuery框架的加载模式 <script> window.onload = function ...

  2. 第一章 jQuery基础

    第一章jQuery基础 一.jQuert简介 1.什么是jQuery jQuery是javaScript的程序库之一,它是javaScript对象和实用函数的封装. jQuery是继Prototype ...

  3. 【FIORI系列】SAP OpenUI5 &lpar;SAPUI5&rpar; js框架简单介绍

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FIORI系列]SAP OpenUI5 (SA ...

  4. WEBGL 2D游戏引擎研发系列 第一章 &lt&semi;新的开始&gt&semi;

    WEBGL 2D游戏引擎研发系列 第一章 <新的开始> ~\(≥▽≤)/~HTML5游戏开发者社区(群号:326492427) 转载请注明出处:http://html5gamedev.or ...

  5. Django - Django框架 简单介绍

    Django框架 简单介绍 本文地址: http://blog.csdn.net/caroline_wendy/article/details/29172271 1. 介绍 Django是一个开放源码 ...

  6. Https系列之一:https的简单介绍及SSL证书的生成

    Https系列会在下面几篇文章中分别作介绍: 一:https的简单介绍及SSL证书的生成二:https的SSL证书在服务器端的部署,基于tomcat,spring boot三:让服务器同时支持http ...

  7. Python -- Scrapy 框架简单介绍(Scrapy 安装及项目创建)

    Python -- Scrapy 框架简单介绍 最近在学习python 爬虫,先后了解学习urllib.urllib2.requests等,后来发现爬虫也有很多框架,而推荐学习最多就是Scrapy框架 ...

  8. Rebound动画框架简单介绍

    Rebound动画框架简单介绍 Android菜鸟一枚,有不对的地方希望大家指出,谢谢. 最近在接手了一个老项目,发现里面动画框架用的是facebook中的Rebound框架,由于以前没听说过,放假时 ...

  9. 第一章 JQuery概述

    1.JQuery的作用:访问和操作DOM元素控制页面样式对页面事件进行处理扩展新的JQuery插件与Ajax技术完美结合注:JQuery能完成的效果js都能完成,但是JQuery的开发效率更高,代码更 ...

随机推荐

  1. easyUI 操作

    <a href="javascript:void(0)" onclick="locationUrl()">点击 自动加链接</a> fu ...

  2. NOIP2013 花匠

    题目描述 花匠栋栋种了一排花,每株花都有自己的高度.花儿越长越大,也越来越挤.栋栋决定 把这排中的一部分花移走,将剩下的留在原地,使得剩下的花能有空间长大,同时,栋栋希 望剩下的花排列得比较别致. 具 ...

  3. iOS工程集成支付宝错误Undefined symbols for architecture armv7

    问题描述: 新工程中需要集成支付宝功能,于是咱就把支付宝的库给集成了进入然后就出现了下面这种错误了说,错误信息如下: Undefined symbols for architecture armv7: ...

  4. ajax 中的一些方法应用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. Delphi For Android 开发笔记 1 - 开发工具介绍

    在开始前,推荐喜欢delphi或者pascal的朋友,如果想将原来Windows的软件工程移植到Android,可使用CodeTyphon+Delphi XE7进行开发. 1.CodeTyphon C ...

  6. Silk Mobile – 缩短移动应用的测试周期

    Micro Focus已将从Borland接管的Silk Mobile™投放到市场,作为一种新的强大的移动应用测试解决方案,它将使企业能够开发出更先进更可靠的移动商业软件. 作为市场上最完整的移动应用 ...

  7. python入门(3)python的解释器

    python入门(3)python的解释器 Python写的程序是以.py为扩展名的文本文件.要运行代码,就需要Python解释器去执行.py文件. 由于整个Python语言从规范到解释器都是开源的, ...

  8. OO&lowbar;BLOG2&lowbar;多线程电梯模拟

    作业2-1 单部多线程傻瓜调度(FAFS)电梯的模拟 I. 基于度量的程序结构分析 1)程序结构与基本度量统计图 2)分析 ​ 这次作业基本奠定了本人三次电梯作业的基本架构,简述如下: Elevato ...

  9. VS启动调试速度异常的缓慢问题

    方法1: 1. 进入vs2017 2.工具 --选项 -- IntelliTrace 关闭此功能 方法2: 1.由于缓存数据太多,需要重置下vs的开发环境 2.打开visual studio 的命名窗 ...

  10. 1-hadoop、mr

    1.HDFS的优缺点: 优点: ① 高容错 ② 可扩展 ③ 适合大文件存储 ④ 可构建在廉价的机器上 缺点: ① 高延迟 ② 文件不能修改 ③ 不适合小文件存储 2.HDFS架构(类似于文件系统): ...