Javascript缺点：1.复杂的文档对象模型 2.不一致的浏览器实现 3.缺乏便捷的开发、调试工具。

jquery优点:1.轻量级 2.强大的选择器 3.出色的DOM操作 4.可靠的事件处理机制 5.完善的ajax\

jquery 代码风格

对于同一对象不超过三个操作，可以写成一行。

对于同一个对象的较多操作建议每行写一个操作。

对于多个对象的少量操作，可以每个对象写成一行，如果涉及子元素可以考虑适当地缩进。

jquery对象与DOM对象

如果获取的是jquery对象，前面加上$以示区分。

jquery对象转换成DOM 对象可以用[index]、get(index)

DOM 对象，只要用$()包装就可以变成jquery对象，如$(document.getElementById(’school’)

jquery与其他库的冲突

先导入其他库后导入jQuery库时：

jQuery.noConflict() //将$控制权让渡给其他

Jquery(function($){…})//在jQuery 内部使用$ 或匿名函数（function($){})(jQuery)

先导入jQuery库，后导入其他库时：

可以直接使用jQuery 做jQuery的处理，$用来操作其他库

jquery选择器

基本选择器#id,.class, element, *,( slector1, selector2,…)

层次选择器

后代$(‘ancestor descentdant’)、子元素$(‘parent> child’)

紧跟后的同辈元素$(‘prev + next’)，等同于next()方法、其后所有同辈元素$(‘prev~siblings’)，等同于nextAll(); siblings()方法与前后位置无关。

过滤选择器

基本过滤选择器。:first、:last、:not(selector)、:even(偶数）、:odd(奇数）、:eq(index)(索引）、:gt(index)(索引大于）、:lt(index)(索引小于)、:header(选取所有标题元素hn)、:animated(选取当前正在执行动画的所有元素)、:focus(选取获取焦点的元素。

内容过滤选择器。:contains(text)(文本中含有text)、:empty()选取不包含子元素(包括文本元素)、:has(selector)(含有选择器所匹配的元/素的元素、:parent选取含有子元素或文本的元素。

可见性过滤选择器。:hidden选取所有不可见的元素（包括display:none、文本域type=hidden、visibility:hidden之类的元素)、:visible选取所有可见的元素。

属性过滤选择器。[attribute]拥有此属性的元素、[attribute=value]、[attribute!=value]属性值不等于、[attribute^=value]属性值开头、[attribute$=value]属性值结尾、[attribute*=value]含有、[attribute|=value]属性值为value或以value-开头、[attribute~=value]属性值中含有value用空格分开的的属性的元素

子元素过滤选择器。:nth-child(index/even/odd/equation)、:first-child、:last-child、:only-child(某个元素是其父元素的唯一子元素则匹配）

表单对象属性过滤选择器。可用元素:enabled、不可用元素:disabled、单选框复选框:checked、下拉列表被选中:selected

表单选择器。:input、:text、:password(密码框)、:radio(单选框)、:checkbox(多选框)、:submit(提交框)、:image图像按钮、:reset重置按钮、:button按钮、:file上传域、:hidden 不可见元素

实例

filter( selector )方法，在集合元素中筛选, 区别于find(),在子元素中查找

css(name, value)。

is(“:visible")是显示。

toggle(fn1,fn2)方法，交替一组动作,fn1中是关于显示元素的，fn2中是关于隐藏元素的。

DOM操作

查找节点，元素节点（选择器）、文本节点text()方法；查找属性节点attr(’title’)

创建节点，var $li = $(‘’), $(‘ul’).append($li)

插入节点。在A中插入B, A.append(B)方法，向元素内部后置、prepend()向元素内部前置内容、after()在每个匹配内容之后插入、before()在每个匹配元素之前插入。在B中插入A，appendTo()、prependTo()、insertAfter()、insertBefore()

删除节点。remove()方法移除元素及后代节点，被移除元素之后还可以继续操作，但是绑定的事件已失效，可以向方法中传递选择器来选择匹配被移除对象。detach()方法移除后，被移除对象继续保留绑定的事件，重新添加后恢复到之前。empty()，只是清空该元素的所有后代节点，并非删除。

复制节点。clone(),若传递参数true,则表示复制节点及其绑定的事件。

替换节点。replaceWith(),将匹配的节点都置换成新节点，被替换元素之前的绑定事件都消失了。replaceAll(),可将替换内容前置。

包裹节点。wrap(),将每个匹配元素用新元素包裹，wrapAll(),将所有匹配元素，用一个新元素包裹，wrapInner(),将每个匹配元素的子内容用一个元素包裹。

属性操作。设置元素的单个属性，attr(name, value), 设置多个属性，attr({nam1:value, name2:value})。删除属性，removeAttr(name), 获取属性attr(name)

样式操作。追加样式，addClass(),移除样式removeClass(),交替一组动作，toggle(f1, f2), 第一个是显示对应的动作，第二个是隐藏对应的动作。toggleClass(),如果含有某个class则删除，如果不含有则添加。hasClass(),判断是否有某个样式。

设置和获取HTML、文本和值。html(value),设置html内容，html()获取内容，text(vaue)设置文本，text()获取文本。val(value),设置元素的值，val()获取元素的值，无论是单选，多选，还是文本框，或下拉列表，若为多选，则返回还有所有值的一个数组。this.defaultValue设置的初始值。val([value1, value2, value3])

遍历节点。children()只考虑子元素而不考虑后代元素，next(),匹配后面紧跟的同辈元素，prev()前面紧跟的同辈元素，siblings()取得匹配元素所有同辈元素, closest(selector),取得匹配的最近祖先元素元素。parent()集合中每个匹配的父元素，parents()获取集合中每个匹配的祖先元素。

css-DOM。css(name, value)设置的单个样式，设置多个样式css({name1:value, name2:value}), 获取设置值css(name)。 height()获取高度，设置高度height(100)), 获取宽度width()、设置宽度width(100);默认单位是px,也可设置为width(‘100em’)

offset()获取元素相对视窗的偏移，offset().left 获取左偏移，offset().top获取上偏移；position(),获取元素相对于最近一个已定位的父元素的偏移，position().left获取左偏移，position().top获取上偏移。

scrollTop(),获取滚动条到顶端的距离，scrollLeft(),获取滚动条到左端的距离，可以输入参数，表示滚动到某个地方。scrollTop(200）

jQuery中的事件和动画

事件绑定。bind(type[,data], fn)，可以多次调用。可以绑定自定义事件。bind(‘myClick’, fn);

简写绑定事件。click, mouseover, mouseout这类常用事件可采用简写形式。.click(),.mouseover(),.mouseout()

合成事件。hover(enter, leave),鼠标放上去会触发第一个函数，鼠标离开会触发第二个元素，等同于绑定了mouseover()、mouseout()。toggle(f1, f2, f3,…),模拟鼠标连续单击事件，第一次触发第一个函数，第二次触发第二个函数。toggle还有另外一个作用，切换元素的可见状态。

阻止冒泡，event.stopPropagation()，阻止默认行为(如链接跳转，表单提交)，event.preventDefault(), 如果同时阻止冒泡和默认行为，可以 return false。jquery不支持事件捕获。

事件对象属性。e.target 触发的元素、e.relatedTarget 所有发生事件的相关元素、event.pageX、event.pageY光标相对于页面的坐标。e.which 获取鼠标的按键，左中右，或键盘事件的按键。event.metaKey 获取ctrl键。

移除事件。unbind([type], [data]),若不包含参数，则删除该元素的所有事件。bind(‘click’, one=function(){}), unbind(‘click’, one)添加函数变量，来指定删除函数。

one(type, [data], fn)绑定事件，仅当第一次触发时执行，多次触发不执行。如绑定了点击事件，仅在第一次点击时执行。

模拟操作。trigger(type),trigger(‘focus’)、triggerHandler(‘focus')(只触发事件，不执行浏览器默认行为）。

绑定多个事件。bind(‘mouseover, mouseout’) 。添加事件命名空间，bind(‘mouseover.plugin’), trigger(‘click!’)触发不包含命名空间的点击事件。

jquery做动画要求在标准环境下，需在文件头部包含DTD定义。否则可能会出现动画抖动。

show()、hide()、slideUp()、slideDown()改变高度直至完全消失、fadeIn()、fadeOut()改变透明度直至完全消失。可以添加参数。

自定义动画 animate(params, speed, callback)， params即是 {property1: “value1”, property2: “value2”}，累加累减动画animate({left: “+=500px”}, 300)

停止动画和判断是否处于动画状态。stop([clearQueue],[gottoEnd]),第一个参数代表是否要清空未执行完的动画，第二个参数代表是否直接将正在执行的动画跳转到末的状态。stop(),会结束当前正在执行的动画，并立即进入下一个动画。is(‘:animated’) 判断元素是是否处于动画。delay(1000)延迟动画。

其他动画方法。toggle(speed, [callback])、slideToggle(speed, [easing], [callback])、fadeTo(speed, opacity, [callback])、fadeToggle(speed, [easing], [callback])

jQuery对表单表格的操作及更多应用

单行文本框应用，失去焦点blur()、获得焦点focus(),可以结合:focus选择器

多行文本框应用，高度变化，animate({ height: “+=50"}, 400),滚动条高度变化，animate({ scrollTop: “+=50” }, 400)

复选框应用，attr(‘checked’, true)设置选中，attr(’checked’)获取设置的属性值。反选操作attr(‘checked’, !$(this).attr(‘check’)),采用javascript的DOM操作会更加简洁，this.check = !this.checked.    each(fn)方法遍历jquery元素。通过全选/全不选按钮，来控制数组，对全选和全不选按钮绑定点击事件，并将被控制数组的checked值设置地和全选/全不选按钮一样即可。$(‘[name=items]:checkbox’).each(function(){if(!this.checked){flag= false}}),循环遍历数组，当出现没有选中选项时，将flag设置为false.过滤被选中元素，若长度等于list则为全选，attr(‘checked’, $tmp.length ==$tmp.filter(‘:checked’).length)

prop获取属性和设置属性值，当属性只有名没有值的时候，或属性值为true,false时，应该用prop,代替attr。prop获取的值只会返回true或false。

下拉框的应用。结合选择符，:selected。var hasSelected = $(this).hasClass(‘selected’)   $(this)[hasSelected ? “removeClass“: “addClass”](‘selected’)三元运算符在选择方法中的应用。

slice(-2)，从指定位置截取大结尾，parseInt(),转换为整数，网页换肤，attr(‘href’, “css/“ + this.id + “.css”)

Ajax的应用

Ajax优点，不刷新整个页面，数据按需发送，把一部分服务器负担转移到客户端，减轻了服务器和带宽负担。

Ajax缺点，破坏浏览器的前进和后退行为，对搜索引擎支持不足。

load(url , data, callback),url请求html的页面地址，data发送给服务器的名值对参数，callback无论请求成功失败的回调函数。当load方式带有参数时会使用post方式发送请求。

$.get/post( url, data, callback, type), type为服务器端返回内容的格式。

get与post方法区别。get请求会将参数在url后进行转换，post请求，则是作为消息的实体内容。get方式对传输数据有大小限制(<2kb), 而post理论上不受限制。get方式的请求会被浏览器缓存起来，post方式相对安全。

$.getScript(‘app.js’[, callback]),加载指定文件。

$.getJSON(url, callback)

$.each(data, function(i, item){})函数不同于jquery对象的each方法，接收一个数组或对象为第一个参数，回调函数作第二参数，包含两个参数，第一个为对象的成员或数组的索引，第二个为对应变量或内容。

$.ajax(options), url, type, timeout, data, dataType, beforeSend, complete, success, error。

序列化元素，serialize()方法，将DOM元素内容序列化为字符串，便于ajax请求，$(‘#form’).serialize()。serializeArray() 将DOM元素序列化后，返回JSON字符串。$.param(obj), 对数组或对象进行序列化为字符串。

ajax全局事件，$(‘#loading’).ajaxStart(function(){$(this).show()}).ajaxStop(function(){$(this).hide()})

jquery新增

$(elements).on( events [, selector], [,data], handler) 绑定事件，取代之前的bind, delegate, live, 可用于动态元素，$(elements).off( events [, selector], [,data], handler) 解除绑定事件。

closest()从元素本身逐级向上找，返回最先匹配的祖先元素，$.fx.off()关闭所有动画，$.isArray()确定参数是否是数组。

$.proxy(function(){//this}, this)保留特定的上下文