Question

<!DOCTYPE html>
<html lang="en">
    <head>
         <title>
         </title>
         <meta charset="utf-8" />
         <link rel="stylesheet" type="text/css" href="css/custom.css" />
    </head>
    <body>
        <button value="">Button 1</button>
        <button value="">Button 2</button>
        <button value="">Button 3</button>      
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    <script type="text/javascript" src="js/custom.js" ></script>
    </body>
</html>

以下是custom.js

中的代码

$(':button').on('click',function(){
    alert('Hello');
});

当我将custom.js中的代码更改为

时

$('button').on('click',function(){
    alert('Hello');
});

他们执行与点击时显示提醒相同的工作，但我想知道'button'和':button'

之间的区别

Answer 1

仅使用button将仅选择<button></button>个元素，而:button将选择<button></button>和<input type="button" />

有关详细信息，请参阅https://api.jquery.com/button-selector/。

Answer 2

button仅选择button个元素，而:button也选择input type="button"

Answer 3

$(':button')选择<button>标签或<input />标签type="button"

$('button')仅选择<button>代码

＆＃13;

$(':button').on('click',function(){
    alert('You clicked a tag of type: ' + $(this).prop('tagName'));
});

$('button').on('click',function(){
    alert('Hello from ' + ($(this).html() || $(this).val()));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button value="">Button 1</button>
<button value="">Button 2</button>
<button value="">Button 3</button>      

<input type="button" value="Input Button" />

＆＃13;

Answer 4

$（＆＃34;：button＆＃34;）：同时选择＆＃34;按钮＆＃34;标签和＆＃34;输入类型=按钮＆＃34;以及

而$（＆＃34;按钮＆＃34;）：仅选择

＆＃39;：按钮＆＃39;之间的区别和＆＃39;按钮＆＃39;作为选择器

4 个答案: