jquery高亮效果答案

【问题标题】：jquery highlight effectjquery高亮效果
【发布时间】：2015-02-25 18:08:00
【问题描述】：

我正在尝试找出在 http://www.w3schools.com/jquery/trysel.asp?filename=trysel_basic&jqsel=p.intro,%23choose 找到的 jquery 选择器测试的代码。

我收到错误：

未捕获的语法错误，无法识别的表达式：“h1”jquery.js:4241

当我在文本框中输入 h1 时，在 Chrome 开发人员工具中。右边应该突出显示<h1>标签内的“欢迎来到我的主页”。

有人能指出我哪里出错了吗？谢谢。

以下是我的代码：

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(":button").click(function(){
        var hl_str= '"'+$(":text").val()+'"';
        //document.write(hl_str);
        $(hl_str).effect("highlight",{color:"ff0000"},3000);
    });
})
</script>
</head>
<body>
<input type="text">
<input type="button" value="Edit and Click Me">
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
Who is your favourite:
<ul id="choose">
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</body>
</html>

【问题讨论】：

你在为effect() 使用Jqeury UI 库吗？
检查你是否想要这样的东西jsfiddle.net/joycse06/NaM3N
我没有 jquery UI 库。我只有 jquery.js。从哪里可以免费下载 jquery UI？是的，乔伊，我想要的和 jsfiddle 网站上的一模一样。
好的，我从blog.jqueryui.com/2012/03/jquery-ui-1-9-milestone-7-accordion 下载了 jquery UI 库然后我修改了引用上面给出的 jsfiddle 链接的代码。现在它工作正常。谢谢 Ahsan Rathod 和 Joy！ :)

标签： jquery highlight effect

【解决方案1】：

构建“hl_str”字符串时不需要引号。

试试：

var hl_str = $(":text").val();

【讨论】：

他没有使用 Jquery UI 库。
有问题的错误是由其中包含双引号的字符串引起的。
不，我没有 jquery UI 库。从哪里可以免费下载？

【解决方案2】：

effect() 不是 jQuery 的函数。

【讨论】：

【解决方案3】：

我认为您只是不匹配某些对象。我建议您尝试使用 contains 来搜索值

jQuery('p:contains("Donald")').effect("highlight",{color:"#ff0000"},3000);

http://api.jquery.com/contains-selector/

【讨论】：

【解决方案4】：

我并不完美，但我认为是一种可能的方法：

JS：

$("input[type=button]").click(function(){
        var hl_str = $("input[type=text]").val();   

    $('#mycontainer').find('*').contents().each(function() {
        if(this.nodeType == 3) {
            var txt = $(this).text().replace(hl_str, '<span class="effect">'+hl_str+'</span>');
            $(this).parent().html(txt);
        }
    });

});

CSS：

.effect{ color: #ff0000; }

不起作用，就像您在 demo 看到的那样，但它是一个初始点 ;-)

【讨论】：