jQuery中:selected选择器用法实例


Posted in Javascript onJanuary 04, 2015

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

此选择器能够匹配被选择的<option>元素。

语法结构:

$(":selected")

此选择器可以和其他选择器配合使用,比如类选择器、元素选择器等等。例如:
$(".myselect :selected").css("color","red")

以上代码能够将类名为myselect的元素下被选择的<option>元素中的文本颜色设置为红色。大家一定要注意上面的代码,两个选择器之间是用空格分隔的,这个时候是后代选择器, 如果没有空格的话那就成了复合属性选择器,代码的意思也就变为将类名为myselect并且被选择的<option>元素中的字体颜色设置为红色。

实例代码:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

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

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

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

<script type="text/javascript"> 

$(document).ready(function(){ 

  $(".myselect :selected").css("color","red") 

}); 

</script>

</head>

<body>

<ul>

  <li>

    <select name="myselect" class="myselect">

      <option>html专区</option>

      <option>ASP专区</option>

      <option selected="selected">JQuery专区</option>

    </select>

  </li>

</ul>

</body>

</html>

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

Javascript 相关文章推荐
js 弹出框 替代浏览器的弹出框
Oct 29 Javascript
浅析document.ready和window.onload的区别讲解
Dec 18 Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
总结在前端排序中遇到的问题
Jul 19 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
Jan 19 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
Feb 28 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
Jul 31 Javascript
使用 Node.js 模拟滑动拼图验证码操作的示例代码
Nov 02 Javascript
js利用iframe实现选项卡效果
Aug 09 Javascript
js通过canvas生成图片缩略图
Oct 02 Javascript
jQuery中:checked选择器用法实例
Jan 04 #Javascript
jQuery中:disabled选择器用法实例
Jan 04 #Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 #Javascript
jQuery中:enabled选择器用法实例
Jan 04 #Javascript
jQuery中:file选择器用法实例
Jan 04 #Javascript
jQuery中:button选择器用法实例
Jan 04 #Javascript
原生javascript实现隔行换色
Jan 04 #Javascript
You might like
cache_lite试用
2007/02/14 PHP
php定时删除文件夹下文件(清理缓存文件)
2013/01/23 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
JavaScript获取DOM元素的11种方法总结
2015/04/25 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
jQuery Mobile开发中日期插件Mobiscroll使用说明
2016/03/02 Javascript
thinkjs之页面跳转同步异步操作
2017/02/05 Javascript
使用Xcache缓存器加速PHP网站的配置方法
2017/04/22 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
2017/08/07 Javascript
JS自定义函数实现时间戳转换成date的方法示例
2017/08/27 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
Vue实现表格中对数据进行转换、处理的方法
2018/09/06 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
Python实现的朴素贝叶斯分类器示例
2018/01/06 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
一篇文章彻底搞懂Python中可迭代(Iterable)、迭代器(Iterator)与生成器(Generator)的概念
2019/05/13 Python
Python解析json代码实例解析
2019/11/25 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
Python安装whl文件过程图解
2020/02/18 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
html table呈现个人简历以及单元格宽度失效的问题解决
2021/01/22 HTML / CSS
巴西宠物店在线:Geração Pet
2017/05/31 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
Nayomi官网:沙特阿拉伯王国睡衣和内衣品牌
2020/12/19 全球购物
电气自动化自荐信
2013/10/10 职场文书
电子商务专员岗位职责
2013/12/11 职场文书
简单的辞职信范文
2014/01/18 职场文书
给校长的建议书200字
2014/05/16 职场文书
家装业务员岗位职责
2015/04/03 职场文书
广播体操比赛主持词
2015/06/29 职场文书
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电