(8)Jquery1.8.3快速入门_可见性选择器
一、Jquery的可见性选择器:
可见性选择器:
1、:visable 筛选可以见的元素
2、 :hidden 筛选不可见的元素
效果:
源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery 学习1</title>
<!-- 导入jquery库 -->
<script type="text/javascript" src="jquery/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
$("div:visible").css("background","#FFBBAA");
});
$("#btn2").click(function(){
//show 返回jquery对象本身,继续可以调用jquery的方法
$("div:hidden").show(1000).css("background","#FFBBAA");
});
$("#btn3").click(function(){
alert($("input:hidden").val());
}); })
</script> </head>
<body>
Jquery的可见性选择器: 可见性选择器:
<br>
1、:visable 筛选可以见的元素
<br>
2、 :hidden 筛选不可见的元素
<br> <hr>
<button id="btn1">获取可见的div</button>
<button id="btn2">获取不可见的div</button>
<button id="btn3">获取隐藏域的值</button> <input type="hidden" value="这是个隐藏域12"> <p>
子层
<div id="d1" style="display:none"> 孙子层d1 </div>
<span> 这是一个行信息</span>
<div>
div 孙子层
</div>
</p>
<h1>这是h1 不在div内</h1>
<hr>
<div id="d33"> <h2>这是h2 在div内</h2> 子层2
<div style="background:#FFFFFF"> 孙子层2 </div>
<br/>
<span> 这是一个行信息2</span>
<div id="d2">
div 孙子层2
</div>
</div> <br/>
<div>
这是第三个div层
</div> <br/> <span>这是第四个span</span> <p>
<div style="background:#FF00FF "></div>
<div id="d5"> 这是第5个层</div> </p> </body>
</html>
(8)Jquery1.8.3快速入门_可见性选择器的更多相关文章
- (6)Jquery1.8.3快速入门_过滤选择器
一.Jquery的基本过滤选择器: 基本过滤选择器: 1. :first 选取第一个元素 2. :last 选取最后一个元素 3.:not(selector) 去除所有与给定的选择器匹配的元素 4.: ...
- (5)Jquery1.8.3快速入门_层次选择器
一.Jquery的选择器: 层级选择器: 1.空格 div span div中的包含的所有span后代元素 2. > ...
- (4)Jquery1.8.3快速入门_基本选择器
一.Jquery选择器: 基本选择器: 1.id #id 根据元素的id获取的唯一元素. 2.class ...
- (7)Jquery1.8.3快速入门_内容过滤选择器
一.Jquery的内容过滤选择器: 内容过滤选择器: 1.:contains(text) 选取含有文本内容为text的元素 2. :empty 选取不包含子元素或者文本为空的元素 3.:has(sel ...
- Spring_MVC_教程_快速入门_深入分析
Spring MVC 教程,快速入门,深入分析 博客分类: SPRING Spring MVC 教程快速入门 资源下载: Spring_MVC_教程_快速入门_深入分析V1.1.pdf Spring ...
- 【笔记目录2】【jessetalk 】ASP.NET Core快速入门_学习笔记汇总
当前标签: ASP.NET Core快速入门 共2页: 上一页 1 2 任务27:Middleware管道介绍 GASA 2019-02-12 20:07 阅读:15 评论:0 任务26:dotne ...
- (1)Jquery1.8.3快速入门_helloworld
jquery 快速入门 学习记录 1.第一个jquery程序 helloworld: 需要导入Jquery1.8.3的库 ,下载地址: jQuery1.8.3 代码令另存到本地 保存为jquery ...
- Robot Framework 快速入门_中文版
目录 介绍 概述 安装 运行demo 介绍样例应用程序 测试用例 第一个测试用例 高级别测试用例 数据驱动测试用例 关键词keywords 内置关键词 库关键词 用户定义关键词 变量 定义变量 使用变 ...
- 【笔记目录1】【jessetalk 】ASP.NET Core快速入门_学习笔记汇总
当前标签: ASP.NET Core快速入门 共2页: 1 2 下一页 任务50:Identity MVC:DbContextSeed初始化 GASA 2019-03-02 14:09 阅读:16 ...
随机推荐
- javascript中数组总结
数组是所有高级语言都会有的东西,数组是JS中使用最多的类型之一,所以掌握JS中数组的用法相当有帮助: 由于JS是一门弱类型的语言,所以数组里面可以放各种不同的数据类型,比如 var a = [1993 ...
- 【转】Asp.NetMve移除HTTP Header中服務器信息Server、X-AspNet-Version、X-AspNetMvc-Version、X-Powered-By:ASP.NET
默認情況下Chrome中截獲的HTTP Header信息: Cache-Control: Content-Encoding:gzip Content-Length: Content-Type:text ...
- Java 使用 Jxl 实现 Excel 导入导出
开发过程中经常需要用到数据的导入导出功能,之前用的是POI,这次使用JXL,JXL相对于POI来说要轻量简洁许多,在数据量不大的情况下还是非常实用的.这里做一下使用JXL的学习记录.首先需要导入相应的 ...
- Ajax原理与封装详解
Ajax大家每天都在用,jquery库对Ajax的封装也很完善.很好用,下面我们看一下他的内部原理,并手动封装一个自己的Ajax库. 更多有关ajax封装及数据处理,请参看上海尚学堂<Ajax中 ...
- 超实用的Docker入门教程|Docker vs VM
概述 如今Docker的使用已经非常普遍,特别在一线互联网公司.使用Docker技术可以帮助企业快速水平扩展服务,从而到达弹性部署业务的能力.在云服务概念兴起之后,Docker的使用场景和范围进一步发 ...
- 动态创建数据table
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 《深入浅出nodejs》读书笔记(2)
概述 本来是想着学学node.js试试的,后来发现node.js才是真正的js啊,它里面用到了很多我们平时没用过的js特性,而且还非常优雅,比如它里面的异步编程思想,总之,<深入浅出node.j ...
- 使用本地缓存快还是使用redis缓存好?
使用本地缓存快还是使用redis缓存好? Redis早已家喻户晓,其性能自不必多说. 但是总有些时候,我们想把性能再提升一点,想着redis是个远程服务,性能也许不够,于是想用本地缓存试试!想法是不错 ...
- Robot Framework - 2 - 创建测试库
04- 创建测试库--基础概念 Robot Framework 实际的测试能力是由测试库提供的. ***** 支持的编程语言 Robot Framework 自身是用 Python 编写的,能使用 P ...
- React 实现一个时钟
最终效果 其实主要难点在于最左边的小时钟 指针的实现方式很简单,就是通过绝对定位将指针移到中间,然后以下边中间的位置为圆心旋转即可.代码如下: <!DOCTYPE html> <ht ...