博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript(14)jQuery(JavaScript 库)
阅读量:7026 次
发布时间:2019-06-28

本文共 2104 字,大约阅读时间需要 7 分钟。

JavaScript 框架(库)
JavaScript 高级程序设计(特别是对浏览器差异的复杂处理),通常非常困难也非常耗时。为了应对这些调整,很多的 JavaScript (helper) 库应运而生。

这些 JavaScript 库常被称为 JavaScript 框架。
jQuery
jQuery 是眼下最受欢迎的 JavaScript 框架。

它使用 CSS 选择器来訪问和操作网页上的 HTML 元素(DOM 对象)。jQuery 同一时候提供 companion UI(用户界面)和插件。

jQuery 极大地简化了 JavaScript 编程,非常easy学习。
jQuery 库 - 特性
jQuery 是一个 JavaScript 函数库。jQuery 库包括下面特性:

  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和改动
  • AJAX
  • Utilities
怎样使用呢?曾经没用过,感觉非常茫然啊。。

。慢慢摸索着弄弄看。。。

一、下载
到jQuery官网http://jquery.com/,进行下载。我选择了“下载未压缩的,发展的jQuery 1.11.1”。
简介下:
未压缩的文件。最好在开发或调试过程中使用;压缩文件,能够节省带宽,提高生产性能,用于实际的站点中。

jQuery的2.x与jQuery的1.x具有同样的API。但不支持Internet Explorer 6,7,8。
下载下来的东西是:jquery-1.11.1.js(jQuery 库位于一个 JavaScript 文件里,当中包括了全部的 jQuery 函数。

假设不愿意在自己的计算机上存放 jQuery 库,那么能够从 Google 或 Microsoft 等地方。载入 CDN jQuery 核心文件。

二、使用
比方如今呢。我想实现一个隐藏的效果。比方我点击一段文字,这段文字就会消失。那怎样利用jQuery来实现呢?
首先,我要查阅一下jQuery參考手冊。网址:http://www.w3school.com.cn/jquery/jquery_reference.asp
这里面呢,有个“效果”选项。“效果”里面呢,有个 hide() 函数,函数说明是:隐藏被选的元素。
看来用 hide() 函数能够实现我想实现的功能。点击“ hide() ”能够看看怎样使用该函数。
然后。看一下怎样引用“jquery-1.11.1.js”。
把“jquery-1.11.1.js”放在代码的同级文件夹下。通过下面代码来引用“jquery-1.11.1.js”:

假设不希望下载并存放 jQuery,那么也能够通过 CDN(内容分发网络) 引用它。

谷歌和微软的server都存有 jQuery 。从 Google 或 Microsoft 载入 CDN jQuery 核心文件:

使用谷歌或微软的 jQuery。有一个非常大的优势:
很多用户在訪问其它网站时。已经从谷歌或微软载入过 jQuery。所以结果是,当他们訪问你的网站时,会从缓存中载入 jQuery,这样能够降低载入时间。同一时候,大多数 CDN 都能够确保当用户向其请求文件时,会从离用户近期的server上返回响应,这样也能够提高载入速度。

对于 Google 。如果想訪问新版本号(如果不知道新版本号的详细版本号号)。那么能够把“1.11.1”改为“1.11”或“1”,谷歌会返回对应系列中最新的可用版本号。
接下来,学习一下jQuery 语法
jQuery 语法是为 HTML 元素的选取编制的,能够对元素运行某些操作。
基础语法是:$(selector).action()
美元符号$定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素
jQuery 的 action() 运行对元素的操作
演示样例:
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏全部段落
$(".test").hide() - 隐藏全部 class="test" 的全部元素
$("#test").hide() - 隐藏全部 id="test" 的元素
提示:jQuery 使用的语法是 XPath 与 CSS 选择器语法的组合。
注意:
jQuery 函数应该位于一个 document ready 函数(文档就绪函数)中:

$(document).ready(function(){--- jQuery functions go here ----});
这是为了防止文档在全然载入(就绪)之前执行 jQuery 代码。假设在文档没有全然载入之前就执行函数,操作可能失败。
接下来就是代码啦:
  //引用jquery

假设您点击我。我会消失。

</p> <p>点击我,我会消失。</p> <p>也要点击我哦。</p> </body> </html>

嗯,实践了一下,感觉不错。我在我的站点上运用了一下, 。

转载地址:http://ctoxl.baihongyu.com/

你可能感兴趣的文章
web前端工具收集
查看>>
19.12添加自定义监控项目19.13/19.14 配置邮件告警19.15 测试告警19.16 不发邮件的问题处理...
查看>>
bottle框架学习(二)之HTTP请求
查看>>
java 构造方法总结
查看>>
The content of elements must consist of well-formed character data or markup解决方法
查看>>
详解Linux运维工程师高级篇(大数据安全方向)
查看>>
如何批量下载PDF
查看>>
8月第三周网络安全报告:放马站点域名423个
查看>>
k8s集群之日志收集EFK架构
查看>>
php curl
查看>>
分布式服务框架之服务化最佳实践
查看>>
Kubernetes之路 1 - Java应用资源限制的迷思
查看>>
重磅!MaxCompute助力阿里开源自研语音识别模型DFSMN,准确率高达96.04%
查看>>
自己动手玩转深度学习项目
查看>>
nginx反向代理获取用户真实ip
查看>>
Python pass 语句
查看>>
PySide数据库类学习QSqlDatabase(二)
查看>>
定时修改Windows密码
查看>>
Sphinx语音识别学习记录 (三)-小范围语音英文识别
查看>>
DNS
查看>>