手把手带你快速入门jQuery(建议收藏!!!)

2022-11-30 0 912

jQuery是甚么?

jQuery是两个加速、简约的JavaScript架构,是继Prototype后又两个杰出的JavaScript标识符库(或JavaScript架构)。

jQuery结构设计的核心理念理念是“write Less,Do More”,即提倡写更少的标识符,做更多的事。它PCBJavaScript常见的机能标识符,提供更多一类方便快捷的JavaScript程序语言,强化HTML文件格式操作方式、阿提斯鲁夫尔谷、美术结构设计和Ajax可视化。

jQuery的核心理念优点能归纳为:具备独有的拉艾句法和粗短明晰的多用途USB;具备高效率灵巧的css示例,因此可对CSS示例展开扩充;保有快捷的应用程序扩充监督机制和多样的应用程序。jQuery相容各式各样非主流应用程序,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

配搭音频效用较佳哦~~~

jQuery从进阶到通晓

https://www.ixigua.com/6846624275877593611

首章此基础

jQuery 是这款跨非主流应用程序的JavaScript 库,PCB了JavaScript 有关方式初始化,精简JavaScript 对HTML DOM 操作方式

官方网站门牌号: https://jquery.com/

官方网站主页jQuery 如是说:

手把手带你快速入门jQuery(建议收藏!!!)

书名译者:

jQuery 是两个加速,轻巧,机能强大的JavaScript 库。 它透过更易采用的API 在大批应用程序中运转,使HTML 文件格式结点和操作方式,阿提斯鲁夫尔谷,动画电影和Ajax 显得更为单纯。 透过运动性和可扩充性的紧密结合,jQuery 发生改变了上百万人撰写JavaScript 的方式。

为甚么[why]采用 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 名”) , $(“标签名) PCB了上面的 js 方式。

DOM 对象

文件格式对象模型(Document Object Model,简称 DOM),是 W3C 组织推荐的处理可扩充标志语言的标准编程USB。

透过 DOM 对 HTML 页面的解析,能将页面元素解析为元素节点、属性节点和文本节点,这些解析出的节点对象,即 DOM 对象。DOM 对象能采用 JavaScript 中的方式。

官方网站下载门牌号:

https://jquery.com/download/
手把手带你快速入门jQuery(建议收藏!!!)

jQuery 的不同版本中,2.xx 不再支持 IE6/7/8 应用程序。现阶段IE6/7/8 已经是淘汰的,非非主流。能不用考虑相容问题。

对于每两个同一版本号的 jQuery,其库又分为两个。两个是未压缩版,可查看源码,开发时采用;两个是压缩版,将注释、空格均做了删除,将变量字符数减少,产品上线时采用。

牛刀小试

撰写jQuery 的工具很多,能撰写HTML 的工具都支持jQuery. 例如记事本 ,EditPlus, webStorm, Visual Studio Code , HBuilder , HBuilderX , IDEA.

单独学习jQuery 库采用,能轻量的开发工具,例如EditPlus ,HBuilder,HbuilderX

撰写项目能采用集成开发工具,例如在IDEA, Eclipse ,MyEclipse ,WebStorm 等

第两个例子完成:应用程序完全装载html 页面 DOM 后,显示两个提示信息框

实现步骤:

1. 采用HBuilder 或HbuilderX, idea 都能,以HbuilderX 为工具,创建两个项目(名称:jquery-course),给项目选择两个文件存放目录。

手把手带你快速入门jQuery(建议收藏!!!)

2. 在项目中再创建两个目录

右键项目名称—新建—目录,常见名称为 js

手把手带你快速入门jQuery(建议收藏!!!)

3. 拷贝下载的jQuery.js 文件到目录

手把手带你快速入门jQuery(建议收藏!!!)

4. 采用 jQuery,首先要将 jQuery 库引入。采用如下语句:

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

5. $(document),将 DOM 对象 document 转换为jQuery 对象。

$(document).ready()函数是当 DOM 对象加载完毕后,马上执行的函数。

$(document).ready()与$()、jQuery()、window.jQuery()是等价的,所以

$(document).ready()能写成 $(function() { alert(“Hello jQuery”) } );

6. 完整标识符

手把手带你快速入门jQuery(建议收藏!!!)

DOM 对象和jQuery 对象

DOM 对象是用JavaScript 句法创建的对象,也看做是 js 对象。

1. DOM 对象转换jQuery 对象:

采用$(DOM 对象) 方式,能 DOM 对象转换为 jQuery 对象, 转换为jQuery 对象才能采用jQuery 中的提供更多的方式,操作方式DOM 对象。一般情况下,在命名 jQuery 对象时,为了与 DOM 对象展开区分,习惯性的以$ 开头,这不是必须的。

例:新建html 页面文件 domTojQuery.html

1. 页面加入按钮 button

手把手带你快速入门jQuery(建议收藏!!!)

2. 转换 DOM 对象

手把手带你快速入门jQuery(建议收藏!!!)

2. jQuery 对象转为DOM 对象

jQuery 对象本身为数组对象,该数组中的第 0 个元素即为该 jQuery 对象对应 的 DOM

例:新建html 文件 jQueryToDom.html

1. 页面添加 text ,button

手把手带你快速入门jQuery(建议收藏!!!)

2. jQuery 对象.get(0) 或 jQuery 对象[0] 均可完成 jQuery 对象转 DOM对象

手把手带你快速入门jQuery(建议收藏!!!)

示例

示例: 就是定位条件;通知jquery 函数定位满足条件的DOM 对象

基本示例

根据ID,class 属性,标签类型名定位HTML 元素,转为jQuery 对象.

1. id 示例

句法:$(“#id”)

2. class 选择器

句法:$(“.class 名称”)

3. 标签示例

句法:$(“标签名”)

例:新建selector.html

1. 在页面 head 部分加入 css

手把手带你快速入门jQuery(建议收藏!!!)

2. 加入 jQuery 引用

手把手带你快速入门jQuery(建议收藏!!!)

3.body 部分定义div

手把手带你快速入门jQuery(建议收藏!!!)

4.创建 js 函数

手把手带你快速入门jQuery(建议收藏!!!)

4. 所有示例

句法:$(“*”) 选取页面中所有DOM 对象。

5. 组合示例

组合示例是多个被选对象间采用逗号分隔后形成的示例,能组合 id, class,标签名等。

句法:$(“#id, .class, 标签名”)

例:

1. 上面的 selector.html 页面中加入按钮

手把手带你快速入门jQuery(建议收藏!!!)

2. 增加 js 函数

手把手带你快速入门jQuery(建议收藏!!!)

表单示例

表单有关元素示例是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方式无论是否存在表单<form>,均可做出相应选择。表单示例是为了能更为容易地操作方式表单,表单示例是根据元素类型来定义的

<input type=”text”>

<input type=”password”>

<input type=”radio”>

<input type=”checkbox”>

<input type=”button”>

<input type=”file”>

<input type=”submit”>

<input type=”reset”>

$(“:tr”): 不能用,tr 不是input 标签句法: $(“:type 属性值”)

例如:

$(“:text”)选取所有的单行文本框

$(“:password”)选取所有的密码框

$(“:radio”)选取所有的单选框

$(“:checkbox”)选取所有的多选框

例:

新建form.html 页面定义元素:

手把手带你快速入门jQuery(建议收藏!!!)

定义 js 函数:

手把手带你快速入门jQuery(建议收藏!!!)

过滤器

jQuery 对象中存储的DOM对象顺序与页面标签声明位置关系

<div>1</div> dom1

<div>2</div> dom2

<div>3</div> dom3

$(“div”) == [dom1,dom2,dom3]

过滤器就是过滤条件,对已经定位到数组中DOM 对象展开过滤筛选,过滤条件不能独立出现在jquery 函数,如果采用只能出现在示例后方。

基本过滤器

1. 选择第两个first, 保留数组中第两个DOM 对象

句法:$(“示例:first”)

2. 选择最后个last, 保留数组中最后DOM 对象

句法:$(“示例:last”)

3. 选择数组中指定对象

句法:$(“示例:eq(数组索引)”)

4. 选择数组中小于指定索引的所有DOM 对象

句法:$(“示例:lt(数组索引)”)

5. 选择数组中大于指定索引的所有DOM 对象

句法:$(“示例:gt(数组索引)”)

实例操作方式

1.定义样式

手把手带你快速入门jQuery(建议收藏!!!)

2. 页面加入div

手把手带你快速入门jQuery(建议收藏!!!)

3. 定义js 函数

手把手带你快速入门jQuery(建议收藏!!!)

表单对象属性过滤器

1. 选择可用的文本框

$(“:text:enabled”)

2. 选择不可用的文本框

$(“:text:disabled”)

3. 复选框选中的元素

$(“:checkbox:checked”)

4. 选择指定下拉列表的被选中元素

示例>option:selected

例:

创建filterForm.html 页面:

手把手带你快速入门jQuery(建议收藏!!!)

js 函数

手把手带你快速入门jQuery(建议收藏!!!)

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务