`

jQuery-show()与html()及hide()用法 学习笔记四

HTMLjQueryJavaScript.netBlog 
阅读更多

测试小程序段代码：

  1. .....
  2. <script src="jquery-1.2.6.min.js" type="text/javascript"></script>
  3. <script type="text/javascript"> 
  4. $(document).ready(function(){
  5. $("a").addClass("test").show().html("新添加数据");
  6. //对比：$("a").addClass("test").html("新添加数据二");
  7. }); 
  8. </script> 
  9. <style>
  10. .test
  11. {
  12. color:red;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <a href="http://blog.csdn.net/lansky07/">
  18. 原来数据
  19. </a> 
  20. <br>
  21. <a href="http://blog.csdn.net/lansky07/" style="display:none;">
  22. 原来数据二
  23. </a> 
  24. .....

解释一下上面测试程序的意思：

首先增加样式，
然后
show( ):显示隐藏的匹配元素，两个链接都显示了出来。
html("新添加数据*"):设置每一个匹配元素的html内容

我们发现 超连接里面的内容原来数据 已经被替换了成新添加数据.并且有两个链接.效果如下：

见附件1

 

 

注意注释了的对比的那条语句，现在把原来的的语句注释，而把对比语句注释去除，其效果为如下：

见附件2

 

 

更详细的show()、html()可以参考API。

下面说一下hide()用法，测试程序代码片段如下：

  1. .....
  2. <script src="jquery-1.2.6.min.js" type="text/javascript"></script>
  3. <script type="text/javascript">
  4. $(document).ready(function(){
  5. $("a").click(function(){
  6.     $(this).hide("slow");
  7.     return false;
  8. }); 
  9. });
  10. </script>
  11. </head>
  12. <body>
  13. <a href="http://blog.csdn.net/lansky07/">
  14.     现在，只要你点击超链接，超链接就会慢慢的消失。<br/>
  15.    “return false"表示保留默认行为，因此页面不会跳转。
  16. </a>
  17. .....

效果通过测试可以看到，正如程序刚运行显示的提示效果：点击超链接，超链接就会慢慢的消失，页面不会跳转--这是语句:return false的结果。在程序中$(this)  表示前面的$("a")对象。

 

  • 描述: 附件1
  • 大小: 3.2 KB
  • 描述: 附件2
  • 大小: 3.2 KB
分享到：
| (转)公司正式宣布创业失败
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery 学习笔记总结

    **jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库，它简化了网页文档对象模型（DOM）操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念，包括选择器、常用方法以及在...

    JQuery学习笔记（日常积累）

    掌握这些基本概念和方法后，开发者可以更高效地使用jQuery进行网页开发，减少与DOM交互的复杂性，提高代码的可读性和可维护性。jQuery还提供了丰富的插件和扩展，使得功能更加多样，满足各种复杂的前端需求。在实际...

    JQuery学习笔记（技术文档）

    ### JQuery学习笔记（技术文档） #### 一、JQuery能做什么？ JQuery 是一款轻量级的 JavaScript 库，它的设计宗旨是“write less, do more”，即“写得更少，做得更多”。通过JQuery，可以实现以下功能： 1. **...

    jquery学习笔记

    《jQuery学习笔记详解》 jQuery，作为一款广泛应用于Web开发的JavaScript库，以其简洁的API、强大的功能和广泛的社区支持，极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。这篇学习笔记将深入探讨...

    圣思源的jquery学习笔记

    《圣思源jQuery学习笔记详解》 jQuery，作为一款强大的JavaScript库，自2006年发布以来，因其简洁易用的API和丰富的插件生态，迅速成为了前端开发者的重要工具。圣思源张龙老师的jQuery学习笔记，深入浅出地剖析了...

    我的JQuery笔记.doc

    《jQuery学习笔记详解》 jQuery 是一款强大的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。本笔记基于一年的学习经验，涵盖了基础到进阶的知识点，旨在帮助初学者快速掌握...

    jQuery学习笔记带example

    在本篇jQuery学习笔记中，我们将探讨如何使用这个流行的JavaScript库来简化网页开发中的DOM操作。jQuery以其简洁的API和强大的功能，使得处理HTML元素、事件处理、动画以及Ajax交互变得更加简单。以下是一些基本的...

    jQuery验证框架学习笔记.pdf

    ### jQuery验证框架学习笔记知识点概览 #### 一、引言 jQuery 验证框架是基于 jQuery 开发的一个用于前端表单验证的强大插件。它提供了丰富的验证规则和灵活的配置选项，使得开发者能够轻松地实现对用户输入数据的...

    jquery学习配套资料

    本压缩包提供了全面的jQuery学习资源，包括全版本的jQuery库、学习日志、常用插件及官方帮助文档，是初学者与进阶者不可或缺的学习资料。 ### jQuery基础 1. **DOM操作**：jQuery通过选择器选取DOM元素，如`$("#id...

    jQuery学习总结笔记

    jQuery 是一个广泛使用的 JavaScript 库，它通过简化 DOM 操作、事件处理、动画效果和Ajax交互，极大地提高了前端开发的效率。jQuery 以其简洁的API和良好的浏览器兼容性深受开发者喜爱，尤其在需要支持旧版IE浏览器...

    jquery完全笔记 带目录 高清 经典前端js笔记 前端必看

    ### jQuery完全笔记知识点概述 #### 1. jQuery概述 jQuery是一个快速、小型且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。通过使用jQuery，可以更方便地在网页中操作文档对象、选择...

    神奇的JQuery学习[基础学习笔记].pdf

    JQuery学习基础学习笔记为我们提供了一个全面认识和了解JQuery的机会，JQuery是一个快速、小巧且功能丰富的JavaScript库。它简化了HTML文档遍历和事件处理、DOM操作、动画以及Ajax交互，从而加速了web开发过程。 ...

    jQuery笔记（上）

    jQuery笔记（上）涵盖了jQuery的基本用法，包括引入jQuery库、选择器的使用、事件监听与处理，以及简单的动态效果实现。这些基础知识为后续深入学习jQuery提供了坚实的基础。通过学习和实践，开发者可以更加高效地...

    Jquery学习笔记

    jQuery 是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。本篇文章将深入探讨jQuery中的几个核心知识点，包括页面加载、选择器、过滤选择器、属性过滤选择器、子元素过滤选择器...

    自己整理的jQuery笔记

    1.4.6 隐式迭代是jQuery的一个特性，许多jQuery方法（如`.show()`, `.hide()`, `.append()`)会自动遍历所选元素集合，无需开发者显式循环，提高了代码的简洁性和可读性。 总的来说，jQuery通过提供丰富的API和简洁...

    jquery动画效果学习笔记（8种效果）

    在学习jQuery动画效果时，首先要知道的是，jQuery为开发者提供了一系列预定义的动画效果函数，这些函数可以用于实现元素的显示、隐藏以及淡入淡出等动态效果。动画效果使得页面元素能够以更流畅和吸引人的方式与用户...

    锋利的jquery笔记

    一旦选取了元素，jQuery提供了各种方法来操作它们，如`.html()`用于设置或获取元素的HTML内容，`.text()`用于处理文本内容，`.addClass()`和`.removeClass()`用于添加或移除类名，`.show()`和`.hide()`用于显示或...

    jquery常用笔记

    4. **DOM操作**：使用`show()`, `hide()`, `empty()`和`append()`方法显示、隐藏、清空和添加DOM元素。 5. **事件绑定**：通过`change()`方法监听下拉列表的改变事件，并执行相应的逻辑处理。 #### 六、省市联动...

Magicbox
Global site tag (gtag.js) - Google Analytics