jQuery的使用
jQuery简介：
jQuery是一个快速、简洁的JavaScript框架，优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
jQuery的优势:
轻量级、强大的选择器、出色的DOM操作的封装、可靠的事件处理机制、完善的Ajax、出色的浏览器兼容性、链式编程、隐式迭代、丰富的插件支持
jQuery的使用：
1、导入jQuery文件
2、jQuery常用：
(1)ready()事件
相当于 window.onload()事件，页面标签加载完毕后触发(window.onload为页面完全加载完毕后触发)
$(document.ready(function (){alert()};)); //完整写法 $(function (){}); //简单写法 //一般所有的JavaScript代码都需要写在这个事件中，$和jQuery是没什么区别的，用$比较方便
(2)数组的遍历
$.each(arry,function(key,value)){ key为键， value为值} return false; //跳出循环
(3)map对象的使用（返回一个新的数组）：
var arrNew=$.map(arry,function(elemet,index)){ return elemet; }
(4)设置css
$('#div').css('backgroundColor','red');
$('#div').css({ 'backgroundColor':'red','border':'1px solid green'});//设置多个则用键值对方式 //$('#div') 获取id为div的元素
(5)val方法
$('#p1').val('设置的值'); //不传递参数，则为获取到的value值，传递参数则为设置成的value值
(6)text和html
text() 类似于DOM中的innertext html类似DOM中的 innerHTML
3、jQuery对象和Dom对象的互相转换
(1)Dom转换jQuery对象
var $divObj=$(divDom);
(2)jQuery转Dom对象
var domDiv=$divObj[0]; 或者： var domDiv=$divObj.get(0);
4、jQuery选择器
(1)id选择器:
$('#id')
(2)标签选择器：
$('p')
(3)类样式选择器：(应用了某个类样式)：
$('.clas')
(4)组合选择器(用逗号隔开)：
$('#id,p,.clas')
(5)层次选择器
$('#id p') //选取id下的所有p标签
$('body > p') //选取body下的子元素 -->子元素选择
//相邻元素选择：
//选取下一个
$('#id + p') //选取id接着的p标签，如果不是，则选取不了 //等价于： $('#id').next('p')
//选取接下去的元素(同一等级)
$('#id ~ p') //不传参，表示所有 //等价于： $('#id').nextall('p')
//选取上一个元素(同理)
$('p').prev('span') //上一个（没参数则表示上一个任意）
$('p').prevall('span') //上同等所有的span //不传参，表示所有
(6)属性选择器：
$('td[isclicked=isclicked]') //选取具有isclicked属性
(7)标签+类选择器(该标签中应用了什么类)
$('p.clas')
5、jQurey操作类样式
(1)判断页面上是否存在一个元素：
$('#id').length>0 //即便选择器没有选择到任何元素,那么返回也不会是null或者undefined，而是一个长度为0的集合对象
(2)追加一个新的类样式：
$('#id').addClass('clss'); //不会覆盖之前的样式，样式名称不加.
(3)判断一个标签是否应用了某个类样式
$('#id').hasClass('class'); //返回布尔类型
(4)移除类样式：
$('#id').removeClass('class');
(5)切换类样式的应用与移除
$('#id').toggleClass('class'); //判断：如果有就移除，没有就应用
6、jQuery过滤元素
(1)选取第一个： $('p:first')
(2)选取最后一个： $('p:last')
(3)根据索引选择： $('p:eq(index)')
(4)选取索引为奇数： $('p:odd')
(5)选取索引为偶数： $('p:even')
(6)选取索引大于某个数值：$('p:gt(2)')
(7)选取索引小于某个数值：$('p:lt(2)')
(8)not的使用： $('p:not(.class)') //选取没有运用class样式
(9)设置页面上的所有h标签: $(':header')
(10)参数2：表示一个范围： $('p',this)
7、jQuery属性过滤：
（1）根据属性进行选取：
$('[name=text1]') //选取页面上name为text1的元素
$('input[name=text1]') //选取input标签中，name=text1的元素
$('input[name]') //选取所有的input具有name属性
$('*[name]') //选取所有具有name属性的元素
$('[name^a]') //选取有name属性的元素，并且name属性以a开头
$('[name$=a]') //选取有name属性的元素，并且name属性以a结尾
$('name*=a') //选取有name属性的元素，并且name属性包含a
$('body *[name!=text1]') //选取页面name属性不等于text1的元素，写在body下，不然body会受影响
$('body *[name][id][type]') //选取同时具有多个属性
（2）选取禁用或者可用：
$('#from1 :disabled') //选取from1中被禁用的元素，可用为enabled
$('#from1:disabled') //选取被禁用的from1，没有空格
$('input:disabled') //选取input被禁用的元素，没有空格
（3）选择过滤
$(':checked') //选取所有被选中的checked或者radio,下拉用selected
$('#id :not(:checked)') //选取没有被选中的元素
8、动态创建元素
(1)创建元素
var alink = $('<a href="http://wwww.baidu.com">百度</a>'); $('body').append(alink); //添加到body标签中
(2)添加
//标签中 $('<a href="http://wwww.baidu.com">百度</a>').appendTo('#div1'); //直接添加（追加） $('<a href="http://wwww.baidu.com">百度</a>').prependTo('#div1'); //添加到前面 //标签外 $('<a href="http://wwww.baidu.com">百度</a>').insertAfter('#div1'); //添加到标签后面 $('<a href="http://wwww.baidu.com">百度</a>').insertBefore('#div1'); //添加到标签前面
(3)创建表格
var tblObj= $('<table></table>').appendTo('#div1'); //创建表格 $('<tr><td>1</td><td>2</td></tr>').appendTo(tblObj); //添加行，单元格到表格
(4)移除和清空
$('#id').empty(); //清空id中的内容
$('#id').remove(); //删除id以及之中的内容
9、元素的替换和包裹
（1）替换
$('<a href="https://wwww.baidu.com">百度</a>').replaceAll('hr'); //用创建的元素，替换已有的元素
$('p').replaceWith('<div></div>'); //用已有的元素，替换成创建的元素
（2）包裹
$('p').wrap(); //外层包裹，每一个p元素
$('p').wrapInner(); //内部围绕包裹，用p来包裹
$('p').wrapAll(); //全部包裹，提取所有的p(几个p上下文有其他的标签)
10、事件的注册与绑定
(1)事件的注册：
$('#id').bind('click' function(){}); //为id注册一个单击事件 运用:未确定使用的事件，传递事件
(2)事件的取消绑定
$('#id').unbind('mouseover'); //不传递参数，则取消所有
(3) 鼠标的悬浮和离开联合事件
$('#id').hover(function(){},function(){});
11、jQuery中使用事件对象
$('#id').click(function (evt){ alert('evt则为事件的对象')});
-->鼠标点击： .mousedown(function(evt){ alert(evt.whitch)}); .keydown(获取键盘码)同样
-->取消事件冒泡： evt.stopPropagation //相当于window.event.cancelBubble=true
12、jQuery动画
（1）显示、消失
$('#div').show(1000); //显示
$('#div').hide(1000); //消失 参数为执行的时间
$('#div').toggle(1000); //点击显示，再次点击消失 互换
（2）滑动
$('#div').slideDown(1000); //滑动显示
$('#div').slideUp(1000); //滑动消失
$('#div').slideToggle(1000); //互换写法
（3）淡入、淡出
$('#div').fadeIn(1000); //淡入
$('#div').fadeOut(1000); //淡出
$('#div').fadeToggle(1000); //互换写法
$('#div').fadeTo(1000,0.5); //执行时间 透明度
（4）animate动画：▲
$('#div').animate({width:'20px',height:'20px'},3000); //变成的样式，执行时间(可连续写动画队列)
（5）animate动画停止
$(':animated').stop(); //停止当前动画，继续执行后续动画队列中的动画
$(':animated').stop(true); //停止当前动画，并且清除后续动画队列中的动画(动画静止)
$(':animated').stop(true,true); //停止当前动画，并将动画设置到当前动画执行完毕的位置
13、cookie插件
作用：记录一些用户的信息(比如登录名，密码)保存到本地硬盘中 如：多少天内再次访问同样网站不用登录
使用：先加载jquery文件，再加载cookie文件，因为cookie文件引用了jquery文件
(1)添加一个cookie
$.cookie('UserName',value);
//会话cookie，没有指明cookie有效时间，所创建的cookie有效期默认到用户关闭浏览器为止，页面刷新还存在
//expire:有效期(天) path:目录，默认根目录(整个页面都能访问 ) secure:如果设为true，那么此Cookie的传输会要求一个安全协议，例如：HTTPS； $.cookie('UserName',value,{expires:7, secure:false, path:'/'});
(2)读取cookie
$.cookie('UserName'); //cookie为键值对存储，根据键读取值
(3)删除cookie
$.cookie('UserName',null); //把值设置为null即可删除
14、写插件的方法：
;(function($){ $.fn.extend({ //方法名称：方法 functionName: function(){ //在这个函数中，this就是表示当前函数的对象,例如使用的是表格，这里this就代表表格对象 $('',this).click(function()}); } }); })(jQuery);
总结：
jQuery的使用，相对很方便，快捷。jQuery中拥有很多丰富的插件，简单的代码可以实现复杂的功能，关键是在与如何去应用。
