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 YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
js中关于一个分号的崩溃示例
Nov 11 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
addeventlistener监听scroll跟touch(实例讲解)
Aug 04 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
Feb 04 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 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动态生成缩略图并输出显示的方法
2015/04/20 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法
2016/11/03 PHP
php读取本地json文件的实例
2018/03/07 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
js函数般调用正则
2008/04/08 Javascript
JS Range HTML文档/文字内容选中、库及应用介绍
2011/05/12 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
2014/01/24 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
JavaScript学习小结(7)之JS RegExp
2015/11/29 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
2016/05/17 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
js模糊查询实例分享
2016/12/26 Javascript
原生JS实现圣旨卷轴展开效果
2017/03/06 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
layui表格checkbox选择全选样式及功能的实例
2018/03/07 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
Python实现包含min函数的栈
2016/04/29 Python
Python3 操作符重载方法示例
2017/11/23 Python
利用python实现微信头像加红色数字功能
2018/03/26 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
HTML5制作表格样式
2016/11/15 HTML / CSS
新西兰Bookabach:查找全球度假屋
2020/12/03 全球购物
商务专员岗位职责
2013/11/23 职场文书
公务员总结性个人自我评价
2013/12/05 职场文书
《都江堰》教学反思
2014/02/07 职场文书
平安建设实施方案
2014/03/19 职场文书
心理健康活动总结
2014/04/30 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
mysql 带多个条件的查询方式
2021/06/05 MySQL