jq代码学习24-----ajax load()加载、筛选加载HTML问文档 fl ch6 p192

来源:互联网 发布:手机淘宝返利网怎么用 编辑:程序博客网 时间:2024/05/20 01:36

demo.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">* { margin:0; padding:0;}body { font-size:12px;}.comment { margin-top:10px; padding:10px; border:1px solid #ccc;background:#DDD;}.comment h6 { font-weight:700; font-size:14px;}.para { margin-top:5px; text-indent:2em;background:#DDD;}</style> <!--   引入jQuery --><script src="../scripts/jquery.js" type="text/javascript"></script><script language="javascript" type="text/javascript">  $(function(){      $("#send").click(function(){              //$("#resText").load("test.html");加载              $("#resText").load("test.html .para",function (responseText, textStatus, XMLHttpRequest){                         alert( $(this).html() );//在这里this指向的是当前的DOM对象,即 $("#iptText")[0]                         alert(responseText);       //请求返回的内容                         alert(textStatus);         //请求状态:success,error                         alert(XMLHttpRequest);     //XMLHttpRequest对象            });      })  })</script></head><body><input type="button" id="send" value="Ajax获取" /><div  class="comment">    已有评论:</div><div id="resText" ></div></body></html>

test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body><div class="comment"> <h6>张三:</h6> <p class="para">沙发.</p></div><div class="comment"> <h6>李四:</h6> <p class="para">板凳.</p></div><div class="comment"> <h6>王五:</h6> <p class="para">地板.</p></div></body></html>
原创粉丝点击