开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >jquery当中Ajax的基础原理是什么？

jquery当中Ajax的基础原理是什么？

马克java社区

修改于 2021-02-08 01:55:46

修改于 2021-02-08 01:55:46

4080

举报

文章被收录于专栏：java大数据java大数据

例 3.1（AjaxPrerequ1.html） <html> <head> <script> /* 马克-to-win：这个例子和jquery没任何关系。就是自己如何从头做一个jquery。the following is a json format, which can have a function as a pair. */ var $={ name:'马克-to-win', getById:function(obj){ return document.getElementById(obj); }, set:function(){ /*下面的$可以换成this,结果是一样的*/ $.getById('show').innerHTML = "哈苏大苏打靠近哈快速地结合看 "+this.name; } } </script>

更多请见：https://blog.csdn.net/qq_44594371/article/details/103063000

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

评论

登录后参与评论

暂无评论

编辑精选文章

换一批

鹅厂写码13年，我总结的程序员高效阅读方法论

进程，线程，协程 - 你了解多少？

微服务与分布式系统设计看这篇就够了！

腾讯文档表格卡顿指标探索之路

从Hadoop1.0到Hadoop2.0架构的优化和发展探索详解

微服务架构：由浅入深带你了解底层注册中心

jquery当中NodeList的用法

例 1.2（NodeList.html） <html> <head> <title></title> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> window.onload = function(){ var oEle = $("h2 a"); //选出两个符合条件的 for(var i=0;i<oEle.length;i++) /*马克-to-win：注意oElements[i]虽然是个jquery对象,他也可以用innerHTML*/ oEle[i].innerHTML = "mark to win"+i.toString(); } </script> </head> <body> <h2><a href="#">马克-to-win</a>内容</h2> <h2>内容<a href="#">马克-to-win</a></h2> </body> </html> 例 1.2_a: <html> <head> <title></title> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> $(function(){ var oEle = $("h2 a"); //选出两个符合条件的 for(var i=0;i<oEle.length;i++) /*注意oElements[i]虽然是个jquery对象,他也可以用innerHTML*/ oEle[i].innerHTML = "mark to win"+i.toString(); }); </script> </head> <body> <h2><a href="#">马克-towin</a>内容</h2> <h2>内容<a href="#">马克-towin</a></h2> </body> </html>

马克java社区

2021/01/30

8870

jquery当中NodeList的用法

jquery和servlet如何传递JSON数组？

例 3.7（AjaxJsonArray.jsp） <html> <head> <script src="jquery.js"></script> <script type="text/javascript"> function getP(id) { $.getJSON("jqueryservlet37", { id : id }, function(arr) { for ( var i = 0; i < arr.length; i++) { var obj = arr[i]; for ( var pro in obj) { document.getElementById(pro).innerHTML = obj[pro]; } } /* document.getElementById(pro).innerHTML = obj[pro];和下一句一样。 $("#"+pro).html(obj[pro]); */ }) } </script> </head> <body> <table width="340" border="1"> <tr> <td id="1" οnclick="getP('1')">点这1</td> <td id="2" οnclick="getP('2')">点这2</td> </tr> </table>

马克java社区

2021/02/09

1.5K0

jquery和servlet如何传递JSON数组？

jquery当中$(function() 与“$(document).ready(function(){})和 window onload的区别

马克-to-win：$(function() 与“$(document).ready(function(){})”是一样的，（二者都存在时，谁在前面谁先执行。）只不过头者是简写，二者都是document加载完就执行，不过不包括图片或视频。这一点与window.onload不一样。（no experiment support）例 1.2_b: <html> <head> <title></title> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> $(document).ready(function(){ alert("$(document).ready(function()"); }) $(function(){ alert("$(function()"); }); </script> </head> <body> <h2><a href="#">马克-towin</a>内容</h2> <h2>内容<a href="#">马克-towin</a></h2> </body> </html>

马克java社区

2021/02/01

5250

jquery当中$(function() 与“$(document).ready(function(){})和 window onload的区别

jquery当中append的用法

例 1.5（appendhtml.html） <html> <head> <title>append()方法</title> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> $(function(){ //马克-to-win：add就是又多加了一个元素到集合当中。 $("p:eq(4)").add("p:eq(0)").append("<b>这段应出现在最后</b>"); }); </script> </head> <body> <p>这是第一行</p> <p>这是第二行</p> <p>这是第三行</p> <p>这是第四行</p> <p>马克-to-win</p> </body> </html>

马克java社区

2021/02/01

1.6K0

jquery当中append的用法

jquery当中css的用法

例 1.9 <html> <head> <title></title> <style>  </style> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> $(function(){ $("table.dl tr:odd").addClass("myrow"); var o=$("table.dl tr:even"); o.css("backgroundColor","blue"); }); </script> </head> <body> <table class="dl" > <tr> <td>马克-to-win</td> <td>12</td> <td>13</td> <td>14</td> <td>15</td> </tr> <tr> <td>21</td> <td>22</td> <td>23</td> <td>24</td> <td>25</td> </tr> <tr> <td>31</td> <td>32</td> <td>33</td> <td>34</td> <td>35</td>

马克java社区

2021/02/02

1.4K0

javascript当中removeChild的用法

例 1.5（removeChild()IEFF.html） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </HEAD> <BODY> <div id="contain"> <div id="a">a </div> <div id="b">b </div> <div id="c">c </div> </div> <script> /*马克-to-win： DIV object: Inherits from Element object， Element object Inherits from Node object b 是个 DIV object. */ var b = document.getElementById("b"); var c = b.parentNode; /*Node.removeChild() (Method) A method for removing child nodes from the collection. Property/method value type: Node object JavaScript syntax: - myNode.removeChild(aNode) Argument list: aNode The node object to be removed */ var cs=document.getElementById("contain"); alert("c===cs is "+(c===cs)); c.removeChild(b); </script> </BODY> </HTML>

马克java社区

2021/01/26

3990

javascript当中removeChild的用法

jquery当中bind和unbind，pageX，pageY，.screenX， screenY是怎么用的？

例 2.2（e.pageXscreenX.html） <html> <head> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> $(function(){ /*马克-to-win：和原来一样，pageX指窗口里，screenX指屏幕，所以多了一个上面的菜单。*/ $("body").bind("click", fn1 = function(e){ var posPage = "(" + e.pageX + "," + e.pageY + ")"; var posScreen = "(" + e.screenX + "," + e.screenY + ")"; $("span").html("<br>Page: " + posPage + "<br>Screen: " + posScreen); }); $("input[type=button]").click(function(){ $("body").unbind("click",fn1); //移除事件监听myFunc1 }); }); </script> </head> <body> sgkls<br> sfdgsdg<br> gf<br> fsdf<br> fgdsf<br> sdf<br> sdfdsf<br> sdfsd<br> <input type="button" value="移除事件1"> <span></span> </body> </html>

马克java社区

2021/02/08

5800

jquery当中bind和unbind，pageX，pageY，.screenX， screenY是怎么用的？

javascript当中insertBefore的用法

例 1.3（insertBeforeIEFF.html） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> </HEAD> <BODY> <div id="contain"> <p id="content">1111</p> <div id="msg"> msg <div>test</div> </div> <p id="content1">222</p> <p id="aaa">aaaaaaaa</p> </div> end <div id="insertedNode">insertedNode</div> <script> var insertedNode = document.getElementById("insertedNode"); var aaa = document.getElementById("aaa"); var test = document.getElementById("contain"); /* 马克-to-win： first comment out the following statement, see the effect, then uncomment out the following statement, see the effect again. Node.insertBefore() (Method) This method inserts a child element into the collection at the indicated position.(qixy: here "contain" is a collecton.) 返回值：Property/method value type: Node object JavaScript syntax: - myNode.insertBefore(aNode1, aNode2) Argument list: aNode1 The node to be inserted aNode2 The node indicating the insertion point

马克java社区

2021/01/22

4700

javascript当中insertBefore的用法

Servlet和Image如何做出一个验证码程序的完整版的源码？

马克-to-win：根据上面程序，我做了一个验证码程序的大概。所有的技术点都已经涵盖了。有兴趣的同学可以自己把完整版的验证码程序做出来。

马克java社区

2021/07/09

2780

jquery当中获取某个属性值的方法

例 1.6（attr.html） <html> <head> <title>attr(name)方法</title> <style type="text/css">  </style> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> $(function(){ var sContent = $("em:eq(1)").attr("content"); //获取第二个<em>元素的title属性值 $("span").text(sContent); //将sContent的内容放在<span>标签内 }); </script> </head> <body> <p>我们马克-to-win<em content="javaC">java</em>有段时间了</p> <p>javascript<em content="javascriptC">刚学</em>所以难</p> <p>Content属性的值是：<span></span></p> </body> </html>

马克java社区

2021/02/01

3.8K0

jquery当中获取某个属性值的方法

javascript当中mouseDown事件，mouseUp,和mouseClick执行顺序

11.mouseDown事件，mouseUp,和mouseClick执行顺序马克-to-win：下例仔细剖析了mouseDown和mouseClick的关系。当两个对象重叠在一起，（比如这里document和span），一定是先执行所有元素的mouseDown事件，之后所有元素的mouseUp,之后执行所有元素的mouseClick。（有一点切记注意，本例子测试过程中不能用alert，如用alert，down事件后不会再执行click事件了。事件就被alert打断了。）例 11.1 <html> <head> <title>根据实验，本例仔细剖析了mouseDown和mouseClick的关系。当两个对象重叠在一起，（比如这里document和span），一定是先执行所有元素的mouseDown事件，之后所有元素的mouseUp,之后执行所有元素的mouseClick</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <SCRIPT language=JavaScript> function linkClickHandler(event) { // alert(event.srcElement+"is event.srcElement"); // alert(event.target+"is event.target"); var t =event.srcElement||event.target; // alert(t.id+" qq1 "); sss2.innerHTML += t.id+" click "; } function linkDownHandler(event) { // alert(event.srcElement+"ddddddddis event.srcElement"); // alert(event.target+"is event.target"); var t =event.srcElement||event.target; // alert(t.id+" qq1 "); sss2.innerHTML += t.id+" down "; } function documClickHandler(event) { if (document.all) { }else{ // alert("event.currentTarget is "+event.currentTarget+" event.type is "+event.type+" event.eventPhase is "+event.eventPhase+"eventPhase等于3是冒泡阶段不是capture阶段"); /*Event.CAPTURING_PHASE 1 Event.AT_TARGET 2 Event.BUBBLING_PHASE*/ sss2.innerHTML += " event.type is "+event.type+" event.eventPhase is "+event.eventPhase+"eventPhase等于3是冒泡阶段不是capture阶段"+" document click ";

马克java社区

2020/12/17

1.2K0

javascript当中mouseDown事件，mouseUp,和mouseClick执行顺序

jquery当中如何Set和Get文本

例 1.3（SetGetinnerHtml.html） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> </TITLE> <script src="jquery.js"></script> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <div id="info">mark</div> <INPUT TYPE="BUTTON" ONCLICK="getHTML()" value="获取"> <INPUT TYPE="BUTTON" ONCLICK="setHTML()" value="设置"> </BODY> </HTML>

马克java社区

2021/02/01

8500

jquery当中如何Set和Get文本

jquer和servlet如何传递json？

例 3.6 <html> <head> <script src="jquery.js"></script> <script type="text/javascript"> function getP(id) { $.getJSON("jqueryservlet36", { id : id }, function(obj) { for ( var p in obj) { //Servlet 返回值是{type:'"+type+"',price:'"+price+"'}"这样的JSON对象 //$("#info").toggle();找id为info的元素 $("#" + p).html(obj[p]); /* document.getElementById(p).innerHTML = obj[p];和下一句一样。 $("#"+p).html(obj[p]); */ } }) } </script> </head> <body> <table width="340" border="1"> <tr> <td id="1" οnclick="getP('1')">点这1</td> <td id="2" οnclick="getP('2')">点这2</td> </tr> </table> <table width="340" border="1"> <tr> <td width="170">参数项</td> <td width="170">参数值</td> </tr> <tr> <td>型号</td> <td id="type"> </td> </tr> <tr> <td>价格</td> <td id="price"> </td> </tr> </table> </body> </html> package helloWorld; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse;

马克java社区

2021/02/09

7240

jquer和servlet如何传递json？

文本选择window.getSelection

8.文本选择window.getSelection 例 1.8（文本选择IEFF.html) <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <script type="text/javascript"> function fun1(){ if(window.getSelection){//DOM,FF,Webkit,Chrome,IE10 alert("马克-to-win：火狐click事件包括鼠标点下和抬起两个动作，不抬起不算结束，所以可以选择文本。 window.getSelection is "+window.getSelection); selectionText = window.getSelection(); }else if(document.getSelection){//IE10 selectionText = document.getSelection(); }else if(document.selection){//IE6+10- selectionText = document.selection.createRange().text; }else{ selectionText = ""; } strlen = selectionText.toString(); alert(strlen); // alert(document.selection.createRange().text); } </script> <body> <body οnclick="fun1();"> <p>Select this textsfsadfsdafsdagfsadgsagsadgfsd</p> sdgsagsadgsafghgfhfh gsadgsaghfghfhgfhf sabhhfghgfhfghfh gsfdghf sdaggfhf gdhfghdf sdagdhg </body> </body> </html>

马克java社区

2021/01/13

8440

文本选择window.getSelection

javascript当中createElement的用法

例 1.2（CreateP&InputIEFF.html） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <style type="text/css"> .test { background:#0000FF; } </style> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> </BODY> </HTML>

马克java社区

2020/01/07

5500

javascript当中createElement的用法

jquery Ajax的helloworld例子

例 3.5 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <script src="jquery.js"></script> <script type="text/javascript"> function check() { var txt = $("#item").val(); /* 参数： url (String): 装入页面的URL地址。 params (Map): （可选）发送到服务端的键／值对参数。 callback (Function): （可选）当数据装入完成时执行的函数. */ $.post("jqueryservlet35",{word:txt},function(data){ $("#info").html(data) }) } </script> </head> <body> <input type="text" id="item" value="鱼"> <input type="button" value="test" οnclick="check()"> <span id="info"></span> </body> </html>

马克java社区

2021/02/08

6180

jquery Ajax的helloworld例子

javascript当中option事件冒泡

马克-to-win：onChange事件option谈不到，只有select才谈onChange。只有onClick事件二者都有，才谈到冒泡。

马克java社区

2021/01/28

7570

javascript当中option事件冒泡

javascript当中时间控制setTimeout和setInterval的用法

9.时间控制setTimeout和setInterval 马克-to-win：下个例子说明每秒刷新时间如何实现。（利用setTimeout方法）： setTimeout和setInterval的区别是：setTimeout只执行1次，而setInterval可以无限执行。例 1.9.1（setTimeoutIEFF.html) <HTML> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY οnlοad="time()"> <div id="t"></div> </BODY> </HTML> setInterval&clearInterval

马克java社区

2021/01/18

6400

javascript当中时间控制setTimeout和setInterval的用法

jquery当中mouseover和Mouseout 和mousemove的用法是什么？

例 1.12（mouseoverMouseout$Document.html） <html> <head> <title>设置opacity</title> <style type="text/css">  </style> <script language="javascript" src="jquery.min.js"></script> <script language="javascript"> $(function(){ //设置透明度，兼容性很好 $("img").mouseover(function(){ $(this).css("opacity","0.6"); }); $("img").mouseout(function(){ $(this).css("opacity","1.0"); }); /*下面头两段程序在火狐下效果完全一样，都能运行，（2在火狐下可以，3火狐不行。但ie下2不行，1，3两段在ie上是一样的），这个例子最重要的是让我看到了$(document)和document的区别。但 jquery会更兼容 */ $(document).mousemove(function(event){ $("span").text(event.clientX + ", " + event.clientY); }); // document.οnmοusemοve=function(event){ // $("span").text(event.clientX + ",, " + event.clientY); // }; /* document.οnmοusemοve=function(){ $("span").text(event.clientX + ",,， " + event.clientY); }; */ });

马克java社区

2021/02/06

1K0

jquery当中mouseover和Mouseout 和mousemove的用法是什么？

javascript当中location的用法

2.location 例 1.2（locationIEFF.html） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <p>刷新演示：<div id="num"></div></p> <INPUT TYPE="button" value="刷新一下从新获取一个随机数" οnclick="location.reload()"> <p>转址演示：</p> <INPUT TYPE="button" value="将地址转到navigator.html" οnclick="fun()"> </BODY> </HTML>

马克java社区

2021/01/06

3320

javascript当中location的用法

相关推荐

jquery当中NodeList的用法

更多 >