jquery 中tips两则
丁志勇
选自jquery 权威指南2
1 假设有div为tips <div id="tips">aaaa</div>，可以用
if ($tip.html())
{
}
去判断，则当tips元素存在并且有内容的时候，该值才为true;
但如用 if ($tips.length()>0)则只能判断tips这个元素是否存在，但不能判断
元素这个div内是否有内容
2 replace和replacewith
obj.replace(regxp/substr,newstr)，将obj用正则表达式子替换，替换后的为newstr
而$(selector).replaceWidth(content)
$selector表示需要被替换的元素，content表示被替换的内容或元素
例子：
当用户在文本框中输入要找的内容后，点查询，找到的内容以高亮形式显示，当重新查找时，高亮效果清除
1 假设有div为tips <div id="tips">aaaa</div>，可以用
if ($tip.html())
{
}
去判断，则当tips元素存在并且有内容的时候，该值才为true;
但如用 if ($tips.length()>0)则只能判断tips这个元素是否存在，但不能判断
元素这个div内是否有内容
2 replace和replacewith
obj.replace(regxp/substr,newstr)，将obj用正则表达式子替换，替换后的为newstr
而$(selector).replaceWidth(content)
$selector表示需要被替换的元素，content表示被替换的内容或元素
例子：
当用户在文本框中输入要找的内容后，点查询，找到的内容以高亮形式显示，当重新查找时，高亮效果清除
!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>使用replace和replaceWith()方法替换内容</title>
<script src="Jscript/jquery-1.8.2.min.js"
type="text/javascript"></script>
<style type="text/css">
body{font-size:13px}
p{border:1px solid #666;width:280px;padding:8px; line-height:1.7em; font-size:13px}
.spn{padding-left:20px}
.focus{ background-color:#ccc;color:#fff}
.txt{border:#666 1px solid;padding:3px}
.btn{border:#666 1px solid;padding:2px;width:60px;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
</style>
<script type="text/javascript">
$(function() {
var search = {
searchstr: function() {
search.clearstr;
var searchText = $('#txtSearch').val();
var regExp = new RegExp(searchText, 'g');
if (searchText != "") {
$('p').each(function()
{
var newHTML = $(this).html().replace(regExp, '<span class="focus">' + searchText + '</span>');
$(this).html(newHTML);
});
}
},
clearstr: function() {
$('p').each(function()
{
$(this).find('.focus').each(function()
{
$(this).replaceWith($(this).html());
});
});
}
}
$('#btnSearch').bind("click", search.searchstr);
});
</script>
</head>
<body>
<div>
<input id="txtSearch" type="text" class="txt" />
<input id="btnSearch" type="button" class="btn" value="查询" />
</div>
<p>
<span class="spn"></span>jQuery发布于2006年，在后续的版本升级中，广大的开发者被其简洁的代码、强悍的功能、优雅的展现、强大的兼容所折服，不断有人加入其阵营，而恰在那年，也深深吸引了我的眼光，从此深入其中。<br />
<span class="spn"></span>为什么会有如此多的人钟爱jQuery，与其超大的功能是分不开的，目前的Web项目开发，不仅仅是基于功能上的考虑，而更注重于用户使用体验与页面静态优化，这是一个理性的回归，也是技术发展的必然趋势，而jQuery恰恰是实现这一趋势的坚实利刃，并且可以在最大程度上满足各类语言开发Web页面的使用。
</p>
</body>
</html>
类似资料：