jquery 中tips两则

lylicai

2015-01-08

关注关注

选自jquery权威指南2

1假设有div为tips<divid="tips">aaaa</div>，可以用

if($tip.html())

{

}

去判断，则当tips元素存在并且有内容的时候，该值才为true;

但如用if($tips.length()>0)则只能判断tips这个元素是否存在，但不能判断

元素这个div内是否有内容

2replace和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>

jquery