1.2、Answer：web crawler question 2
概述
2、Query库是基于JavaScript的第三方库，二、JavaScript是web客户端的脚本语言，难道jQuery是基于JavaScript语言编写的客户端的脚本语言的第三方库？python的第三方库和CSS选择器的关系？（关系库是：find、findAll、find_element_by_id）、Query库和AJAX技术的关系？如何实现部分网页信息而AJAX只需要加载一部分自己需求的网页数据？
jQuery产生的背景
Python执行JavaScript代码的效率非常低，既费时又费力，尤其是处理规模较大JavaScript代码时，如果有绕开JavaScript并直接解析它的方法（不需要执行JavaScript代码就可以获得信息）会非常实用，可以降低获取信息的难度。jQuery是一种JS框架。
一、jQuery
1、jQuery安装教程：https://www.runoob.com/jquery/jquery-install.html
2、jQuery库是一个基于JavaScript语言的JavaScript 文件
3、jQuery语法（XPath 与 CSS 选择器语法的组合）：$(selector).action()，$定义 jQuery；选择符（selector）"查询"和"查找" HTML 元素；action() 执行对元素的操作
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
注：1、$(document).ready(function(){.. .}：jQuery 函数位于一个 document ready 函数中是为了防止文档在完全加载之前运行 jQuery 代码（在 DOM 加载完成后才操作 DOM ）
2、jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行；JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才执行
4、jQuery库使用：通过HTML中标签调用jQuery：<script>. . .</script>
# jquery库文件在本地并且与网页组成的各个文件在同一目录 <head> <script src="jquery-1.10.2.min.js"></script> </head> # 调用CDN中的 jquery 库 <head> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> </script> </head>
二、jQuery结构体
1、
三、jQuery模块和功能
1、jQuery 选择器
# jQuery 选择器允许您对 HTML 元素组或单个元素进行操作
# 通过 HTML 元素的 id 属性选取指定的元素：$("#test")
# 通过指定的 class 查找元素：$(".test")
# 基于元素名选取元素：$("p")
2、jQuery 事件：页面对不同访问者的响应叫做事件，主要包含：鼠标事件、键盘事件、表单事件、文档/窗口
# jQuery事件 # 1、在元素上移动鼠标。 # 2、选取单选按钮 # 3、点击元素
2.1、鼠标单击事件：click()，鼠标双击事件：dblclick()当按钮点击事件被触发时会调用一个函数
$("p").click(function(){
$(this).hide();
});
$("p").dblclick(function(){
$(this).hide();
});
2.2、鼠标移动：1、当鼠标指针穿过元素时：mouseenter()；2、当鼠标指针离开元素时：mouseleave()；3、当鼠标指针移动到元素上方：mousedown()；4、当在元素上松开鼠标按
钮时：mouseup()；5、模拟光标悬停事件：hover()；6、通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点：focus()；7、该元素失去焦点时：blur()
# 当鼠标指针穿过元素时
$("#p1").mouseenter(function(){ alert('您的鼠标移到了 id="p1" 的元素上!'); }); # 当鼠标指针离开元素时 $("#p1").mouseleave(function(){ alert("再见，您的鼠标离开了该段落。"); }); # 当鼠标指针移动到元素上方 $("#p1").mousedown(function(){ alert("鼠标在该段落上按下！"); }); # 当在元素上松开鼠标按钮时 $("#p1").mouseup(function(){ alert("鼠标在段落上松开。"); }); # 模拟光标悬停事件 $("#p1").hover( function(){ alert("你进入了 p1!"); }, function(){ alert("拜拜! 现在你离开了 p1!"); } ); # 通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点 $("input").focus(function(){ $(this).css("background-color","#cccccc"); }); # 该元素失去焦点时 $("input").blur(function(){ $(this).css("background-color","#ffffff"); });
2.3、显示和隐藏元素：jQuery hide() 和 show()；jQuery toggle()可以切换 hide() 和 show() 方法
语法： $(selector).hide(speed,callback)、$(selector).show(speed,callback)、$(selector).toggle(speed,callback)
$(document).ready(function(){
$(".hidebtn").click(function(){
$("div").hide(1000,"linear",function(){
alert("Hide() 方法已完成!");
});
});
});
$("button").click(function(){
$("p").toggle();
});
. . .
四、 AJAX（Asynchronous JavaScript and XML） 技术
1、AJAX 是与服务器交换数据的技术，在不重载全部页面的情况下，实现了对部分网页的更新。通过四种Ajax工具JQuery、JSON、DWR、Prototype分别实现页面与后台（类文件）的数据交互，从而使得在不刷新页面的情况下取得数据AJAX 的应用案例：谷歌地图、腾讯微博、优酷视频、人人网. . .
2、这个网页表单使用Ajax技术与web服务器通信
3、AJAX 技术创建的表单，并根据web服务器的响应创建动态性极强网页的过程
-
XMLHttpRequest 对象 (异步的与服务器交换数据)；XMLHttpRequest对象和web服务器交互，在后台与服务器交换数据，从URL获取数据，而无需让整个的页面刷新。支持 HTTP 、 file:// 和 FTP等协议！
-
JavaScript/DOM (信息显示/交互)
-
CSS (给数据定义样式)
-
XML (作为转换数据的格式). . .
注意：1、AJAX与Flash、Silverlight和Java Applet等RIA技术是有区分的；2、AJAX应用程序与浏览器和平台无关的
4、AJAX 工作原理
5、AJAX 实例
<head>
<script>
function loadXMLDoc()
{
.... AJAX 脚本执行 ...
}
</script>
</head>
6、XMLHttpRequest 对象向服务器发送请求： open() 和 send() 方法：
xmlhttp.open(method,url,async（true/false）); xmlhttp.send();
注：1、method：请求的类型；GET 或 POST比较
1、与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用
2、然而，在以下情况中，请使用 POST 请求：
-
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
2、使用 HTML 表单形式 POST 数据：使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
7、使用 async=true 时，规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数，每当 readyState 属性改变时，就会调用该函数
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
注：1、当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可
2、readyState 属性存有 XMLHttpRequest 的状态信息，readyState 属性取值
-
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
3、onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化
8、XMLHttpRequest 对象向服务器发送请求，web服务器响应
1、XMLHttpRequest 对象的 responseText 或 responseXML 属性处理不同格式web服务器响应
responseText属性：作为 XML 对象进行解析，适用于服务器的响应是 XML
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;
responseXML 属性：responseText 属性返回字符串形式的响应，适用于服务器的响应并非 XML
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
注：AJAX 可用来与数据库进行动态通信等
一、showCustomer() 函数
function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/getcustomer.php?q="+str,true);
xmlhttp.send();
}
二、服务器端："getcustomer.php" 中的源代码负责对数据库进行查询，然后用 HTML 表格返回结果
<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/db/northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn
response.write("<table>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop
response.write("</table>")
%>