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 相关文章推荐
浏览器无法运行JAVA脚本的解决方法
Jan 09 Javascript
javascript 按回车键相应按钮提交事件
Nov 02 Javascript
javascript Onunload与Onbeforeunload使用小结
Dec 31 Javascript
JavaScript中实现PHP的打乱数组函数shuffle实例
Oct 11 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
jQuery基本选择器之标签名选择器
Sep 03 Javascript
JS动画定时器知识总结
Mar 23 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
javascript数组元素删除方法delete和splice解析
Dec 09 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
Apr 22 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截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
php上传文件的增强函数
2010/07/21 PHP
20个PHP常用类库小结
2011/09/11 PHP
强烈声明: 不要使用(include/require)_once
2013/06/06 PHP
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
TBCompressor js代码压缩
2011/01/05 Javascript
JQuery Highcharts 动态生成图表的方法
2013/11/15 Javascript
js数组去重的常用方法总结
2014/01/24 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
jQuery使用正则验证15/18身份证的方法示例
2017/04/27 jQuery
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
python连接池实现示例程序
2013/11/26 Python
Ubuntu 14.04+Django 1.7.1+Nginx+uwsgi部署教程
2014/11/18 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
python利用lxml读写xml格式的文件
2017/08/10 Python
Python生成任意范围任意精度的随机数方法
2018/04/09 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
Python连接Hadoop数据中遇到的各种坑(汇总)
2020/04/14 Python
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
单位实习证明怎么写
2014/01/17 职场文书
《云房子》教学反思
2014/04/20 职场文书
行政诉讼答辩状
2015/05/21 职场文书
2016年寒假家长评语
2015/10/10 职场文书
周一给客户的问候语
2015/11/10 职场文书
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript