jQuery知识点总结（一）重要！
1.jQuery--->js框架 --->www.jquery.com
(1)jQuery的特点--->***！！！
(1)jQuery的特点：
利用选择器查找要操作的节点，然后查找到的节点封装成一个jQuery对象。通过调用jQuery对象的方法或者属性来实现对 底层被封装的节点的操作。
这样做的好处：
a.兼容性更好:jQuery对象考虑了浏览器的差异性。
b.代码更简洁
(2)编程步骤 (hello.html)
step1,使用jQuery提供的选择器来查找要操作的节点。--->1.找节点
step2,调用jQuery对象的方法或者属性。--->2.调方法/属性
知识点：
1. jquery可以加载多个ready函数，而原始的js只能加载一次onload
2.用dom对象得到的对象不能使用jquery中的方法，比如var p=document.getElementById("id"),此时p不能这样使用p.html(),而应该使用innerHTML。
同样，jquery对象不能使用dom中的方法，如果juqery中改写了dom中的方法，则可以使用dom中的方法
2. jQuery对象转换为dom对象的方法：
var $obj=$('#a')
a：使用$obj.get(0)
b：使用$obj.get()[0]
dom对象转换为jQuery对象：
用$()把DOM对象包装起来就OK：
var obj = document.getElementById('a');
var $obj=$(obj);
3.jquery优势：
a:兼容性强大,完美支持css1-2.0
b:完美容错机制，eg：即使没有对应标签也不会报错
4.选择器：
1)：id选择器 ：$('#id')
eg: $('#p1').css('color','red');//代替了#p1{color:red;}
2)：calss选择器 ：$('.p1')
eg: $('.p1').css('color','red');//代替了.p1{color:red;}
3)：标签选择器（不推荐*选择器）
eg: $('p').css('color','red');//代替了.p1{color:red;}
4)：多重选择器
eg： 123
5):层次选择器
E F 查找满足F要求的后代
E>F 只查找子节点
E+next 查找下一个兄弟，等于next()
E~siblings 查找下面所有兄弟,等于nextAll()
eg:给div标签后紧邻的p标签添加颜色
$('div+p').css('color','red');
$('div').next().css('color','red');
给div标签后所有的p标签添加颜色
$('div~p').css('color','red');
$('div').nextAll().css('color','red');
6)：过滤选择器：(用法：只举一例，其他参考手册)
:first
$('p:first').css();
注意：标签内嵌套标签时单引号和双引号错开使用，若计算偶数则下标从0算起
7)：属性选择器
A: safs
选取title为js的p标签添加红色,注意title可以为原有标签，也可以为自己自定义的标签
$('p[title=js]').css('color','red');
或者$('p[title]').css('color','red');
B:选取含有title和myuu属性的p元素,注意title可以为原有标签，也可以为自己自定义的标签
$('p[title=js][myuu]').css('color','red');
C:子元素:div的子标签p的第一个标签
$('div p:first-child').css('color','red');
8)：表单元素及表单元素属性选择器
$(':input[type=checkbox]').val();
$(':input:disabled').val();
$(':input[disabled=disabled]').val();
$('select:selected').val();
5.dom筛选
$('p:eq(0)').css(); //给指定下标为0的p标签添加颜色
$('p').filter('#second').css(); //奇偶数添加
$('p').click(function(){//单击p标签给当前添加颜色
if($(this).is('.first')){
$(this).css('backgound','red');
}
});
$('p').not(':last').css();//给p标签添颜色，除了最后一个
$('p').not('#second').css();//给p标签添颜色，除了id为second的p标签
$('input').map(function(){ //将一组元素转换为数组（一般不用，因为有一个序列化的方法比这个更好用）
return $(this).val();
}).get().join(',');//,即将三组文本框中的值用逗号隔开并转为字符串
slice(): $('p').slice(1,5).css();// 选中下标为1，2，3，4的元素,包含1，不包含5。也可传入负数
6.dom遍历查找：（注：返回一组元素的都可以加参数，返回一个的不能加参数）
$('#p1').parent().css(); //通过子节点p1找到父节点wrap
$('#p1').parents('.outer').css();//选取祖先元素，通常加参数,表示范围为class为outer的标签为止
$('p1').offsetParent().css();//offsetParent()返回父元素中第一个其position设为relative或者absolute的元素,仅对可见元素有效
$('#p2').siblings('div').css();//选择p2所有的兄弟元素(可加参数)
$('span').parent().css('color','red').end().css('color','blue')//先设置红色再设置成蓝色，颜色可重叠。链式操作，end()函数
$('input').each(function(){//用的不多，因为效率低，后面有工具函数可以代替它
alert($(this).val());
});
7.(仅了解)特殊符号的处理：有的加1个\，有的加2个\\
$('input[name=gender[]]')没加转义符,报错
$('input[name=gender\\[\\]]')加了转义符，正确
$('input[name=\'checkbox\']')正确
8.表格隔行变色
----------js代码-----------
var table=document.getElementById('table');
var tr=table.getElementByTagName('tr');
for(var i=0;i
if(i%2==1){
tr.style.background('blue');
}else{
tr.style.background('red');
}
}
-----------jquery代码-------
$('table tr:even').css('backgrpund','red');---->偶数行
$('table tr: odd').css('backgrpund','blue');---->奇数行
使用end()函数可以优化为一行代码：
$('table tr').fliter(':even').css().end().fliter(': odd').css()
9.tab标签页
$('#ul li').click(function(){
$(this).addClass('current').siblings().removeClass('current');//点击li的时候切换样式
$(#content>div).eq($(this).index()).show().siblings().hide();//根据li的索引值，来确定哪个div显示哪个div隐藏
上面两行代码可优化为一行：
$(this).addClass('current').siblings().removeClass('current').parent().next().children().eq($(this).index()).show().siblings().hide();
});
10.jquery选择器的优化:
a：最快的是id选择器:能用id获取到的标签尽量不用class选择器
b：假如p标签下有一个class为a，则尽量：$('p.a')，当然$('.a')这样写也可以。
假如有一个div标签，id为a，则直接：$('#id'),一定不要$('div#id')这样写。
c：假如div有一个子div，则尽量使用直接使用id获取，不要通过父元素找。
d：通过find()来找，尽量不使用上下文查找
eg：$('li.item-li').find('li').css();
e：链式操作比缓存快很多，只有在要通过一个元素查找另外的元素的时候才需要用到缓存，如果直接对某一个元素进行修改，则直接用链式操作。
11.dom操作：
a：创建节点：分为内部插入和外部插入。$(html)
内部插入：插入后是子元素
外部插入：插入后是兄弟元素
$('body').append('
或者也可以这样写：
var str='
$('body').append(str);
$('p').append('
$('
12.添加样式
再比如：
11111111
13.jQuery中的事件和对象
绑定事件
正式写法：
$obj.bind(type,fn)
简写形式：
$obj.click(f1)
获得事件源
var obj=e.target;
获得鼠标点击的坐标
e.pageX
e.pageY
取消事件冒泡
e.stopPropagation()
合成事件
hover(f1,f2) ：模拟鼠标悬停事件
f1:处理鼠标进入
f2:处理鼠标离开
toggle(f1,f2) : 模拟鼠标连续点击事件
f1:处理第1次点击
模拟操作
正式写法
$obj.trigger(type)
简写形式
$obj.focus()
eg obj.trigger('focus’）--->获得焦点
14.动画
1).show()/hide()
改变元素的宽度和高度来实现显示和隐藏
用法：$obj.show(time,[callback])
2).slidDown()/slideUp()
改变元素的高度来实现显示和隐藏
3).fadeIn()/fadeOut()
改变元素的不透明度来实现显示和隐藏
4).animate
自定义动画
$obj.animate({},time,[callback]);
{ }:对象
time:执行时间
[callback]:回调函数
15.jQuery插件编写（类级别开发，几乎不用）：
$.zxit={ //zxit为命名空间
centerDiv:function(obj){ //centerDiv为我们自己自定义的插件方法
obj.css({
'top': ($(window).height()-div.height())/2,
'left': ($(window).width()-div.width())/2,
'position':'absolute'
});
return obj;//返回和传入的都是jquery对象
}
}
16.jQuery插件编写（对象级别开发，使用率99%）：
$(function($){
$.fn.plugin=function(options){
var defaults = {
//各种参数，各种属性
}
var options = $.extend(defaults,options);
this.each(function(){
//实现功能的代码
});
return this;
}
})(jQuery);
17.对ajax编程的支持
(1)load()
1)作用：异步地向服务器发送请求，并且将服务器返回的数据直接添加到符合要求的节点之上。
2)用法:
$obj.load(url,[data]);
url:请求地址
data:请求参数，有两种形式:
请求字符串 "username=tom&age=23"
对象形式 {"username":"tom","age":23}
如果有请求参数，并且请求参数采用对象的形式来发送，load方法会发送post请求，否则发送get请求。
(2)$.get()和$.post()
1)作用：异步地向服务器发送请求，并且可以将服务器返回的数据进行处理。
$.get()发送get请求,
$.post()发送post()请求。
2)用法:
$.get(url,[data],[callback],type);
url 请求地址
data 请求参数
callback 回调函数，用来处理服务器返回的数据,格式
如下:function(data,statusText){
}
data:服务器返回的数据。
statusText:状态描述。
type 服务器返回的数据类型:
html: html文档 text: 文本 json: json字符串 xml: xml文档 script: javascript脚本
(3)$.ajax()
1)作用：可以完全控制ajax对象来发送请求(同步或者异步)。
2)用法:
$.ajax({});
{}是一个对象，用来描述发送请求时的选项参数，常见的选项参数如下：
url:请求地址
data:请求参数
type:请求类型
dataType:服务器返回的数据类型
success:服务器处理成功对应的回调函数。
error:服务器处理失败对应的回调函数。
async:true(异步，默认值)
和false(同步)。