JQuery笔记
jQuery
Write less,do more.
引用jQuery
jquery语法和文档就绪事件
$(selector).action()
文档就绪事件：
$(document).ready(
function(){
//jQuery代码
}
);
$(function(){
//jQuery代码
}
);
jQuery 入口函数与 JavaScript 入口函数的区别：
jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。且可放置多个。
JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。且只能放置一个。
jQuery选择器
基本选择器
#Id选择器
$("#test")
元素选择器
$("p")
全选择器
$(“*”)
.class选择器
$(".test")
组合选择器
$(“div,span,p”)
层级选择器
后代选择器
$(“p d”)： p元素下所有的d元素
相邻选择器
$(“p+next”)：p元素同级相邻的next元素
子代选择器
$(“p>c”)：p元素下的子代c元素
兄弟选择器
$(“p~siblings”): p元素同级的所有siblings元素
过滤选择器（重点）
$("li:first") //第一个li
$("li:last") //最后一个li
$("li:even") //挑选下标为偶数的li
$("li:odd") //挑选下标为奇数的li
$("li:eq(4)") //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)") //下标大于 2 的li
$("li:lt(2)") //下标小于 2 的li
$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li
$("div:animated") //匹配正在执行动画的元素
$("div:focus") //匹配当前获得焦点的元素
内容过滤选择器
$("div:contains('Runob')") // 包含 Runob文本的元素
$("td:empty") //不包含子元素或者文本的空元素
$("div:has(selector)") //含有选择器所匹配的元素
$("td:parent") //含有子元素或者文本的元素
可见性过滤选择器
$("li:hidden") //匹配所有不可见元素，或type为hidden的元素
$("li:visible") //匹配所有可见元素
属性过滤选择器
$("div[id]") //所有含有 id 属性的 div 元素
$("div[id='123']") // id属性值为123的div 元素
$("div[id!='123']") // id属性值不等于123的div 元素
$("div[id^='qq']") // id属性值以qq开头的div 元素
\(("div[id\)='zz']") // id属性值以zz结尾的div 元素
$("div[id*='bb']") // id属性值包含bb的div 元素
\(("input[id][name\)='man']") //多属性选过滤，同时满足两个属性的条件的元素
表单选择器
$(":input") //匹配所有 input, textarea, select 和 button 元素
$(":text")
//所有的单行文本框，\((":text") 等价于\)("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password") //所有密码框
$(":radio") //所有单选按钮
$(":checkbox") //所有复选框
$(":submit") //所有提交按钮
$(":reset") //所有重置按钮
$(":button") //所有button按钮
$(":file") //所有文件域
状态过滤选择器（表单对象）
$("input:enabled") // 匹配可用的 input
$("input:disabled") // 匹配不可用的 input
$("input:checked") // 匹配选中的 input
$("option:selected") // 匹配选中的 option
jQuery动画
显示/隐藏
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
淡入淡出
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeTogglae(speed,callback);
$(selector).fadeTo(speed,opacity[0-1],callback);
滑动
$(selector).slideup(speed,callback);
$(selector).slideDown(speed,callback);
$(selector).slideToggle(speed,callback);
jQuery自定义动画
$(seletor).animate({params},speed,callback);
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});
可以用 animate() 方法来操作所有 CSS 属性吗？
是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
jQuery停止动画
$(selector).stop();默认停止当前动画
$(selector).stop(true);停止所有动画，不动
$(selector).stop(true,true);停止所有动画，且到动画结束位置
jQuery链
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
jQuery的DOM操作
获取内容
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
获取属性值
$("#runoob").attr("href");
设置内容
$("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("Hello world!"); }); $("#btn3").click(function(){ $("#test3").val("RUNOOB"); });
设置属性（可设置多个属性）
$("button").click(function(){
$("#runoob").attr({
"href" : "http://www.runoob.com/jquery",
"title" : "jQuery 教程"
});
});
添加元素
append() / prepend() :在元素内部操作，相当于插入子元素
after() / before()：在元素外部操作，相当于插入兄弟元素
删除元素
remove() :删除被选元素及所有子元素
empty() :删除被选元素下的所有子元素
remove（filter）：
$("p").remove(".italic");
移除所有类为italic的p元素
jQuery操作CSS
添加class属性：addClass（）
$(seletctor).addClass(class1 class2...);
移除class属性：removeClass()
$(selector).removeClass(class1 class2...);
切换class属性：toggleClass（）——添加和删除之间的切换
$(selector).toggleClass(class1 class2);
CSS()方法
返回css属性值：
$("p").css("background-color");
设置css属性值
单个CSS属性：$("p").css("background-color","yellow");
多个CSS属性：$("p").css({"background-color":"yellow","font-size":"200%"});
jQuery尺寸
处理元素和浏览器窗口的尺寸。
$(selector).width();
$(selector).height();
$(selector).innerWidth();
$(selector).innerHeight();
$(selector).outWidth();
$(selector).outHeight();
无参获取，有参设置
jQuery遍历（查找）
jQuery向上遍历
返回被选元素的父元素
$(selector).parent();
返回被选元素的所有祖先元素，直到根节点
$(selector).parents();
返回两者元素之间的所有元素
$(selector).parentsUntil(element);
jQuery向下遍历
返回被选元素的直接子元素
$(selector).children();
返回被选元素的被选中的后代元素
$(selector).find(element);
返回所有的后代元素
$(selector).find(“*”);
jQuery同级遍历
返回所有同级元素
$(selector).siblings();
返回被选元素的下一个元素
$(selector).next();
返回被选元素后的所有同级元素
$(selector).nextAll();
返回被选元素和之后设置元素之间的所有同级元素
$(selector).nextUntil(element);
返回被选元素前一个元素
$(selector).prev();
返回被选元素前的所有同级元素
$(selector).prevAll();
返回被选元素和之前设置元素之间的所有同级元素
$(selector).prevUntil(element);
jQuery过滤方法
在一组相同被选中的元素中选择第一个元素
$(selector).first();
在一组相同被选中的元素中选择最后一个元素
$(selector).last();
选择索引值为index的元素（从0开始）
$(selector).eq(index);
选择带有selected类的元素
$(selector).filter(.selected);
选择不带selected类的元素
$(selector).not(.selected);
选择一个范围的元素
$(selector).slice(start,end);
选择第一个元素：$(selector).slice(0,1)
选择最后一个元素：$(selector).slice(-1);
判断被选元素是否含有selected类属性，返回布尔值
$(selector).hasClass(.selected);
jQuery事件
事件
元素失去焦点触发事件
$(selector).blur(function);
元素获得焦点时触发事件
$(selector).focus(function);
元素内容改变时触发事件
仅适用表单字段
$(selector).change(function);
点击元素时触发事件
$(selector).click(function);
双击元素时触发事件
$(selector).dbclick(function);
键盘事件
keydown 键被按下的过程
keypress 键被按下 standing-by
keyup 键松开
$(selector).keydown(function);
$(selector).keypress(function);
$(selector).keyup(function);
鼠标事件
获得鼠标在页面的位置
\((document).mousemove(function(event){
\)("span").text(event.pageX + ", " + event.pageY);
});
按下鼠标左键与释放鼠标左键
$("div").mouseup(function(){
$(this).after("
释放鼠标按钮。
");});
$("div").mousedown(function(){
$(this).after("
按下鼠标按钮。
");});
鼠标进入元素和离开元素
鼠标离开元素
$(selector).mouseleave(function);
鼠标进入元素
$(selector).mouseenter(function);
hover方法
$(selector).hover(inFunction,outFunction);
mouseleave(),mouseenter()和mouseout(),mouseover()区别
http://www.runoob.com/try/try.php?filename=tryjquery_event_mouseleave_mouseout
事件处理
on()方法
在选择元素上绑定一个或多个事件处理函数
单个事件处理：
$("#div1").on("click",function(){
$(this).css("background-color","pink");
});
多个事件处理
$("p").on({
mouseover:function(){$("body").css("background-color","lightgray");},
mouseout:function(){$("body").css("background-color","lightblue");},
click:function(){$("body").css("background-color","yellow");}
});
off()方法
移除on方法添加的事件
$("p").off("click");
});
jQuery 简化ajax
Ajax请求
load()方法
$(selecor).load(“url”,{key1:”value1”,key2:”value2”...},function(){});
从服务器加载数据，并把返回的数据放入被选元素中。
$("#div1").load("/try/ajax/demo_test.txt");
get()方法
$.get(“url”,{key1:”value1”,key2:”value2”...},function(){},dataType);
dataType：返回数据类型（默认html），可选：json，xml，script，html，text
post()方法
$.post(“url”,{key1:”value1”,key2:”value2”...},function(){},dataType);
dataType：返回数据类型（默认html），可选：json，xml，script，html，text
$.ajax(url,settings);
通用写法：
$.ajax({
url: "http://www.hzhuti.com", //请求的url地址
dataType: "json", //返回格式为json
//async: true, //请求是否异步，默认为异步，这也是ajax重要特性
data: { "id": "value" }, //参数值
type: "GET", //请求方式
beforeSend: function(request) { //请求前的处理
request.setRequestHeader("Content-type","application/json");
request.setRequestHeader("Source","101");
request.setRequestHeader("Token","aaw--wssw-ss..."); },
success: function(data) { //请求成功时处理 },
complete: function() { //请求完成的处理 },
error: function() { //请求出错处理 }
});
