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 相关文章推荐
在网页里看flash的trace数据的js类
Jan 10 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
实例详解angularjs和ajax的结合使用
Oct 22 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
Aug 31 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 Javascript
vue实现全选、反选功能
Nov 17 Javascript
Parcel.js + Vue 2.x 极速零配置打包体验教程
Dec 24 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
vue 实现的树形菜的实例代码
Mar 19 Javascript
详解js获取video任意时间的画面截图
Apr 17 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
实例分析javascript中的异步
Jun 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
php学习笔记 PHP面向对象的程序设计
2011/06/13 PHP
PHP开发中常见的安全问题详解和解决方法(如Sql注入、CSRF、Xss、CC等)
2014/04/21 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
PHP实现查询手机归属地的方法详解
2017/04/28 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
在 Laravel 中动态隐藏 API 字段的方法
2019/10/25 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
网上抓的一个特效
2007/05/11 Javascript
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
JavaScript 题型问答有答案参考
2010/02/17 Javascript
通过jquery 获取URL参数并进行转码
2014/08/18 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
JS声明式函数与赋值式函数实例分析
2016/12/13 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
node.js读取Excel数据(下载图片)的方法示例
2018/08/02 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
Python中AND、OR的一个使用小技巧
2015/02/18 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
浅谈Python处理PDF的方法
2017/11/10 Python
Python OpenCV 直方图的计算与显示的方法示例
2018/02/08 Python
实例讲解Python爬取网页数据
2018/07/08 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
Python浮点数四舍五入问题的分析与解决方法
2019/11/19 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
英国花园药房: The Garden Pharmacy
2017/12/28 全球购物
诉讼代理人授权委托书
2014/10/11 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers