jquery

1.jquery是js函数库，由js封装的，比原生更加强大，兼容性好

2.jquery2以后，不再支持低版本ie
3.下载引入页面即可使用，不用安装
4.可以引入网址使用

2.$() 他是jq最核心的方法

1.结合选择器使用，就能获取对应的元素，对元素进行操作
2.参数是一个数组huo(伪数组，元素对象)的时候，那么就可以对参数调用jq中的方法
3.参数是一个原生div元素，那么就自动创建一个jq对象

3.each() 用来循环数组对象，回调函数的参数第一个是循环下标，第二个是当前循环的对象

$(arr).each(function(Index,Item){
	   console.log(Item);
   });
   $('div').each(function(Index,Element){
	   // $(Element).get(Index).style.background = '#ff0';
	   $(Element).click(function(){
		   console.log($(Element).text());
	   });
   });

4.hover的第一个参数是鼠标悬浮的时候执行的方法，第二个参数是鼠标离开的时候执行的方法

   $(wp1).hover(function(){
	   $(wp1).css({
		   backgroundColor:'#ff0'
	   });
   },function(){
	   $(wp1).css({
		   backgroundColor:'#f0f'
	   });
   });

5. $ ==jQuery,$是jQuery的简写

$(选择器) 获取对象的元素数组，所有的css选择器都支持

6.通过eq(num)方法，获取jq对象中的第num个元素

7.jq对象转化为js对象， $(‘div’).get(num)

get() 或者$(ele)[n]方法可以把jq对象转化为js对象

8.如果text()中没有参数，则表示获取元素的文本内容

如果text()中有参数,则表示给元素设置内容

9.页面加载

	$(document).ready(function(){
		//code
	}) 所有的html结构加载完成的时候执行该方法
	
	简写为
	$(function(){
		//code
	});

10.添加类名

addClass(‘类名参数’)
参数是类名组成的字符串
返回值是 元素本身

	$('#add').click(function(){
			$('.wp').addClass('a b');
		});
	

11.删除类名

	removeClass('类名参数')
   参数是类名组成的字符串
   返回值是 元素本身

 $('#del').click(function(){
			$('.wp').removeClass('b');
		   });

12.toggleClass(‘类名参数’)如果有就删除，没有就添加类名

toggleClass(‘类名参数’)
参数是类名组成的字符串
返回值是 元素本身

	jq的链式操作原理：jq方法执行完毕以后返回对象本身

	   $('#tog').click(function(){
				$('.wp').toggleClass('b').text('杭州美景');
		   });

13.使用attr专门用来操作自定义属性

给元素添加属性
attr(属性名,属性值)
获取属性
attr(属性名)
删除属性
removeAttr(属性名)

	$('.wp').attr('aa','div');
	console.log($('.wp').attr('class'));
	$('#btn').click(function(){
		$('.wp').removeAttr('aa');
	});

14. 使用prop设置元素的原生属性，也就是自带的标签属性

设置属性
prop(属性名,属性值)
获取属性
prop(属性名)
删除属性
removeProp(属性名)

$('input[type="checkbox"]').eq(1).prop('checked',true);

prop()函数的结果:
      1.如果有相应的属性，返回指定属性值。
      2.如果没有相应的属性，返回值是空字符串。
attr()函数的结果:
      1.如果有相应的属性，返回指定属性值。
      2.如果没有相应的属性，返回值是undefined。

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()

15. html text val

html() : 相当于原生中的 innerHTML
text() : 相当于原生中的 innerText
val() : 相当于原生中的 value,需要结合具有输入的功能的元素使用

   $('.wp').eq(0).html('<h1>不炼金丹不坐禅</h1>');
   console.log($('.wp').eq(1).html());
   $('.wp').eq(2).text('<h1>闲来写幅青山卖</h1>');
   console.log($('.wp').eq(2).text());
   $('#aa').val('不食人间烟火');
   $('#aa').blur(function(){
	   alert($('#aa').val());
   });

16.css()

使用此方法设置样式
	1.css(属性名，属性值)
	2.css({属性名:属性值,属性名:属性值...})
	js中使用带-的css属性，需要转换为驼峰
	*/ 
	$('.wp').css('font-size','50px');
	$('.wp').css({backgroundColor:'#ff0'});

	// jq的常用方法
	console.log($('.wp').width());
	console.log($('.wp').height());
	console.log($('.wp').offset().left);
	console.log($(window).innerHeight());
	console.log($(window).innerWidth());
	console.log('wp-innerHeight:'+$('.wp').innerHeight());
	//outerHeight 如果参数为true，包括margin
	console.log('wp-outerHeight:'+$('.wp').outerHeight(true));
	console.log($('.wp').position());

17.show(),hide(),

show(参数1，参数2，参数3)
参数1 设置动画时间
参数2 运动曲线
参数3 回调函数
参数都可以不写

	$('#btn1').click(function(){
		$('.wp').show(1000,function(){
			alert('哈哈哈');
		});
	});
	$('#btn2').click(function(){
		$('.wp').hide(1000);
	});

18.slideUp

(参数1，参数2，参数3)  收起
参数1 设置动画时间
参数2 运动曲线
参数3 回调函数
参数都可以不写

slideDown 展开

	$('#btn3').click(function(){
		$('.wp').slideUp();
	});
	$('#btn4').click(function(){
		$('.wp').slideDown();
	});
		$('#btn4').click(function(){
		$('.wp').slideToggle();
	});

19.fadeIn(),fadeOut()

fadeIn() 淡入，显示元素
fadeOut() 淡出，隐藏元素
fadeToggle() 切换
参数1 设置动画时间
参数2 运动曲线
参数3 回调函数
参数都可以不写

	$('#btn5').click(function(){
		$('.wp').fadeIn();
	});
	$('#btn6').click(function(){
		$('.wp').fadeOut();
	});

20 .创建元素

$(html结构) 创建一个新元素
a.append(b) 把b元素添加到a元素的后面
append的参数，可以是
1.html结构
2.jq对象
3.原生对象

   var d = $('<div></div>').text('衣不如新，人不如故');
   $('.wp').append(d);
   $('.wp').append('<p>东门</p>');
   在wp内部的后边添加元素

 $('.wp').prepend($('<p>桃之夭夭111</p>'));
 在wp 内部的前边添加元素

21.删除元素，只需要给要删除的元素执行 .remove()

$(ele).remove()

   $('#del2').click(function(){
   	   $('.aa').remove();
   });
   删除dom 元素

22…before,.after

a.before(b) 把b元素添加到a元素的前面，a b为同级，添加了兄弟元素
a.after(b) 把b元素添加到a元素的后面，a b为同级，添加了兄弟元素

$('.wp').before($('<div class="aa">桃之夭夭222</div>'));
   $('.wp').after($('<p>桃之夭夭333</p>'));

23.查找 find()，获得当前元素集合中每个元素的后代

 $('.wp').find('p').css('color','#f00');

24.parent() 获取当前元素的父元素

.parents()获取父亲，祖级元素

$('#fu').parent().css('background','#ff0');

25.children() 获取当前元素的所有子元素

 $('.wp').eq(1).children().css('color','#f00');

26.next()获取紧邻的下一个兄弟元素（不一定类型一样）

nextAll() 获取以后的兄弟
nextUntil()获取以后的兄弟,直到哪一个位置

$('#son').next().css({fontSize:'40px'});
 $('#son').nextAll().css({color:'#00f'});
 $('#son').nextUntil('.tuo').css({color:'#f0f'});

27. 获取上一个兄弟

prev()
获取以前的兄弟
prevAll()

获取以前的兄弟,直到哪一个位置
prevUntil()

$('#son').prev().css({fontSize:'40px'});
 $('#son').prevAll().css({color:'#00f'});
 $('#son').prevUntil('.tuo').css({color:'#f0f'});

28. 获取所有的兄弟

siblings()

$('#son').siblings().css({textDecoration:'underline'});

29.判断元素是否包含某个类名 .hasClass() 不用写点

if($('#son').hasClass('wo')){
	$('#son').css({border:'1px #f00 solid'});
}