快速回顾jQuery的个人笔记（总结）

     写在前面：学习任何一个库或者框架，不能盲目的学习，而是要首先了解这个库或者这个框架是干什么的，库和框架基于不同的目的提供给大家灵活使用，而不是以一概全，所有的项目都是用一样的东西。

　　很早就学习过一遍jQuery，但是对于我这样的小白来说，很多东西都未尽未透。而jQuery作为js最广泛流行的库，决定逞还在放暑假对jQuery进行一次复习和梳理。

1.jQuery的作用

　　　　　　首先对于jQuery来说，jQuery有如下的功能：

　　　　　　　　1.HTML元素的操作

　　　　　　　　2.CSS元素的操作

　　　　　　　　3.HTML的事件函数（譬如：对HTML元素的onclick事件）

　　　　　　　　4.Js的特效和动画

　　　　　　　　5.Ajax

　　　　　　　　6.Uitilities

2.jQuery的优势

　　　　　　知道了jQuery的使用场景，那么面对纷繁复杂的js前端库中，jQuery的优势又在哪里呢

　　　　　　1.jQuery提供了大量的扩展和插件

　　　　　　2.jQuery兼容几乎所有的浏览器

　　　　　　3.jQuery大大简化了js本身的语法，比如选取html对象的语句就缩减很短了

3.jQuery的基本语法

$(selector).action();

　　$:表示美元符号来定义jQuery，告诉你，从这里开始就是jQuery的语法了。

　　selector：选择器，用来选择HTML元素。这句话就是js的document.getElementById();这样的语句。

　　action：要执行的动作

4.文件就绪事件

$(document).ready(function(){
    //jQuery代码
});

　　形如这样的形式就是文件就绪事件。它的作用是防止文档在加载完之前，就执行jQuery的代码。比如我们在写js的时候会用到window.onload，来使整个页面加载完在执行js的代码。

$(function(){
    //jQuery代码
});

　　这是上面的简写版。

5.jQuery的选择器

　　jQuery的选择器是基于Css的选择器，也就是在selector的位置，你可以像使用CSS的选择器一样，方便的使用jQuery的选择器。

　　比如，以id作为选择：

$('#id').hide();

　　这里就是找到id为id的元素并将它隐藏（hide()）.

6.jQuery的事件

　　什么是事件呢，就是执行的动作，比如点击一个按钮，按下你的键盘都叫事件。

　　jQuery常见的事件：

　　

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

 

　　jQuery事件的语法：

$('#id').click(function(){
  $('id').hide();
});

　　比如上面这段代码就是，当点击id为id的元素的时候，id就会隐藏。

7.jQuery的效果

 　　jQuery支持的常见效果有：出现，隐藏，淡入，淡出，滑动，动画等。

　　　1.出现和隐藏

　　　　基本语法：

hide(speed,callback);
show(speed,callback);

　　两个可选参数分别是速度(可以是fast，slow或者具体的毫秒),callback（表示执行完hide或者show后要执行的函数）。

　　实　　例：

$('p').click(function(){
    $('p').hide();
});

　　使用toggle()方法简化操作：有时候我们设置按钮可以来回切换两种出现和隐藏状态，那么就可以使用toggle。

$('p').click(function(){
    $('p').toggle();
});

　　2.淡入和淡出

　　淡入和淡出的基本语法形式和参数都和上面的一样，我们直接来看实例：

$('p').click(function(){
    $('p').fadeIn();     //使用slow或者fast描述的时候需要加上""
});

　　同理fadeToggle是实现fadeIn和fadeOut的两种形式的切换。

$('p').click(function(){
    $('p').fadeToggle();
});

　　此外还有一个多的fadeTo()方法，该方法的作用是将颜色变淡，如果你的元素需要设置颜色的话。

　　它的基本语法中多了一个opacity，值的范围在0-1之间，表示透明度。

$('p').click(function(){
    $('p').fadeTo("fast"0.7);
});

　　PS:在这里，speed是必选，必须要设置时长。

　　3.滑动

　　jQuery的滑动同上面的一样，因为是总结这里就不再赘述了。

　　

　　4.动画

　　首先来看动画的基本语法;

 $(selector).animate({params},speed,callback);

　　其中必选的params是提供相对于本来元素，要改变的css样式。speed和callback与之前一样是可选选项。

　　实　　例：

 $(‘div’).animate({left:'300px'});

　　以上代码的含义是，div标签的HTMl元素的位置相对于原来的位置，变换300px。（PS：这里需要对position进行设置）。params的部分采用的是键值对的方式书写。

　　实　　例-同一个对象同时执行多个动画（比如：同时改变宽高，透明度和位置），只需要用"，"隔开

 $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    '150px'
  });

　　PS：jQuery的动画几乎可以操纵css的所有属性，但是在书写的时候，必须使用骆驼标记法。比如在css中的margin-left，在jQuery中就是marginLeft。

　　实　　例：动画中的计算

 $("div").animate({
    left:'250px',
    height:'+=150px',
    '+=150px'
  });

　　

　　实　　例：使用动画的队列功能。如果想要实现动画按顺序执行，那么jQuery还提供了队列的功能。

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({'100px',opacity:'0.8'},"slow");
}); 

　　

8.添加元素

　　使用append()和prepend()方法可以从后和前添加元素

$("p").append("Some appended text.");

　　使用append或者prepend可以追加多个元素

$(document).ready(function(){
	var a = 1;
	var b = 2;
	var c = 3;
	var d = 4;
 $('p').append(a,b).prepend(c,d);
});

　　

　　使用after或者before可以从前后添加多个元素

$(document).ready(function(){
	$('img').before('hi').after('bye');
	
});

　　也可以追加多个元素

function afterText()
{
	var txt1="<b>I </b>";                    // 使用 HTML 创建元素
	var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素
	var txt3=document.createElement("big");  // 使用 DOM 创建元素
	txt3.innerHTML="jQuery!";
	$("img").after(txt1,txt2,txt3);          // 在图片后添加文本
}

　　

  

 9.jQuery的遍历

　　1.向上遍历

　　　　1.parent()：返回被选元素的直接父元素

<style>
	div{
		100px;
		height:100px;
		border:1px solid lightgrey;
	}
	p{
		50px;
		height:50px;
		border:1px solid lightgrey;
	}
</style>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
	$(function(){
		$('p').parent().css("border","1px solid red");
	});
</script>
</head>
<body>
	<div>
		<p></p>
	</div>

</body>

　　2.parents():遍历所有的父元素，包括根元素

<style>
	.div1{
		200px;
		height:200px;
		border:1px solid lightgrey;
	}
	.div2{
		100px;
		height:100px;
		border:1px solid lightgrey;
	}
	p{
		50px;
		height:50px;
		border:1px solid lightgrey;
	}
</style>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
	$(function(){
		$('p').parents().css("border","1px solid red");
	});
</script>
</head>
<body>
<div class='div1'>
	<div class='div2'>
		<p></p>
	</div>
</div>
</body>

　　可以在parents()中设置参数，该参数可以过滤想要的祖先元素。

<style>
	.div1{
		200px;
		height:200px;
		border:1px solid lightgrey;
	}
	.div2{
		100px;
		height:100px;
		border:1px solid lightgrey;
	}
	p{
		50px;
		height:50px;
		border:1px solid lightgrey;
	}
</style>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
	$(function(){
		$('p').parents('ul').css("border","1px solid red");
	});
</script>
</head>
<body>
<div class='div1'>
	<div class='div2'>
		<ul>
			<p></p>
		</ul>
	</div>
</div>
</body>

　　3.parentsUntil()这个方法是返回两者之间的父元素

.ancestors *
{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});
});
</script>
</head>

<body class="ancestors"> body (曾曾祖父元素)
  <div style="500px;">div (曾祖父元素)
    <ul>ul (祖父元素)  
      <li>li (父元素)
        <span>span</span>
      </li>
    </ul>   
  </div>
</body>

　　

　　2.向下遍历

　　　　children():返回的是直接子元素。

<style>
	.div1,.div2,.p1{
		border:1px solid lightgrey;
	}
	.div1{
		100px;
		height:100px;
		margin: auto;
	}	
	.div2{
		50px;
		height:50px;
		margin:auto;
	}
		.p1{
		25px;
		height:25px;
		margin:auto;
	}
</style>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
	$('.div1').children().css("border-color","red");
});
</script>
</head>
<body>
<div class="div1">
	<div class="div2">
		<p class="p1">
		
		</p>
	</div>	
</div>

</body>

　　PS：同样可以用过滤器进行设置。

　　　　2.find()：该方法可以返回所过滤的元素。如果过滤元素是"*"，则返回所有的子元素。

.descendants *
{ 
	display: block;
	border: 2px solid lightgrey;
	color: lightgrey;
	padding: 5px;
	margin: 15px;
}
</style>
<script src="//libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("div").find("*").css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>

<div class="descendants" style="500px;">div (当前元素) 
  <p>p (儿子元素)
    <span>span (孙子元素)</span>     
  </p>
  <p>p (儿子元素)
    <span>span (孙子元素)</span>
  </p> 
</div>

</body>

　　3.水平遍历

　　　　　　siblings():返回所有的同胞元素。可以使用选择器。

　　　　　　next():下一个同胞元素，只返回一个。

　　　　　　nextAll():所有跟随的同胞元素。

　　　　　　nextUtil():返回介于两者之间的同胞元素。

　　　　　　prev(),prevAll(),prevUtil()：用法和上边一样，但是是向前遍历同胞元素.

　　4.过滤器

　　first():返回第一个被选元素。last()则是返回最后一个。

<script>
$(document).ready(function(){
  $("div").first().css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎访问我的主页</h1>
	<div>
		这是第一个div
	</div>
<div>
	<p>这是 div 中的一个段落。</p>
</div>

<div>
	<p>这是另外一个 div 中的一个段落。</p>
</div>

<p>这是一个段落。</p>

</body>

　　eq():由于first和last只能返回开头和结束，那么eq就可以弥补这个问题，可以选择中间的某项。

<script>
$(document).ready(function(){
  $("p").eq(2).css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎访问我的主页</h1>
<p>W3Cschool教程 (index 0).</p>
<p>http://www.w3cschool.cn (index 1)。</p>
<p>google (index 2).</p>
<p>http://www.google.com (index 3)。</p>

</body>

　　filter（）：该方法可以自定义过滤的方法，并且返回过滤器中的元素。not():方法与filter相反，返回不是某个（些）自定义标准的元素

<script>
$(document).ready(function(){
   $("p").filter("p").css("background-color","yellow");
});
</script>
</head>
<body>

<h1>欢迎访问我的主页</h1>
<p>W3Cschool教程 (index 0).</p>
<p class="url">http://www.w3cschool.cn (index 1)。</p>
<p>google (index 2).</p>
<p class="url">http://www.google.com (index 3)。</p>

</body>