1、 jQuery
jQuery是JavaScript语法写的一些函数类，内部仍然是调用JavaScript，所以并不是代替JavaScript的。
jQuery是最火的JavaScript库，已经被集成到VS2010了，得到了MS的支持，MS的Ajax toolkit和jQuery结合也是最方便，jQuery的扩展插件也是非常多。
2、 jQuery特点
a) 很好的解决了不同浏览器的兼容问题（IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome）
b) 对于不同控件具有统一的操作方式
c) 体积小（几十KB）、使用简单方便（Write Less Do More）
d) 链式编程$("#div1").draggble().show().hide().fly() 、隐式迭代、插件丰富、开源、免费
e) 让编写JavaScript程序更简单、更强大！
3、 jQuery中的顶级对象（$）
要想使用jQuery的方法必须通过$对象。只有将普通的Dom对象封装成jQuery对象，才能调用jQuery中的各种方法。
$是jQuery简写，在代码中可以使用jQuery代替$，但一般为了方便大家都直接使用$。
4、 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(){ … });等效
5、 jQuery通用的两个函数
$.map(array,fn)//遍历、修改数组、不支持Dictionary风格数组（可以遍历，返回值错误）
• 对数组中的每个元素调用fn进行处理，返回值为处理后的一个新数组，原数组不变。
• 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也表示空格
6、 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对象就能用
7、 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 ==================
1、 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//用途：判断页面上的某个元素是否存在，动态创建元素的时候用。
2、 链式编程（直接在属性后面点属性）
前提：每个方法调用完毕后，都是返回的调用者自己
在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()方法。（返回链 被破坏前的对象。）
3、 选择器
类样式选择器：$(‘.className’).text();
多条件选择器：$(“p,div,span.menuitem”)，同时选择p标签、div标签和拥有menuitem样式的span标签元素。【将每个选择器匹配到的结果合并到一起】
层次选择器（5种）：
1、 $("div li")获取div下的【所有】li元素（后代，子、子的子……）
2、 $(“div > li”)获取div下的【直接】li子元素
$(“div > * ”)获取div下的【所有直接】子元素
3、 $(“.menuitem + div”)获取样式名为menuitem之后的相邻的（紧接着的）第一个div元素（不常用）等同于$(‘.menuitem’).next(‘div’);如果相邻的那个元素不是div,则不会继续向后找。可以：$(“.menuitem + div + p”)
4、 $(“.menuitem ~ div”)获取样式名为menuitem之后所有的兄弟div元素，等同于$(‘. menuitem ’).nextAll(‘div’)。【nextAll(‘*’)或nextAll()表示后面的所有元素。】
注意：选择器表达式中的空格不能多不能少。易错！过滤器与表单选择器时注意。
4、 获取当前元素的兄弟元素的方法
| next(); | 之后的紧邻着的第一个兄弟元素（下一个） |
| nextAll(); | 之后的所有兄弟元素 |
| prev(); | 之前的紧邻着的兄弟元素（上一个） |
| prevAll(); | 之前的所有兄弟元素 |
| siblings(); | 所有兄弟元素 |
注意：nextAll()、prevAll()等方法返回值是一个元素集合，区别链式编程的返回值。
5、 基本过滤选择器（一般以 ＇:＇开头）
: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对象，若没有参数，则会在整个文档中搜索
6、 属性、表单过滤器
属性过滤选择器（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=***]’);
7、 jQuery的DOM操作
1、使用html()读取或者设置元素的innerHTML：
alert($("a:first").html()); $("a:first").html("hello");
2、使用text()读取或者设置元素的innerText：
alert($("a:first").text()); $("a:first").text("hello");
3、使用attr()读取或者设置元素的属性，对于jQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作。
alert($("a:first").attr("href "));
$("a:first").attr("href", "http://www.rupeng.com");
attr({‘key’ :’value’ , ’k’ :’v’});
8、 动态创建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下不太一样。
9、 其他：
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 ==================
1、 节点操作
替换节点（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()//在内部围绕
2、 样式操作：
| 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
3、 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’]);//同时设置多个下拉菜单选中
4、 其他
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、事件
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对象
2、 鼠标
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 事件是在鼠标指针离开任何子元素时触发。
3、 动画
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好用所迷惑。
4、 注意
1） id和jQuery对象的区别：动态创建出来的对象在append之前是不能通过$("#id")来引用。
2） js中单引号与双引号
3） $(‘body’).append($(‘<table></table>’)).append($(‘<a></a>’));//a在body中，不在table中。
5、 jQuery插件
1） 什么是cookie： Cookie就是存储在浏览器里的一些数据。它需要浏览器的支持，可以禁用，但一般不用考虑禁用Cookie的情况。
2） Cookie的几个特征：
1） 与域名相关，163.com不能读取baidu.com记录的Cookie；
2） 字节有限：一个域名能写入的Cookie总尺寸、总条数是有限制的，一般是几千字节、几十条，超过以后浏览器自己会根据自己的策略移除一些Cookie；
3） Cookie中数据，必须是可有可无的，因为浏览器可能会定期清除、用户也可能会手动清除，所以下次不一定能读出来。
3） jQuery Cookie使用
使用方法，Cookie保存的是键值对
• 1、添加jQuery.cookie.js
• 2、设置值，$.cookie('名字', '值')。cookie中保存的值都是文本。
• 3、读取值，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(); });
6、 网页分析工具
DebugBar→IE的
IE8内置了开发人员工具（工具→开发人员工具），IE6/7需要安装Internet Explorer Developer Toolbar。 IECollection也带了安装包。可以禁用cookie、禁用JavaScript、清理Cookie、禁止缓存、调试JS等。
Firebug→FireFox下的
多版本IE工具：IECollection，比IETester更强大。
7、 其他
a) 导入插件的时候，先导入jQuery，再倒入插件
b) $(document)表示整个浏览器页面窗口，$(body)仅表示可用范围。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
