第十六章：Python の Web开发基础(三) jQuery与Ajax

jQuery 介绍
Ajax 介绍

jQuery 介绍

选择器

jQuery 的选择器分不同的种类，主要目的是用来查找目标的 HTML 标签，方便对目标标签进行操作，比如找到 <li></li> 的标签，然后新增或者修改里面的内容。jQuery 选择器分别有：针对标签的选择器、针对层级的选择器、针对特定目标的 ID选择器、针对整个类的 class选择器。

$('li')     // [<li></li>,<li></li>] 标签选择器,返回的是目标标签的一个集合
$('div p')  // <div><p></p></div> 层级选择器
$('#myBtn') // <input  /> ID选择器
$('.cls')   // <div class="cls"></div> class选择器

表单选择器

$(":input");    //匹配所有 input, textarea, select 和 button 元素
$(":text");     //匹配所有的单行文本框
$(":password"); //匹配所有密码框
$(":radio");    //匹配所有单选按钮
$(":checkbox"); //匹配所有复选框
$(":submit");   //匹配所有提交按钮
$(":image");    //匹配所有图像域
$(":reset");    //匹配所有重置按钮
$(":button");   //匹配所有按钮
$(":file");     //匹配所有文件域

表单对象属性选择器

$("input:enabled");             //匹配所有可用元素 <input name="id" />
$("input:disabled");            //匹配所有不可用元素 <input name="email" disabled="disabled" />
$("input:checked");             //匹配所有选中的被选中元素(复选框、单选框等，select中的option)
$("select option:selected");    //匹配所有选中的option元素

层级

$("li:first"); //获取匹配的第一个元素
$("input:not(:checked)")
$("li:odd"); //从 0 开始计数, 查找第1,3,5...行
$("li:even"); //从 0 开始计数, 查找第2,4,6...行
$("li:eq(1)"); //从 0 开始计数, 查找第2行
$("li:gt(0)"); //从 0 开始计数, 查找第2第3行，即索引值是1和2，也就是比0大
$("li:last"); //获取匹配的最后个元素
$("li:lt(2)"); //从 0 开始计数, 查找第1第2行，即索引值是0和1，也就是比2小
$(":header").css("background", "#EEE"); //匹配如 h1, h2, h3之类的标题元素, 给页面内所有标题加上背景色
$("div:contains('John')"); //查找所有包含 "John" 的 div 元素, 匹配包含给定文本的元素, 一个用以查找的字符串
$("td:empty"); //查找所有不包含子元素或者文本的空元素
$("div:has(p)").addClass("test"); //给所有包含 p 元素的 div 元素添加一个 text 类
$("tr:hidden"); //匹配所有不可见元素，或者type为hidden的元素
$("tr:visible"); //匹配所有的可见元素
$("ul li:first-child"); //在每个 ul 中查找第一个 li
$("ul li:last-child"); //在每个 ul 中查找最后一个 li
$("ul li:nth-child(2)"); //要匹配元素的序号，从1开始

效果

$("p").toggle("slow");              //用600毫秒的时间将段落缓慢的切换显示状态
$("p").hide("slow");                //用600毫秒的时间将段落缓慢的隐藏
$("p").show("slow");                //用缓慢的动画将隐藏的段落显示出来，历时600毫秒。
$("p").slideDown("slow");           //用600毫秒缓慢的将段落滑下
$("p").slideUp("slow");             //用600毫秒缓慢的将段落滑上
$("p").slideToggle("slow");         //用600毫秒缓慢的将段落滑上或滑下
$("p").fadeIn("slow");              //用600毫秒缓慢的将段落淡入
$("p").fadeOut("slow");             //用600毫秒缓慢的将段落淡出
$("p").fadeTo("slow", 0.66);        //用600毫秒缓慢的将段落的透明度调整到0.66，大约2/3的可见度
$("p").fadeToggle("slow","linear"); //用600毫秒缓慢的将段落淡入

查找

$("div").children();    //查找DIV中的每个子元素
$("p").find("span");    //从所有的段落开始，进一步搜索下面的span元素。与$("p span")相同
$("p").next();          //找到每个段落的后面紧邻的同辈元素
$("p").parent();        //查找每个段落的父元素
$("p").prev();          //找到每个段落紧邻的前一个同辈元素
$("div:last").prevAll().addClass("before"); //给最后一个之前的所有div加上一个类
$("div").siblings();    //找到每个div的所有同辈元素

事件

.click：用 jQuery 把事件绑定到 <input /> tag 中

// html: <input id='btn' type="button" value="button"/>

$('#btn').click(function(event){
    console.log(event.target)
})

// results
//<input id='btn' type="button" value="button"/>

$('#btn').click( )例子