介入了组内的自动化平台开发工作,少不了前后端的东西都写。
半途加入,这个平台前端用了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"); });