Question

我在codeply上找到了一个包含以下行的示例：

$('[id^=carousel-selector-]').click( function(){

我认为它与html中的行有关：

<li>
   <a id="carousel-selector-0" class="selected">

但'[id^=carousel-selector-]'究竟是什么意思？

Answer 1

这是attribute starts with选择器。

它将选择ID以carousel-selector-

开头的所有元素

考虑一下html，

<a id="carousel-selector-0" class="selected">one</a>
<a id="carousel-selector-1" class="selected">one</a>
<a id="carousel-selector-2" class="selected">one</a>
<a id="testcarousel-selector-2" class="selected">one</a>

然后$('[id^=carousel-selector-]').将返回前3个锚元素，因为其ID以carousel-selector-开头

^以选择器
$以选择器
*包含选择器

Answer 2

这意味着;选择ID为carousel-selector-

的元素

你也可能遇到类似的选择器id*=carousel-selector-，这意味着;选择ID carousel-selector-

的元素

Answer 3

查询将单击其id将以carousel-selector-开头的所有元素。例如

 <div id="carousel-selector-1">click me</div>
<p id="carousel-selector-2">click me</p>
<h1 id="carousel-selector-3">click me</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $('[id^=carousel-selector-]').click(function () {
            alert('ok');
        });
    });
</script>

有三个不同的html元素，其中包含随机ID，但以相同的id名称开头。所以这将找到他们所有并做你想做的事件或者你也可以在页面加载时隐藏所有项目或做任何你想做的事情

$('[id^=carousel-selector-]').hide();

所以这将搜索所有id以carousel-selector-开头的项目，并做一些事情

这个语法是什么意思？这是简单的jQuery吗？

3 个答案: