jquery 中tips两则

jackyrong

浏览: 7943095 次
性别:
来自: 广州

最近访客更多访客>>

尘与飞

深情痞子

Crow00

zihai367

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax/web相关

选自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表示被替换的内容或元素

例子：
   当用户在文本框中输入要找的内容后，点查询，找到的内容以高亮形式显示，当重新查找时，高亮效果清除


!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>

分享到：

Selenium中执行Javascript | 推荐一个不错的百度前端数学公式编辑器

2015-01-08 23:08
浏览 1026
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery 中tips两则

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jquery 中tips两则

评论

发表评论

相关推荐

微信开发工具中时间问题的小坑

三篇不错的介绍CSS GRID的文章

双因素认证（2FA）教程

es6 中的export

markdown中的空格

(转）讲真，别再使用JWT了

(转）手把手教你WebStorm+chrome实现时时调试刷新

IntelliJ Idea 2017 免费激活方法

前端框架这么多，该何去何从？

记录一个HTML 5画拓扑图的商业公司

vue 2例子学习收集

（收藏）虚拟DOM内部是如何工作的

最近看到的几篇精彩JAVASCRIPT博客文章推荐

jsonp 跨域原理：深入浅出 jsonp

(转）深度长文-JavaScript数组所有API全解密

(收藏）网页导出PDF的方案

Chromium 新的弹窗机制以及 HTML 的 <dialog> 元素

国内一个不错的大屏UI设计厂家

canvas仿芝麻信用分仪表盘

(转）CSS 变量教程

最近访客更多访客>>