jquery过滤器9.28

最新推荐文章于 2024-11-02 12:42:04 发布

归-途

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量82

点赞数

文章标签： javascript jquery

本文链接：https://blog.csdn.net/w1824575989/article/details/108858342

版权

基本过滤器内容过滤器

<script type="text/javascript">
$(function () {
$("tbody tr:odd").css("color", "black");//基数行
$("tbody tr:first").css("color", "white");//选择第1个
$("tbody tr:eq(2)").css("color", "red");//选择第1个
$("tbody tr:has(span)").css("color", "blue");//保护span标签
$("tbody tr:contains('2')").css("color", "red");//内容有为1
})
</script>

<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
</tr>
<tr>
<td>2</td>
<td>张三</td>
</tr>
<tr>
<td>3</td>
<td>张三</td>
</tr>
<tr>
<td>4</td>
<td>张三</td>
</tr>
<tr>
<td>5</td>
<td><span>张三</span></td>
</tr>
</tbody>
</table>

可见性过滤器

$(function () {
           alert($("li:hidden").length);//不可见元素1
alert($("li:visible").length);//可见元素4
           });

<ol>
       <li style="display:none">列表1 new</li>
       <li style="visibility:hidden">列表2</li>
       <li>列表3 new</li>
       <li>列表4</li>
       <li>列表5</li>
   </ol>

属性过滤器

<script type="text/javascript">
$(function () {
$("a[href=#]").attr("href", "javascript:void(0");
$("a[id^=a]").css("color", "red")
$("a[class*=a]").css("color", "black");
$("a[class$=a]").css("color", "red");
$("a[class$=a][id^=a]").css("color", "black");
})
</script>
<body>
<div style="height:1000px;width:500px;border:1px solid red"></div>
<a id="a1" href="#">链接1</a>
<a id="a2" href="javascript:void(0)">链接2</a>
<a class="a1" href="#">链接3</a>
<a class="a2" href="#">链接4</a>
<a class="a3a" href="#">链接5</a>
<a id="a3" class="a3a" href="#">链接6</a>
</body>

表单选择器

<script type="text/javascript">
$(function () {
$(":submit").click(function () {
var name = $(":text").val();
console.log(name);

var sex= $(":radio:checked").val();
console.log(sex);

var hot = "";
$(":checkbox:checked").each(function () {
hot += $(this).val()+" ";
});
console.log(hot);

var drop = $("#drop :selected").val();
console.log(drop);
})

})
</script>
</head>
<body>
<table>
<tr>
<td>姓名：</td>
<td>
<input type="text" id="name" name="name" />
</td>
<td rowspan="5">
dfgfghfghf
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" checked name="sex" id="sex1" value="男" />
<label for="sex1">男</label>
<input type="radio" name="sex" id="sex2" value="女" />
<label for="sex1">女</label>
</td>
</tr>
<tr>
<td>爱好：</td>
<td>
<input type="checkbox" name="category" id="cat1" value="足球" />
<label for="cat1">足球</label>
<input type="checkbox" name="category" id="cat2" value="篮球" />
<label for="cat2">篮球</label>
<input type="checkbox" name="category" id="cat3" value="羽毛球" />
<label for="cat3">羽毛球</label>
</td>
</tr>
<tr>
<td>籍贯：</td>
<td>
<select id="drop">
<option>--请选择--</option>
<option>河南</option>
<option>河北</option>

</select>
</td>
</tr>
<tr>
<td>籍贯：</td>
<td>
<textarea>

</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="提交" />
<input type="button" value="重置" />
</td>
</tr>
</table>