jQuery笔记

jQuery原理：
1.js对象和jquery对象的区别：
jquery就是js中的new Object生成的普通对象
2.js对象和jquery对象的方法能不能共用？
不能共用
3.js对象和jquery对象能不能互换？ 能
 1).js对象->jquery对象
 $(dom);
 2).jquery对象->js对象
 $('h1')[1];

 $('h1').get(1);

 
jquery核心方法：
1.each(); 遍历
输出每个 li 元素的文本：

$("button").click(function(){
  $("li").each(function(){
    alert($(this).text())
  });
});

2.size();
输出被 jQuery 选择器匹配的元素的数量：

$("button").click(function(){
  alert($("li").size());
});

3.length();
输出 <li> 元素的数目：

$("button").click(function(){
  alert($("li").length);
});

4.get();
获得第一个 p 元素的名称和值：

$("button").click(function(){
  x=$("p").get(0);
  $("div").text(x.nodeName + ": " + x.innerHTML);
});

5.get(index);
6.index();
获得被点击的 <li> 元素相对于它的同级元素的 index：

$("li").click(function(){
  alert($(this).index());
});

7.data();
向元素附加数据，然后点击变成该数据：

$('h1').each(function(i){
	$(this).data({'num':i+1});
});
$('h1').click(function(){
	$(this).html($(this).attr('num'));
})

选择器：
1.基础
 1)#id
给id为hid的元素加样式

$('#hid').css({'color':'#00f'});

 2)ele 元素选择器
给所有P元素加样式

$('p').css({'color':'#00f'});

 3).class
给类为hid的元素加样式

$('.hid').css({'color':'#00f'});

 4)*
给所有的元素加样式

	$('*').css({'color':'#00f'});

 5)sel1,sel2 组合选择器
给p元素,h1元素加样式

$('p,h1').css({'color':'#00f'});

2.层级

 1)ancestor descendant  祖先 后代
给类为div1祖先的后代h1加样式

$('.div1 h1').css({'color':'#00f'}

2)parent > child 父 子
给类为div1父亲的孩子h1加样式

	$('.div1 h1').css({'color':'#00f'});

 3)prev + next 前一个 后一个
给类为div1的元素的后一个h1加样式

$('.div1+h1').css({'color':'#00f'});

 4)prev ~ sibings   前一个  后面所有的
给类为div1的元素后面全部的h1加样式

	$('.div1~h1').css({'color':'#00f'});

3.基本
 1):first 
第一个h1

$('h1:first').css({'color':'#00f'});

 2):last  
最后一个h1

	$('h1:last').css({'color':'#00f'});

 3):not 
除了第一个h1

$('h1:not(:first)').css({'color':'#00f'});

 4):even
偶数的h1

	$('h1:even').css({'color':'#00f'});

 5):odd
奇数的h1

$('h1:odd').css({'color':'#00f'});

 6):eq 等于
等于2的h1

	$('h1:eq(2)').css({'color':'#00f'});

 7):gt 大于
大于1的h1

	$('h1:gt(1)'.css({'color':'#00f'});

 8):lt 小于
小于1的h1

	$('h1:lt(1)').css({'color':'#00f'});

4.内容
 1):has
给有h1标签的div加样式

	$('div:has(p)').css({'color':'#00f'});

 2):parent
给有孩子的父亲加样式 (空格也算)

	$('div:parent').css({'color':'#00f'});

 3):empty
给空的h1加内容加样式

	$('h1:empty').html('aaaaaaa').css({'color':'#00f'});

5.属性
 1)[name]
给有name属性的h1加样式

	$('h1[name]').css({'color':'#00f'});

 2)[name=user1]
给name等于user1的h1加样式

	$('h1[name=user1]').css({'color':'#00f'});

 3)[name!=user1]
给name不等于user1的h1加样式

	$('h1[name!=user1]').css({'color':'#00f'});

4)[name^=user]
给name等于user开头的h1加样式

	$('h1[name^=user]').css({'color':'#00f'});

 5)[name$=user]
给name等于123结尾的h1加样式

	$('h1[name$=123]').css({'color':'#00f'});

 6)[name*=er]
给包含u的name加样式

	$('h1[name*=u]').css({'color':'#00f'});

 7)[name=user1][name*=er]
给有name 并且有age的h1加样式

	$('h1[name][age]').css({'color':'#00f'});

6.子元素
 1):nth-child
每一个div里面的第2个h1 (从1开始数而不是0)

	$('div h1:nth-child(2)').css({'color':'#00f'});

 2):first-child
每一个div里面的第一个h1

	$('div h1:first-child').css({'color':'#00f'});

 3):last-child
每一个div里面的最后一个h1

	$('div h1:last-child').css({'color':'#00f'});

 4):only-child
只有一个h1的div

	$('div h1:only-child').css({'color':'#00f'});

7.表单
 1):input
 2):text
 3):password
 4):radio
 5):checkbox
 6):submit
 7):reset
 8):button
 9):file
 10):hidden
 例子表单验证
 1.给表单元素设置blur事件的验证条件
 2.当表单提交时可以触发所有表单元素的blur事件
 3.把所有表单元素进行综合判断看是否有问题

8.表单属性
 1):checked  找到被选中的
 2):selected 
全选

$(':checkbox').attr({'checked':true});

全不选

$(':checkbox').attr({'checked':false});

反选

$(':checkbox').each(function(){
	this.checked=!this.checked;
})

有this就要用筛选选择器
筛选选择器：
1.过滤
eq();
first();
last();
not();
slice();
例子：找到第一个h1标签给样式

$('h1').eq(0).css({'color':'#00f'});

除了第一个h1其他的给样式

$('h1').not($('h1').eq(0)).css({'color':'#00f'})

找到第一个h1标签给样式

$('h1').first().css({'color':'#00f'});

找到最后一个h1标签给样式

$('h1').last().css({'color':'#00f'});

从开始到结束但不包含最后一个

$('h1').slice(1,4).css({'color':'#00f'});

2.查找
children(); 子元素
find();     所有后代查找
next();     下一个兄弟元素 ，
nextAll(); 后面的所有元素
parent();   父元素
prev();     上一个元素
prevAll();   前面的所有元素
siblings();  前后所有的兄弟


3.串联
add(); 组合
andSelf();
例子：给H1标签和P标签样式
$('h1').add('p').css({'color':'#00f'});
通过div找到下一个在带上自己，这样都给到样式
$('div').next().andSelf().css({'color':'#00f'});


属性选择器:
1.属性：
attr();设置属性
例：attr({'src':'b.png' })
attr();获取属性值
例: alert($(this).attr('src'));

2.CSS类：
addClass();
removeClass();
提前写好一个类的style，再往标签身上加减类
toggleClass();
有的就减，没有的就加，切换类

3.HTML代码：
html();   取值
html(val);  赋值
例子：val=$('.d1').html();
      $('.d2').html(val);
把类d1里面的值赋给类d2.

4.文本
text();
text(val);

5.值
val();
val(val);
表单元素获取和赋值 例：
把input里面的第一个值取出来，赋值给第二个

val=$('input').eq(0).val();
$('input').eq(1).val(val);

文档处理：
1.内部追加
append();   尾部追加
appendTo();
prepend(); 头部追加
prependTo();
例：点击把div1里面的h1追加到div2尾部

$('.div1 h1').click(functuion(){
	// $('.div2').append($(this));   //找到类div2把this追加
	$(this).appendTo('.div2');	 //找到this追加到类div2
})

例：点击把div1里面的h1追加到div2头部

$('.div1 h1').click(functuion(){
	// $('.div2').prepend($(this));
	$(this).prependTo('.div2');
})

2.外部插入 （插入后是兄弟关系）
after();
insertAfter();
before();
insertBefore();
例：点击把div1里面的h1插入到div2后面
$('.div1 h1').click(function(){
//$('.div2').after($(this));
$(this).insertAfter('.div2');
})
例：点击把div1里面的h1插入到div2前面
$('.div1 h1').click(functuion(){
//$('.div2').before($(this));
$(this).insertBefore('.div2');
})

2.外部插入 （插入后是兄弟关系）
after();
insertAfter();
before();
insertBefore();
例：点击把div1里面的h1插入到div2后面

$('.div1 h1').click(function(){
	//$('.div2').after($(this));
	$(this).insertAfter('.div2');
})

例：点击把div1里面的h1插入到div2前面

$('.div1 h1').click(functuion(){
	//$('.div2').before($(this));
	$(this).insertBefore('.div2');
})

3.包围
wrap();      外包围
wrapInner(); 内包围
wrapAll;     外部全包围
例子：
$('p').wrap('<i></i>');      在每一个p标签外包围<i>标签 斜体
$('p').wrapInner('<i></i>'); 在每一个p标签内包围<i>标签 斜体
$('p').wrapAll('<i></i>');   在全部的p标签外包围<i>标签 斜体
4.替换
replaceWith();
replaceAll();
例子：
$('p').replaceWith('<h1>linux</h1>'); 把所有的p标签换成h1标签 （不替换内容）
$('<h1>linux</h1>').replaceAll('p');  用h1标签换掉p标签  （不替换内容）

5.删除
empty();
remove();
detach();
例子:
把标签内容清空 (标签还在)

$('p').click(function(){
	$(this).empty();
	//$(this).html('');  与empty效果相同
})

把标签移除   （标签没有了）

$('p').click(function(){
	$(this).remove();
})

把标签移除 带事件  （标签没有了）

$('p').click(function(){
	$(this).detach();
})

6.复制
clone();
clone(true);
例子:点击图片复制一份在自己的后面（不复制事件）

$('img').click(function(){
	$(this).after($(this).clone());
})

点击图片复制一份在自己的后面（复制事件）

$('img').click(function(){
	$(this).after($(this).clone(true));
})

CSS处理：
1.css样式
css();
css({});


2.位置
offset(); 偏移量
position();
scrolltTop(val);
例子：
offset获取鼠标离左上角的实际距离

$('div').mouseenter(function(){
	x=$(this).offset().left;
	y=$(this).offset().top;
	alert(x+'||'+y);
})

position相对于父元素的定位

$('div').mouseenter(function(){
	x=$(this).position().left;
	y=$(this).position().top;
	alert(x+'||'+y);
})

可视区域的高
$(window).height();
文档的总高度
$(document).height();
屏幕滚动的高
$(window).scrollTop();

3.尺寸
height();
width();
innerHeight();
innerWidth();
outerHeight();
outerWidth();
例子：获取图片的宽高

$('img').click(function(){
	w=$(this).width();
	H=$(this).height();
	alert(w+'||'+h);
})

获取宽高+padding

$('img').click(function(){
	w=$(this).innerWidth();
	H=$(this).innerHeight();
	alert(w+'||'+h);
})

获取宽高+padding+border

$('img').click(function(){
	w=$(this).outerWidth();
	H=$(this).outerHeight();
	alert(w+'||'+h);
})

事件：
0.js加载执行的时机
 1)DOM加载完毕 
把js标签放在body之后即可
 2)资源加载完毕

$(window).load(function(){
	//代码
});

 3)jQuery中实现等DOM加载完毕？

 $(function(){
	//所有代码都是等DOM加载完毕才会去执行
 })

1.页面载入
$(document).ready(fn);
$(fn);
两个一样 ，ready淘汰了不常用
 

$(function(){
	//所有代码都是等DOM加载完毕才会去执行
 })

2.事件处理
bind();   绑定事件
one();
unbind(); 解除事件，没有就全部解除
例子:给图片绑定事件和解除事件

$('button').eq(0).click(function(){
	$('img').bind('click',function(){
		//代码
	})；
})
$('button').eq(1).click(function(){
	$('img').unbind('click');
});

给图片只绑定一次事件 //实现点赞功能

$('button').eq(0).click(function(){
	$('img').one('click',function(){
		//代码
	})；
})

点左键弹出0，点滚轮弹出1，点右键弹出2

$(document).mousedown(function(event){
	code=event.button;
	alert(code);
)}

鼠标坐标

$(document).mousemove(function(event){
	x=event.clientX;
	y=event.clientY;
	document.title=x+'-'+y;
});

制作右键菜单要用contextmenu和return false

$(document).contextmenu(function(event){
	return false;
)};

3.事件委派
live();通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素（比如由脚本创建的新元素）。
die();移除所有通过 live() 方法添加的事件处理程序：


4.事件切换
hover(); 鼠标循环移入和移出
toggle();  循环单击
例子循环单击

$('img').toggle(
	function(){
		this.src='b.png';
	}
	function(){
		this.src='a.png';
	}
)

鼠标循环移入和移出

$('img').hover(
	function(){
		this.src='b.png';
	}
	function(){
		this.src='a.png';
	}
)

效果：
1.基本
show(time); 显示
hide(time); 隐藏  可以加时间
toggle(time); 显示就隐藏，隐藏就显示


2.滑动
slideDown(time); 滑上消失
slideUp(time); 滑下显示
slideToggle(time);
例子：点击h1标签，他下面的p标签就滑上滑下

$('h1').click(function(){
	d=$(this).next().css('display');
	if(d=='block'){
		$(this).next().slideUp();
	}else{
		$(this).next().slideDowm();
	}
});

上面的代码用slideToggle()写就两行；

$('h1').click(function(){
	$(this).next().slideToggle();
});

3.淡入淡出
fadeOut(time); 淡出
fadeIn(time); 淡入
fadeTo(); 淡出到透明度，不完全
例子点击淡入淡出

$('h1').click(function(){
	d=$(this).next().css('display');
	if(d=='block'){
		$(this).next().fadeOut();
	}else{
		$(this).next().fadeIn();
	}
});

淡出到0.5透明度

$('h1').click(function(){
	$(this).fadeTo(1000,0.5);
}

4.自定义
animate();
例子：点击按钮图片左滑

$('button').click(function(){
	$('img').animate({
		'margin-left':'-1300px',
		'opacity':0,
	},1000);
}); 

ajax请求：
1.$get();
2.$post();
例子：get访求  无刷新删除数据库里的数据

$('.del').click(function(){
	id=this.id;
	obj=$(this);
})
	//ajax通讯
	$.get('delete.php',{id:id},function(r){
		if(r=='1'){
			obj.parent().parent().fadeOut(100);
		}
	}

post请求

	$('.del').click(function(){
	id=this.id;
	obj=$(this);
})
	//ajax通讯
	$.post('delete.php',{id:id},function(r){
		if(r=='1'){
			obj.parent().parent().fadeOut(100);
		}
	}

工具：
1.isArray();  判断是否为数组 true/false
2.isFunction(); 判断是否为函数 true/false
3.isEmptyObject();判断是否为空对象
4.trim();去掉空格
5.param();
6.serializa();
例子：判断是否是数组

arr=[1,3,5,6];
alert($.isArray(arr));

判断是否是函数

function show(){
	alert(222);
}
alert($.isFunction(show))

判断是否是空对象

obj={'name':'user1'}
alert($.isEmptyObject(obj));

去掉字符串起始和结尾的空格。

str='   asdas ' ;
alert($.trim(str).length)  // 应该是5

param把json对象转成url参数

obj={'name':'user1','age':'20'};
str=$.param(obj);
alert(str);    //结果name=user1&age=20

serialize把表单的属性和值转成url参数字符串，方便ajax使用

$(':button').click(function(){
	str=$('form').serialize();
	alert(srt);
});  // 表单用户名为user1,密码为456,则弹出username=user1&password=456