您的位置：首页 > Web前端 > JQuery

jQuery-:contains("")查询包含值的用法实例

2016-04-11 19:29 603 查看

目标效果：

输入内容点击select按钮，可以使表格中包含输入内容的td改变css样式，再次输入新的td改变样式，原先td恢复原样。

1.创建项目，导入jQuery框架。

2.新建check.html页面。

check.html页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script>
$(function () {
$("#select").click(function () {
$("td").removeClass("checked");   //在查询一次后对应td发生变化，再次输入查询时，需要将上一次的td恢复原样，所以需要将所有td去掉css样式类
$("td:contains(" + $("#selectText").val() + ")").addClass("checked");   //匹配所有td中包含输入框值得td，并添加css样式类
});
});
</script>
<style>
.checked
{
background-color:#00ff00;
}
</style>
</head>
<body>
<table id="student" border="1">
<tr>
<td>姓名</td>
<td>专业</td>
<td>年级</td>
</tr>
<tr>
<td>张三</td>
<td>软件技术</td>
<td>2011</td>
</tr>
<tr>
<td>李四</td>
<td>网络技术</td>
<td>2012</td>
</tr>
<tr>
<td>王五</td>
<td>软件技术</td>
<td>2012</td>
</tr>
</table>
<input type="text" id="selectText"/>
<button id="select">select</button>
</body>
</html>

3.运行就可以看到目标效果了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

jQuery-:contains(&quot;&quot;)查询包含值的用法实例

jQuery-:contains("")查询包含值的用法实例