《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.2 示例:移除类

3.2 示例:移除类

removeClass()函数的工作方式与addClass()相同。一个常见的使用示例是隐藏只有当JavaScript可用的时候才会使用的HTML元素。代码清单3-2演示了如何在文档刚加载完时移除no-js类。

代码清单3-2 在JavaScript不可用时隐藏HTML内容

00 <!DOCTYPE html>
01
02 <html lang="en">
03 <head>
04  <title>The removeClass() function</title>
05  <style>
06   .no-js {
07   display: none;
08  }
09  </style>
10 </head>
11 <body>
12 
13 <p>This page contains both text that is always
14  available and text that is only visible when
15  JavaScript is available</p>
16
17 <p class="no-js">This could be a part of the site that
18   is JavaScript dependent and is better hidden when
19   JavaScript is unavailable.</p>
20
21 <script src="http://code.jquery.com/jquery-latest.min.js"></script>
22
23 <script>
24 // 请将下列代码移至一个外部的.js文件中
25 $(document).ready(function() {
26
27  $('.no-js').removeClass('no-js');
28 
29  // removeClass()也可以没有参数;
30  // 但这会把元素上别的类也移除
31  //
32  // $('.no-js').removeClass();
33
34 });
35 </script>
36 </body>
37 </html>

还有另外一种方法,可以使用noscript元素,它的内容只会在JavaScript不可用时显示。

时间: 2024-09-19 15:28:17

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——3.2 示例:移除类的相关文章

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.6 技巧:使用对话框微件引起注意

7.6 技巧:使用对话框微件引起注意 如果想使网页中的一小部分内容脱颖而出,有几种方法可以实现它.其中一个方法是用对话框的形式显示内容.jQuery UI提供了这样一个对话框组件(dialog).代码清单7-6演示了如何从一个常见的段落元素创建对话框. 代码清单7-6 将段落元素转换为对话框 00 <!DOCTYPE html> 01 02 <html lang="en"> 03 <head> 04 <title>jQuery UI Di

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.8 技巧:使用滑块微件获取数字

7.8 技巧:使用滑块微件获取数字 在客户端应用程序中,你有时会发现滑块用做输入数字的元素.滑块的优点是,它比数字输入框更可视化和更直观. 代码清单7-8展示了如何将div改成滑块(slider)微件. 代码清单7-8 将 元素转换为滑块并显示其值 00 <!DOCTYPE html> 01 02 <html lang="en"> 03 <head> 04 <title>jQuery UI Slider</title> 05

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.5 技巧:使用日历微件选择日期

7.5 技巧:使用日历微件选择日期 在HTML5之前,在Web页面中选择日期是很痛苦的.甚至支持了HTML5的浏览器中仍有一些不能提供一个好用的日历. 代码清单7-5展示了jQuery UI提供的datepicker,它可以用于传统的输入框. 代码清单7-5 帮助网站用户输入日期 00 <!DOCTYPE html> 01 02 <html lang="en"> 03 <head> 04 <title>jQuery UI Datepick

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.2 技巧:使用自动补全微件提示输入值

7.2 技巧:使用自动补全微件提示输入值 在一些网站上,你可以找到用于选择的下拉菜单,它们包含了极长的选项列表.在许多情况下,可以使用具有自动补全功能的输入框取代下拉式菜单来帮助用户.省去了滚动选择,用户只要输入目标选项的第一个字符,然后自动补全组件便可以完成剩下的事. 代码清单7-2提供了一个自动补全的例子,它使用一段称为"Lorem Ipsum"的文字来实现输入第一个字后的补全.这段文字起源于两千年前,但仍然使用在图形设计和排版行业(通常被称为"假文"或&quo

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.7 技巧:使用进度条微件显示进程的状态

7.7 技巧:使用进度条微件显示进程的状态 当Web应用程序执行一个动作的持续时间超过大约两秒钟时,为用户显示动作状态是一个很好的做法.如果不知道动作的状态,通常会改变鼠标光标或显示一个旋转的效果. 在某些情况下,你能知道进程的进度.在这种情况下,最好尽可能准确地满足用户的期待.代码清单7-7介绍了jQuery UI的进度条(progressbar),可以使用它实现这样的目的. 代码清单7-7 将一个 元素转换为进度条 00 <!DOCTYPE html> 01 02 <html lan

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.18 技巧:利用JavaScript调用来变更页面

9.18 技巧:利用JavaScript调用来变更页面 在本章的开始部分,你已经看到了关于使用HTML链接(< a href="...">)把不同的页面连接起来的示例了.jQuery Mobile是JavaScript框架.虽然在jQuery Mobile中你几乎不用编写自己的JavaScript代码,但是还是需要有通过JavaScript变更页面的选择.代码清单9-21演示了如何使用JavaScript来变更至不同的页面. 代码清单9-21 通过JavaScript来变更

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.3 技巧:将元素转换为按钮微件

7.3 技巧:将元素转换为按钮微件 一般情况下,HTML提供了多种方法创建看似按钮的元素,甚至不使用CSS样式或JavaScript.回想一下,比如button元素.类型为button和submit的输入框. 通过结合CSS和JavaScript,任何元素都可以做成如按钮一样的外观.代码清单7-3演示了jQuery UI如何帮助你创建按钮. 代码清单7-3 选取一列元素并装饰成按钮 00 <!DOCTYPE html> 01 02 <html lang="en">

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——7.4 示例:使用按钮集装饰单选框

7.4 示例:使用按钮集装饰单选框 除了button,jQuery UI还提供了buttonset(按钮集).代码清单7-4演示了如何使用buttonset将一组单选框装饰成普通按钮的样式,其中每次只能选中一个按钮. 代码清单7-4 装饰一组单选框 00 <!DOCTYPE html> 01 02 <html lang="en"> 03 <head> 04 <title>jQuery UI Radio</title> 05 &

《jQuery、jQuery UI及jQuery Mobile技巧与示例》——第3章 修改页面 3.1 技巧:添加类

第3章 修改页面 本章介绍jQuery中操作HTML树的方法,包含操作类.attribute.property1和元素.本章还会演示同名方法之间的差异,并讨论潜在的性能问题. 3.1 技巧:添加类 不使用jQuery,单次调用函数只能设置元素的所有类,浏览器没有提供别的方法.在添加或者移除类的时候需要考虑元素上已经存在的其他类.这样,想给元素添加另外的类时就会增加额外的复杂度和开销.幸好jQuery提供了addClass()函数,可以方便地在选取集上添加一个或者多个类,从而解决了这个问题. 代码