jquery+查询列表示例

jQuery是一款流行的JavaScript库，支持各种DOM操作和事件处理。本文将为您介绍一个jQuery+查询列表示例，帮助您快速学习jQuery的使用方法。

下面是一个简单的查询列表示例：

html>
    head>
    script src="https://code.jquery.com/jquery-3.6.0.min.js">
    /script>
    script>
$(document).ready(function(){
$("#searchBtn").click(function(){
    var inputVal = $("#searchInput").val();
if(inputVal){
$.ajax({
url: "https://api.github.com/search/users?q="+inputVal,method: "GET",success: function(response){
    var arrUser = response.items;
    var html = "";
    for(var i=0;
    iarrUser.length;
i++){
    html += "li>
    a target='_blank' href='"+arrUser[i].html_url+"'>
    "+arrUser[i].login+"/a>
    /li>
    ";
}
    $("#result").html(html);
}
}
    );
}
else{
    alert("请输入关键字");
}
}
    );
}
    );
    /script>
    /head>
    body>
    div>
    input type="text" id="searchInput" placeholder="请输入用户名">
    button id="searchBtn">
    查询/button>
    /div>
    ul id="result">
    /ul>
    /body>
    /html>

上面的代码中，我们创建了一个文本输入框和一个查询按钮，当用户输入用户名并点击查询按钮后，ajax请求会向GitHub的API发送一个get请求，获取用户名对应的用户信息，并使用jQuery将结果以列表形式展示。

该示例主要的jQuery语句有：

$("#searchBtn").click(function(){
...}
)  //给查询按钮绑定click事件$("#searchInput").val()  //获取文本输入框的值$.ajax({
...}
    )  //发送ajax请求$("#result").html(html)  //将列表结果放置到HTML布局中

通过这个简单的示例，您可以快速入门jQuery的使用，在您的网页开发中方便地使用DOM操作和事件处理。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！