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 相关文章推荐
js prototype 格式化数字 By shawl.qiu
Apr 02 Javascript
js 遍历对象的属性的代码
Dec 29 Javascript
jQuery.getScript加载同域JS的代码
Feb 13 Javascript
JavaScript 验证码的实例代码(附效果图)
Mar 22 Javascript
前端轻量级MVC框架CanJS详解
Sep 26 Javascript
jQuery Form 表单提交插件之formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的应用
Jan 23 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
ng-alain表单使用方式详解
Jul 10 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
Mar 12 Javascript
js实现图片上传即时显示效果
Sep 30 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 数组排序方法总结 推荐收藏
2010/06/30 PHP
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
jQuery插件PageSlide实现左右侧栏导航菜单
2015/04/12 Javascript
理解javascript封装
2016/02/23 Javascript
jQuery+json实现动态创建复杂表格table的方法
2016/10/25 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
bootstrap导航条实现代码
2016/12/28 Javascript
jQuery实现链接的title快速出现的方法
2017/02/20 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
javascript中的replace函数(带注释demo)
2018/01/07 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
2018/02/10 Javascript
Bootstrap Table实现定时刷新数据的方法
2018/08/13 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
2019/10/16 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
python批量同步web服务器代码核心程序
2014/09/01 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
Java Spring项目国际化(i18n)详细方法与实例
2020/03/20 Python
利用Python实现朋友圈中的九宫格图片效果
2020/09/03 Python
jupyter使用自动补全和切换默认浏览器的方法
2020/11/18 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
大女孩胸罩:Big Girls Bras
2016/12/15 全球购物
顺丰快递Java软件工程师面试题
2015/07/31 面试题
幼儿园教师个人反思
2014/01/30 职场文书
物理教育专业求职信
2014/06/25 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书