（一）$选择器的用法
朋友推荐用jQuery做js开发库.学习后发现果然不错不敢独享，现把学习笔记贡上
本笔记翻译自：可视JQuery
环境,建立一个html文件,加载Jquery.js,
<script type="text/javascript" src="__PUBLIC__/js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript">
$(function(){
})
</script>
1.$()的用法
1.1 $(html) ==>>根据html参数动态建立一个jquery对像
例子：$("<div>hello</div>").appendTo("#Select"),动态的创建一个div element插入到ID为Select的element中去
#ID #后面接的是元素ID,为#选择器,上面是把("<div>hello</div>")这个html代码加入到ID为#Select的元素中!
1.2 $(element) ==>>把节点对像转化成一个jquery对像
例子:$(document.body).background("black");
1.3 $(function) ==>>是$(doucment).ready()的快捷键．当页面加载结束后才会执行function．$(function)可以调用多次，相当于绑定多个$(function)
eg: $(function(){
//document is ready
})
1.4 $(expr,context)=>在一定的范围（context）内根据搜索条件(expr)搜索出jQuery对像
eg: 1. $('span>p') :找出所有span中的p结点．
此例子为选择的方法选择span元素中的所有p元素!
2.$('input:radio',document.forms[0])搜索出第一个表单中的radio
2. $.extend(prop)向jquery命名空间中添加方法,用此方法可以方便的对jquery进行扩展
$.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
alert($.min(3,6)); //显示3
alert($.max(3,6));//显示6
注意!$.extend()为固定格式.测试成功.可做特殊用途使用
3. $.noConflict() 取消$代替jQuery.
例如:
jQuery.noConflict(); // Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display ='none';
4. each(function) 对所有符合条件的结点做为参数调用function
例如:
$("img").each(function(i){ this.src="test" + i + ".jpg"; });
结果：<img/><img/> ==>>[<img src="test0.jpg"/><img src="test1.jpg"/>]
测试成功,非常有用的功能 (i)为搜索img元素的序号,
比如第一个img元素,i就为0第二个i就为1,
this.src="test"为路径.可以自定义. ".jpg"; 为扩展名.
5．eq(pos)取得对像element数组的第N＋1个element
例如：$("p").eq(1)
<p>This is just a test.</p><p>So is this</p> ==>>[<p>So is this</p>]
此例子为选择器,意思是选择第二个p元素的内容.第一个为eq(0)
6. get() 取得所有的element数组
例如: $("img").get();
<img src="test1.jpg"/> <img src="test2.jpg"/> ==>>[ <img src="test1.jpg"/> <img src="test2.jpg"/>]
此例为选择所有img元素
get(num)可以取得指定的element
例如:$("img").get(1)
<img src="test1.jpg"/> <img src="test2.jpg"/> ==>>[<img src="test2.jpg"/>]
这此为选择第1个IMG元素.从0开始累计
（二） $属性操作(添加和删除)
7.index(subject) : 查找相应节点的位置，从0开始计数.如果没找到返回-1
eg:<div id="foobar"><b></b><span id="foo"></span></div>
$("*").index( $('#foobar')[0] ); ==>> 0
$("*").index( $('#foo')[0] ); ==>> 2
$("*").index( $('#bar')[0] ); ==>> -1
搜索选择.上例为搜索ID为foobar的元素,结果是此元素在第0个,从0开始,
foo在第二个,第1个元素为<b></b>,第三个bar因为没有ID是bar的,所以显示-1
8.length 返回节点的个数
eg:<img src="test1.jpg"/><img src="test2.jpg"/>
$("img").length; ==>> 2
统计选择.选择所有img元素,并统计个数.可用alert($("img").length);来输出调试
同样的方法还有
size()
$("img").size(); ==>> 2;
size()等同于length
9.lt(pos) 删除一个节点
eg:<p>This is just a test.</p><p>So is this</p>
$("p").lt(1); ==>> [<p>This is just a test.</p>]
删除一个元素或是节点使用lt,搜索所有p元素,删除第1个,起点为0,结果<p>So is this</p>被删除!
10.addClass 给一个element添加class可以添加多个
eg: <p>Hello</p>
$("p").addClass("selected"); ==>> [<p class="selected">Hello</p>]
$("p").addClass("selected highlight"); ==>> [<p class="selected highlight">Hello</p>]
添加Class,即是CSS样式,使用addClass
11.attr(name) 取得element的指定属性值
eg:<img src="test.jpg"/>
$("img").attr("src"); ==>>[test.jpg]
使用attr(name)来取得元素属性,name即为元素中的所有可用属性,比如img中的 src 属性.
attr(key,value) 设置属性attr(key,function) 调用相应的方法处理后的返回值用来设置属性attr(properties) 批量的设置element的属性值
eg: <img/>
$("img").attr({ src: "test.jpg", alt: "Test Image" }); ==>> [<img src="test.jpg" alt="Test Image"/>]
$("img").attr("src","test.jpg"); ==>> [<img src="test.jpg"/>]
设置元素属性,attr(key,value) key是指属性的名称,value是指导属性的值.可同时设置多个,比如例一,使用","来分隔!
以下两个方法等价:
$("img").attr("title", "${this.src}")
$("img").attr("title", function() {
return this.src;
})
==>> [<img src="test.jpg" title="test.jpg" />]
这个从了个this动作.${this.src}" 此变量为本身的src属性.
function() { //建立函数
return this.src; //返回结果值
}
等于同${this.src}
12.html 取得element的html代码
eg: <div><input/></div>
$("div").html(); ==>> [<input/>];
选择div元素.得到div元素中间的html代码!
html(val) 设置element的html代码
eg: <div><input/></div>
$("div").html("<b>new stuff</b>"); ==>> [<div><b>new stuff</b></div>]
应该是搜索DIV的元素,把指定的HTML代码,替换其中!(原来DIV中的HTML代码就没了)
（三） 元素的属性增加和删除操作
13.removeAttr(name) 删除属性
eg: <input disabled="disabled"/>
$("input").removeAttr("disabled") ==>> [ <input/> ]
删除元素属性,使用方法与attr(加入元素属性)一样
14.removeClass(class) 删除样式，当class是空时删除所有的样式，如果class为指定样式则删指定样式
eg: <p class="highlight selected first">Hello</p>
$("p").removeClass("selected highlight") ==>> [ <p class="first">Hello</p> ]
$("p").removeClass() ==>> [ <p>Hello</p> ]
删除class样式,使用方法与addClass使用方式一样
15. text() 取得element中的内容text(val) 设置element内容text与html差不多，只是text会把<,>用html标识符替换
eg: <p><b>Test</b> Paragraph.</p><p>Paraparagraph</p>
$("p").text() ==>> [ Test Paragraph.Paraparagraph ];
<p>Test Paragraph.</p>
$("p").text("<b>Some</b> new text."); ==>> [ <p><b>Some</b> new text.</p> ]
$("p").text("<b>Some</b> new text.", true) ==>> [ <p>Some new text. </p> ]
与.html()使用方式相似!
16.toggleClass(class) 这是一个比较有用的方法，就是当element存在参数中的样式的时候取消，如果不存在就设置此样式
eg:<p>Hello</p><p class="selected">Hello Again</p>
$("p").toggleClass("selected")==>[ <p class="selected">Hello</p>, <p>Hello Again</p> ]
很有意思的操作,搜索所有的p元素,查看p元素是否有class为selected的CSS,如果有.就取消,如果没有就添加,例子只是对CSS样子操作,不知对元素属性是否能操作.如果能单选或是复选框会很灵活的使用!
17.val() 取得第一个element的vlaue值 val(val) 设置属性的值
eg: <input type="text" value="some text"/>
$("input").val(); ==>> [ "some text" ]
val()是取值的操作.例子是取input元素中的所有值
设置元素值
$("input").val("test"); ==>> [ <input type="text" value="test"/> ]
设置input元素的值为test
18.1.after(content)给相关的element从后面插入节点
eg: <p>I would like to say: </p>
$("p").after("<b>Hello</b>"); ==>> [ <p>I would like to say: </p><b>Hello</b><b>Hello</b> ]
after()是向指定元素的最后面插入html代码.上面的例子只加入了一次<b>Hello</B>!
<p>I would like to say: </p>
$("p").after( $("b") ); ==>> [<p>I would like to say: </p><b>Hello</b> ]
这个是组合添加.搜索所有的p元素.在p元素后面添加搜索的所有b元素.
18.2.before(content)与after相反是插入到前面
eg: <p>I would like to say: </p>
$("p").before("<b>Hello</b>"); ==>> [ <b>Hello</b><p>I would like to say: </p> ]
这个完全和after相反
19.append(content) 与上面不同的是append是添加把content做为子element
eg: <p>I would like to say: </p>
$("p").append("<b>Hello</b>"); ==>> [<p>I would like to say: <b>Hello</b></p> ]
append 是指和after交换不同的,他是在指定元素的内部最后面加入html代码,做为子元素存在
eg: <p>I would like to say: </p><b>Hello</b>
$("p").append($("b")); ==>> [ <p>I would like to say: <b>Hello</b></p> ]
20.appendto(content)与append刚好相反
eg:<p>I would like to say: </p>
<div id="foo"></div>
$("p").appendTo("#foo"); ==>> [ <div id="foo"><p>I would like to say: </p></div> ]
与append功能相反.把指定的元素或是html代码,加到选择元素的外部.做为选定元素的父元素存在!
（四） 元素的内容增加和删除
21.prepend(content) 添加到element里面的前部．与append的方位不一样
eg:<p>I would like to say: </p>
$("p").prepend("<b>Hello</b>"); ==>> [ <p><b>Hello</b>I would like to say: </p> ]
加到指定元素内部的最前面.做为子元素存在!和append功能一样,只是加入的方位不同
22.prependTo(content) 与prepend的添加对像相反．
eg:<p>I would like to say: </p><div id="foo"><b>Hello</b></div>
$("p").prependTo("#foo"); ==>> [ <div id="foo"><p>I would like to say: </p><b>Hello</b></div> ]
与appendTo的功能一样,有点迷糊这个
23.clone(deep) 克隆一个新的element．参数deep为flase时不包括子element
eg:<b>Hello</b><p>, how are you?</p>
$("b").clone().prependTo("p"); ==>> [ <b>Hello</b><p><b>Hello</b>, how are you?</p> ]
搜索B元素并复制一个放到p元素的前面.
24.empty() 删除所有的内部节点
eg:<p>Hello, <span>Person</span> <a href="#">and person</a></p>
$("p").empty(); ==>> [ <p></p> ]
删除P元素内部的所有内容
25. insertAfter(content) 与after差不多．
eg:$(a).after(b); === $(b).insertAfter(a);
26. insertBefore(content) 与 before差不多
eg:$(a).before(b) === $(b).insertBefore(a)
27. remove(expt) 删除条件是expt的相应的element,当expt为空时．全部删除
eg:<p class="hello">Hello</p> how are <p>you?</p>
$("p").remove(".hello"); ==>> [ how are <p>you?</p> ]
删除class为hello的P元素.如果romove()里面为空,就是删除所有p元素
28. wrap(html) 把节点插入到html生成的节点里面．要注意的是html节点中不能含有内容只能是节点的结构．如果想加的话只能在嵌入后再插入内容
eg:<p>Test Paragraph.</p>
$("p").wrap("<div class='wrap'></div>"); ==>> [ <div class='wrap'><p>Test Paragraph.</p></div> ]
wrap是只插入元素,而且元素不能有内容.如例子,把p加入到div中,而且div为父元素,p为子元素
注html也可以直接用一个element代替
（五） 节点操作.删除和,取值
29.add(params) 在$所取到的节点数组中添加新的节点．
参数可以是expr, html,element
eg: 1.<p>Hello</p><span>Hello Again</span>
$("p").add("span") ==>> [ <p>Hello</p>, <span>Hello Again</span> ]
eg: 2.<p>Hello</p>
$("p").add("<span>Again</span>") ==> [ <p>Hello</p>, <span>Again</span> ]
eg: 3.<p>Hello</p><p><span id="a">Hello Again</span></p>
$("p").add(document.getElementById("a") ) ==>> [ <p>Hello</p>, <span id="a">Hello Again</span> ]
增加元素或是html内容.增加到搜索的元素之后.例三,是提取id为a的子元素到p元素之后,这时子元素的地位改变,与p元素并列
30.children(expr)取得子节点,当expr为空时，取得所有的子节点
eg: <div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>
$("div").children() ==>> [<span>Hello</span><p class="selected">Hello Again</p><p>And Again</p> ]
$("div").children(".selected") ==>> [ <p class="selected">Hello Again</p> ]
children纯选择功能.当无参数是是选择所有子元素.当有条件时,按条件所选.例二是选择class为selected的节点!
31.contains(str)找出字节点中包含有str的节点,str起到过滤做用
eg: <p>This is just a test.</p><p>So is this</p>
$("p").contains("test") ==>> [ <p>This is just a test.</p> ]
contains也纯选择功能.参数是str类型.即选择test中包括有test内容的节点
32.filter(expression)过滤找出符合expression的节点
eg:<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
$("p").filter(".selected") ==>> <p class="selected">And Again</p>
$("p").filter(".selected, :first") ==>> [ <p>Hello</p>, <p class="selected">And Again</p> ]
属于多条件查询.selected应该是class为selected的节点.:first应该是第一个节点!
filter(filter_func)通过函数来选择是否过滤，filter_func返回true表示过滤
<p><ol><li>Hello</li></ol></p><p>How are you?</p>
$("p").filter(function(index) { return $("ol", this).length == 0; })==>[ <p>How are you?</p> ]
filter 还可以以函数为条件!
33.find(expr)从子节点找出符合expr的.与filter的区别是filter过滤掉$数组中的节点find过滤到的是子节点
eg: <p><span>Hello</span>, how are you?</p>
$("p").find("span") ==>> [ <span>Hello</span> ]
与filter相反,感觉都差不多
34.is(expr) 判断是否符合条件，如果$数组的所有节点都不符合条件返回false，只要有一个符合条件就返回true
eg: <form><p><input type="checkbox" /></p></form>
$("input[@type='checkbox']").parent().is("form") ==>> false
$("input[@type='checkbox']").parent().is("p") ==>> true
条件判断!
35.next(expr) 取得最近节点那个节点.expr为空时取得所有节点
eg:1.<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
$("p").next() ==>> [ <p>Hello Again</p>, <div><span>And Again</span></div> ]
eg:2.<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>
$("p").next(".selected") ==>>[ <p class="selected">Hello Again</p> ]
感觉没什么特别的.
36. not(el),not(expr),not(elems)与add相反，删除符合条件的节点.
eg:1. <p>Hello</p><p id="selected">Hello Again</p>
$("p").not($("#selected")[0]) ==>> [ <p>Hello</p> ]
$("p").not("#selected") ==>> [ <p>Hello</p> ]
eg:2.<div><p>Hello</p><p class="selected">Hello Again</p></div>
$("p").not($("div p.selected")) ==>> [ <p>Hello</p> ]
删除条件中的节点,反回删除后的结果
37 parent(expr) 取得父节点
eg:1.<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>
$("span").parents() ==>> [ <body>...</body>, <div>...</div>, <p><span>Hello</span></p> ]
参数为空时取得所有父节点
eg:2.<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>
$("span").parents("p") ==>>[ <p><span>Hello</span></p> ]
有条件时取得第一个父节点.
38.prev(expr) 与next相反,next取得是与节点相邻后面的．prev取得相邻前面的
eg:1.<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
$("p").prev(".selected") ==>> [ <div><span>Hello</span></div> ]
eg:2.<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
$("p").prev() ==>> [ <div><span>Hello Again</span></div> ]
这个很明显,取得条件之前的节点.next没那么明显,
39.siblings(expr) 取得相邻两边的节点是.next,与prev的结合体
这两个把next和prev整合了
jquery与dom相关的操作先讲到这里,下回接着讲CSS相关操作
（六） CSS控制
下部主要记录的是CSS的控制命令
40 1/. CSS(name)读取样式属性值
eg:<p style="color:red;">Test Paragraph.</p>
$("p").css("color") ==>> [ "red" ]
css.取得p元素中的css的color属性
2/css(properties)设置style
eg:<p>Test Paragraph.</p>
$("p").css({ color: "red", background: "blue" }) ==>> [ <p style="color:red; background:blue;">Test Paragraph.</p> ]
css设置元素的css样式.参数就为,属性.值这种格式
3/css(key, value)设置单个样式属性,如果设置的值是数字的话,会被自动转化为像素单位
eg:<p>Test Paragraph.</p>
$("p").css("color","red") ==>> [ <p style="color:red;">Test Paragraph.</p> ]
$("p").css("left",30) ==>> [ <p style="left:30px;">Test Paragraph.</p> ]
功能差不多,注意如果值是数据,单位会直接转为px
41 1/height()取得当前匹配节点数组中的第一个节点的高的值
eg: <p>This is just a test.</p>
$("p").height() ==>> [ 300 ]
2/ height(val) 设置所有匹配的节点的高,如果val的单位不是ex,%,那么单位自动设为px
eg:<p>This is just a test.</p>
$("p").height(20) ==>> [ <p style="height:20px;">This is just a test.</p> ]
height设置CSS节点的高度
42.width() 设置宽度,width(val)设置高度.用法与height一样以上是基本的CSS的js用法,下面主要记录jQuery的一些功能函数
43.$.browser 用于判断浏览器的分别为safari,opera, msie, mozilla.这些方法要等DOM ready后才能使用
eg: if($.browser.safari) {$( function() { alert("this is safari!"); } ); }
判断浏览器
44.$.each(obj,fn) 这个方法与$().each()不一样,前者可以迭代任务数组与对像,后者只能迭代jQuery对象
$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
45.$.extend(target, prop1, propN)继承多个对象.target被扩展的对象.prop1,第一个父对象,propN其它被继承的对象
eg:1. var settings = { validate: false, limit: 5, name: "foo" };var options = { validate: true, name: "bar" }; jQuery.extend(settings, options); ==>> [ settings == { validate: true, limit: 5, name: "bar" } ]
整合对象
eg:2.var defaults = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" };var settings = jQuery.extend({}, defaults, options); ==>> [ settings == { validate: true, limit: 5, name: "bar" } ]
46.$.grep(array, fn, inv)用fn过滤array,当fn返回true时array元素保留在数组中
eg:$.grep( [0,1,2], function(i){ return i > 0; }); ==>> [1, 2]
47.$.map(array, fn)通过fn修改array中的值当函数返回值为null里,array元素将被删除,当返回是数组时,返回的数组将与原数组合并
eg:1.$.map( [0,1,2], function(i){ return i + 4; }); ==>> [4, 5, 6]
eg:2.$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; }); ==>> [2, 3]
eg:3.$.map( [0,1,2], function(i){ return [ i, i + 1 ]; }); ==>> [0, 1, 1, 2, 2, 3]
48.$.merge(first, second)两个数组进行合并,删除重复的值
eg:$.merge( [0,1,2], [2,3,4] ) ==>> [0,1,2,3,4]
eg:$.merge( [3,2,1], [4,3,2] ) ==>> [3,2,1,4]
49.$.trim(str)去除字符串两端的空格,一个十分熟悉常用的方法
eg:$.trim(" hello, how are you? ") ==>> [ "hello, how are you?" ]
这个比较有用,去除字符串的两端空格
（七） 事件响应的处理
50.bind(type, data, fn)对所有选定的element判断事件,type是事件类型,data是参数,fn是事处理方法.
eg:1.$("p").bind("click", function(){ alert( $(this).text() ); });
eg:2.function handler(event) { alert(event.data.foo); }
$("p").bind("click", {foo: "bar"}, handler) ==>> [ alert("bar") ]
51.blur() 触发blur方法,blur(fn)设置blur函数
eg: <p>Hello</p>
$("p").blur( function() { alert("Hello"); } ); ==>> [ <p οnblur="alert('Hello');">Hello</p>
52.change(fn)设置onchange事件的方法
eg:<p>Hello</p>
$("p").change( function() { alert("Hello"); } ); ==>> [ <p οnchange="alert('Hello');">Hello</p>
53.click()触发onclick事件, click(fn)设置onclick方法
54.dblclick(fn)设置ondblclick方法
55.error(fn)设置error方法
56.focus()触发onfocus,focus(fn)设置focus方法
eg:<p>Hello</p>
$("p").focus( function() { alert("Hello"); } ); ==>> [ <p οnfοcus="alert('Hello');">Hello</p> ]
57.hover(over, out) 设置mouse移入以及mouse移出时所触发的事件.
eg:$("p").hover(function(){
$(this).addClass("over");
},function(){
$(this).addClass("out");
});
58 keydown(fn),keypress(fn),keyup(fn),按键盘相关的操作分别对应onkeydown,onkeypress,onkeyup.
59 mousedown(fn),mousemove(fn),mouseout(fn),mouseover(fn),mouseup(fn)这些是mouse相关的操作分别对应
onmousedown,onmousemove,onmouseout,onmouseover,onmouseup.
60.load 当element load事件发生时触发
eg:<p>Hello</p>
$("p").load( function() { alert("Hello"); } ); ==>> [ <p οnlοad="alert('Hello');">Hello</p> ]
61.one(type, data, fn)与bind差不多,最大的区别是前者只运行一次后便不再响应.如果运行后不想继续运行默认的方法只要fn中返回值
return false就可以了.
eg: <p>Hello</p>
$("p").one("click", function(){ alert( $(this).text() ); }); ==>> [ alert("Hello") ]
62.ready(fn)当dom 结构载入完毕的时候.用此方法时,请不要在onload方法里面写代码.不然就不会触发ready事件
eg:1.$(document).ready(function(){ Your code here... });
eg:2.jQuery(function($) {
// Your code using failsafe $ alias here...
});
63.resize 设置onresize方法.当大小改变时触发
eg: <p>Hello</p>
$("p").resize( function() { alert("Hello"); } ); ==>> [ <p οnresize="alert('Hello');">Hello</p> ]
64 scroll(fn) 设置onscroll方法
65.select()触发onselect方法.select(fn)设置select方法
66. submit()提交表单,submit(fn)设置submit方法.
eg:$("#myform").submit( function() {return $("input", this).val().length > 0; } );<form id="myform"><input /></form>
67.toggle(even, odd),even当偶数单击时运行,odd当奇数单击时运行.用unbind('click')删除
eg:$("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass("selected");
});
68.trigger(type)触发相应的type方法
eg: <p click="alert('hello')">Hello</p>
$("p").trigger("click") ==>> [ alert('hello') ]
69 unbind(type, fn)与bind相反
1.unbind()删除所有的绑定.
eg:<p οnclick="alert('Hello');">Hello</p>$("p").unbind() ==>> [ <p>Hello</p> ]
2.unbind(type)删除指定的绑定
eg:<p οnclick="alert('Hello');">Hello</p>
$("p").unbind("click") ==>> [ <p>Hello</p> ]
3.unbind(type, fn)删除指定type的指定fn
eg:<p οnclick="alert('Hello');">Hello</p>
$("p").unbind("click", function() { alert("Hello"); } ) ==>> [ <p>Hello</p> ]
70.unload(fn)当页面unload的时候触发方法
eg: <p>Hello</p>$("p").unload( function() { alert("Hello"); } ); ==>> [ <p οnunlοad="alert('Hello');">Hello</p> ]
（八）处理特效
71. animate(params, speed, easing, callback)动画特效.
params:是动画的设置,用来表示动画的展现以及结束,
speed:动画的速率可以是("slow","normal",or "fast")也可以是毫秒数.eg: 1000
easing:默认是'linear',如想用其它参数,就要添加jQuery的特效插件.
callback: 当动画完成时的调用的函数.
eg:
1. $("p").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
2. $("p").animate({ left: 50, opacity: 'show' }, 500);
3. $("p").animate({ opacity: 'show'}, "slow", "easein");
72. fadeIn(speed, callback),fadeOut(speed, callback),fadeTo(speed, opacity, callback)淡入,淡出效果,speed表示速度,可以用"slow,normal,fast"代替,也可以直接写毫秒数. callback表示淡入,淡出后的调用的函数.fadeTo表示淡入到某个透明度。opacity (Number):取值范围就0-1
eg:
$("p").fadeTo("slow", 0.5, function(){
alert("Animation Done.");
});
73. hide(),hide(speed, callback).前者是把element隐藏用的是display:none的样式。后者是把element的长，宽，以及透明度都改变。callback表示动画完成后调用的函数。speed表示速度.
eg: 1. <p>Hello</p>
$("p").hide() ==>> [ <p style="display: none">Hello</p> ]
2.$("p").hide("slow",function(){alert("Animation Done.");}); //动画隐藏
74. show(),show(speed, callback)这两个方法与前两个方法的行为相反。
eg: 1. <p style="display: none">Hello</p>
$("p").show() ==>> [ <p style="display: block">Hello</p> ]
2. $("p").show("slow",function(){ alert("Animation Done.");}); //动画展现
75.slideDown(speed, callback),slideUp(speed, callback)，slideToggle(speed, callback)slideDown是高度从0慢慢增加，slideUp是高度慢慢减小到0。slideToggle表示一个相反的状态。如果当前状态是slideDown后的状态，那么执行slideToggle与运行slideUp一样。如果当前状态是slideUp后的状态，那么执行 slideToggle与运行slideDown一样
76. toggle(),如果element是hide状态则show之。如果当前状态是show状态，则hide之.
eg: <p>Hello</p><p style="display: none">Hello Again</p>
$("p").toggle() ==> [ <p style="display: none">Hello</p>, <p style="display: block">Hello Again</p> ]
（九） ajax
71.$.ajax(params)这个方法是jQuery中调用ajax的最基本方法,功能十分强大.参数是一个对象.所有的参数用key:value的形式设置
下面主要介绍一下各种参数:
(string)url: 要请求的网址,可以把参数get参数设置到url上面
(string)type: 请求的类型,可以是Post与get,默认情况下是GET
(string)dataType: 你所期望返回的数据格式,可以是xml,html,script,json.最终返回类型还是服务器决定.
(Boolean)ifModified:只当返回值改变的时候才会成功返回正确值.主要判断依据是请求头的Last-Modified.默认情况下,这个值设置为false
(Number)timeout:设置请求时间,这个时间会替换全局的时间($.ajaxTimeout)
(Boolean)global:是否触发全局的ajax事件句柄.例如ajaxStart,ajaxStop.默认情况是true
(Function)error: 请求错误处理的函数.
(Function)success: 请求成功处理的函数.
(Function)complete:请求完成处理的函数.
(Object|string)data:发送到服务器端的数据.如果不是字符串,则被转化成字符串,被加到url上面,做为查询字符串.如果不想用默认的方式处理,可以设置processData状态.
(Boolean)processData.默认情况是true,把object转化成string,做查询字符串.可以设置为false,则以DOMDocments发送.
(String)contentType.默认是”application/x-www-form-urlencoded”,一般情况不用修改.
(Boolean)async .默认值为true.表示异步请求,如果想改成同步.只要把设为false就可以了.
(Function)beforeSend.用于对在发送请求之前,对请求头的设置.有XMLHttpRequest做为参数
例子:
取一个js文件.
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
})post数据到服务器端,并且成功时提示用户.
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});同步请求数据
var html = $.ajax({
url: "some.php",
async: false
}).responseText;传送domdocument,data将不会被强行转化.
var xmlDocument = [create xml document];
$.ajax({
url: "page.php",
processData: false,
data: xmlDocument,
success: handleResponse
});
72.$.ajaxSetup(settings)设置一个全局的ajax变量.一般用来设置一些公用的请求头设置.
$.ajaxSetup( {
url: "/xmlhttp/",
global: false,
type: "POST"
} );
$.ajax({ data: myData });
73.$.ajaxTimeout(time) 设置全局ajax请求时间,当time为0或者null时表示不限时间$.ajaxTimeout( 5000 ); //表示最长5秒请求.
74.$.get(url, params, callback)下载一个页面.url:页面地址,params: 参数,是key/value的mapcallback: 请求结束后调用的方法
eg:$.get("test.cgi",
{ name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
}
);
75.$.getIfModified(url, params, callback)与get一样,不同之处在于如果请求的页面返回值不变的话,就不处理请求.
76.$.getJSON(url, params,callback)与$.get一样,返回值是用json格式后好的.
77.$.getScript(url, callback)下载脚本文件,并运行.
eg:$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
（十） AJAX
78.$.post(url, params, callback) 用post的方式下载一个页面返回XMLHttpRequest
url: 请求的页面
params:表示请求的要发送的参数.
callback: 请求结束后,调用的方法
eg:
$.post("test.cgi",
{ name: "John", time: "2pm" },
function(data){
alert("Data Loaded:" + data);
}
);
79. ajaxStart(callback) 当ajax请求发送前,将触发callback.
eg;
$("#loading").ajaxStart(function(){
$(this).show();
});
80. ajaxSend(callback)当ajax请求发送时触发callback,参数是XMLHttpRequest和settings请求设置
eg:
$("#msg").ajaxSend(function(request, settings){
$(this).append("<li>Starting request at " + settings.url + "</li>");
});
81.ajaxComplete(callback)当一个ajax请求完成时调用callback.回调参数为XMLHttpRequest和settings请求设置
eg:
$("#msg").ajaxComplete(function(request, settings){
$(this).append("<li>Request Complete.</li>");
});
82.ajaxSuccess(callback)当一个ajax请求成功时调用回调参数为XMLHttpRequest和settings请求设置
eg:
$("#msg").ajaxSuccess(function(request, settings){
$(this).append("<li>Successful Request!</li>");
});
83.ajaxError(callback)当一个ajax请求失败时调用回调参数为XMLHttpRequest和settings请求设置
eg:
$("#msg").ajaxError(function(request, settings){
$(this).append("<li>Error requesting page " + settings.url + "</li>");
});
84.ajaxStop(callback)当所有的ajax请求结束时,将触发callback
eg:
$("#loading").ajaxStop(function(){
$(this).hide();
});
85.load(url, params, callback)加载url的内容,并把得到的内容插入到DOM中去. 注意:避免去获取script脚本.可以用$.getScripturl:请求的页面,params:发送的参数.callback: 调用完成后的回调函数.
eg: <div id="feeds"></div>
$("#feeds").load("feeds.html") ==>> <div id="feeds"><b>45</b> feeds found.</div>;
86.loadIfModified(url, params,callback)功能与85点的load方法一模一样.唯一的区别是,当服务器端根据LastModify判断出没有什么改动的话.就不进行请求.也不进行dom插入.
87.serialize()这是一个十分有用的方法.一般用来序列化进行ajax请求的参数.十分方便
eg:
<input type='text' name='name' value='John'/>
<input type='text' name='location' value='Boston'/>
$("input[@type=text]").serialize(); ==>> name=John&location=Boston
关于jQuery的学习笔记先记到此.
朋友推荐用jQuery做js开发库.学习后发现果然不错不敢独享，现把学习笔记贡上
本笔记翻译自：可视JQuery
环境,建立一个html文件,加载Jquery.js,
<script type="text/javascript" src="__PUBLIC__/js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript">
$(function(){
})
</script>
1.$()的用法
1.1 $(html) ==>>根据html参数动态建立一个jquery对像
例子：$("<div>hello</div>").appendTo("#Select"),动态的创建一个div element插入到ID为Select的element中去
#ID #后面接的是元素ID,为#选择器,上面是把("<div>hello</div>")这个html代码加入到ID为#Select的元素中!
1.2 $(element) ==>>把节点对像转化成一个jquery对像
例子:$(document.body).background("black");
1.3 $(function) ==>>是$(doucment).ready()的快捷键．当页面加载结束后才会执行function．$(function)可以调用多次，相当于绑定多个$(function)
eg: $(function(){
//document is ready
})
1.4 $(expr,context)=>在一定的范围（context）内根据搜索条件(expr)搜索出jQuery对像
eg: 1. $('span>p') :找出所有span中的p结点．
此例子为选择的方法选择span元素中的所有p元素!
2.$('input:radio',document.forms[0])搜索出第一个表单中的radio
2. $.extend(prop)向jquery命名空间中添加方法,用此方法可以方便的对jquery进行扩展
$.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
alert($.min(3,6)); //显示3
alert($.max(3,6));//显示6
注意!$.extend()为固定格式.测试成功.可做特殊用途使用
3. $.noConflict() 取消$代替jQuery.
例如:
jQuery.noConflict(); // Do something with jQuery
jQuery("div p").hide();
// Do something with another library's $()
$("content").style.display ='none';
4. each(function) 对所有符合条件的结点做为参数调用function
例如:
$("img").each(function(i){ this.src="test" + i + ".jpg"; });
结果：<img/><img/> ==>>[<img src="test0.jpg"/><img src="test1.jpg"/>]
测试成功,非常有用的功能 (i)为搜索img元素的序号,
比如第一个img元素,i就为0第二个i就为1,
this.src="test"为路径.可以自定义. ".jpg"; 为扩展名.
5．eq(pos)取得对像element数组的第N＋1个element
例如：$("p").eq(1)
<p>This is just a test.</p><p>So is this</p> ==>>[<p>So is this</p>]
此例子为选择器,意思是选择第二个p元素的内容.第一个为eq(0)
6. get() 取得所有的element数组
例如: $("img").get();
<img src="test1.jpg"/> <img src="test2.jpg"/> ==>>[ <img src="test1.jpg"/> <img src="test2.jpg"/>]
此例为选择所有img元素
get(num)可以取得指定的element
例如:$("img").get(1)
<img src="test1.jpg"/> <img src="test2.jpg"/> ==>>[<img src="test2.jpg"/>]
这此为选择第1个IMG元素.从0开始累计
（二） $属性操作(添加和删除)
7.index(subject) : 查找相应节点的位置，从0开始计数.如果没找到返回-1
eg:<div id="foobar"><b></b><span id="foo"></span></div>
$("*").index( $('#foobar')[0] ); ==>> 0
$("*").index( $('#foo')[0] ); ==>> 2
$("*").index( $('#bar')[0] ); ==>> -1
搜索选择.上例为搜索ID为foobar的元素,结果是此元素在第0个,从0开始,
foo在第二个,第1个元素为<b></b>,第三个bar因为没有ID是bar的,所以显示-1
8.length 返回节点的个数
eg:<img src="test1.jpg"/><img src="test2.jpg"/>
$("img").length; ==>> 2
统计选择.选择所有img元素,并统计个数.可用alert($("img").length);来输出调试
同样的方法还有
size()
$("img").size(); ==>> 2;
size()等同于length
9.lt(pos) 删除一个节点
eg:<p>This is just a test.</p><p>So is this</p>
$("p").lt(1); ==>> [<p>This is just a test.</p>]
删除一个元素或是节点使用lt,搜索所有p元素,删除第1个,起点为0,结果<p>So is this</p>被删除!
10.addClass 给一个element添加class可以添加多个
eg: <p>Hello</p>
$("p").addClass("selected"); ==>> [<p class="selected">Hello</p>]
$("p").addClass("selected highlight"); ==>> [<p class="selected highlight">Hello</p>]
添加Class,即是CSS样式,使用addClass
11.attr(name) 取得element的指定属性值
eg:<img src="test.jpg"/>
$("img").attr("src"); ==>>[test.jpg]
使用attr(name)来取得元素属性,name即为元素中的所有可用属性,比如img中的 src 属性.
attr(key,value) 设置属性attr(key,function) 调用相应的方法处理后的返回值用来设置属性attr(properties) 批量的设置element的属性值
eg: <img/>
$("img").attr({ src: "test.jpg", alt: "Test Image" }); ==>> [<img src="test.jpg" alt="Test Image"/>]
$("img").attr("src","test.jpg"); ==>> [<img src="test.jpg"/>]
设置元素属性,attr(key,value) key是指属性的名称,value是指导属性的值.可同时设置多个,比如例一,使用","来分隔!
以下两个方法等价:
$("img").attr("title", "${this.src}")
$("img").attr("title", function() {
return this.src;
})
==>> [<img src="test.jpg" title="test.jpg" />]
这个从了个this动作.${this.src}" 此变量为本身的src属性.
function() { //建立函数
return this.src; //返回结果值
}
等于同${this.src}
12.html 取得element的html代码
eg: <div><input/></div>
$("div").html(); ==>> [<input/>];
选择div元素.得到div元素中间的html代码!
html(val) 设置element的html代码
eg: <div><input/></div>
$("div").html("<b>new stuff</b>"); ==>> [<div><b>new stuff</b></div>]
应该是搜索DIV的元素,把指定的HTML代码,替换其中!(原来DIV中的HTML代码就没了)
（三） 元素的属性增加和删除操作
13.removeAttr(name) 删除属性
eg: <input disabled="disabled"/>
$("input").removeAttr("disabled") ==>> [ <input/> ]
删除元素属性,使用方法与attr(加入元素属性)一样
14.removeClass(class) 删除样式，当class是空时删除所有的样式，如果class为指定样式则删指定样式
eg: <p class="highlight selected first">Hello</p>
$("p").removeClass("selected highlight") ==>> [ <p class="first">Hello</p> ]
$("p").removeClass() ==>> [ <p>Hello</p> ]
删除class样式,使用方法与addClass使用方式一样
15. text() 取得element中的内容text(val) 设置element内容text与html差不多，只是text会把<,>用html标识符替换
eg: <p><b>Test</b> Paragraph.</p><p>Paraparagraph</p>
$("p").text() ==>> [ Test Paragraph.Paraparagraph ];
<p>Test Paragraph.</p>
$("p").text("<b>Some</b> new text."); ==>> [ <p><b>Some</b> new text.</p> ]
$("p").text("<b>Some</b> new text.", true) ==>> [ <p>Some new text. </p> ]
与.html()使用方式相似!
16.toggleClass(class) 这是一个比较有用的方法，就是当element存在参数中的样式的时候取消，如果不存在就设置此样式
eg:<p>Hello</p><p class="selected">Hello Again</p>
$("p").toggleClass("selected")==>[ <p class="selected">Hello</p>, <p>Hello Again</p> ]
很有意思的操作,搜索所有的p元素,查看p元素是否有class为selected的CSS,如果有.就取消,如果没有就添加,例子只是对CSS样子操作,不知对元素属性是否能操作.如果能单选或是复选框会很灵活的使用!
17.val() 取得第一个element的vlaue值 val(val) 设置属性的值
eg: <input type="text" value="some text"/>
$("input").val(); ==>> [ "some text" ]
val()是取值的操作.例子是取input元素中的所有值
设置元素值
$("input").val("test"); ==>> [ <input type="text" value="test"/> ]
设置input元素的值为test
18.1.after(content)给相关的element从后面插入节点
eg: <p>I would like to say: </p>
$("p").after("<b>Hello</b>"); ==>> [ <p>I would like to say: </p><b>Hello</b><b>Hello</b> ]
after()是向指定元素的最后面插入html代码.上面的例子只加入了一次<b>Hello</B>!
<p>I would like to say: </p>
$("p").after( $("b") ); ==>> [<p>I would like to say: </p><b>Hello</b> ]
这个是组合添加.搜索所有的p元素.在p元素后面添加搜索的所有b元素.
18.2.before(content)与after相反是插入到前面
eg: <p>I would like to say: </p>
$("p").before("<b>Hello</b>"); ==>> [ <b>Hello</b><p>I would like to say: </p> ]
这个完全和after相反
19.append(content) 与上面不同的是append是添加把content做为子element
eg: <p>I would like to say: </p>
$("p").append("<b>Hello</b>"); ==>> [<p>I would like to say: <b>Hello</b></p> ]
append 是指和after交换不同的,他是在指定元素的内部最后面加入html代码,做为子元素存在
eg: <p>I would like to say: </p><b>Hello</b>
$("p").append($("b")); ==>> [ <p>I would like to say: <b>Hello</b></p> ]
20.appendto(content)与append刚好相反
eg:<p>I would like to say: </p>
<div id="foo"></div>
$("p").appendTo("#foo"); ==>> [ <div id="foo"><p>I would like to say: </p></div> ]
与append功能相反.把指定的元素或是html代码,加到选择元素的外部.做为选定元素的父元素存在!
（四） 元素的内容增加和删除
21.prepend(content) 添加到element里面的前部．与append的方位不一样
eg:<p>I would like to say: </p>
$("p").prepend("<b>Hello</b>"); ==>> [ <p><b>Hello</b>I would like to say: </p> ]
加到指定元素内部的最前面.做为子元素存在!和append功能一样,只是加入的方位不同
22.prependTo(content) 与prepend的添加对像相反．
eg:<p>I would like to say: </p><div id="foo"><b>Hello</b></div>
$("p").prependTo("#foo"); ==>> [ <div id="foo"><p>I would like to say: </p><b>Hello</b></div> ]
与appendTo的功能一样,有点迷糊这个
23.clone(deep) 克隆一个新的element．参数deep为flase时不包括子element
eg:<b>Hello</b><p>, how are you?</p>
$("b").clone().prependTo("p"); ==>> [ <b>Hello</b><p><b>Hello</b>, how are you?</p> ]
搜索B元素并复制一个放到p元素的前面.
24.empty() 删除所有的内部节点
eg:<p>Hello, <span>Person</span> <a href="#">and person</a></p>
$("p").empty(); ==>> [ <p></p> ]
删除P元素内部的所有内容
25. insertAfter(content) 与after差不多．
eg:$(a).after(b); === $(b).insertAfter(a);
26. insertBefore(content) 与 before差不多
eg:$(a).before(b) === $(b).insertBefore(a)
27. remove(expt) 删除条件是expt的相应的element,当expt为空时．全部删除
eg:<p class="hello">Hello</p> how are <p>you?</p>
$("p").remove(".hello"); ==>> [ how are <p>you?</p> ]
删除class为hello的P元素.如果romove()里面为空,就是删除所有p元素
28. wrap(html) 把节点插入到html生成的节点里面．要注意的是html节点中不能含有内容只能是节点的结构．如果想加的话只能在嵌入后再插入内容
eg:<p>Test Paragraph.</p>
$("p").wrap("<div class='wrap'></div>"); ==>> [ <div class='wrap'><p>Test Paragraph.</p></div> ]
wrap是只插入元素,而且元素不能有内容.如例子,把p加入到div中,而且div为父元素,p为子元素
注html也可以直接用一个element代替
（五） 节点操作.删除和,取值
29.add(params) 在$所取到的节点数组中添加新的节点．
参数可以是expr, html,element
eg: 1.<p>Hello</p><span>Hello Again</span>
$("p").add("span") ==>> [ <p>Hello</p>, <span>Hello Again</span> ]
eg: 2.<p>Hello</p>
$("p").add("<span>Again</span>") ==> [ <p>Hello</p>, <span>Again</span> ]
eg: 3.<p>Hello</p><p><span id="a">Hello Again</span></p>
$("p").add(document.getElementById("a") ) ==>> [ <p>Hello</p>, <span id="a">Hello Again</span> ]
增加元素或是html内容.增加到搜索的元素之后.例三,是提取id为a的子元素到p元素之后,这时子元素的地位改变,与p元素并列
30.children(expr)取得子节点,当expr为空时，取得所有的子节点
eg: <div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>
$("div").children() ==>> [<span>Hello</span><p class="selected">Hello Again</p><p>And Again</p> ]
$("div").children(".selected") ==>> [ <p class="selected">Hello Again</p> ]
children纯选择功能.当无参数是是选择所有子元素.当有条件时,按条件所选.例二是选择class为selected的节点!
31.contains(str)找出字节点中包含有str的节点,str起到过滤做用
eg: <p>This is just a test.</p><p>So is this</p>
$("p").contains("test") ==>> [ <p>This is just a test.</p> ]
contains也纯选择功能.参数是str类型.即选择test中包括有test内容的节点
32.filter(expression)过滤找出符合expression的节点
eg:<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
$("p").filter(".selected") ==>> <p class="selected">And Again</p>
$("p").filter(".selected, :first") ==>> [ <p>Hello</p>, <p class="selected">And Again</p> ]
属于多条件查询.selected应该是class为selected的节点.:first应该是第一个节点!
filter(filter_func)通过函数来选择是否过滤，filter_func返回true表示过滤
<p><ol><li>Hello</li></ol></p><p>How are you?</p>
$("p").filter(function(index) { return $("ol", this).length == 0; })==>[ <p>How are you?</p> ]
filter 还可以以函数为条件!
33.find(expr)从子节点找出符合expr的.与filter的区别是filter过滤掉$数组中的节点find过滤到的是子节点
eg: <p><span>Hello</span>, how are you?</p>
$("p").find("span") ==>> [ <span>Hello</span> ]
与filter相反,感觉都差不多
34.is(expr) 判断是否符合条件，如果$数组的所有节点都不符合条件返回false，只要有一个符合条件就返回true
eg: <form><p><input type="checkbox" /></p></form>
$("input[@type='checkbox']").parent().is("form") ==>> false
$("input[@type='checkbox']").parent().is("p") ==>> true
条件判断!
35.next(expr) 取得最近节点那个节点.expr为空时取得所有节点
eg:1.<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
$("p").next() ==>> [ <p>Hello Again</p>, <div><span>And Again</span></div> ]
eg:2.<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>
$("p").next(".selected") ==>>[ <p class="selected">Hello Again</p> ]
感觉没什么特别的.
36. not(el),not(expr),not(elems)与add相反，删除符合条件的节点.
eg:1. <p>Hello</p><p id="selected">Hello Again</p>
$("p").not($("#selected")[0]) ==>> [ <p>Hello</p> ]
$("p").not("#selected") ==>> [ <p>Hello</p> ]
eg:2.<div><p>Hello</p><p class="selected">Hello Again</p></div>
$("p").not($("div p.selected")) ==>> [ <p>Hello</p> ]
删除条件中的节点,反回删除后的结果
37 parent(expr) 取得父节点
eg:1.<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>
$("span").parents() ==>> [ <body>...</body>, <div>...</div>, <p><span>Hello</span></p> ]
参数为空时取得所有父节点
eg:2.<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>
$("span").parents("p") ==>>[ <p><span>Hello</span></p> ]
有条件时取得第一个父节点.
38.prev(expr) 与next相反,next取得是与节点相邻后面的．prev取得相邻前面的
eg:1.<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>
$("p").prev(".selected") ==>> [ <div><span>Hello</span></div> ]
eg:2.<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>
$("p").prev() ==>> [ <div><span>Hello Again</span></div> ]
这个很明显,取得条件之前的节点.next没那么明显,
39.siblings(expr) 取得相邻两边的节点是.next,与prev的结合体
这两个把next和prev整合了
jquery与dom相关的操作先讲到这里,下回接着讲CSS相关操作
（六） CSS控制
下部主要记录的是CSS的控制命令
40 1/. CSS(name)读取样式属性值
eg:<p style="color:red;">Test Paragraph.</p>
$("p").css("color") ==>> [ "red" ]
css.取得p元素中的css的color属性
2/css(properties)设置style
eg:<p>Test Paragraph.</p>
$("p").css({ color: "red", background: "blue" }) ==>> [ <p style="color:red; background:blue;">Test Paragraph.</p> ]
css设置元素的css样式.参数就为,属性.值这种格式
3/css(key, value)设置单个样式属性,如果设置的值是数字的话,会被自动转化为像素单位
eg:<p>Test Paragraph.</p>
$("p").css("color","red") ==>> [ <p style="color:red;">Test Paragraph.</p> ]
$("p").css("left",30) ==>> [ <p style="left:30px;">Test Paragraph.</p> ]
功能差不多,注意如果值是数据,单位会直接转为px
41 1/height()取得当前匹配节点数组中的第一个节点的高的值
eg: <p>This is just a test.</p>
$("p").height() ==>> [ 300 ]
2/ height(val) 设置所有匹配的节点的高,如果val的单位不是ex,%,那么单位自动设为px
eg:<p>This is just a test.</p>
$("p").height(20) ==>> [ <p style="height:20px;">This is just a test.</p> ]
height设置CSS节点的高度
42.width() 设置宽度,width(val)设置高度.用法与height一样以上是基本的CSS的js用法,下面主要记录jQuery的一些功能函数
43.$.browser 用于判断浏览器的分别为safari,opera, msie, mozilla.这些方法要等DOM ready后才能使用
eg: if($.browser.safari) {$( function() { alert("this is safari!"); } ); }
判断浏览器
44.$.each(obj,fn) 这个方法与$().each()不一样,前者可以迭代任务数组与对像,后者只能迭代jQuery对象
$.each( [0,1,2], function(i, n){ alert( "Item #" + i + ": " + n ); });
45.$.extend(target, prop1, propN)继承多个对象.target被扩展的对象.prop1,第一个父对象,propN其它被继承的对象
eg:1. var settings = { validate: false, limit: 5, name: "foo" };var options = { validate: true, name: "bar" }; jQuery.extend(settings, options); ==>> [ settings == { validate: true, limit: 5, name: "bar" } ]
整合对象
eg:2.var defaults = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" };var settings = jQuery.extend({}, defaults, options); ==>> [ settings == { validate: true, limit: 5, name: "bar" } ]
46.$.grep(array, fn, inv)用fn过滤array,当fn返回true时array元素保留在数组中
eg:$.grep( [0,1,2], function(i){ return i > 0; }); ==>> [1, 2]
47.$.map(array, fn)通过fn修改array中的值当函数返回值为null里,array元素将被删除,当返回是数组时,返回的数组将与原数组合并
eg:1.$.map( [0,1,2], function(i){ return i + 4; }); ==>> [4, 5, 6]
eg:2.$.map( [0,1,2], function(i){ return i > 0 ? i + 1 : null; }); ==>> [2, 3]
eg:3.$.map( [0,1,2], function(i){ return [ i, i + 1 ]; }); ==>> [0, 1, 1, 2, 2, 3]
48.$.merge(first, second)两个数组进行合并,删除重复的值
eg:$.merge( [0,1,2], [2,3,4] ) ==>> [0,1,2,3,4]
eg:$.merge( [3,2,1], [4,3,2] ) ==>> [3,2,1,4]
49.$.trim(str)去除字符串两端的空格,一个十分熟悉常用的方法
eg:$.trim(" hello, how are you? ") ==>> [ "hello, how are you?" ]
这个比较有用,去除字符串的两端空格
（七） 事件响应的处理
50.bind(type, data, fn)对所有选定的element判断事件,type是事件类型,data是参数,fn是事处理方法.
eg:1.$("p").bind("click", function(){ alert( $(this).text() ); });
eg:2.function handler(event) { alert(event.data.foo); }
$("p").bind("click", {foo: "bar"}, handler) ==>> [ alert("bar") ]
51.blur() 触发blur方法,blur(fn)设置blur函数
eg: <p>Hello</p>
$("p").blur( function() { alert("Hello"); } ); ==>> [ <p οnblur="alert('Hello');">Hello</p>
52.change(fn)设置onchange事件的方法
eg:<p>Hello</p>
$("p").change( function() { alert("Hello"); } ); ==>> [ <p οnchange="alert('Hello');">Hello</p>
53.click()触发onclick事件, click(fn)设置onclick方法
54.dblclick(fn)设置ondblclick方法
55.error(fn)设置error方法
56.focus()触发onfocus,focus(fn)设置focus方法
eg:<p>Hello</p>
$("p").focus( function() { alert("Hello"); } ); ==>> [ <p οnfοcus="alert('Hello');">Hello</p> ]
57.hover(over, out) 设置mouse移入以及mouse移出时所触发的事件.
eg:$("p").hover(function(){
$(this).addClass("over");
},function(){
$(this).addClass("out");
});
58 keydown(fn),keypress(fn),keyup(fn),按键盘相关的操作分别对应onkeydown,onkeypress,onkeyup.
59 mousedown(fn),mousemove(fn),mouseout(fn),mouseover(fn),mouseup(fn)这些是mouse相关的操作分别对应
onmousedown,onmousemove,onmouseout,onmouseover,onmouseup.
60.load 当element load事件发生时触发
eg:<p>Hello</p>
$("p").load( function() { alert("Hello"); } ); ==>> [ <p οnlοad="alert('Hello');">Hello</p> ]
61.one(type, data, fn)与bind差不多,最大的区别是前者只运行一次后便不再响应.如果运行后不想继续运行默认的方法只要fn中返回值
return false就可以了.
eg: <p>Hello</p>
$("p").one("click", function(){ alert( $(this).text() ); }); ==>> [ alert("Hello") ]
62.ready(fn)当dom 结构载入完毕的时候.用此方法时,请不要在onload方法里面写代码.不然就不会触发ready事件
eg:1.$(document).ready(function(){ Your code here... });
eg:2.jQuery(function($) {
// Your code using failsafe $ alias here...
});
63.resize 设置onresize方法.当大小改变时触发
eg: <p>Hello</p>
$("p").resize( function() { alert("Hello"); } ); ==>> [ <p οnresize="alert('Hello');">Hello</p> ]
64 scroll(fn) 设置onscroll方法
65.select()触发onselect方法.select(fn)设置select方法
66. submit()提交表单,submit(fn)设置submit方法.
eg:$("#myform").submit( function() {return $("input", this).val().length > 0; } );<form id="myform"><input /></form>
67.toggle(even, odd),even当偶数单击时运行,odd当奇数单击时运行.用unbind('click')删除
eg:$("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass("selected");
});
68.trigger(type)触发相应的type方法
eg: <p click="alert('hello')">Hello</p>
$("p").trigger("click") ==>> [ alert('hello') ]
69 unbind(type, fn)与bind相反
1.unbind()删除所有的绑定.
eg:<p οnclick="alert('Hello');">Hello</p>$("p").unbind() ==>> [ <p>Hello</p> ]
2.unbind(type)删除指定的绑定
eg:<p οnclick="alert('Hello');">Hello</p>
$("p").unbind("click") ==>> [ <p>Hello</p> ]
3.unbind(type, fn)删除指定type的指定fn
eg:<p οnclick="alert('Hello');">Hello</p>
$("p").unbind("click", function() { alert("Hello"); } ) ==>> [ <p>Hello</p> ]
70.unload(fn)当页面unload的时候触发方法
eg: <p>Hello</p>$("p").unload( function() { alert("Hello"); } ); ==>> [ <p οnunlοad="alert('Hello');">Hello</p> ]
（八）处理特效
71. animate(params, speed, easing, callback)动画特效.
params:是动画的设置,用来表示动画的展现以及结束,
speed:动画的速率可以是("slow","normal",or "fast")也可以是毫秒数.eg: 1000
easing:默认是'linear',如想用其它参数,就要添加jQuery的特效插件.
callback: 当动画完成时的调用的函数.
eg:
1. $("p").animate({ height: 'toggle', opacity: 'toggle' }, "slow");
2. $("p").animate({ left: 50, opacity: 'show' }, 500);
3. $("p").animate({ opacity: 'show'}, "slow", "easein");
72. fadeIn(speed, callback),fadeOut(speed, callback),fadeTo(speed, opacity, callback)淡入,淡出效果,speed表示速度,可以用"slow,normal,fast"代替,也可以直接写毫秒数. callback表示淡入,淡出后的调用的函数.fadeTo表示淡入到某个透明度。opacity (Number):取值范围就0-1
eg:
$("p").fadeTo("slow", 0.5, function(){
alert("Animation Done.");
});
73. hide(),hide(speed, callback).前者是把element隐藏用的是display:none的样式。后者是把element的长，宽，以及透明度都改变。callback表示动画完成后调用的函数。speed表示速度.
eg: 1. <p>Hello</p>
$("p").hide() ==>> [ <p style="display: none">Hello</p> ]
2.$("p").hide("slow",function(){alert("Animation Done.");}); //动画隐藏
74. show(),show(speed, callback)这两个方法与前两个方法的行为相反。
eg: 1. <p style="display: none">Hello</p>
$("p").show() ==>> [ <p style="display: block">Hello</p> ]
2. $("p").show("slow",function(){ alert("Animation Done.");}); //动画展现
75.slideDown(speed, callback),slideUp(speed, callback)，slideToggle(speed, callback)slideDown是高度从0慢慢增加，slideUp是高度慢慢减小到0。slideToggle表示一个相反的状态。如果当前状态是slideDown后的状态，那么执行slideToggle与运行slideUp一样。如果当前状态是slideUp后的状态，那么执行 slideToggle与运行slideDown一样
76. toggle(),如果element是hide状态则show之。如果当前状态是show状态，则hide之.
eg: <p>Hello</p><p style="display: none">Hello Again</p>
$("p").toggle() ==> [ <p style="display: none">Hello</p>, <p style="display: block">Hello Again</p> ]
（九） ajax
71.$.ajax(params)这个方法是jQuery中调用ajax的最基本方法,功能十分强大.参数是一个对象.所有的参数用key:value的形式设置
下面主要介绍一下各种参数:
(string)url: 要请求的网址,可以把参数get参数设置到url上面
(string)type: 请求的类型,可以是Post与get,默认情况下是GET
(string)dataType: 你所期望返回的数据格式,可以是xml,html,script,json.最终返回类型还是服务器决定.
(Boolean)ifModified:只当返回值改变的时候才会成功返回正确值.主要判断依据是请求头的Last-Modified.默认情况下,这个值设置为false
(Number)timeout:设置请求时间,这个时间会替换全局的时间($.ajaxTimeout)
(Boolean)global:是否触发全局的ajax事件句柄.例如ajaxStart,ajaxStop.默认情况是true
(Function)error: 请求错误处理的函数.
(Function)success: 请求成功处理的函数.
(Function)complete:请求完成处理的函数.
(Object|string)data:发送到服务器端的数据.如果不是字符串,则被转化成字符串,被加到url上面,做为查询字符串.如果不想用默认的方式处理,可以设置processData状态.
(Boolean)processData.默认情况是true,把object转化成string,做查询字符串.可以设置为false,则以DOMDocments发送.
(String)contentType.默认是”application/x-www-form-urlencoded”,一般情况不用修改.
(Boolean)async .默认值为true.表示异步请求,如果想改成同步.只要把设为false就可以了.
(Function)beforeSend.用于对在发送请求之前,对请求头的设置.有XMLHttpRequest做为参数
例子:
取一个js文件.
$.ajax({
type: "GET",
url: "test.js",
dataType: "script"
})post数据到服务器端,并且成功时提示用户.
$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});同步请求数据
var html = $.ajax({
url: "some.php",
async: false
}).responseText;传送domdocument,data将不会被强行转化.
var xmlDocument = [create xml document];
$.ajax({
url: "page.php",
processData: false,
data: xmlDocument,
success: handleResponse
});
72.$.ajaxSetup(settings)设置一个全局的ajax变量.一般用来设置一些公用的请求头设置.
$.ajaxSetup( {
url: "/xmlhttp/",
global: false,
type: "POST"
} );
$.ajax({ data: myData });
73.$.ajaxTimeout(time) 设置全局ajax请求时间,当time为0或者null时表示不限时间$.ajaxTimeout( 5000 ); //表示最长5秒请求.
74.$.get(url, params, callback)下载一个页面.url:页面地址,params: 参数,是key/value的mapcallback: 请求结束后调用的方法
eg:$.get("test.cgi",
{ name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
}
);
75.$.getIfModified(url, params, callback)与get一样,不同之处在于如果请求的页面返回值不变的话,就不处理请求.
76.$.getJSON(url, params,callback)与$.get一样,返回值是用json格式后好的.
77.$.getScript(url, callback)下载脚本文件,并运行.
eg:$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
（十） AJAX
78.$.post(url, params, callback) 用post的方式下载一个页面返回XMLHttpRequest
url: 请求的页面
params:表示请求的要发送的参数.
callback: 请求结束后,调用的方法
eg:
$.post("test.cgi",
{ name: "John", time: "2pm" },
function(data){
alert("Data Loaded:" + data);
}
);
79. ajaxStart(callback) 当ajax请求发送前,将触发callback.
eg;
$("#loading").ajaxStart(function(){
$(this).show();
});
80. ajaxSend(callback)当ajax请求发送时触发callback,参数是XMLHttpRequest和settings请求设置
eg:
$("#msg").ajaxSend(function(request, settings){
$(this).append("<li>Starting request at " + settings.url + "</li>");
});
81.ajaxComplete(callback)当一个ajax请求完成时调用callback.回调参数为XMLHttpRequest和settings请求设置
eg:
$("#msg").ajaxComplete(function(request, settings){
$(this).append("<li>Request Complete.</li>");
});
82.ajaxSuccess(callback)当一个ajax请求成功时调用回调参数为XMLHttpRequest和settings请求设置
eg:
$("#msg").ajaxSuccess(function(request, settings){
$(this).append("<li>Successful Request!</li>");
});
83.ajaxError(callback)当一个ajax请求失败时调用回调参数为XMLHttpRequest和settings请求设置
eg:
$("#msg").ajaxError(function(request, settings){
$(this).append("<li>Error requesting page " + settings.url + "</li>");
});
84.ajaxStop(callback)当所有的ajax请求结束时,将触发callback
eg:
$("#loading").ajaxStop(function(){
$(this).hide();
});
85.load(url, params, callback)加载url的内容,并把得到的内容插入到DOM中去. 注意:避免去获取script脚本.可以用$.getScripturl:请求的页面,params:发送的参数.callback: 调用完成后的回调函数.
eg: <div id="feeds"></div>
$("#feeds").load("feeds.html") ==>> <div id="feeds"><b>45</b> feeds found.</div>;
86.loadIfModified(url, params,callback)功能与85点的load方法一模一样.唯一的区别是,当服务器端根据LastModify判断出没有什么改动的话.就不进行请求.也不进行dom插入.
87.serialize()这是一个十分有用的方法.一般用来序列化进行ajax请求的参数.十分方便
eg:
<input type='text' name='name' value='John'/>
<input type='text' name='location' value='Boston'/>
$("input[@type=text]").serialize(); ==>> name=John&location=Boston
关于jQuery的学习笔记先记到此.
扫一扫
10万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
