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 相关文章推荐
原创javascript小游戏实现代码
Aug 19 Javascript
javascript使用location.search的示例
Nov 05 Javascript
jQuery获取和设置表单元素的方法
Feb 14 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
Mar 04 Javascript
详解AngularJS中的依赖注入机制
Jun 17 Javascript
跟我学习javascript的定时器
Nov 19 Javascript
jquery datatable服务端分页
Aug 31 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
jquery插件ContextMenu设置右键菜单
Mar 13 Javascript
react-router实现跳转传值的方法示例
May 27 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 Javascript
js代码编写无缝轮播图
Sep 13 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
PHP学习资料汇总与网址
2007/03/16 PHP
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
php中获取关键词及所属来源搜索引擎名称的代码
2011/02/15 PHP
Yii框架实现的验证码、登录及退出功能示例
2017/05/20 PHP
PHP 文件上传限制问题
2019/09/01 PHP
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
用jQuery打造TabPanel效果代码
2010/05/22 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
Vue源码探究之状态初始化
2018/11/14 Javascript
vsCode安装使用教程和插件安装方法
2020/08/24 Javascript
微信小程序图片左右摆动效果详解
2019/07/13 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
[01:11:37]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第一场 11.19
2020/11/19 DOTA
python处理圆角图片、圆形图片的例子
2014/04/25 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
pytorch数据预处理错误的解决
2020/02/20 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
使用BeautifulSoup4解析XML的方法小结
2020/12/07 Python
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
春季运动会广播稿大全
2014/02/19 职场文书
集体婚礼策划方案
2014/02/22 职场文书
平安建设工作方案
2014/06/02 职场文书
社区娱乐活动方案
2014/08/21 职场文书
青年联谊会致辞
2015/07/31 职场文书
java实现对Hadoop的操作
2021/07/01 Java/Android
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android