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中eval函数的使用示例
Jul 21 Javascript
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
Javascript玩转继承(三)
May 08 Javascript
控制文字内容的显示与隐藏示例
Jun 11 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
基于node.js之调试器详解
Aug 22 Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 Javascript
Vue监听页面刷新和关闭功能
Jun 20 Javascript
JS继承定义与使用方法简单示例
Feb 19 Javascript
js实现坦克大战游戏
Feb 24 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
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
2013/06/21 Javascript
关于IE中getElementsByClassName不能用的问题解决方法
2013/08/26 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
JavaScript中判断原生函数检查function是否是原生代码
2014/09/09 Javascript
jQuery DOM插入节点操作指南
2015/03/03 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
Bootstrap表单布局
2016/07/19 Javascript
vue.js初学入门教程(2)
2016/11/07 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
webpack4 css打包压缩问题的解决
2018/05/18 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
Javascript实现简易天数计算器
2020/05/18 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
spyder常用快捷键(分享)
2017/07/19 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
DJango的创建和使用详解(默认数据库sqlite3)
2019/11/18 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
TripAdvisor瑞典:全球领先的旅游网站
2017/12/11 全球购物
致长跑运动员加油稿
2014/02/20 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
个人工作表现自我评价
2015/03/06 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
小学英语教师2015年度个人工作总结
2015/10/14 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书