JavaScript - jQuery
为什么要学 jQuery
原生js实现方式 及 缺点:
<script>// 麻烦的地方// 1. 获取元素的方法名太长，不好写，不好记// 2. 代码冗余（for循环太多）// 3. 使用on注册事件，存在覆盖问题，使用addEventListener来注册（兼容问题，IE678不兼容）// 4. 没有动画效果// 找对象const btn1 = document.querySelector("#btn1");const btn2 = document.querySelector("#btn2");const divs = document.querySelectorAll("div"); // 伪数组// 显示btn1.onclick = function () {for (let i = 0; i < divs.length; i++) {divs[i].style.display = "block";}};// 设置内容btn2.onclick = function () {for (let i = 0; i < divs.length; i++) {divs[i].innerHTML = "这是内容";}};</script>
jQuery实现方式:
// 使用jq实现:jq实现页面交互的流程和步骤(业务处理方式)与原生js一样// 获取按钮绑定事件,当事件触发的时候会调用传入的回调函数进行处理$('#btn1').click(function() {// 获取所有div，为每一个div设置样式// $('div').css(样式属性，值)// $('div').css('display', 'block') // show hide fadeIn fadeOut$('div').fadeIn(4000)})$('#btn2').click(function() {$('div').text('文本内容')})$('#btn2').click(function() {console.log('1234')})
优点:
⚫ 轻量级。核心文件才几十kb，不会影响页面加载速度
⚫ 跨浏览器兼容。基本兼容了现在主流的浏览器
⚫链式编程、隐式迭代
⚫ 对事件、样式、动画支持，大大简化了DOM操作
⚫ 支持插件扩展开发。有着丰富的第三方的插件，例如：树形菜单、日期控件、轮播图等 ⚫ 免费、开源
总结 : 相比原生js,jQuery用更少的代码，更优的兼容性实现更佳的效果
jQuery 概述:
1.1 JavaScript 库
仓库： 可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。
JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）,jQuery就是一个js库。从封装一大堆函数的角度理解库，就
是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。
简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用
这些封装好的功能了。
比如 jQuery，就是一个js库，里面封装了很多用于操作dom的方法。
常见的JavaScript 库
⚫ jQuery
⚫ Prototype
⚫ YUI
⚫ Dojo
⚫ Ext JS
⚫ 移动端的zepto
1.2 jQuery 的概念
jQuery 是一个快速、简洁的 JavaScript 库，把js中的DOM操作做了封装
jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
学习jQuery本质： 就是学习调用这些函数（方法）。
jQuery的基本使用
2.1 jQuery 的下载
官网地址： https://jquery.com/
版本：
⚫ 1x ：兼容 IE 678 等低版本浏览器， 官网不再更新
⚫ 2x ：不兼容 IE 678 等低版本浏览器， 官网不再更新
⚫ 3x ：不兼容 IE 678 等低版本浏览器， 是官方主要更新维护的版本
各个版本的下载：https://code.jquery.com/
1.1jQuery的使用步骤
引入 jQuery 文件添加入口函数在入口函数中调用封装好的api实现页面效果
1.2 jQuery 的入口函数
<script>// 入口// $(function(){ // 入口})$(function () {console.log('我已经进入入口了')})// $(document).ready(function(){})$(document).ready(function () {// console.log('我已出舱，感觉良好')let div = document.querySelector('div')console.log(div)console.log($(div))// div.fadeIn(1000) // 原生不能调用jq对象方法$(div).fadeIn(1000)})</script>
1.3 jQuery 的入口函数的特点(与window.onload的差异)
window.onload:
执行次数 : 只能执行一次，如果有多个，后面的会将前面的覆盖
执行时机 : 必须等网页所有资源(包含图片等外部资源)全部加载完毕才执行入口函数中的代码
jq的入口函数 :
执行次数 : 可以添加多个,且都会执行,不存在覆盖的问题
执行时机 : 只要页面中的dom结构加载完毕就会执行入口函数中的代码
简写 : $(function(){代码})
1.4 jQuery 的顶级对象 $
- $ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $ 。
- $ 是jQuery 的顶级对象，把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。
- 它的常用方式：
• 添加入口函数
• 获取元素
• dom元素转换为jQuery对象
• 创建元素
1.5 jQuery 对象和 DOM 对象
- 用原生 JS 获取来的对象就是 DOM 对象
- jQuery 方法获取的元素就是 jQuery 对象。
- jQuery 对象本质是： 利用$对DOM 对象包装后产生的对象（伪数组形式存储）。
JavaScript - jQuery相关推荐
- Java项目:嘟嘟校园一卡通系统(java+JSP+Servlet+html+css+JavaScript+JQuery+Ajax+mysql)
源码获取:博客首页 "资源" 里下载! 一.项目简述 功能:卡管理,卡消费,卡充值,图书借阅,消费,记录,注销等等功能. 二.项目运行 环境配置: Jdk1.8 + Tomcat8 ...
- 如何在JavaScript / jQuery中查找数组是否包含特定字符串？ [重复]
本文翻译自:How to find if an array contains a specific string in JavaScript/jQuery? [duplicate] This ques ...
- 生日祝福（HTML+CSS+JavaScript+jQuery）
生日倒计时 下载地址:[生日祝福(HTML+CSS+JavaScript+jQuery).zip-教育文档类资源-CSDN下载]
- javascript:jquery.history.js使用方法
javascript:jquery.history.js使用方法 step1:download jquery.history.js step2:create a test page as follow ...
- Java实现动态加载页面_[Java教程]动态加载页面数据的小工具 javascript + jQuery （持续更新）...
[Java教程]动态加载页面数据的小工具 javascript + jQuery (持续更新) 0 2014-05-07 18:00:06 使用该控件,可以根据url,参数,加载html记录模板(包含 ...
- 【前端学习笔记】JavaScript + jQuery + Vue.js + Element-UI
前端学习笔记 JavaScript jQuery Vue.js Element-UI Java 后端部分的笔记:Java 后端笔记 JavaScript 基础语法(数据类型.字符串.数组.对象.Map ...
- 使用Javascript / jQuery下载文件
本文翻译自:Download File Using Javascript/jQuery I have a very similar requirement specified here . 我在这里指 ...
- 怎么用java做todolist_[Java教程]JavaScript jQuery 任务清单 ToDoList
[Java教程]JavaScript jQuery 任务清单 ToDoList 0 2020-10-23 03:02:01 代码实现: ToDoList.html(复制并保存为html文件,打开即可见 ...
- 行为层JavaScript+jQuery
JavaScript + jQuery[不完整] 一.JavaScript 行为层 JavaScript简介 JavaScript历史: 1995年,网景公司 凭借其Navigator浏览器成为Web ...
- JavaScript - jQuery（一）
导航兔: jQuery 导航地址 JavaScript - jQuery(一) https://qianmoer.blog.csdn.net/article/details/128358221 Jav ...
最新文章
- unity项目警告之 LF CRLF问题
- Play自动生成的项目目录简介
- MySql解压版使用
- 这可能是关于Pytorch底层算子扩展最详细的总结了！
- 谈谈我对MVC的View层实现的理解
- 第二章简答_微观 第二章 效用论
- 如何突破百度云下载速度限制
- Arduino教程 RFID-RC522读IC卡门禁原理及破解防御
- 第 2 届河北省大学生程序设计竞赛（河北省赛）-Problem C. icebound 的账单-题解
- WPS_Word空白页删除
- 【Debug系列】ImportError: No module named ‘_tkinter‘
- 从gitlab迁移到极狐gitlab的方法 #JIHULAB101
- 未来计算机的将朝着,未来计算机将朝着哪几个方向发展？
- PR学习笔记——Pr2019快速使用指南——视频剪辑
- 合肥ibm服务器维修,合肥IBM/thinkpad笔记本维修
- 华旭金卡js调用身份证阅读器和易联众社保卡阅读器
- 中国历代王朝疆域面积一览表
- Verilog-组合电路设计
- python培训价目表-少儿编程python价格表
- 2000-2019 年制造业各细分行业数据库