1. jQuery简介

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。详情请查看百度百科

简单来说，jQuery就是简化了JS中繁琐的DOM操作，使你的代码更简洁，真正做到“write Less，Do More”

2. 下载以及引用

  • 下载

jQuery的推荐去官网下载 jQuery下载地址

如下图所示：



两个链接对应的文件

编号 1 2
文件名 jQuery.3.4.1.min.js jQuery.3.4.1.js
版本 发布版（压缩版） 开发版（常规版）
适用场景 项目上线时用 平时开发用
区别 删除了所有的空格和回车，代码非常紧凑，可读性变差，但是文件大小缩减了，页面的访问速度加快了 规范的代码，可读性高

两个文件内容都是一模一样的，只是文件大小不同

  • 引用
<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>

	</head>

	<body>

	</body>

</html>

直接引入外部文件就行了，文件路径信息不要写错，jQuery的下载以及引用就结束了。

3. 基本语法与初始函数

  • 基本语法
$(选择器).方法名（）;

jQuery中选择器语法可以参考CSS，因为它们非常相似。

核心函数$()：获取页面中元素转化为jQuery对象

选择器 ：获取需要操作的DOM元素

方法名 ()：jQuery中提供的方法，其中包括绑定事件处理的方法

$符号代表jQuery，所以

$(function(){}) 等价于

 jQuery(function({})

两种写法都是合法的，意思都一样，$是简写的一种形式

- 初始函数

windows.onload() $(document).ready()
执行时机 必须等待页面中所有的内容加载完毕后（图片、flash、视频等）才能执行 网页中所有的DOM文档结构绘制完毕后立即执行，可能与DOM元素关联的内容（图片、flash、视频）并没有加载完。
编写个数 同一页面不能编写多个 同一页面可以编写多个
简化写法 无 $(function(){})

- DOM模型

将HTML XML等文档结构的标签语言看成DOM模型

DOM模型下即是DOM节点

DOM节点有三种类型：

  • 元素节点：例如<html> <div> <body>...所有的元素
  • 属性节点：元素节点的属性 例如title src alt...
  • 文本节点：文本节点

- DOM对象

以上三种节点类型的具体对象 就是DOM对象。

使用层面：凡是JavaScript能够直接操作的对象，就是DOM对象。

例如 ：var title = document.getElementById("myTitle");

通过js获取到的title对象，就是一个DOM对象

- jQuery对象

凡是jQuery能够直接操作的对象，就是jQuery对象。

为了容易区别DOM对象和jQuery对象，一般都会在jQuery对象名称前加$号

例如：var $title = $("#myTitle");

通过jQuery对象获取到的 $title 就是一个jQuery对象。同样一个元素，既可以成为一个DOM对象（JavaScript对象），也可以成为一个jQuery对象。

注意：DOM对象只适用于js的各种语法（函数、属性），jQuery对象只用于jQuery的各种语法（函数、属性）。

DOM对象与jQuery对象互相独立。

例如：

title是DOM对象，因此可以使用js属性或方法 title.innerHTML

$title是jQuery对象，因此可以使用jQuery属性或方法 $title.html()

jQuery入门一（jQuery下载以及基本语法）的更多相关文章

  1. jQuery入门、jQuery选择器、jQuery操作

    一.什么是jQuery及如何使用 1.1 jQuery 简介 jQuery是一个兼容多浏览器的javascript函数库(把我们常用的一些功能进行了封装,方便我们来调用,提高我们的开发效率.),核心理 ...

  2. jquery 入门之-------jquery 简介

    什么是jquery? Jquery是一个Javascript库,通过封装原生的Javascript函数得到一套定义好的方法.它可以用个少的代码完成更多更强大更复杂的功能,从而得到开发者的青睐. So! ...

  3. JQuery入门

    JQuery入门 1 jQuery的概述 1.1 jQuery简介 jQuery是一个 JavaScript函数库,它是一个“写的更少,但做的更多”的轻量级 JavaScript 库.jQuery 极 ...

  4. JQuery入门篇

    JQuery入门篇 jQuery选择器 “$”表示JQuery对象 根据ID查找 $(‘#var’)表示将一个id值为var的DOM节点封装成一个jQuery对象,DOM节点必须以“#”开头. 例如: ...

  5. jQuery入门（4）jQuery中的Ajax应用

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  6. 第一百六十二节，jQuery入门介绍

    jQuery入门 学习要点: 1.什么是  jQuery 2.学习 jQuery的条件 3.jQuery的版本 4.jQuery的功能和优势 5.其他 JavaScript库 6.是否兼容低版本  I ...

  7. jQuery入门和DOM对象

    jQuery入门和DOM对象 1.开发准备 1. 下载的版本: jquery-3.3.1.min.js :压缩版,发布版84.8KB jquery-3.3.1.js :常规版,开发版265KB 2. ...

  8. jQuery入门（1）jQuery中万能的选择器

    jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应 ...

  9. 第 1 章 jQuery 入门

    学习要点: 1.什么是 jQuery 2.学习 jQuery 的条件 3.jQuery 的版本 4.jQuery 的功能和优势 5.其他 JavaScript 库 6.是否兼容低版本 IE 7.下载及 ...

随机推荐

  1. rem.js移动布局实例教程

    最近想买需要开发微站,微信公众号内嵌入的移动web,总结方法可以使用css3直接使用百分比布局,也可以使用bootstrap做响应式布局等多种方法,个人感觉看项目需要,笔者使用rem.js进行移动前端 ...

  2. kafka笔记6

    我们讨论可靠性时,一般使用保证这个词,它是确保系统在各种不同的环境下能够发生一致的行为.Kafka可以在哪些方面作出保证呢? 1.Kafka可以保证分区消息的顺序 2.只有消息被写入分区的所有同步副本 ...

  3. 在centos7上安装Docker CE

    Docker CE的基本安装 https://docs.docker.com/engine/installation/linux/docker-ce/centos/ 一.系统要求 1.安装Docker ...

  4. 高并发 Nginx+Lua OpenResty系列（4）——Lua 模块开发

    在实际开发中,不可能把所有代码写到一个大而全的lua文件中,需要进行分模块开发:而且模块化是高性能Lua应用的关键.使用require第一次导入模块后,所有Nginx 进程全局共享模块的数据和代码,每 ...

  5. laravel中的构造函数依赖注入理解

    laravel中的自动依赖注入是非常强大的,刚开始会疑惑为什么只要在构造函数中传入一个强制类型的变量(就是参数有类型限制)过去就行了? 通过查看源码即查阅资料发现其实这其中有一个php技术,就是反射技 ...

  6. 最新ubuntu搭建公网个人邮件服务器(基于postfix，dovecot,mysql)

      最近做了一个应用,需要用邮件发通知,但是免费的邮箱每天发信数量是有限制的,所以呢就想着搭建一个自己的邮件服务器,能够实现邮件的发送和接收即可,其中大概花了一个星期找资料,测试,终于成功了,写个教程 ...

  7. Mac上PyCharm运行多进程报错的解决方案

    Mac上PyCharm运行多进程报错的解决方案 运行时报错 may have been in progress in another thread when fork() was called. We ...

  8. Ruby中的数值

    数值类型 Ruby中所有数值都是Numeric类的子类对象,数值都是不可变对象. 数值类型的继承关系如下: Integer是整数,Float是浮点数类型,Rational是分数. 对于整数,要么是Fi ...

  9. 常用的方法论-SWOT

  10. 深入理解Java内存模型JMM与volatile关键字

    深入理解Java内存模型JMM与volatile关键字 多核并发缓存架构 Java内存模型 Java线程内存模型跟CPU缓存模型类似,是基于CPU缓存模型来建立的,Java线程内存模型是标准化的,屏蔽 ...