1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.         <title>Untitled Document</title>
  6.         <link rel="stylesheet" type="text/css" href="css/style.css">
  7.                 <style type="text/css">
  8.             div, span, p {
  9.                 width: 140px;
  10.                 height: 140px;
  11.                 margin: 5px;
  12.                 background: #aaa;
  13.                 border: #000 1px solid;
  14.                 float: left;
  15.                 font-size: 17px;
  16.                 font-family: Verdana;
  17.             }
  18.  
  19.             div.mini {
  20.                 width: 55px;
  21.                 height: 55px;
  22.                 background-color: #aaa;
  23.                 font-size: 12px;
  24.             }
  25.  
  26.             div.hide {
  27.                 display: none;
  28.             }
  29.         </style>
  30.         <script type="text/javascript" src="jquery-1.7.2.js"></script>
  31.         <script type="text/javascript">
  32.             $(document).ready(function(){
  33.  
  34.                 $("#btn1").click(function(){
  35.                     $("div:visible").css("background", "#ffbbaa");
  36.                 });
  37.                 $("#btn2").click(function(){
  38.                     //alert($("div:hidden").length);
  39.                     //show(time): 可以使不可见的元素变为可见, time 表示时间, 以
  40.                     //毫秒为单位
  41.                     //jQuery 的很多方法支持方法的连缀, 即一个方法的返回值来时调用该
  42.                     //方法的 jQuery 对象: 可以继续调用该对象的其他方法.
  43.                     $("div:hidden").show(2000).css("background",
  44.                             "#ffbbaa");
  45.                 });
  46.                 $("#btn3").click(function(){
  47.                     //val() 方法可以返回某一个表单元素的 value 属性值.
  48.                     alert($("input:hidden").val());
  49.                 });
  50.  
  51.             });
  52.  
  53.         </script>
  54.     </head>
  55.     <body>
  56.         <input type="button" value="选取所有可见的  div 元素" id="btn1">
  57.         <input type="button" value="选择所有不可见的 div 元素" id="btn2" />
  58.         <input type="button" value="选择所有不可见的 input 元素" id="btn3" />
  59.  
  60.         <br><br>
  61.         <div class="one" id="one">
  62.             id 为 one,class 为 one 的div
  63.             <div class="mini">class为mini</div>
  64.         </div>
  65.         <div class="one" id="two" title="test">
  66.             id为two,class为one,title为test的div
  67.             <div class="mini" title="other">class为mini,title为other</div>
  68.             <div class="mini" title="test">class为mini,title为test</div>
  69.         </div>
  70.         <div class="one">
  71.             <div class="mini">class为mini</div>
  72.             <div class="mini">class为mini</div>
  73.             <div class="mini">class为mini</div>
  74.             <div class="mini"></div>
  75.         </div>
  76.         <div class="one">
  77.             <div class="mini">class为mini</div>
  78.             <div class="mini">class为mini</div>
  79.             <div class="mini">class为mini</div>
  80.             <div class="mini" title="tesst">class为mini,title为tesst</div>
  81.         </div>
  82.         <div style="display:none;" class="none">style的display为"none"的div</div>
  83.         <div class="hide">class为"hide"的div</div>
  84.         <div>
  85.             包含input的type为"hidden"的div
  86.             <input type="hidden" value="123456789000" size="8">
  87.         </div>
  88.         <div id="mover">正在执行动画的div元素.</div>
  89.     </body>
  90. </html>

jQuery选择器(可见性选择器)第五节的更多相关文章

  1. JQuery的可见性选择器

    1. <div id="test" style="width:400px;height:200; background:#0000ff;display:block; ...

  2. ABP module-zero +AdminLTE+Bootstrap Table+jQuery权限管理系统第十五节--缓存小结与ABP框架项目中 Redis Cache的实现

    返回总目录:ABP+AdminLTE+Bootstrap Table权限管理系统一期 缓存 为什么要用缓存 为什么要用缓存呢,说缓存之前先说使用缓存的优点. 减少寄宿服务器的往返调用(round-tr ...

  3. (8)Jquery1.8.3快速入门_可见性选择器

    一.Jquery的可见性选择器: 可见性选择器: 1.:visable 筛选可以见的元素 2. :hidden 筛选不可见的元素 效果: 源码: <!DOCTYPE html> <h ...

  4. jQuery九类选择器

    目的:通过选择器,能定位web页面(HTML/JSP/XML)中的任何标签, 注意:项目中,通常是多种选择器一起使用 基本选择器 <html> <head> <meta ...

  5. 第一百六十五节，jQuery，过滤选择器

    jQuery,过滤选择器 学习要点: 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法 过滤选择器简称:过滤器.它其实也是一种选择器,而这种选择器类似与 CSS3 (h ...

  6. 第三百二十五节，web爬虫，scrapy模块标签选择器下载图片，以及正则匹配标签

    第三百二十五节,web爬虫,scrapy模块标签选择器下载图片,以及正则匹配标签 标签选择器对象 HtmlXPathSelector()创建标签选择器对象,参数接收response回调的html对象需 ...

  7. jQuery学习- 子选择器与可见性选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. jquery可见性选择器（综合）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jquery可见性选择器（匹配匹配所有显示的元素）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 【JVM命令系列】jstack

    jstack用于打印出给定的java进程ID或core file或远程调试服务的Java堆栈信息,如果是在64位机器上,需要指定选项"-J-d64",Windows的jstack使 ...

  2. python GUI实战项目——tkinter库的简单实例

    一.项目说明: 本次通过实现一个小的功能模块对Python GUI进行实践学习.项目来源于软件制造工程的作业.记录在这里以复习下思路和总结编码过程.所有的源代码和文件放在这里: 链接: https:/ ...

  3. JavaWeb（二）会话管理之细说cookie与session

    前言 前面花了几篇博客介绍了Servlet,讲的非常的详细.这一篇给大家介绍一下cookie和session. 一.会话概述 1.1.什么是会话? 会话可简单理解为:用户开一个浏览器,点击多个超链接, ...

  4. 管中窥豹——从OVS看SDN

    网络虚拟化是当前云计算最重要的特点之一,打通租户网络之间互通以及访问控制策略,最重要的是满足租户之间的网络隔离,这才是云计算网络的特点.而SDN的产生则是在网络虚拟化中,将控制面和业务面分离,控制面只 ...

  5. 简单Elixir游戏服设计- 游戏玩法介绍

    抄以前的,做了点修改. 到目前为止,我们完成了玩家的数据和进程建模,现在介绍游戏玩法. 为什么我们还不做客户端接入.协议指定呢?为什么还没有网关和数据存储呢.在我接手的游戏, 这些通常已经定下来了,我 ...

  6. Logcat monkey命令

    1. monkey命令 adb shell monkey -p com.autonavi.gxdtaojin --bugreport --ignore-crashes --ignore-timeout ...

  7. 关于string.h中字符串的操作

     string.h中字符操作的函数 注意:**对字符数组的多次操作需要进行赋初值.或者善于用memset()函数进行清空数组的操作.**     否则容易出现错误. string.h文件中函数的用法加 ...

  8. mysql分表场景分析与简单分表操作

    为什么要分表 首先要知道什么情况下,才需要分表个人觉得单表记录条数达到百万到千万级别时就要使用分表了,分表的目的就在于此,减小数据库的负担,缩短查询时间. 表分割有两种方式: 1水平分割:根据一列或多 ...

  9. PHP中如何定义类及其成员属性与操作

    1.类的定义: i. 类的关键字定义使用class 1.定义一个空类 Class Person{}; 2.定义一个有成员属性和操作的类 Class Person{ 成员属性........ 操    ...

  10. 企业微信开发之向员工付款（C#）

    一.企业微信API 地址:http://work.weixin.qq.com/api/doc#11545 二.参数说明 1.向员工付款 请求方式:POST(HTTPS)请求地址:https://api ...