jQuery初识之安装与语法简介
文章出自个人博客https://knightyun.github.io/2018/06/01/jq-syntax,转载请申明
概念
jQuery是一个JavaScript**函数库,是一个比较流行的**js框架,功能就是简化 js 代码的书写,因为一些功能用原生javascript书写代码量是很大的。可以理解为javascript query,毕竟Query也是它的一个功能。
安装
要使用jQuery库,可以从网上下载得到jQuery的 .js
文件,也可以使用CDN (Content Delivery Content 内容分发网络)加载jQuery。
下载
需要去jQuery官网:jquery.com 下载需要的jQuery库,一般有两个版本,production
表示已被压缩精简的版本,用于放到实际网站中,development
表示测试开发版,用于编写和开发,是可读的代码。
例如目前最新的版本是 jquery-3.3.1.js
,压缩版后缀是 .min.js
,开发版文件有一万多行,就是正常格式的JavaScript源代码,包含一些注释,文件大小为 266k
;压缩版就是去掉里面不必要的空格,回车与注释,所以最后文件实际内容只有一行!,文件大小为 85k
,压缩了近三倍,这也是网页都使用压缩版,提升网页性能的原因。
下载好后放到网页文件夹中,然后使用 <script>
标签引用,例如:
<script scr="/js/jquery-3.3.1.min.js"></script>
路径中填写 .js
文件的实际存放位置。
CDN
使用CDN(内容分发网络)就可以不用下载jQuery文件,优点是可以使用这个机制尽量避开网络中一些影响数据传输的路线,提高访问速度和稳定性。原理就是使用在各处配置的节点服务器,让用户就近获取所需内容。
常见CDN有很多,例如百度、新浪、谷歌、微软等,如果是国内站点的话,建议使用国内CDN,国外站点可以使用谷歌或微软,提高速度。
以百度CDN为例,安装方法如下:
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
微软CDN:
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js"></script>
微软jQuery历史版本可以从这里查看https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview#jQuery_Releases_on_the_CDN_0。
更多内容可以访问百度静态资源公共库(http://cdn.code.baidu.com/),其他CDN可以自行百度搜索。
语法
jQuery的基础语法是通过选取(query)文档中的元素,对其进行操作(action),语法是:
$(selector).action()
选择器
selector
是选择器,类似于CSS选择器,常见的有:
- 元素选择器,如:
$("p")
- ID选择器,如:
$("#myId")
- 类选择器,如:
$(".myClass")
- 属性选择器,如:
$("[href]")
操作
action()
是对所选元素执行的操作,例如:
- 隐藏元素:
.hide()
- 单击事件:
.click(myFunction())
- 双击:
.dblclick()
- 悬停:
.hover()
其他语法与JavaScript类似,代码写在 <script>
中,例如隐藏 p 元素:
<script>$("p").hide();
</script>
有时需要等文档加载完毕后执行代码,很像JavaScript中的 window.onload
:
window.onload = function(){alert();
}
jQuery中就要这么写:
$(document).ready(function(){$("p").hide();
});
简化写法:
$(function(){$("p").hide();
});
结果都是在整个文档加载完后执行语句。
方法链接
相对于JavaScript,jQuery又一种特殊的操作方法叫做方法链接(chaining),即在一条语句上,对一个元素执行多个操作,语法是:
$(selector).action1().action2().action3()
例如:
$("p").html("<b>Hello</b>").click(function(){alert("Hello world");
});
结果就是改变元素文本内容后绑定点击事件的调用函数,操作可以绑定多个,并且是依次执行,方法类似,其他操作以此类推。
技术文章推送 手机、电脑实用软件分享
![](/assets/blank.gif)
![](/assets/blank.gif)
jQuery初识之安装与语法简介相关推荐
- 初识Clickhouse 安装与部署(一)
初识Clickhouse 安装与部署(一) 一.简介 1.1 特性 1.2 限制 二.安装与部署 2.1 环境要求 2.2 版本选择及下载 2.3 安装 2.4 Clickhouse目录结构 2.5启 ...
- Elasticsearch安装以及语法学习
一.简介 借助官网介绍 Elasticsearch简介 您知道,用于搜索(和分析) Elasticsearch是Elastic Stack核心的分布式搜索和分析引擎.Logstash和Beats有助于 ...
- latex_1_安装及语法基础入门
latex安装及语法基础入门 1.LaTeX环境的安装与配置 2.LaTeX源文件的基本结构 3.LaTeX中的中文处理方法 4.LaTeX的字体设置 5.LaTeX的篇章结构 6.LaTeX中的特殊 ...
- ROS Learning-032 (提高篇-010 Launch)Launch 深入研究 --- (启动文件编程)ROS 的 XML语法简介...
ROS 提高篇 之 Launch 深入研究 - 01 - 启动文件的编程 - ROS 的 XML语法简介 我使用的虚拟机软件:VMware Workstation 11 使用的Ubuntu系统:Ubu ...
- 一步步编写操作系统 77 内联汇编与ATT语法简介
内联汇编 之前和大家介绍过了一种汇编方法,就是C代码和汇编代码分别编译,最后通过链接的方式结合在一起形成可执行文件. 另一种方式就是在C代码中直接嵌入汇编语言,强大的GCC无所不能,咱们本节要学习的就 ...
- javascript语法_JavaScript传播语法简介
javascript语法 by Ashay Mandwarya ?️?? 由Ashay Mandwarya提供吗? JavaScript传播语法简介 (An introduction to Sprea ...
- [EasyHexo 专栏] #1 - Markdown 编辑器推荐与语法简介
EasyHexo? 轻松使用 Hexo 搭建你的博客 EasyHexo GitHub Repo? EasyHexo/Easy-Hexo 本篇作者:ChungZH 前言 Hexo 默认是使用 Markd ...
- PostgreSQL修炼之道:从小工到专家. 3.1 SQL语句语法简介
3.1 SQL语句语法简介 3.1.1 语句的分类 SQL命令一般分为DQL.DML.DDL几类. DQL:数据查询语句,基本就是SELECT查询命令,用于数据查询. DML:Data Manipul ...
- 关于VSCode安装 python 语法检测器插件 pylint 配置(Mac)
1.安装python插件 2.安装pylint 语法检测器 pip3 install pylint # 可以用下面的命令查看pylint的安装位置 which pylint # /usr/local/ ...
最新文章
- 华为鸿蒙系统封闭,谷歌正式“除名”华为!“亲儿子”荣耀表示:暂不考虑,鸿蒙OS处境尴尬...
- PostgreSQL高可用集群在360的落地实战
- @Entity,@Indexed @XmlRootElement
- 通过分区(Partitioning)提高Spark的运行性能
- 电脑报合订本_电脑报2018年合订本
- php 代码的分离和调用及注意事项(版本、变量及cookie与session的区别,PHP包含文件函数include、include_once、require、require_once区别和总结)
- Flutter自定义iconfont字体图标
- 深入浅出WPF教程笔记_XAML介绍
- 大学生搜题软件哪个好?2020搜题软件排行榜
- 中国最好的产品经理100人
- GNSS与GPS/北斗指的是什么
- 微信分享,获取分享点击事件,登录后才可以分享
- 红蜻蜓抓图软件测试简历,红蜻蜓抓图精灵
- 《钻石王牌》:热血青春·棒球1号位
- hr面试性格测试30题_面试性格测试题60道
- SSL证书.key转.pem的方法
- Android系统(168)---Android 开源项目分类汇总
- 2021年煤矿安全监测监控新版试题及煤矿安全监测监控
- Tom小猫,让我看清你的五脏六腑1
- 富文本转化为普通文本