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',

'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() { //请求出错处理 }

});