前端基础-jquery的优点以及用法(代码片段)

明天的希望,让我们忘了今天的痛苦。 明天的希望,让我们忘了今天的痛苦。     2022-11-20     175

关键词:

一、jQuery介绍

  1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
  2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。它的宗旨就是:“Write less, do more.“

二、jQuery的优势

  1. 一款轻量级的JS框架。jQuery核心js文件才几十kb,不会影响页面加载速度。
  2. 丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定。
  3. 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里,更加简洁。
  4. 事件、样式、动画支持。jQuery还简化了js操作css的代码,并且代码的可读性也比js要强。
  5. Ajax操作支持。jQuery简化了AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信。
  6. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。
  7. 插件扩展开发。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内容:

  1. 选择器、筛选器
  2. 操作标签
  3. 事件
  4. 动画效果
  5. each、data

下载链接:jQuery官网

中文文档:jQuery AP中文文档

零基础学前端.jquery入门与实践教程(代码片段)

...s-to:media复习:原生js的优缺点:优点:​所有前端框架的基础,类似于Java、C语言的大基础;缺点:​1.不能添加多个入口函数& 查看详情

前端基础六之jquery效果(代码片段)

...:❤Python❤❤Java❤前言身为一个合格的后端开发人员前端的基础知识也是需要了解的一.jQuery效果隐藏、显示、切换,滑动,淡入淡出,以及动画1 查看详情

前端基础六之jquery效果(代码片段)

...:❤Python❤❤Java❤前言身为一个合格的后端开发人员前端的基础知识也是需要了解的一.jQuery效果隐藏、显示、切换,滑动,淡入淡出,以及动画1 查看详情

前端基础之jquery(代码片段)

前端知识之jQueryjQuery2006年1月发布的1.0版本目前在市场上,1.x,2.x,3.x.功能的完善在1.x,2.x的时候是属于删除旧代码,去除对于旧的浏览器兼容代码3.x的时候增加es的新特性以及调整核心代码的结构 核心:writeless,domore官网:https://jquery... 查看详情

前端基础五之jquery基础(代码片段)

...:❤Python❤❤Java❤前言身为一个合格的后端开发人员前端的基础知识也是需要了解的1.jQuery是什么jQuery是JavaScript的一个库ÿ 查看详情

前端基础五之jquery基础(代码片段)

...:❤Python❤❤Java❤前言身为一个合格的后端开发人员前端的基础知识也是需要了解的1.jQuery是什么jQuery是JavaScript的一个库ÿ 查看详情

前端基础之jquery

jQuery是什么?  jQuery是别人写好的类库,封装了很多js原生代码,可以直接在页面上引用,可以直接使用别人写好的方法,比较方便jQuery的用法:  1.引用本地jQuery文件:<scriptsrc="jquery-3.2.1.min.js"></script>      ... 查看详情

前端模块化杂记(代码片段)

...Module的区别Module与webpackModule与Babel一些问题总结引用前言前端模块化在近几年层出不穷,有Node的CommonJs,也有属于client端的CMD/AMD模式,而ES6本身也出现了Modules,再加上Webpack以及babel的普及,虽然在代码中经常使用到这些用法,但... 查看详情

gson基础用法总结(代码片段)

...;今天就来总结一下其详细的用法,在本篇中将讲解其基础的使用方法,下一篇将讲解其高级的用法。1、基本数据 查看详情

easyui前端框架01(代码片段)

一.三大前端框架的特点1.easyui=jquery+html4  优点:快速开发、功能齐全、免费缺点:不好看、不支持相应式开发2.bootstrap=jquery+html5优点: 功能强大、好看、好用、 支持响应式开发缺点:部分功能收费3.layui 优点... 查看详情

前端知识点总结(javascript篇)(代码片段)

...JavaScript字符串转化JSONP原理及优缺点XMLHttpRequest事件委托前端模块化(AMD和CommonJS的原理及异同,seajs和requirejs的异同和用法)sessionCookieseaJS的用法及原理,依赖加载的原理、初始化、实现等this问题模块化原理(作用域)JavaScript... 查看详情

web前端基础(cssposition的正确用法)

position属性的relative以及absolute的区别是什么? 任何元素的默认position的属性值都为static(静态),但我们在布局的时候也会经常用到relative(相对)以及absolute(绝对)这两种属性。 再分别介绍两种属性之前,我们一定要... 查看详情

前端基础之jquery(代码片段)

...AJAX操作,后端只需返回一个JSON格式的字符串就能完成与前端的通信。跨浏览器兼容。jQuery基本兼容了现在主流的浏览器,不用再为浏览器的兼容问题而伤透脑筋。插件扩展开发。jQuery有着丰富的第三方的插件,例如:树形菜单... 查看详情

jquery入门基础知识点汇总(代码片段)

什么是jQuery?jquery是js的封装的一个框架快速开发优点:写的少做的比较多处理浏览器之间的兼容性把js的大量语法进行封装大量的方法大量的学习方法和dom之类jquery库在headbody里面都是可以引入在写jquery代码的时候先引入jquery文... 查看详情

jquery基础(代码片段)

jq是什么?1.jq仅仅是基于js的一个库,jq可理解为就是开发js的一个工具。2.jq的优点:简单,粗暴没有兼容性问题3.版本:国内主要使用1.0+版本jq的使用引入jq的方法:1.下载到本地js2.引入网络的js文件使用jq的方法:入口函数:1.$(function())... 查看详情

jquary教程1:jquary的优点和地位(代码片段)

...javascript代码的仓库jQuery作为一个迭代多年的优秀框架,是前端js开发者的基本功.2 为什么要学jQuery? 它使诸如HTML文档遍历和操纵,事件处理,动画和Ajax等事情变得更简单,使用易于使用的API,可在多种浏览器中使用.结合... 查看详情

前端学习html基础(代码片段)

目录引言初识WebWeb标准Web标准的优点初识HTML超文本的含义HTML基本骨架HTML元素标签分类标题HTML标签关系文档类型页面语言HTML常用标签src和href的区别什么是XHTMLHTML写法注意表格简介写法基本标签介绍表格属性合并单元格表格划分... 查看详情

jquery基础整理!!(代码片段)

  javascript   jQuery 用法 和引用顺序 引用顺序: 先引css再引js js中先引jQuery,再引jabascript,再引自己写的js 用法:jQuery需要引入一个js文件,并在所有js代码之前  1.找标签: &nbs... 查看详情