我在互联网上遇到了一个jQuery程序。
它的目的是突出显示输入框中的文字
我自己尝试过,但是我并不理解在程序中使用以下关键字以及为什么首先使用单引号然后使用双引号以及为什么它与前面的加号一起使用和后方'" +searchValue+ "'
以下是html code
<!DOCTYPE html>
<html lang="en">
<head>
<title>
</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />
</head>
<body>
<p>
Search <br />
<input type="text" id="search_text" />
</p>
<ul id="myList">
<li>
sweden
</li>
<li>
tokyo
</li>
<li>
istambul
</li>
<li>
london
</li>
<li>
paris
</li>
</ul>
<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
<script type="text/javascript" src="js/custom.js" ></script>
</body>
</html>
以下是custom.css
代码
body ul{
padding-left: 0px;
}
ul li{
list-style:none;
}
.highlight{
background: #3bbf59;
}
以下是custom.js
$(document).ready(function(){
$('#search_text').on('keyup',function(){
var searchValue = $('#search_text').val();
$('#myList li').removeClass('highlight');
if($.trim('"+searchValue+"') !== ''){
$("#myList li:contains('" +searchValue+ "')").addClass('highlight');
}
});
});
我是jquery的初学者。
答案 0 :(得分:1)
第一种用法似乎不正确,应该是:
if($.trim(searchValue) !== ''){
检查输入的值是否不是空格。
第二种用法只是串联运算符的应用(二进制加):
$("#myList li:contains('" +searchValue+ "')").addClass('highlight');
将生成传递给jquery选择器的字符串。如果seachValue='some'
,您将拥有:
$("#myList li:contains('some')").addClass('highlight');