jQuery语法
介入了组内的自动化平台开发工作，少不了前后端的东西都写。
半途加入，这个平台前端用了jQuery框架去实现点击等事件，后端由python+flask实现接口，数据库MySQL。
虽然已经开始写了一段时间，但其实对jQuery的东西一知半解。今天打算趁别人提代码合并之前先学习下，一会儿拉了最新代码开始开工啦。学习素材来自runoob。
jQuery函数一般都包裹在document ready函数中，这样文档全部加载完成后才会执行document ready函数内的内容。
这样做是为了防止尝试去操作一些还没加载出来的元素，导致报错。
jQuery基础语法：
$(selector).action()
selector是一些html元素。action是jQuery的一些执行动作。
选择器
元素选择器
$("p")
#id选择器
$("#test")
.class选择器
$(".test")
其他选择器
$("*") 选取所有元素
$(this) 选取当前 HTML 元素
$("p.intro") 选取 class 为 intro 的 <p> 元素
$("p:first") 选取第一个 <p> 元素
$("ul li:first") 选取第一个 <ul> 元素的第一个 <li> 元素
$("ul li:first-child") 选取每个 <ul> 元素的第一个 <li> 元素
$("[href]") 选取带有 href 属性的元素
$("a[target='_blank']") 选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']") 选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button") 选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even") 选取偶数位置的 <tr> 元素
$("tr:odd") 选取奇数位置的 <tr> 元素
事件
操作DOM元素的方法。比如鼠标悬停、点击双击、改变窗口尺寸等等。
jQuery DOM操作
获得内容
三个简单实用的用于 DOM 操作的 jQuery 方法：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
attr()用于获取属性值
$("button").click(function(){
alert($("#runoob").attr("href"));
});
这里是一个取出href属性值的示例
设置内容
在方法的括号里设定值，就可以用于赋值。括号内为空的情况下是获取值。
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("RUNOOB");
});
以上三个方法都有回调函数。回调函数有两个属性，被选元素列表中当前元素的下标，以及设置前的原始值。
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")";
});
});
$("#btn2").click(function(){
$("#test2").html(function(i,origText){
return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")";
});
});
attr()也可以用来设置属性
$("button").click(function(){
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
});
attr()也有回调函数。回调函数的两个参数也是被选元素列表中当前元素的下标，以及原始（旧的）值
$("button").click(function(){
$("#runoob").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});
jQuery遍历
祖先
访问父节点使用parents()方法。向上遍历DOM树。
parents() 方法返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
所有祖先元素
$(document).ready(function(){ $("span").parents(); });
使用可选参数过滤一下
$(document).ready(function(){ $("span").parents("ul"); });
使用parentsUntil()方法可以返回从xx元素到xx元素之间的所有祖先元素。
$(document).ready(function(){ $("span").parentsUntil("div"); });
后代
向下遍历DOM树。
返回所有的后代元素用children()方法
$(document).ready(function(){ $("div").children(); });
同样可以用属性来过滤一下
$(document).ready(function(){ $("div").children("p.1"); });
find()方法可以返回被选元素的后代元素。属性写成*就可以返回所有的后代元素了。
$(document).ready(function(){ $("div").find("span"); });
