jquery selected选择器入门教程

发布时间:2019-11-14编辑:脚本学堂
jquery :selected选择器的用法,此选择器能够匹配被选择的option元素,包括selected选择器的语法结构与例子,不了解的朋友参考下。

jquery-xuanzeqi/ target=_blank class=infotextkey>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="http://www.plcxue.com/" />
<title>plc学堂</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>