jQuery学习笔记
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是：$(selector).action()
- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
$(document).ready(function(){
--- jQuery functions go here ----
});
防止文档在完全加载（就绪）之前运行 jQuery 代码。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
$(document).ready(function)将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)触发或将函数绑定到被选元素的鼠标悬停事件
jQuery 效果
隐藏和显示
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
$(selector).hide(speed,callback); $(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素，并隐藏已显示的元素：
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
淡入淡出
jQuery 拥有下面四种 fade 方法：
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
淡入方式
淡出，切换的方式相同
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
$(selector).fadeTo(speed,opacity,callback);
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
滑动
$(selector).slideDown(speed,callback); //滑动向下
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);
动画
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});
队列功能
停止动画
$(selector).stop(stopAll,goToEnd); 可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
jQuery - 获得内容和属性
三个简单实用的用于 DOM 操作的 jQuery 方法：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
-
attr() - 获取属性
-
$("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); });$("#btn1").click(function(){ alert("Value: " + $("#test").val()); });$("button").click(function(){ alert($("#w3s").attr("href")); });
设置内容和属性
jQuery attr() 用于设置/改变属性值。
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
可以改变标签值
添加元素
添加新的 HTML 内容
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
删除元素
删除元素/内容 remove() - 删除被选元素（及其子元素） empty() - 从被选元素中删除子元素 $("#div1").remove(); $("#div1").empty();
获取并设置 CSS 类
jQuery 拥有若干进行 CSS 操作的方法
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
css("propertyname");
更改css样式
尺寸
width()
height()
innerWidth()
innerHeight()
outerWidth()
outerHeight()
$("#div1").width() 返回元素宽度
$("#div1").height() 返回元素高度
jQuery 遍历
祖先
向上遍历 DOM 树 parent() //直接父 parents() //所有祖先（或者内置参数，规定返回祖先类型） parentsUntil() $(document).ready(function(){ $("span").parentsUntil("div"); }); //返回“span”与“div”之间的类型
后代
向下遍历 DOM 树
- children() //仅仅到儿子
- find() //可以到最后一个
都能够像parentsUntil()一样设置参数
同胞
在 DOM 树中水平遍历
- siblings() //所有同胞元素，内置参数的话，可以规定返回的类型
- next() //下一个同胞元素
- nextAll() //后面所有元素
- nextUntil() //指定范围的同胞元素
- prev() //前一个同胞元素
- prevAll() //前面所有元素
- prevUntil() //指定范围前面所有元素
过滤
first(), last() 和 eq()，它们允许您基于其在一组元素中的位置来选择一个特定的元素。
filter(“.ooo”) //所有类为ooo的元素
not(".ooo") //所有类不为ooo的元素
$(document).ready(function(){ $("div p").first(); }); //第一个<div> <p> 标签 $(document).ready(function(){ $("div p").last(); }); //最后一个<div><p>标签 $(document).ready(function(){ $("p").eq(1); }); //索引标签，从0开始 $(document).ready(function(){ $("p").filter(".intro"); }); //返回所有class="intro"的元素 $(document).ready(function(){ $("p").not(".intro"); }); //返回所有class不为"intro"的元素
jQuery - AJAX 简介
用户按继续加载时，才会从服务器调用剩余内容。
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
$(selector).load(URL,data,callback); 必需的 URL 参数规定您希望加载的 URL。 可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。 可选的 callback 参数是 load() 方法完成后所执行的函数名称。
$(document).ready(function(){
$("#btn1").click(function(){
$('#test').load('/example/jquery/demo_test.txt');
})
}) //获得外部内容
两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。
- GET - 从指定的资源请求数据
- POST - 向指定的资源提交要处理的数据
$("button").click(function(){
$.get("demo_test.asp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
});
