jQuery笔记总结

时间 2019-12-08

标签 jquery 笔记总结栏目 JQuery 繁體版

原文原文链接

=============== 1 ==================

一、 jQueryjavascript

　　jQuery是JavaScript语法写的一些函数类，内部仍然是调用JavaScript，因此并非代替JavaScript的。css

　　jQuery是最火的JavaScript库，已经被集成到VS2010了，获得了MS的支持，MS的Ajax toolkit和jQuery结合也是最方便，jQuery的扩展插件也是很是多。 html

二、 jQuery特色java

　　a) 很好的解决了不一样浏览器的兼容问题（IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome）jquery

　　 b) 对于不一样控件具备统一的操做方式web

　　 c) 体积小（几十KB）、使用简单方便（Write Less Do More）编程

　　 d) 链式编程$("#div1").draggble().show().hide().fly() 、隐式迭代、插件丰富、开源、免费windows

　　 e) 让编写JavaScript程序更简单、更强大！数组

三、 jQuery中的顶级对象（$）浏览器

　　要想使用jQuery的方法必须经过$对象。只有将普通的Dom对象封装成jQuery对象，才能调用jQuery中的各类方法。

　　$是jQuery简写，在代码中可使用jQuery代替$，但通常为了方便你们都直接使用$。

四、 window.onload 与 $(document).ready(fn);的区别

　　1）window.onload：页面彻底加载完毕才会触发，即全部Dom元素建立完毕、图片、Css等都加载完毕后才被触发。$(document).ready()只要Dom元素加载完毕即触发。这样能够提升响应速度。

　　2）$(document).ready();能够屡次注册事件处理程序，而且最终都会执行，而window.onload每次注册新的事件处理程序时都会将前面的覆盖掉。

　　注意：

　　1）使用jQuery实现window.onload的效果：$(window).load(fn);这里是load(fn)而不是onload(fn);与Dom不同。

　　2） $(function(){ … });与$(document).ready(function(){ … });等效

　五、 jQuery通用的两个函数

　　 $.map(array,fn)//遍历、修改数组、不支持Dictionary风格数组（能够遍历，返回值错误）

　　• 对数组中的每一个元素调用fn进行处理，返回值为处理后的一个新数组，原数组不变。

　　 • 1.4.1不能处理Dictionary风格数组,1.7.1能够(jQuery是开源的，新版本可能会将旧版本的一些方法的源代码重写。）

• fn函数有两个参数：element(当前循环的数组元素)、index(当前下标)

• 在fn中this并不表示当前循环的元素

　　 $.each(array, fn)//遍历数组,return false退出循环，return true跳至下一个循环

　　• 遍历数组中的元素。支持普通数组和Dictionary风格数组。

　　• 对数组array每一个元素调用fn函数进行处理，没有返回值。

　　• fn函数有两个参数：key, value。对于普通数组key就是索引。能够直接在fn中使用this，每次执行传递进来的函数， this关键字都指向一个不一样的DOM元素

　　• 通常都是对数据的遍历。【除非key、value中，value是引用类型不然不能修改数组】

　　• 普通数组推荐用无参，用dict风格的用key、value

　　元素的each：

　　　　jQuery元素也能够调用each方法，只是对$.each的简化调用，return false；终止循环

　　　　$.each($('div'),function(k,v){ … }); 等同于：$('div').each(function(k,v){ … });

　　　　$.trim(字符串); //去掉两端空格，调试看实现方式。内部实际是调用了：

　　1) 字符串.replace(/^\s+/,’’);

　　2) trimLeft = /^[\s\xA0]+/; trimRight = /[\s\xA0]+$/;

　　3) IE一些版本不支持\s空格，\xA0也表示空格

　　六、 jQuery对象和DOM对象

　　 Dom对象若是想调用jQuery的方法必须先转换为jQuery对象。

　　获取Dom对象

　　• var spObj=document.getElementById(‘span1’);

　　• spObj.innerText=‘Hello World’;//存在浏览器兼容问题

　　 Dom对象→ jQuery 对象

　　• $(spObj).text(‘哈哈’);//$(Dom对象),就将Dom对象转换为了jQuery对象。

　　• var dvObj = $(spObj).text()；//获取值

　　• $(dvObj).html(‘<font color=”red”>hello </font>’)//至关于innerHTML

　　• $(dvObj).attr(“score”,100)，增长属性

　　• var s=$(spObj).attr(“score”);//从属性中获取值

　　 jQuery→Dom 对象（通常不会转，只有在jQuery中没有须要的方法时，才转的）

　　1) $(spObj).get(0).innerHTML

　　2) $(spObj)[0].innerHTML

　　经过jQuery方式获取页面上的元素（获取后直接就是一个jQuery对象）：

　　• $(‘#id’)、$(‘span’)、$(‘.cls’)、……

　　• 经过jQuery对象便可调用：.text()、val()、html()、css(‘color’,’red’)、……。jQuery中大多都是方法少有属性，由于属性很难链式编程。获取值、设置值都是使用的同一个方法，有参数表示设置值，无参数表示取值。

　　注意：Array（数组）是JS语言自己的对象，不是Dom对象，所以不须要转换为jQuery对象就能用

　　七、 jQuery选择器（用于选取页面上的元素对象）

　　　　1) Dom中获取页面元素对象

　　　　• document.getElementById(‘id’);

　　　　• document.getElementsByTagName(‘input’);

　　　　• document.getElementsByName(‘gender’);

　　　　2) jQuery中获取页面元素对象

　　　　• Id选择器：$(‘#id’);若是选择器中包含特殊字符，用“\\”转义，如：<span id=”foo:bar”></span>，JQuery代码为：#foo\\:bar

　　　　• 标签选择器：$(‘input’)【$(‘*’);选择页面上的全部元素。】

　　　　• (*)属性过滤选择器：$(‘*[name=gender]’)或$(‘[name=gender]’)

　　=============== 2 ==================

　　一、 jQuery的迭代(包装集)

　　　　隐式迭代：$(‘p’).text(‘嗨’)；//内部是先循环遍历筛选出$(‘p’)对象，再找text()属性;在调试时，能够分两步（省去筛选对象的时间）：

　　　　1）var pObj=$(‘p’);

　　　　2）pObj.text(‘嗨’);

　　　　如何判断对象是否存在？

　　　　jQuery选择器返回的是一个对象数组，调用text()、html()、click()之类方法的时候实际上是对数组中每一个元素迭代调用该方法，所以即便经过id选择的元素不存在也不会报错，若是须要判断指定的id是否存在，应该写：

if ($("#btn1").length <= 0) { // length属性，jQuery对象中元素的个数

alert("id为btn1的元素不存在！");

}

　　　　 $(“#id”).length>0//用途：判断页面上的某个元素是否存在，动态建立元素的时候用。

　　二、链式编程（直接在属性后面点属性）

　　　　前提：每一个方法调用完毕后，都是返回的调用者本身

　　在jQuery中大多数都是方法，属性不多，缘由：方法有返回值，经过返回值才能实现链式编程

　　　　$(‘p’).text(‘嗨’).css(‘backbround-color’,’red’).css(‘border’,’2px solid green’).click(

　　　　alert(($this).text())

　　　　);

　　　　$(‘p’).text(‘嗨’).css({‘backbround-color’:’red’, ‘border’:’2px solid green’}).click(

　　　　alert(($this).text())

　　　　);

　　注意：

　　　　1）键值对集合必定要加大括号

　　　　2） background-color或backgroundColor均可

　　　　3）链式编程中“.”的时候是针对的上一步的返回值的节点集合的操做。

　　　　4）链式编程的时候必定要注意在何时“破坏”了链，当前对象的传递，若是传递被破坏，则继续链式编程会有意想不到的结果！nextAll(),prevAll(),sibilings()。解决办法：调用end()方法。（返回链被破坏前的对象。）

　　三、选择器

　　类样式选择器：$(‘.className’).text();

　　多条件选择器：$(“p,div,span.menuitem”)，同时选择p标签、div标签和拥有menuitem样式的span标签元素。【将每一个选择器匹配到的结果合并到一块儿】

　　层次选择器（5种）：

　　　　一、 $("div li")获取div下的【全部】li元素（后代，子、子的子……）

　　　　二、 $(“div > li”)获取div下的【直接】li子元素

　　　　$(“div > * ”)获取div下的【全部直接】子元素

　　　　3、 $(“.menuitem + div”)获取样式名为menuitem以后的相邻的（紧接着的）第一个div元素（不经常使用）等同于$(‘.menuitem’).next(‘div’);若是相邻的那个元素不是div,则不会继续向后找。能够：$(“.menuitem + div + p”)

　　　　四、 $(“.menuitem ~ div”)获取样式名为menuitem以后全部的兄弟div元素，等同于$(‘. menuitem ’).nextAll(‘div’)。【nextAll(‘*’)或nextAll()表示后面的全部元素。】

　　注意：选择器表达式中的空格不能多不能少。易错！过滤器与表单选择器时注意。

　　四、获取当前元素的兄弟元素的方法

next();	以后的紧邻着的第一个兄弟元素（下一个）
nextAll();	以后的全部兄弟元素
prev();	以前的紧邻着的兄弟元素（上一个）
prevAll();	以前的全部兄弟元素
siblings();	全部兄弟元素

　　注意：nextAll()、prevAll()等方法返回值是一个元素集合，区别链式编程的返回值。

　　五、基本过滤选择器（通常以＇:＇开头）

　　 :first 选取第一个元素。$("div:first")选取第一个<div>。等同于：$(‘div’).first()

　　 :last 选取最后一个元素。$("div:last")选取最后一个<div>。等同于：$(‘div’).last()

　　 :not(选择器) 选取不知足“选择器”条件的元素，$("input:not(.myClass)")选取样式名不是myClass的<input>

　　 :checkbox，匹配全部复选框

　　 :even、:odd，选取索引是偶数、奇数的元素：$("input:even")选取索引是偶数的<input>

　　 :eq(索引序号)、gt(索引序号)、:lt(索引序号) 选取索引等于、大于、小于索引序号的元素，好比$("input:lt(5)")选取索引小于5的<input>。注意：元素索引从0开始

　　 $(":header")选取全部的h1……h6元素（*）

　　 $("div:animated")选取正在执行动画的<div>元素。（*）

不只可使用选择器进行绝对定位，还能够进行相对定位，只要在$()指定第二个参数，第二个参数为相对的元素：$(选择器,context);例如：$(‘td’,$(‘div table tr’));context参数能够是dom对象集合或jQuery对象，若没有参数，则会在整个文档中搜索

　　六、属性、表单过滤器

　　属性过滤选择器（7种）（以id属性为例）：

$('div[id]');	选取有id属性的div
$('div[id = vv]');	选取id为w的div
$('div[id != vv]');	选取id不为w的div
$('div[id ^= vv]');	选取id以w开头的div
$('div[id $= vv]');	选取id以w结尾的div
$('div[id *= vv]');	选取id包含w的div
$('div[id][name][value=sss]');	选取同时包含id属性、name属性、value属性等于ss的div

　　注意：jQuery中没有对getElementsByName进行封装，用$("input[name=abc]")

　　表单对象选择器（过滤器）：

　　　　• $("#form1:enabled")选取id为form1的表单内全部启用的元素

　　　　• $("#form1:disabled")选取id为form1的表单内全部禁用的元素

　　　　• $("input:checked")选取全部选中的元素（Radio、CheckBox）

　　　　• $("select:selected")选取全部选中的选项元素（下拉列表，<select>\<option>）

　　表单选择器

　　 $(“:input")选取全部<input>、<textarea>、<select>和<button>元素。和$("input")不同， $("input")只得到<input>

　　 $(":text")选取全部单行文本框，等价于$("input[type=text]")

　　 $(“:password”)选取全部密码框。

　　同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。代替了$(‘input[type=***]’);

　　七、 jQuery的DOM操做

　　一、使用html()读取或者设置元素的innerHTML：

　　alert($("a:first").html()); $("a:first").html("hello");

　　二、使用text()读取或者设置元素的innerText：

　　alert($("a:first").text()); $("a:first").text("hello");

　　三、使用attr()读取或者设置元素的属性，对于jQuery没有封装的属性（全部浏览器没有差别的属性）用attr进行操做。

alert($("a:first").attr("href "));

$("a:first").attr("href", "http://www.rupeng.com");

attr({‘key’ :’value’ , ’k’ :’v’});

　　八、动态建立DOM节点

　　使用$(html字符串)来建立Dom节点，而且返回一个jQuery对象，而后调用append()将新建立的节点添加到Dom中：

var link = $("<a href='http://www.baidu.com'>百度</a>");

$("div:first").append(link);

　　建立radio，使用$(‘<input name=“”/>’);，不要在建立好后经过attr()设置name，如：attr(‘name’,’gender’).//在IE6下有问题。

　　追加方法

append()	在元素的末尾追加元素（最后一个子节点）
prepend()	在元素的开始添加元素（第一个子节点）
after()	在元素以后添加元素（添加兄弟）
before()	在元素以前添加元素（添加兄弟）

　　其余追加方法（将本身追加到某元素）

子元素.appendTo(父元素);	主动巴结!到最后一个
子元素.prependTo(父元素);	主动巴结到第一个
(*)A.insertBefore(B);	将A插入到B的前面，等同于B.before(A);
(*)X.insertAfter(Y);	将X插入到Y的后面，等同于Y.after(X);

　　删除节点

　　1) empty()，清空某元素下的全部子节点

内部实现：while(ele.firstChild){ ele.removeChild(ele.firstChild); }

　　2) 元素.remove(expr) ，删除当前元素，返回值为被删除的元素。还能够继续使用被删除的节点。好比从新添加到其余节点下。

　　权限选择中：var items = $(“#select1 option:selected”).remove(); $(“#select2”).append(items); 更狠的：$(“#select1 option:selected”).appendTo($(“#select2”))；//在jQuery1.4.1下不太同样。

　　九、其余：

　　a) 有开始和结束标签的元素才有text()属性

　　b) js中数组的length是动态变化的，每次增长或减小一个元素就会自动增长或减少

　　c) 事件中的函数，最后不能带分号，会报错。如：$(‘#dv’).click=(function(){…});

　　d) color ：注意第一个字母小写

　　e) 对于table中的元素，在选择具体tr或td时要经过table获取

　　f) p标签放到div中后会将div撑大，设置一下p的margin:0就行了。

　　g) jQuery中，arr.join(‘ , ’)，将数组arr的元素用‘，’分隔

　　h) 设置除了本身的样式不一样的方法：1）$(‘tr:not(this)’) ，2）$(‘tr’).css();$(this).css();

　　i) 注意：children()，取得包含匹配的元素集合中的每个元素的全部子元素的元素集合

　 j)动态建立一个radioButton，怎样给radio后面添加文本 ???

　　=============== 3 ==================

　　一、节点操做

　　替换节点（replaceWith()、replaceAll() ）：

　　1) replaceWith(content| fn)，将全部匹配的元素替换成指定的HTML或DOM元素。若是传递一个函数进来的话，返回值必须是HTML字符串

　　a) $("br").replaceWith("<hr/>"); 用<hr/>替换br

　　b) HTML代码:

<div class="container">
        <div class="inner first">Hello<div>
        <div class="inner second">And<div>
        <div class="inner third">Goodbye<div>
</div>

jQuery代码:

$('.third').replaceWith($('.first'));

结果：

<div class="container">
    <div class="inner second">And</div>
    <div class="inner first">Hello</div>
</div>

　　注意：用第一段替换第三段，可见他是移动到目标位置来替换，而不是复制一份来替换

　　2) replaceAll(selector)，用匹配的元素替换掉全部 selector匹配到的元素

　　3) $(‘<br/>’).replaceAll(‘hr’); //用<br/>元素替换全部的hr调用者也得是选择器选择到的元素。

　　注意：在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性操做，要选择先前选中的元素，须要使用end()方法

　　包裹节点

　　4) wrap(html| ele| fn)，将全部元素逐个用指定标签包裹

把全部p用一个新建立的div包裹

$("p").wrap("<div class='wrap'></div>");

用ID是"content"的div将每个p包裹起来

$("p").wrap(document.getElementById('content'));

用原先div的内容做为新div的class，并将每个元素包裹起来

$('.inner').wrap(function() {

return '<div class="' + $(this).text() + '" />';

});

　　5) wrapAll(html|ele)，将全部匹配的元素用单个元素包裹起来

$(A).wrapAll(‘B’)，在A标签的最外层只包一个B标签，若其中有其余的标签，则会将该标签移动到B标签的最后面

　　$(“b”).wrap(“<font color=‘red’></font>”) 将全部粗体字红色显示

　　结果：<font color=‘red’><b></b></font>

　　6) wrapInner()//在内部围绕

　　二、样式操做：

attr("class")	获取样式值
attr("class"," myclass")	设置样式
addClass("myclass")	追加样式，不影响其余样式
removeClass("myclass")	移除样式
toggleClass("myclass")	切换样式（若存在，去掉，不然添加）
hasClass("myclass")	判断是否应用了某样式

注意：

$(‘body * ’)，选择器*表示全部类型的控件。亦能够写为：$(‘*’)

属性：

　　attr( name | properties | key,（value| fn）)，设置或返回被选元素的属性值

name，返回文档中全部图像的src属性	$("img").attr("src");
Properties，为全部图像设置src和alt属性	$("img").attr({ src: "test.jpg", alt: "Test Image" });
(Key, value)，为全部图像设置src属性	$("img").attr("src ","test.jpg");
(Key,fn)，把src属性值设置为title属性值	$("img").attr("title", function() { return this.src });

　　注意：使用removeAttr()删除属性，在源代码中看不到，这是和清空属性的区别。attr(‘name’,’’)

事件：

　　unbind(type,[data| fn])，bind()的反向操做，从每一个匹配的元素中删除绑定的事件

(type, fn)

Type：删除元素的一个或多个事件，由空格分隔多个事件值。

fn：要从每一个匹配元素的事件中反绑定的事件处理函数

(type, false)

Type:同上；False:设置为false会使默认的动做失效

eventObj

事件对象，这个eventObj参数来自事件绑定函数

　　例：

　　1）unbind()，移除元素上绑定的全部事件，unbind("click")；只移除click事件的绑定;bind:+=；unbind:-=

　　2）删除特定函数的绑定：

　　var foo = function () {

　　 // 处理某个事件的代码

　　};

　　$("p").bind("click", foo); // ... 当点击段落的时候会触发 foo

　　$("p").unbind("click", foo); // ... 不再会被触发 foo

　　三、 RadioButton操做

　　l 取得RadioButton的选中值，被选中的radio只有一个值，因此直接用val()

　　• $("input[name=gender]:checked").val()

　　• <input id="rd2" checked="checked" name="gender" type="radio" value="男" />男<input id="rd1" checked="checked" name="gender" type="radio" value="女" />女<input id="rd3" checked="checked" name="gender" type="radio" value="未知" />未知</p>

　　设置RadioButton的选中值：.attr(‘checked’, true);

　　• $("input[name=gender]").val(["女"]);

　　• 或者 $(":radio[name=gender]").val(["女"]);

　　• 注意val中参数的[]不能省略,val()的参数必须是一个数组。

　　对RadioButton的选择技巧对于CheckBox和Select列表框也适用

　　除了可使用val批量设置RadioButton、CheckBox等的选中之外，还能够设定checked属性来单独设置控件的选中状态

　　 $(‘#s1’).val ([‘1’,’2’, ’ 3’]);//同时设置多个下拉菜单选中

　　四、其余

　　a) script代码放到元素下面能够省略“$()；”

　　b) 选择器之间须要空格、+、~等隔开，过滤器不须要，选择器和过滤器之间也不须要

　　$(‘#s2’).append($(‘#s1 :selected’).remove()); //此处注意#s1 :selected之间的空格，因为selected自己也是一个选择器，不是一个过滤器，表示是s1下面的全部被选中的option

　　c) 焦点进入控件的事件是focus，焦点离开控件的事件是blur。

　　1）若是报错“例外被抛出”等，极可能是选择器表达式有问题，好比单词拼写错误、加了没必要要的空格等。jQuery是一堆写好的JavaScript函数库能够和普通JS代码混着用。最好不要dom、jQuery方式混着用。

　　2）注意不一样jQuery版本的区别。

　　=============== 4 ==================

　　一、事件

　　1) jQuery中的事件绑定：$("#btn").bind('click', {'name':'sxl' ,'age':21} ,function(e)

　　{alert(e.data.name);alert(e.data.age);})，每次都这么调用太麻烦，因此jQuery能够用$("#btn").click(function(){})来进行简化

　　2) 合成事件hover[‘hʌvə]，hover(enterfn , leavefn)，当鼠标放在元素上时调用enterfn方法，当鼠标离开元素时调用leavefn方法。至关于mouseover与mouseout事件的结合。

　　3) 事件冒泡：jQuery中也像JavaScript同样是事件冒泡。若是想得到事件相关的信息，只要给响应的匿名函数增长一个参数：e（事件对象）。调用事件对象的stopPropagation()方法终止冒泡。e. stopPropagation();

　　标准js方式：e.stopPropagation();

　　 IE下：e.cancelBubble = true；

　　eg:　　$("tr").click(function(e) { alert("tr被点击"); e.stopPropagation(); });//注意函数的参数是e

　　4) 阻止默认行为：有的元素有默认行为，好比超连接点击后会转向新连接、提交按钮默认会提交表单，若是想阻止默认行为只要调用事件对象的preventDefault()方法和window.event.returnValue=false效果同样。

$(“a”).click(function(e){alert(“全部超连接暂时所有禁止点击”);

e.preventDefault(); });//jQuery中封装的。

　　5) jQuery的事件对象：event对象。

　　• 属性：pageX、pageY、target得到触发事件的元素(冒泡的起始，和this不同，至关于window.event.srcElement)、which若是是鼠标事件得到按键（1左键，2中键，3右键），若是是键盘事件keydown则获取的是keyCode。

　　• altKey、shiftKey、ctrlKey得到alt、shift、ctrl是否按下，为bool值

　　• one()一次性事件绑定：只执行一次随后当即unbind。如：one(‘click’, fn);

　　• e.type获取当前事件的类型click、mousemove、…

　　• $(this).offset()//获取当前元素相对于页面的坐标。

$(this).offset().left、$(this).offset().top

　　注意：target获取的是原生的DOM对象，还须要转换为jQuery对象

　　二、鼠标

　　1） mousemove([[data],fn])事件，鼠标在元素上移动时触发。事件处理函数会被传递一个变量(事件对象)，其.clientX（.pageX）和 .clientY（.pageY）属性表明鼠标的坐标

　　在mousemove、click等事件的匿名响应函数中若是指定一个参数e，那么就能够从e读取发生事件时的一些信息，好比对mousemove等鼠标事件来讲，就能够读取e.pageX、e.pageY来得到发生事件时鼠标在页面的坐标。

　　练习：Tooltips效果。//注意position为absolute

　　2） mouseover([[data],fn])，在鼠标移入对象时触发

3） mouseout与mouseleave事件的区别：mouseleave事件（经常使用mouseenter事件一块儿使用）只有在鼠标指针离开被选元素时，才会触发。而mouseout 事件是在鼠标指针离开任何子元素时触发。

　　三、动画

　　　　1） show()、hide()：显示、隐藏元素。不带参数，则当即显示、隐藏；若指定速度参数则会用指定时间进行动态显示、隐藏，也可以使用内置速度：fast（200毫秒）、normal（400毫秒）、slow（600毫秒），jQuery动画函数中须要速度的地方通常也可使用这三个值。

　　　　2） toggle(speed)：在显示、隐藏之间切换

　　 $(":button[value=show]").click(function() { $("div").show(); });

　　$(":button[value=hide]").click(function() { $("div").hide(); });

　　　　3）播放声音<bgsound id=“snd” loop=“0” src=“”>,动态设置src的wav文件便可。

　　　　　　eg： windows选项卡效果：1）菜单用ul→li 。2）下面的内容用三个div

　　ul标签说明：

　　　　1) TYPE 标签属性设置了全部后续的列表类型，除非设置了不一样的 type 值。

　　　　2) UL 元素从 BODY 的 font 属性的高度中继承 line-height。例如，若是 BODY 的 font-size 属性大于 UL 元素的 font-size 属性，那么 UL 中的列表项目就会根据 BODY 的 font-size 间距排列。

　　　　3) 此元素在 IE 3.0 及以上版本的 HTML 中可用，在 IE4.0 及以上版本的脚本中可用。

　　　　4) 此元素是块元素。

　　　　5) 此元素须要关闭标签。

　　li标签说明：

　　　　1) TYPE 标签属性的值 disc, circle 和 square 应用于无序列表；值 1, a, A, i 和 I 应用于有序列表。

　　　　2) 当 LI 元素使用样式表(CSS)绝对定位时，列表项目的符号并不现实。

　　　　3) 此元素是块元素。

　　　　4) 此元素不须要关闭标签。

　　4）滑动效果：slideDown()、slideUp()、slideToggle()

　　5）淡入淡出（透明）

　　　　• fadeIn()、fadeOut()、

　　　　• fadeToggle()，经过不透明度的变化来开关全部匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数

　　　　• fadeTo()，把全部匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数

　　6）自定义动画

　　　　• animate({样式},speed)

　　　　部分样式不支持：backgroundColor、color、borderStyle、……

　　• 使用animate设置对象位置的时候要确保position的值为absolute或relative.

　　• 中止动画正在执行动画的元素.stop()(*)

　　• 动画队列：.animate().animate().animate()….;

　　• $(‘#dvAnimate’).animate({ width: ‘+=100px’, height: ‘+=100px’, left: ‘300px’, top: ‘100px’, borderWidth: ‘20px’ }, 2000)，在2000毫秒内，width增长100px

　　　　不少Dom作的功能用ASP.net服务端代码也能完成，可是那样会页面频繁刷新，性能、可用性很是差。能用Dom操做就不要用ASP.net服务端代码。先学HTML、JS、Dom，不要一上来就学asp.net，由于那样容易被ASP.Net好用所迷惑。

　　四、注意

　　　　1） id和jQuery对象的区别：动态建立出来的对象在append以前是不能经过$("#id")来引用。

　　　　2） js中单引号与双引号

　　　　3） $(‘body’).append($(‘<table></table>’)).append($(‘<a></a>’));//a在body中，不在table中。

　　五、 jQuery插件

　　　　1）什么是cookie： Cookie就是存储在浏览器里的一些数据。它须要浏览器的支持，能够禁用，但通常不用考虑禁用Cookie的状况。

　　　　2） Cookie的几个特征：

　　1）与域名相关，163.com不能读取baidu.com记录的Cookie；

　　2）字节有限：一个域名能写入的Cookie总尺寸、总条数是有限制的，通常是几千字节、几十条，超过之后浏览器本身会根据本身的策略移除一些Cookie；

　　3） Cookie中数据，必须是无关紧要的，由于浏览器可能会按期清除、用户也可能会手动清除，因此下次不必定能读出来。

　　　　3） jQuery Cookie使用

　　　　使用方法，Cookie保存的是键值对

　　• 一、添加jQuery.cookie.js

　　• 二、设置值，$.cookie('名字', '值')。cookie中保存的值都是文本。

　　• 三、读取值，var v=$.cookie('名字')

　　alert($.cookie("用户名"));

　　$.cookie("用户名","tom");在同域名的另一个页面中也能读取到。

　　设置值的时候还能够指定第三个参数，$.cookie(‘名字’, ‘值’, { expires: 7, path: ‘/’, domain: ‘itcast.cn’, secure: true })，expires表示要求浏览器保留Cookie几天，这个值只是给浏览器的建议，可能没到时间就已经被清除了。能够实现“勾选【记录个人用户名10天】”的功能。若是不设定expires在浏览器关闭之后就清除，options参数用哪一个设置哪一个。 secure：传输cookies时候，是否须要一个安全协议。

　　　　 IE开发人员工具，查看缓存。IECollection中也有。

　　 jqzoom插件图片放大

　　步骤1：<script type='text/javascript' src='js/jquery-1.2.6.js'></script> <script type='text/javascript' src='js/jquery.jqzoom-1.0.1.js'></script>

　　步骤2：<link rel="stylesheet" type="text/css" href="css/jqzoom.css" />

　　步骤3：<a href="images/BIGIMAGE.JPG" class="MYCLASS" title="MYTITLE"> <img src="images/SMALLIMAGE.JPG" title="IMAGE TITLE" > </a>

　　步骤4：$(document).ready(function(){ $('.MYCLASS).jqzoom(); });

　　步骤4的详细配置：

　　$(document).ready(function(){ var options = { zoomWidth: 300, zoomHeight: 250, xOffset: 10, yOffset: 0, position: "right" //and MORE OPTIONS }; $('.MYCLASS).jqzoom(options); });

　　经常使用的jQuery插件

　 jQuery官方的UI控件 jQueryUI

　　 http://jQueryui.com/ 下发包

　　表现和内容分离，语义化。

　　 jQuery.validate 表单验证插件

　　 Form,用于为表单提供直接的Ajax能力

　　全部插件列表http://plugins.jQuery.com/

　　步骤1：解压jQueryUI后将CSS目录（里面包含images）与Js目录拷贝的网站下。

　　步骤2：导入jquery-ui-1.8.16.custom.css和jquery-ui-1.8.16.custom.min.js

　　步骤3：$(function () { $('#txt1').datepicker(); });

　　六、网页分析工具

　　　　DebugBar→IE的

　　　　 IE8内置了开发人员工具（工具→开发人员工具），IE6/7须要安装Internet Explorer Developer Toolbar。 IECollection也带了安装包。能够禁用cookie、禁用JavaScript、清理Cookie、禁止缓存、调试JS等。

　　　　 Firebug→FireFox下的

　　　　多版本IE工具：IECollection，比IETester更强大。

　　七、其余

　　　　a) 导入插件的时候，先导入jQuery，再倒入插件

　　　　b) $(document)表示整个浏览器页面窗口，$(body)仅表示可用范围。