一、Jquery的可见性选择器：

可见性选择器： 
1、:visable 筛选可以见的元素 
2、 :hidden 筛选不可见的元素

效果：

源码：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>jquery 学习1</title>
  6. <!--  导入jquery库 -->
  7. <script type="text/javascript" src="jquery/jquery.js"></script>
  8. <script type="text/javascript">
  9. $(function(){
  10.     $("#btn1").click(function(){
  11.         $("div:visible").css("background","#FFBBAA");
  12.     });
  13.     $("#btn2").click(function(){
  14.         //show 返回jquery对象本身，继续可以调用jquery的方法
  15.         $("div:hidden").show(1000).css("background","#FFBBAA");
  16.     });
  17.     $("#btn3").click(function(){
  18.         alert($("input:hidden").val());
  19.     });
  20.  
  21. })
  22. </script>
  23.  
  24. </head>
  25. <body>
  26. Jquery的可见性选择器：
  27.  
  28. 可见性选择器：
  29. <br>
  30. 1、:visable 筛选可以见的元素
  31. <br>
  32. 2、  :hidden      筛选不可见的元素
  33. <br>
  34.  
  35. <hr>
  36. <button id="btn1">获取可见的div</button>
  37. <button id="btn2">获取不可见的div</button>
  38. <button id="btn3">获取隐藏域的值</button>
  39.  
  40. <input type="hidden" value="这是个隐藏域12">
  41.  
  42. <p>
  43. 子层
  44. <div id="d1" style="display:none"> 孙子层d1  </div>
  45. <span>  这是一个行信息</span>
  46. <div>
  47. div 孙子层
  48. </div>
  49. </p>
  50. <h1>这是h1 不在div内</h1>
  51. <hr>
  52. <div  id="d33"> 
  53.  
  54. <h2>这是h2 在div内</h2>
  55.  
  56. 子层2
  57. <div style="background:#FFFFFF"> 孙子层2   </div>
  58. <br/>
  59. <span> 这是一个行信息2</span>
  60. <div id="d2">
  61. div 孙子层2
  62. </div>
  63. </div>
  64.  
  65. <br/>
  66. <div>
  67. 这是第三个div层
  68. </div>
  69.  
  70. <br/>
  71.  
  72. <span>这是第四个span</span>
  73.  
  74. <p>
  75. <div style="background:#FF00FF "></div>
  76. <div id="d5"> 这是第5个层</div>
  77.  
  78. </p>
  79.  
  80. </body>
  81. </html>

(8)Jquery1.8.3快速入门_可见性选择器的更多相关文章

  1. (6)Jquery1.8.3快速入门_过滤选择器

    一.Jquery的基本过滤选择器: 基本过滤选择器: 1. :first 选取第一个元素 2. :last 选取最后一个元素 3.:not(selector) 去除所有与给定的选择器匹配的元素 4.: ...

  2. (5)Jquery1.8.3快速入门_层次选择器

    一.Jquery的选择器: 层级选择器: 1.空格                div    span              div中的包含的所有span后代元素 2. >        ...

  3. (4)Jquery1.8.3快速入门_基本选择器

    一.Jquery选择器: 基本选择器: 1.id                           #id      根据元素的id获取的唯一元素. 2.class                  ...

  4. (7)Jquery1.8.3快速入门_内容过滤选择器

    一.Jquery的内容过滤选择器: 内容过滤选择器: 1.:contains(text) 选取含有文本内容为text的元素 2. :empty 选取不包含子元素或者文本为空的元素 3.:has(sel ...

  5. Spring_MVC_教程_快速入门_深入分析

    Spring MVC 教程,快速入门,深入分析 博客分类: SPRING Spring MVC 教程快速入门  资源下载: Spring_MVC_教程_快速入门_深入分析V1.1.pdf Spring ...

  6. 【笔记目录2】【jessetalk 】ASP.NET Core快速入门_学习笔记汇总

    当前标签: ASP.NET Core快速入门 共2页: 上一页 1 2  任务27:Middleware管道介绍 GASA 2019-02-12 20:07 阅读:15 评论:0 任务26:dotne ...

  7. (1)Jquery1.8.3快速入门_helloworld

    jquery 快速入门 学习记录 1.第一个jquery程序 helloworld: 需要导入Jquery1.8.3的库 ,下载地址: jQuery1.8.3   代码令另存到本地 保存为jquery ...

  8. Robot Framework 快速入门_中文版

    目录 介绍 概述 安装 运行demo 介绍样例应用程序 测试用例 第一个测试用例 高级别测试用例 数据驱动测试用例 关键词keywords 内置关键词 库关键词 用户定义关键词 变量 定义变量 使用变 ...

  9. 【笔记目录1】【jessetalk 】ASP.NET Core快速入门_学习笔记汇总

    当前标签: ASP.NET Core快速入门 共2页: 1 2 下一页  任务50:Identity MVC:DbContextSeed初始化 GASA 2019-03-02 14:09 阅读:16 ...

随机推荐

  1. PMP：10.项目采购管理

    内容中包含 base64string 图片造成字符过多,拒绝显示

  2. entity.Database.SqlQuery() 和entity.Database.SqlCommand()

    原文地址: http://msdn.microsoft.com/en-us/library/gg715124(v=vs.103) 使用 EF 4.1 或者更新版本, 你可以直接执行任何数据库命令. 在 ...

  3. 64位平台C/C++容易犯的错误

     64位平台的介绍 IA-64 is a 64-bit microprocessor architecture developed by Intel and Hewlett Packard compa ...

  4. 【2016年终大典】i春秋一年中不可错过的安全精华

    这是一个24小时不下课的安全技术大学堂, 每分钟250条学习状态发布, 每天迎接3万求知若渴的用户, 最高同时在线人数超过2万人: 这是一个知识分享的聚宝盆, 安全技术课程208门.2138节.427 ...

  5. JDK8 新增的日期时间API

    背景 JDK8中增加了一套全新的日期时间API,这里进行总结下,方便查询使用. 新的时间及日期API位于 java.time 包中,下面是一些关键类. Instant:代表的是时间戳. LocalDa ...

  6. odoo开发笔记 -- tree视图按指定字段group_by分组显示

    注意点: view视图文件中的搜索视图要放在action视图的前边. 在action视图中,要写search_view_id, 还有context, search_default_group_by_字 ...

  7. postgresql数据库删除时提示回话 sessions using the database

    数据库命令行或者管理工具中执行删除数据库的命令, DROP DATABASE testdb; 的时候,可能会提示: ERROR: database "testdb" is bein ...

  8. [linux]解析crontab

    linux提供了一个非常强大而且又比较好用的命令 [crontab] crontab是Unix和Linux用于设置周期性被执行的指令,是互联网很常用的技术,很多任务都会设置在crontab循环执行, ...

  9. Execution failed for task ':app:processDebugResources'

    经常会遇到突然AndroidStudio编译不了程序,报错误: Execution failed for task ':app:processDebugResources'. > Failed ...

  10. EL表达式jsp页面double小数点后保留两位

    EL表达式jsp页面double小数点后保留两位,四舍五入 <fmt:formatNumber type="number" value="${member.logi ...