JavaScript jQuery 比对示例，ajax示例
js教程：https://www.w3school.com.cn/js/index.asp
jQuery教程：https://www.w3school.com.cn/jquery/index.asp
以下是部分代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript</title> <!--必须使用完整<script></script>标签独立引入--> <script src="js/jquery-3.7.0.min.js"></script> <script> function btnclick1() { alert("ceshi... : " + arguments.length + " : " + typeof (arguments) + " : " + arguments[0]); } function btnclick2(obj) { alert(obj.value); } //@1 是 @2 的基础 ， @2是@3的基础 （此处只为记录，未调试参数） //@1 原⽣的JS实现⽅式 function xmlhttpFun() { //1.创建核⼼对象 var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } //2. 建⽴连接 /* 参数： 1. 请求⽅式：GET、POST * get⽅式，请求参数在URL后边拼接。send⽅法为空参 * post⽅式，请求参数在send⽅法中定义 2. 请求的URL： 3. 同步或异步请求：true（异步）或 false（同步） */ //4.接受并处理来⾃服务器的响应结果 //获取⽅式 ：xmlhttp.responseText //什么时候获取？当服务器响应成功后再获取 //当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。 xmlhttp.onreadystatechange = function () { //判断readyState就绪状态是否为4，判断status响应状态码是否为200 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //获取服务器的响应结果 var responseText = xmlhttp.responseText; alert(responseText); } } xmlhttp.open("GET", "ajaxServlet?username=tom", true); //3.发送请求 xmlhttp.send(); } //@2 使用$.ajax 参考地址：https://www.w3school.com.cn/jquery/ajax_ajax.asp function ajaxFun() { //使⽤$.ajax()发送异步请求 $.ajax({ url: "ajaxServlet", // 请求路径 type: "POST", //请求⽅式 //data: "username=jack&age=23",//请求参数 data: {"username": "jack", "age": 23}, /* 可⽤值: "xml": 返回 XML ⽂档，可⽤ jQuery 处理。 "html": 返回纯⽂本 HTML 信息；包含的 script 标签会在插⼊ dom 时执⾏。 "script": 返回纯⽂本 JavaScript 代码。不会⾃动缓存结果。除⾮设置了 "cache" 参数。注意：在远程请求时(不在同⼀个域下)，所有 POST 请求都将转为 GET 请求。（因为将使⽤ DOM 的script标签来加载） "json": 返回 JSON 数据 。 "jsonp": JSONP 格式。使⽤ JSONP 形式调⽤函数时，如 "myurl?callback=?" jQuery 将⾃动替换 ? 为正确的函数名，以执⾏回调函数。 "text": 返回纯⽂本字符串 */ dataType: "text",//设置接受到的响应数据的格式 success: function (data) { alert(data); },//响应成功后的回调函数 error: function () { alert("出错啦...") },//表示如果请求响应出现错误，会执⾏的回调函数 }); } //@3 使用$.get() 参考地址：https://www.w3school.com.cn/jquery/ajax_get.asp function getFun() { $.get( "ajaxServlet", {username: "woniu"}, function (data) { alert(data); } ); } //@3使用$.post() 参考地址：https://www.w3school.com.cn/jquery/ajax_post.asp function postFun() { $.post( "ajaxServlet", {username:"woniu"}, function(data){ alert(data); } ); } //javascript 原生获取element示例 window.onload = function () { // 1. 通过id属性值获取element //var js_btn = document.getElementById("btn_Id1"); // js_btn.onclick=btnclick1; // 2. 通过classname属性值获取element // var elemAry = document.getElementsByClassName("btn_class1"); // elemAry[0].onclick=btnclick1; // 3. 通过name属性值获取element // var elemAry = document.getElementsByName("btn_name1"); // elemAry[0].onclick=btnclick1; // 4. 通过标签名获取element // var elemAry = document.getElementsByTagName("button"); // elemAry[0].onclick=btnclick1; } //jQuery选择器 获取element示例 $(function () { //jQuery选择器：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp // 规则： $("css选择器") // $("#btn_Id1") //通过id 属性值获取 //通过类获取 // $(".btn_class1").first().click(btnclick1); //通过标签名获取 // $("button").first().click(btnclick1); //属性获取 // $("[name='btn_name1'][value='测试btn1']").first().click(btnclick1); }) //等价 $(function (){}) $(document).ready(function () { // $("#btn1").click(btnclick1); }) //---------window.onload 与 --$(function (){})比较--------------------------------- // window.onload=function () { // $("#btn1").click(function () { // alert("132"); // }); // } // 定义多次，后⾯的会覆盖前⾯的 // window.onload=function () { // $("#btn1").click(function () { // alert("abc"); // }); // } //----------------------------------------------- // $(function () {//dom⽂档加载完成之后，执⾏其中的代码 // $("#btn1").click(function () { // alert("234"); // }); // }); // //可以定义多次 定义几次弹几次，不会覆盖 // $(function () { // $("#btn1").click(function () { // alert("456"); // }); // }); //--------javascript 与 jQuery---操作细节比较------------------ $(function () { //此处使用jquery方式 var js_span2 = document.getElementById("span_Id2"); var jq_span2 = $("#span_Id2"); //获取/设置元素的标签体纯⽂本内容 $("#btn_Id3").click(function () { //获取 console.log(js_span2.innerText); //修改 js_span2.innerText = "js新的文字"; }); $("#btn_Id4").click(function () { //获取 console.log(jq_span2.text()); //修改 jq_span2.text("jq新的文字"); }); //获取/设置元素的标签体内容 $("#btn_Id5").click(function () { //获取 console.log(js_span2.innerHTML); //修改 js_span2.innerHTML = "<small>变成small标签</small>"; }); $("#btn_Id6").click(function () { //获取 console.log(jq_span2.html()); //修改 jq_span2.html("<big>变成big标签</big>") }); //属性设置对比 $("#btn_Id7").click(function () { //获取 console.log("attribute:" + js_span2.getAttribute("style")); //修改 // js_span2.setAttribute("style","color:red"); js_span2.style = "color:red"; }); $("#btn_Id8").click(function () { /* * jQuery认为：attribute的checked、selected、disabled就是表示该属性初始状态的值，property的checked、selected、disabled才表示该属性实时状态的值(值为true或false)。 * 获取和设置disabled、selected、checked这些属性时，应该使⽤prop()⽅法，不要使⽤attr()⽅法！！能够⽤prop()操作的尽量⽤prop()操作，不要⽤attr()操作 * */ console.log("attr:" + jq_span2.attr("style") + " prop:" + jq_span2.prop("style")); //----------通用属性操作 // jq_span2.attr("style","color:blue"); // jq_span2.removeAttr("style");//删除属性 // jq_span2.prop("style","color:blue"); // jq_span2.removeProp("style");//删除属性 alert($("#select2").prop("selected")); alert($("#select2").attr("selected")); //-------css属性操作------------ // jq_span2.css("color","red");//css()处理样式信息 /*-------class属性操作------------------ * addClass():添加class属性值 * removeClass():删除class属性值 * toggleClass():切换class属性 * toggleClass("one"):判断如果元素对象上存在class="one"，则将属性值one删除掉。 如果元素对象上不存在class="one"，则添加 * */ jq_span2.toggleClass("one"); }); //过滤选择器 // 选择器：https://www.w3school.com.cn/jquery/jquery_ref_selectors.asp // 更多详细过滤器查看：https://www.jquery123.com/ /* * 1. ⾸元素选择器 语法： :first 获得选择的元素中的第⼀个元素 2. 尾元素选择器 语法： :last 获得选择的元素中的最后⼀个元素 3. ⾮元素选择器 语法： :not(selector) 不包括指定内容的元素 4. 偶数选择器 语法： :even 偶数，从 0 开始计数 5. 奇数选择器 语法： :odd 奇数，从 0 开始计数 6. 等于索引选择器 语法： :eq(index) 指定索引元素equals 7. ⼤于索引选择器 语法： :gt(index) ⼤于指定索引元素greater than 8. ⼩于索引选择器 语法： :lt(index) ⼩于指定索引元素 less than 9. 标题选择器 语法： :header 获得标题（h1~h6）元素，固定写法 表单过滤选择器 1. 可⽤元素选择器 语法： :enabled 获得可⽤元素 2. 不可⽤元素选择器 语法： :disabled 获得不可⽤元素 3. 选中选择器 语法： :checked 获得单选/复选框选中的元素 4. 选中选择器 语法： :selected 获得下拉框选中的元素 * */ $("#btn_Id9").click(function () { // alert($("button:first").text()); // alert($("button:last").text()); // alert($("#select_Id1 option:selected").val()); // alert($("#select_Id1").select().val()); alert($("#select_Id1:enabled").val()); // alert($("#select_Id1:enabled").first().val()); }); //crud操作 /* 1.append():⽗元素将⼦元素追加到末尾 对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾 2.prepend():⽗元素将⼦元素追加到开头 对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头 3.appendTo(): 对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾 4.prependTo()： 对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头 5.after():添加元素到元素后边 对象1.after(对象2)： 将对象2添加到对象1后边(外部)。对象1和对象2是兄弟关系 6.before():添加元素到元素前边 对象1.before(对象2)： 将对象2添加到对象1前边（外部）。对象1和对象2是兄弟关系 7.insertAfter() 对象1.insertAfter(对象2)：将对象2添加到对象1后边。对象1和对象2是兄弟关系 8.insertBefore() 对象1.insertBefore(对象2)： 将对象2添加到对象1前边。对象1和对象2是兄弟关系 9.remove():移除元素 对象.remove():将对象删除掉 10.empty():清空元素的所有后代元素。 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性节点 */ $("#btn_Id10").click(function () { //javascript 添加element var txt3 = document.createElement("p"); // 以 DOM 创建新元素 txt3.innerHTML = "以 DOM 创建新元素"; var elementById = document.getElementById("div_Id1"); elementById.appendChild(txt3); // var txt1="<p>以 HTML 创建新元素</p>"; // 以 HTML 创建新元素 // var txt2=$("<p></p>").text("以 jQuery 创建新元素"); // 以 jQuery 创建新元素 // 添加 // $("#div_Id1").append(txt1, txt2); //清空 // $("#div_Id1").empty(); //移除 // $("#span_Id2").remove("#span_Id2"); }); //遍历 更多遍历：https://www.w3school.com.cn/jquery/jquery_ref_traversing.asp $("#btn_Id11").on("click", function () { //jq遍历 var buttons = $("button"); // buttons.each(function (index, element) { // alert(index + ":" +element.id); // }) //jq转成js for (let i = 0; i < buttons.length; i++) { alert(i + ":" + buttons[i].id); } //js转成jq // var elementsByTagName = document.getElementsByTagName("button"); // $(elementsByTagName).each(function (index, element) { // alert(index + ":" +element.id); // }) }); //效果：https://www.w3school.com.cn/jquery/jquery_ref_effects.asp $("#js_ajax").click(getFun); }); </script> </head> <body> <select id="select_Id"> <option id="select1" class="select" value="北京">北京</option> <option id="select2" class="select" value="上海" selected="true">上海</option> <option id="select3" class="select" value="广州">广州</option> </select> <hr/> <select id="select_Id1"> <option id="select4" class="select" value="张三">张三</option> <option id="select5" class="select" value="李四" selected="true">李四</option> <option id="select6" class="select" value="王五">王五</option> </select> <hr/> <div id="div_Id1" class="div_class1"> <span id="span_Id1" class="span_class">测试文字一</span><br/> <span id="span_Id2" class="span_class" style="color: cadetblue">测试文字二</span><br/> </div> <br/> <button id="btn_Id1" class="btn_class1" name="btn_name1" value="测试btn1">测试摁钮1</button> <br/> <button id="btn_Id2" class="btn_class2" name="btn_name2" value="测试btn2">测试摁钮2</button> <br/> <hr/> <button id="btn_Id3">js_innerText</button> <br/> <button id="btn_Id4">jq_innerText</button> <br/> <hr/> <button id="btn_Id5">js_html</button> <br/> <button id="btn_Id6">jq_html</button> <br/> <hr/> <button id="btn_Id7">js_attr</button> <br/> <button id="btn_Id8">jq_attr</button> <br/> <hr/> <button id="btn_Id9">js_filter</button> <br/> <button id="btn_Id10">js_crud</button> <br/> <button id="btn_Id11">js_serch</button> <br/> <button id="btn_Id12">js_ajax</button> <br/> <hr/> </body> </html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！