Question

我一直在学习javascript和jquery。我甚至知道jquery是一个用于javascript的库。现在，我在两者上做了一个示例工作，并想知道这些动作之间的区别。这是我的代码：

＆＃13;

$(document).ready(function() {
  $("#buttonOne").click(function() {
    document.getElementById('paragraph').innerHTML = "You are yet to perform";
  })
});

function checkButton() {
  alert("Hello There");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button" id="buttonOne" onClick="checkButton()">Click Me and Understand</button>

<p id="paragraph"></p>

＆＃13;

的index.html

<!DOCTYPE html>
    <head>
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <title>Wifi Wizard</title>
    </head>
    <body>      
        <br>        
        <br>
        Start Wifi <input type="button" value="wifi" name="Wifi" id="wifi"/>     <br>
        Search Wifi <input type="button" value="search" name="Search" id="search"/>  <br>
        Scan Wifi <input type="button" value="scan" name="Scan" id="scan"/>  <br>
        <div id = "dataTable">
        </div>
        <input type = "password" name = "password" id = "passValue"></input>
        <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> 
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
    </body>
</html>

app.js

$(document).ready(function() {
    $("#passValue").hide();
    document.addEventListener("deviceready", onDeviceReady, false);
});

function onDeviceReady() {      
     $('#wifi').click( function() 
        {   
            try {               
                WifiWizard.isWifiEnabled(win, fail);
            }
            catch(err) {
                alert("Plugin Error - " + err.message);
            }

    }); 

function win(e) {
    if(e) {
        alert("Wifi enabled already");
    }
    else {
        WifiWizard.setWifiEnabled(true, winEnable, failEnable);
    }

}

function fail(e) {
    alert("Error checking Wifi status");
}

function winEnable(e) {
    alert("Wifi enabled successfully");
}

function failEnable(e) {
    alert("Error enabling Wifi ");
}

$('#search').click( function() 
    {   
        try {               
            WifiWizard.listNetworks(listHandler, fail);
        }
        catch(err) {
            alert("Plugin Error - " + err.message);
        }

    }); 

function listHandler(a){
    alert(a);
}

$('#scan').click( function() 
    {   
        try {               
            WifiWizard.getScanResults({numLevels: 1},listHandler1, fail);
        }
        catch(err) {
            alert("Plugin Error - " + err.message);
        }

    });

function listHandler1(a) {


alert(JSON.stringify(a));
  var network_array = [];
  var content = "<table>"
  for (i = 0; i < a.length; i++) {
    content += '<tr><td><button onclick="clickWifi(\'' + a[i].SSID + '\');">' + network_array.push(a[i].SSID) + '</button></td></tr>';
  }
  content += "</table>"
  alert(network_array);
  $('#dataTable').append(content);
}

function clickWifi(ssid) {
  alert("Hello");
  var networkSSID = ssid;
  $("#passValue").show();
  var passWord = document.getElementById("passValue");
  var config = WifiWizard.formatWPAConfig(networkSSID, passWord);
}
                WifiWizard.addNetwork(config, function() {
                    WifiWizard.connectNetwork(networkSSID, connectSuccess, connectFailed);
    });

}

对于上面的场景，我有一个按钮来动态调用它的click函数，所以请帮忙，因为我不知道声明的按钮是正确还是错误。

这里我使用jquery中的id和使用javascript的onclick函数创建了一个click函数。但警报首先弹出，然后jquery做它的工作。我想知道为什么jquery不是第一个。请提出建议。

Answer 1

https://jsfiddle.net/m3prjL8q/

以下是评论中问题的答案。就原来的帖子而言，评论中回答了这个问题，没有必要重复。

当你使用$（document）.ready（function（）{}）时，你正在做的是实际创建一个事件监听器，它将在文档准备就绪后“触发”并为其提供处理函数。这是示例中的yourJQuery函数。如果在处理程序中声明了一个函数，则处理程序之外的native javascript无法访问此函数。

function yourJQuery(){
    function innerDeclare(){
    alert("I cannot be accessed outside of yourJQuery function");
  }
}

innerDeclare();

Answer 2

如果我理解你的问题，你想知道为什么html onclick方法在jQuery点击方法之前运行。

这只是因为你在元素上添加click事件的顺序。 HTML onclick方法不等待DOM呈现并将事件直接附加到元素。但是你的jQuery方法等待Dom准备就绪然后将click事件附加到元素。

因此事件按顺序执行。

Answer 3

为了获得更好的性能，请使用本机JavaScript。为了加快开发速度，请使用jQuery。检查jQuery与Native Element Performance的性能比较。

使用id JavaScript jQuery

3 个答案: