JQuery

JQuery不是w3c标准：

w3c标准：不是一个标准而是一系列标准的集合，

1：结构标准语言：XML，XML

2：表现标准语言：css

3：行为标准：DOM

Json对象存储在键值对中｛key:value｝

$("p").empty();

把所有段落的子元素（包括文本节点）删除

JQuery中的hide函数：

$("p").hide();隐藏所有P元素

$(".t").hide():隐藏class="t"的元素

$("#t").hide（）:隐藏id="t"的元素

利用XPath表达式：

$("[href]"):选取带有href属性的元素

$("[href='#']"):选取所有href="#"的元素

$("[href!='#']"):选取所有href!=#的元素

$("[href$='.jpg']"):选取所有以.jpg结尾的元素

$(selector).click(function):将函数绑定到被选元素的点击事件上

$(selector).dbclick(function):将函数绑定到被选元素的双击事件上

$(selector).focus(function):将函数绑定到被选函数的焦点事件上

$(selector).mouseover(function):将函数绑定到元素的鼠标停留事件

同理$(selector).show()作用与其相反。

toggle()函数是来切换hide()和show()方法。

$(selector).toggle(speed,callback);

speed参数规定隐藏/显示的速度，可以取slow,fast,或者毫秒

callback参数是toggle()方法完成后所执行的函数

参数可选；

淡入淡出：

$(selector).fadeIn(speed,callback);

参数意义同上

$(selector).fadeOut(speed,callback);

参数意义同上

$(selector).fadeToggle(speed,callback);

如果元素已淡出，则fadeToggle()会向元素添加淡入效果

如果元素已淡入，则fadeToggle()会向元素添加淡出效果

$(selector).fadeTo(speed,opacity,callback);

必选参数opacity：是指淡入或者淡出的不透明度取值0~1

向下向上滑动元素：

$(selector).slideDown(speed,callback);

$(selector).slideUp(speed,callback);

同理slideToggle()方法：

如果元素向下滑动，则slideToggle()可向上滑动他们；

如果元素向上滑动，则slideToggle()可向下滑动他们;

$(selector).animate({params},speed,callback);

params定义形成动画的css属性

$("button").click(function){

$("div").animate({left:'250px'});

$("div").animate({width:'300px'});

});

stop()

$("#flip").click(function(){

$("#panel").slideDown(5000);

});

$("#stop").click(function(){

$("#panel").stop();

});

可选stopAll参数规定是否应该清除动画队列，默认是false,

可选goToEnd参数规定是否立即完成当前动画，默认是false，

$(selector).hide(speed,callback)

callback参数是一个在hide操作后被执行的函数。

例如:$(selector).hide(1000,function(){

alert("thePishide")})

chaining的技术：允许我们在相同的元素上运行多条jQuery语句。

-text()

设置或返回所选元素的文本内容

-html()

设置或返回所选元素的内容（包括html标记）

-val()

设置或返回表单字段的值

-attr()

方法用于获取属性值。

$("#btn1").click(function(){

$("#test1").text("Helloworld!");

});

$("#btn2").click(function(){

$("#test2").html("<b>Helloworld!</b>");

});

$("#btn3").click(function(){

$("#test3").val("DollyDuck");

$("#w3s").attr("href","http://www.w3school.com.cn/jquery");

-attr()也允许你同时设置多个属性。

<b>添加</b>

-append()

在被选元素的结尾插入内容

-prepend()

在被选元素的开头插入内容

-after()

在被选元素之后插入内容

-befor

在被选元素之前

在图像的前后插入得用after和before，

remove()--删除被选元素（及其子元素）

empty()--从被选元素中删除子元素

addClass()方法向元素添加类

removeClass()移除类

toggleClass()切换（移除和添加之间）

返回指定的css属性的值，请使用如下语句：

$("p").css("propertyname");

如果有多个p那就只返回第一个P的css属性

如果设置指定的css属性：

css("propertyname","value");

如果想设置多个css属性：

$("p").css({"backgroud-color":"yellow","font-size":"200%"});

尺寸：

width()方法设置或返回元素的宽度（不包括内边距和外边距，边框）

height()方法设置或返回元素的高度（不包括内边距和外边距，边框）

innerWidth()方法返回元素的宽度（包括内边距）

innerHeight()方法返回元素的高度（包括内边距）

outerWidth()方法返回元素的宽度（包括内边距和边框）

通过jQuery遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对DOM进行遍历

parent()方法返回被选元素的直接父元素

parents（）方法返回被选元素的所有祖先元素，一直到跟元素

parents("ul")返回被选元素的所有祖先元素，并且还要是ul

parentsUntil()方法返回介于两个给定元素之间的所有祖先元素

$("span").parentsUtil("div")就是返回span与其父类div之间的祖先元素（如果有两个div就从最近的div算起）

children()方法返回被选元素的所有直接子元素

该方法只会向下一级对DOM树进行遍历

$("div").children("p.1");（精确查找）

该表示返回类名为“1”的所有<p>元素，并且它们是<div>的直接子元素。

find()方法返回被选元素的后代元素

$("div").find("span")返回<div>后代的所有<span>元素

$("div").find("*")返回<div>的所有后代

siblings()方法返回被选元素的所有同胞

也可以可选参数来过滤同胞元素

$("h2").siblings("p")

next()方法返回被选元素的下一个同胞元素

nextAll()返回被选元素的所有跟随的同胞元素

nextUtil()方法返回介于两个给定参数之间的所有跟随的同胞元素

$("h2").nextUntil("h6")

同理有prev()prevALl()以及prevUntil()方法

缩写搜索元素的范围：

三个最基本的过滤方法：first(),last()和eq()

first()方法返回被选元素的首个元素：

last()方法返回被选元素的最后一个元素：

eq()方法返回被选元素中带有指定索引号的元素：（下标从0开始）

$("p").eq(3).css("backgroud-color","yellow");

P元素的第二个元素：

filter()方法允许您规定一个标准，不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

如返回类名为intro的所有P元素

$("p").filter(".intro");

not()与filter（）方法相反

AJAX

=AsynvhronousJavaScriptandXML

(异步js和xml)

$(selector).load(URL,data,callback);

必需的URL参数规定您希望加载的URL

可选的data参数规定与请求一同发送的查询字符串键/值对集合

可选的callback参数是load()方法完成后所执行的函数名称

$(document).ready(function(){

$("#btn1").click(function(){

$('#test').load('/example/jquery/demo_test.txt');

})

})

HTTP请求：GET和POST

GET：从指定的资源请求数据（可能返回缓存数据）

$.get(URL,callback);

URL：必选的URL地址

callback参数是请求成功后所执行的函数名称

POST：向指定的资源提交要处理的数据（不会返回缓存数据）

$.get("/example/jquery/demo_test.asp",function(data,status){

alert("数据："+data+"\n状态："+status);

});

$.post(URL,data,callback);

必选的URL

可选的data参数规定连同请求发送的数据

可选的callback参数是请求成功后所执行的函数名

$("button").click(function(){

$.post("demo_test_post.asp",

{

name:"DonaldDuck",

city:"Duckburg"

},

function(data,status){

alert("Data:"+data+"\nStatus:"+status);

});

});

noconflict()方法会释放对$标示符的控制，你也可以自己定义控制

varjq=$.noConflict();

jq(document).ready(function(){

jq("button").click(function(){

jq("p").text("jQuery仍在运行！");

});

});

$.noConflict();

jQuery(document).ready(function($){

$("button").click(function(){

$("p").text("jQuery仍在运行！");

});

});

tap事件用户轻击一个元素的时候触发

相当于click

上例中，noConflict()方法后，要想使用就必须定义在方法中才能使用。

ol标签是有序列表。

start:number,开始<olstart="7">

type:(1AaIi)<oltype="I">

reversed:<olreversed>降序目前只有chrome和safari6支持reversed

compact属性规定列表呈现的效果比正常情况更小巧一些，通过减小行间距和对列表进行缩进