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. bootstrap模态框篇【遇到的问题】

    <div class="modal fade" tabindex="-1" role="dialog">  <div cl ...

  2. 【POJ - 3414】Pots(bfs)

    Pots 直接上中文 Descriptions: 给你两个容器,分别能装下A升水和B升水,并且可以进行以下操作 FILL(i)        将第i个容器从水龙头里装满(1 ≤ i ≤ 2); DRO ...

  3. 【通过ssh oracle11g安装】centos6静默安装oracle11g

    转载链接:https://blog.csdn.net/u011391839/article/details/76566316 根据实际情况略作调整~ 博主参考了以上链接成功进行安装,列一下自己遇到的坑 ...

  4. Java web环境的搭建

    学习java web 首先得要能够在自己的电脑上配置环境,经查阅资料后了解,需要装java EEEclipse ,即企业版的,还有就是tomcat服务器. 第一步,从网上下载,eclipse 企业版的 ...

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

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

  6. 一个commit引发的思考

    这几天我翻了翻golang的提交记录,发现了一条很有意思的提交:bc593ea,这个提交看似简单,但是引人深思. commit讲了什么 commit的标题是"sync: document i ...

  7. redhat6.0下配置DNS

    最近操作系统要结课,老师要求在redhat上配置各种服务器角色,包括dhcp.ftp.web.dns.前三个都还好,但就dns,被折磨的死去活来的,真让人头大.还好在同学的帮助下最后配置成功,实现了正 ...

  8. ES集群监控 之 Cerebro 0.8.3 安装及简单使用

    注意权限,不建议使用root,同es集群的启动用户相同即可 1. 下载 & 解压 # 下载 wget https://github.com/lmenezes/cerebro/releases/ ...

  9. java虚拟机-GC-GC算法

    在C/C++中是由程序员自己去申请.管理和释放内存的,因此没有GC的概念.而在Java中,专门有一个用于垃圾回收的后台线程来进行监控.扫描,自动将一些无用的内存进行释放.下面介绍几种常见的GC算法. ...

  10. 02(d)多元无约束优化问题-拟牛顿法

    此部分内容接<02(a)多元无约束优化问题-牛顿法>!!! 第三类:拟牛顿法(Quasi-Newton methods) 拟牛顿法的下降方向写为: ${{\mathbf{d}}_{k}}= ...