jQuery属性选择器&表单选择器
Posted 栗栗本栗
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery属性选择器&表单选择器相关的知识，希望对你有一定的参考价值。
属性选择器
| 示例 | 说明 | |
|---|---|---|
| [attribute] | $("[href]") | 所有带有 href 属性的元素 |
| [attribute=value] | $("[href=’#’]") | 所有 href 属性的值等于 “#” 的元素 |
| [attribute!=value] | $("[href!=’#’]") | 所有 href 属性的值不等于 “#” 的元素 |
| [attribute$=value] | $("[href$=’.jpg’]") | 所有 href 属性的值包含以 “.jpg” 结尾的元素 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<br>
<a href="http://www.taobao.com">淘宝</a>
<br>
<a href="">测试</a>
<script src="js/jquery-1.12.4.js"></script>
<script>
//属性选择器
$('[href]').css("font-size","18pt");
$('[href!=""]').css("font-size","36pt");
</script>
</body>
</html>
表单选择器
| 示例 | 说明 | |
|---|---|---|
| :input | $(":input") | 所有 <input> 元素 |
| :text | $(":text") | 所有 type=“text” 的 <input> 元素 |
| :password | $(":password") | 所有 type=“password” 的 <input> 元素 |
| :radio | $(":radio") | 所有 type=“radio” 的 <input> 元素 |
| :checkbox | $(":checkbox") | 所有 type=“checkbox” 的 <input> 元素 |
| :submit | $(":submit") | 所有 type=“submit” 的 <input> 元素 |
| :reset | $(":reset") | 所有 type=“reset” 的 <input> 元素 |
| :button | $(":button") | 所有 type=“button” 的 <input> 元素 |
| :image | $(":image") | 所有 type=“image” 的 <input> 元素 |
| :file | $(":file") | 所有 type=“file” 的 <input> 元素 |
| :enabled | $(":enabled") | 所有激活的 input 元素 |
| :disabled | $(":disabled") | 所有禁用的 input 元素 |
| :selected | $(":selected") | 所有被选取的 input 元素 |
| :checked | $(":checked") | 所有被选中的 input 元素 |
案例1 获select选中的值
获取所有option的文本值：
$("#s").text(); //获取所有option的文本值
获取选中的option的文本值：
$("#s option:selected").text(); //获取选中的option的文本值
获取select中option的被选中的value值:
$("#s").val();
js获取select选中的值：
var sel = document.getElementById("select1");
var index = sel.selectedIndex; // 选中索引
var value = sel.options[index].value;//选中索引的值
案例2 获radio选中的值
$('input[name="testradio"]:checked').val();
$('input:radio:checked').val();
$('input[name="testradio"][checked]');
$('input[name="testradio"]').filter(':checked');
以上是关于jQuery属性选择器&表单选择器的主要内容，如果未能解决你的问题，请参考以下文章
[ jquery 表单UI选择器和表单元素属性选择器 ] 表单UI选择器和表单元素属性选择器
jQuery 基本选择器 层次选择器 过滤选择器 内容过滤选择器 可见过滤选择器 属性过滤选择器 表单对象属性过滤选择器