jquery隐藏和显示(jq显示隐藏div) 收藏 0

关于JQuery引用及基本用法

在JQuery文件中下载，并将其引入html文件。在使用jQuery之前，我们需要到jQuery的官方网站：“https://jquery.com/download/”

把下载好的文件放到工程根目录下，然后在这个根目录下创建index.html文件。最后，将下载的JQuery文件引入index.html文件，其代码如下：

通过引入script标签，JQuery被引入到subject的subject中，subject是：

接下来，我们将研究JQuery的基本语法，并对其进行一些介绍。

示例1:$(\”div\”).hide()；此行表示隐藏div元素；

例子2:$(\”.box1\”).hide()；这行代码意味着class属性隐藏在box1的元素中；

示例3:$(\”#wrap\”).hide()；这行代码表示隐藏元素id的值为wrap；

示例4:$(\”hide.box1\”).hide()；这一行代码意味着，隐藏带有box1的cycle属性的hv元素；

从上面的例子中可以看出，JQuery语法非常简单，只需要一个美元符号$，后面跟着一个html的元素选择符(与我们之前学到的css选择符高度一致)，然后在后面加上JQuery的方法，例如hide(show等等)。

无论显示或隐藏元素时，都需要一个事件来触发该动作，我们常用的触发方式是鼠标点击，比如你用鼠标点击一个按钮，然后页面上就会弹出一个提示框，通过点击来触发效果，我们称之为“事件”。点击JQuery中事件的书写方式为：$(\”div\”).click(function(){…})，此代码意味着在div标签被点击之后触发事件，具体事件内容以函数形式写入。除单击事件外，JQuery还可以通过鼠标移动事件、双击事件、元素获取焦点事件等方式进行学习，后面我们将一一介绍，并查看JQuery如何使用。

在以上代码中，我们定义了一个button元素，一个div元素，然后点击按钮button，这个div元素就会被隐藏起来，各位同学可以尝试一下。在代码的最后一部分，包含了一段script标签，这段是JavaScript代码，所有的JavaScript代码都将被放置在script标签中以执行。

接下来是代码的第一句话：$(document).ready(function){…}，这是JQuery的固定写法，意思是页面加载后立即执行，执行代码被写入function函数的方法中(即{}内)。我们已经看到了这一方法。

$(\”#btn1\”).click(函数){

$(\”.box1\”).hide()；

})

这个代码就是我们前面提到的click事件，当单击id值为btn1的按钮时，会引发一个click元素的隐藏事件，click元素的名字叫做box1。

千呼万唤始出来jQuery 3.0来了：10个炫酷新功能

微信ID：WEB_wysj(点击关注) ◎ ◎ ◎ ◎ ◎◎◎◎◎一┳═┻︻▄

（点击页底“阅读原文”前往下载）

● ● ●

JQuery 3.0终于来了。自从2014年10月开始，web开发人员社区就一直在等待这次重大更新。2016年6月，在千呼万盼之中，它终于来到了我们面前。

jQuery 3.0的版本说明中表示，这是一个更轻巧、速度更快的jQuery，而且保持着向后兼容的特性。在这篇文章中，我们将会窥探一下jQuery 3.0的一些新特性，了解一下它给JavaScript世界带来的变化。

何处下载

如果你想下载jQuery 3.0进行尝试，请直接前往下载页面。另外，它的升级指南和源代码也值得你去看一下。

如果你想要测试项目在 jQuery 3.0中的工作方式，你可以通过 jQuery迁移插件来识别代码的兼容性。

这篇文章并没有覆盖jQuery 3.0的所有新功能，只介绍了那些有意思的内容：更好的代码质量、新ECMAScript 6的整合功能、新的动画API、用来转义字符串的新方法，更强的SVG支持、经过改进的Async Callback、对响应式网页更好的兼容以及更高的安全性。

1、移除了旧的IE工作区

新版本最主要的目标之一，就是要变得更加快速和轻巧，因此此前版本中有关早于IE9浏览器的技术和工作区都被移除了。这意味着，如果你想要继续为IE6-8版本的浏览器提供支持，你就必须继续使用1.12版本，因为即使是2.X版本的jQuery也无法完整支持遭遇IE9版本的浏览器。你可以在jQuery 3.0的说明文档中查看浏览器的支持情况。

2、jQuery 3.0可以在Strict Mode中运行

jQuery 3所支持的大部分浏览器都支持strict mode，本次发布的新版本对这个规则进行了具体的规定。虽然jQuery 3是在strict mode中编写的，但是你需要知道，你所编写的代码不一定非要在strict mode中运行。因此，如果你想把以前的代码转移到jQuery 3中，你无需对代码进行重写。strict和non-strict模式的JavaScript可以彼此共存。

只有一个例外：某些版本的ASP.NET，由于strict mode的原因，无法兼容jQuery 3。如果你的代码涉及到了ASP.NET，你可以在这里查看详情。

3、引进For…of循环

jQuery 3现在支持For…of语句，这是ECMAScript 6新引进的一种for循环语句。它给Arrays、Maps和Sets等可迭代对象提供了一种更加简单直接的遍历方法。

在jQuery中，For…of循环可以替代早前的$.each(…)语法，并且让jQuery的元素集合循环变得更容易。

注意：for…of只能在支持ECMAScript 6的环境下或者使用Babel这样的JavaScript编译器下工作。

4、采用了新的动画API

jQuery 3使用了requestAnimationFranme API来执行动画，让动画的播放更加顺畅、速度更快。新的动画只能用在对其支持的浏览器中；一些老版本的浏览器（例如IE9)，jQuery会使用以前的API作为动画显示的后备方法。

RequestAnimationFrame已经推出一段时间了，如果你对如何使用它，获知什么时候可以使用它感兴趣，CSS Tricks上有一篇很好的文章可供你阅读。

5、包含特殊含义的字符串迎来了新的转义方法

新的jQuery.escapeSelector方法，可以让你对在CSS中具有其他含义的字符串或是字符以一种全新的方式进行转义，从而让其在jQuery选择器中继续可用，而无需对那些无法进行正确理解的JavaScript解释器进行转义。

下面这个例子可以帮助我们更好的理解这种方式：

假设页面中有某个对象，其ID为abc.def，由于选择器将其解析为“拥有abc ID，且包含一个名为def的类的对象”，从而无法被$( \”#abc.def\” )所选定。然而，它可以由 $( \”#\” + $.escapeSelector( \”abc.def\” ) )来进行选定。

我不确定类似的情况会多长时间发生一次，但是如果你的确遇到了这样的问题，你现在拥有了一个轻松的解决方式。

6、类操作方法支持SVG

可惜的是，jQuery现在还无法完全支持SVG，但是jQuery但是对于操作CSS类名称的jQuery方法，如addClass和.hasClass现在可以将SVG文档作为目标。这意味着，你可以修改（添加、移除、切换），或是寻找SVG下的jQuery类，然后使用CSS的样式。

7、延迟对象现在可以兼容JS Promises

JavaScript Promises是用于异步计算的对象，它在ECMAScript 6中已经完成了标准化；它们的行为和特性详细说明请参看 Promises/A+标准。

在jQuery 3中，延迟对象可与新的Promises/A+标准兼容。延迟对象成为了可链对象，让创建回调队列成为可能。

这个心特性改变了异步回调函数的执行方式。Promises让开发人员可以编写在逻辑上与同步代码更接近的异步代码。

8、jQuery.when对于多种参数的不同解读

$.when方法为回调函数的执行提供了一种方法。从1.5版本中，它就一直是jQuery的一部分。它是一种灵活的方法；它还使用与零参数，也适用于一个或者多个作为参数的对象。

jQuery 3改变了当包含$.when方法时对$.when中参数的解读方法，你可以对$.when进行额外的参数回调。

在 jQuery 3中，如果你使用then方法在$.when中添加一个输入参数，这个参数将会被解释为一个可兼容Promise的“thenable”。

这意味着$.when可以接受更宽更的输入范围，例如原生ES6 Promises和Bluebierd Promises，这让编写更复杂的异步回调成为了可能。

9、新的显示/隐藏逻辑

为了加强与响应式设计的兼容性， jQuery 3.中与显示和隐藏元素有关的代码也获得了升级。从现在开始，.show、.hide和.toggle方法将会专注于内联样式，以取代之前的计算样式，这种方法更加尊重样式列表的改变。

这个新的代码可以在任何可能的时候尊重样式列表中所显示的数值，这意味着，CSS规则可以根据事件，例如设备重定位和窗口尺寸的调整，来进行动态改变。

10、为防止XSS攻击提供额外的保护

jQuery 3针对XSS攻击添加了额外的保护层，它需要开发人员指定$.ajax和$.get方法中的选项为dataType: “sricpt”。

换句话说，如果你想要执行跨站点的脚本请求，你必须在这些方法中做出这种说明。

文本显示，当“远程站点传递非脚本内容之后又提供有恶意脚本的服务内容”时，这种方法非常有效。这种改变不会影响$.getScript方法，因为它明确地设置了dataType: “script\”选项。

干货！免费领取腾讯高级讲师网页设计教程

点我领取

☝☝☝

关注网页设计自学平台，99%的努力都在这里

▼想结交前端大神的可以点「阅读原文」噢！

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com