jQuery中:visible选择器用法实例


Posted in Javascript onDecember 30, 2014

本文实例讲述了jQuery中:visible选择器用法。分享给大家供大家参考。具体分析如下:

此选择器能够匹配所有当前可见的元素。

语法结构:

$(":visible")

此选择器一般也要和其他选择器配合使用,比如类选择器和元素选择器等等。例如:

$("div:visible").css({color:"blue"})

以上代码能够将可见的div元素中的字体颜色设置为蓝色。
如果不和其他选择器配合使用,则默认状态是和*选择器配合使用,例如$(":visible")等同于$("*:visible")。

实例代码:

实例一:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

.display{display:none;}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){ 

    $("div:visible").css({color:"blue"}); 

  }) 

}) 

</script>

</head>

<body>

<div class="display">我是不可见的</div>

<div>我是可见的</div>

<ul>

  <li>三水点靠木欢迎您</li>

</ul>

<button>点击查看效果</button>

</body>

</html>

以上代码可以将可见的可见div中的文本颜色设置为蓝色。

实例二:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="https://3water.com/" />

<title>三水点靠木</title>

<style type="text/css">

.display {

display:none;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("button").click(function(){ 

    $(":visible").css({color:"blue"}); 

  }) 

}) 

</script>

</head>

<body>

<div class="display">我是不可见的</div>

<div>我是可见的</div>

<ul>

  <li>三水点靠木欢迎您</li>

</ul>

<button>点击查看效果</button>

</body>

</html>

由于以上代码并没有指定与:visible选择器相配合使用的选择器,所以就默认和*选择器配合使用,于是代码能够将所有可见元素中的文本颜色设置为蓝色。

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
按给定几率进行随机抽取的js代码
Dec 28 Javascript
SuperSlide2实现图片滚动特效
Jun 20 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
JS简单实现数组去重的方法分析
Oct 14 Javascript
JS 仿支付宝input文本输入框放大组件的实例
Nov 14 Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 Javascript
extract-text-webpack-plugin用法详解
Feb 14 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 Javascript
JS实现烟花爆炸效果
Mar 10 Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 Javascript
JQuery设置时间段下拉选择实例
Dec 30 #Javascript
jQuery中:hidden选择器用法实例
Dec 30 #Javascript
jQuery中:has选择器用法实例
Dec 30 #Javascript
jQuery中:empty选择器用法实例
Dec 30 #Javascript
jQuery中:contains选择器用法实例
Dec 30 #Javascript
解决ueditor jquery javascript 取值问题
Dec 30 #Javascript
jQuery中:focus选择器用法实例
Dec 30 #Javascript
You might like
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
jQuery 学习 几种常用方法
2009/06/11 Javascript
ExtJS的FieldSet的column列布局
2009/11/20 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
javascript匀速动画和缓冲动画详解
2016/10/20 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
vuejs使用FormData实现ajax上传图片文件
2017/08/08 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
JavaScript类的继承操作实例总结
2018/12/20 Javascript
vue-router 起步步骤详解
2019/03/26 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
django使用xlwt导出excel文件实例代码
2018/02/06 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
面向对象设计的原则是什么
2013/02/13 面试题
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
市场营销方案范文
2014/03/11 职场文书
质量承诺书范文
2014/03/27 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
离婚协议书标准格式
2014/10/04 职场文书
夫妻忠诚协议书范本
2014/11/17 职场文书
求职自我评价怎么写
2015/03/09 职场文书
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL
Matlab如何实现矩阵复制扩充
2021/06/02 Python
Oracle数据库事务的开启与结束详解
2022/06/25 Oracle
Go语言怎么使用变长参数函数
2022/07/15 Golang