jQuery(JS库) | 一文带你掌握jQuery的使用
目录
一：开篇基础
1. 为什么使用 jQuery
2. DOM 对象
3. JS对象和 jQuery 对象
4. 获取 jQuery
5. 牛刀小试
6. DOM 对象和 jQuery 对象
二：选择器
1. 基本选择器
2. 表单选择器
三：过滤器
1. 基本过滤器
2. 表单对象属性过滤器
四：函数
1. 第一组：val、text、attr
2. 第二组：hide、show、remove、empty 、append、html、 each
五：事件
1. 定义元素监听事件
2. on() 绑定事件
六 ：Ajax
1. $.ajax()
2. $.get() & $.post()
一：开篇基础
（1）jQuery 是一款跨主流浏览器的 JavaScript 库，封装了 JavaScript 相关方法调用，简化 JavaScript 对 HTML DOM 操作
（2）官网地址： https://jquery.com/
（3）官网首页 jQuery 介绍
jQuery 是一个快速，小巧，功能丰富的 JavaScript 库。 它通过易于使用的 API 在大 量浏览器中运行，使得 HTML 文档遍历和操作，事件处理，动画和 Ajax 变得更加简单。 通 过多功能性和可扩展性的结合，jQuery 改变了数百万人编写 JavaScript 的方式。
1. 为什么使用 jQuery
主要原因：它能够兼容市面上主流的浏览器， IE 和 FireFox，Google 浏览器 处理 AJAX，创建异步对象是不同的，而 jQuery 能够使用一种方式在不同的浏览器创建 AJAX
异步对象。
具有优点：
（1）写少代码，做多事情【write less do more】。
（2）免费，开源且轻量级的 js 库，容量很小。
（3）兼容市面上主流浏览器，例如 IE，Firefox，Chrome。
（4）能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步 AJAX
功能。
（5）文档手册很全，很详细。
（6）成熟的插件可供选择，多种 js 组件，例如日历组件（点击按钮显示下来日期）。
（7）出错后，有一定的提示信息。
（8）不用再在 html 里面通过<script>标签插入一大堆 js 来调用命令了
例如：使用 JavaScript 定位 DOM 对象常用的三种方式：
（1）通过 ID 属性：document.getElementById()
（2）通过 class 属性：getElementsByClassName()
（3）通过标签名：document.getElementsByTagName()
上面代码可以看出 JavaScript 方法名太长了，大小写的组合太多了，编写代码效率，容易出 错。jQuery 分别使用$(“#id”) , $(“.class 名”) , $(“标签名) 封装了上面的 js 方法。
2. DOM 对象
（1）文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展 标志语言的标准编程接口。
（2）通过 DOM 对 HTML 页面的解析，可以将页面元素解析为元素节点、属性节点和文本节点，这些解析出的节点对象，即 DOM 对象。DOM 对象可以使用 JavaScript 中的方法。
3. JS对象和 jQuery 对象
（1）用 JavaScript 语法创建的对象叫做 JavaScript 对象, JavaScript 对象只能调用 JavaScript 对 象的 API。
（2）用 JQuery 语法创建的对象叫做 JQuery 对象, jQuery 对象只能调用 jQuery 对象的 API。注意：jQuery表示的对象都是数组，数组中的每个对象都是 DOM 对象。
（3）JQuery 对象与 JavaScript 对象是可以互相转化的，一般地，由于 Jquery 用起来更加方便， 我们都是将 JavaScript 对象转化成 Jquery 对象。
4. 获取 jQuery
（1）官网下载地址：https://jquery.com/download/
（2）对于每一个同一版本号的 jQuery，其库又分为两个：
一个是未压缩版，可查看源码， 开发时使用；
一个是压缩版，将注释、空格均做了删除，将变量字符数减少，产品上线时使用。
5. 牛刀小试
（1）单独学习 jQuery 库使用，可以轻量的开发工具，例如 EditPlus , HBuilder,HbuilderX
（2）编写项目可以使用集成开发工具，例如在 IDEA， Eclipse , MyEclipse ,WebStorm 等
（3）这里以HBuilder为例，题目：浏览器完全装载 html 页面 DOM 后,显示一个提示信息框
①以 HbuilderX 为工具，创建一个项目（名称：jQuery-study），给项目选择一个文件存放目录。
②在项目中再创建一个目录，右键项目名称—新建—目录，常用名称为 js；并把下载的 jQuery.js 文件拷贝到js目录
③首先要将 jQuery 库引入，然后调用里面的函数来简化代码
jQuery(JS库) | 一文带你掌握jQuery的使用相关推荐
- js实战代码系列—带你玩jQuery带你飞
https://blog.csdn.net/hanhanwanghaha一个超级无敌可爱的人鸭 欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记 如有转载,请注明出处(如不注明,盗者必究) 目录 ...
- jQuery避免$符和其他JS库冲突的方法对比
jQuery避免$符和其他JS库冲突的方法对比 1.如果jquery库在第三方库之后引用.这个时候jquery库会占用$. 解决办法:剔除$符号的使用权. <script type=" ...
- jQuery多库共存问题解决方法
一.问题概述: 1.随着jQuery的流行,采用jQuery和$符为命名空间的js库越来越多,当然jQuery的$符也是参照的Prototype库的,所以当多个库同时以$符或者jQuery为命名空间时 ...
- 51 jQuery插件库
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.jQuery插件 jQuery功能比较有限,想要更复杂的特效功能,可以借助于jQuer ...
- jQuery是一个非常优秀的js库
若有侵权随时可以联系作者删除 jQuery学习目录 一.前言 二.学习目标 三.优点分析 四.jQuery基础知识 (一)jQuery(load和read的区别) (二)jQuery选择器 (1).j ...
- 贡献一个连jquery都觉的大的时候可以用的 js库
在一些很小的项目里,连用jquery都还觉的大的时候,你就可以用我的这个库了. 一个库或者框架,是应需求而生的,当你的项目实际上只需要简单的一个好用的选择器 一个ajax 封装 一个兼容的事件封装的时 ...
- JavaScript程序库jQuery学习笔记分享(二)jQuery对象和DOM操作，和其他js库冲突处理
今天我继续更新jQuery学习笔记,最近考试比较忙,也就更新的比较慢了,这里向大家说一声抱歉,嘻嘻. 让那不愉快的情绪过去吧,继续进行我们的jQuery之旅吧. 一:jQuery对象和DOM对象 1. ...
- 手动封装JS库jQuery
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 使用JQuery的turn.js库来实现翻书效果
一淘模板(56admin.com)本篇文章给大家介绍jQuery的turn.js库,聊聊使用turn.js库实现翻书效果,希望对大家有所帮助! 今天来和大家分享下JQ的turn.js,下面我先来简单介 ...
最新文章
- 实用PS技巧分享，送给初入职场的你
- Kubernetes — 网络流量模型
- Linux MySQL Connector/C++ 编程实例
- 7安装sql cent os server_CentOS7 安装并使用SQL Server
- JavaScript 简介第一课
- 用计算机设置变大的命令按钮 vb,VB教程：命令按钮（CommandButton)
- soapui直接下载响应内容为本地的文件
- Plc通讯控制三菱FX3U与台达VFD变频器通讯案例程序 485通信，总线控制
- win10家庭版开启组策略方法
- 阿里云活动价格点击购买时价格上涨的解决办法
- tplink路由器dns服务器未响应,联通光纤猫连接无线路由器设置教程图解
- 搭载TI最强芯片CC2652RB，昇润科技突破技术壁垒给你的电子产品“另一种心跳”
- Latex报错：Something‘s wrong--perhaps a missing \item. \end{thebibliography}
- 中国石油大学《机械原理》第二次在线作业
- 人不行别怪路不平！万丈高楼平地起，要想辉煌靠自己。
- linux下iso文件的制做和解压
- JOJ 上的典型题目分类以及参考书目 （以及我的整理）
- Mac使用Aria2下载百度网盘，突破下载限速的方法教程
- 图解MySQL在Linux下的安装与配置
- ZStack Cube：超融合3.0，场景化的一体机
热门文章