jquery

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7     </head>
 8     <style type="text/css">
 9         .backgroud {
10             background: green;
11         }    
12         .yelow {
13             background: yellow;
14             color: red;
15         }        
16         .color {
17             color: cyan;
18         }
19         .red{
20             background: red;
21         }
22         .green{
23             background: yellow;
24         }
25     </style>
26 
27     <body>
28 
29         <div>
30             我可以跟在你
31         </div>
32         <div class="red">
33             身边
34         </div>
35         <div class="yelow">
36             一直守护你
37         </div>
38         <p>There are zero green divs</p>
39     </body>
40     <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
41     <script type="text/javascript">
42         //        $("div:last").addClass('backgroud');
43         $('div').last().removeClass('yelow').addClass('backgroud color');
44         $( "div" ).addClass(function( index, currentClass ) {
45   var addedClass;
46  
47   if ( currentClass === "red" ) {
48     addedClass = "green";
49     $( "p" ).text( "你在哪里" );
50   }
51  
52   return addedClass;
53 });
54     </script>
55 
56 </html>

jquery 是一个javascript库能够用最少的代码完成更多复杂而困难的功能

jQuery源码封装在一个匿名函数的自执行环境中有助于防止全局变量的污染。

（function(window,undefined){

window.jquery=window.$=jquery;

})(window)

传入的window对象参数可以使window对象作为局部变量使用好处是当你访问window对象时就不用退回到顶层作用域链

同样undefind可以缩短查找undefined时的作用域链。

属性

addClass();

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.backgroud {
			background: green;
		}	
		.yelow {
			background: yellow;
			color: red;
		}		
		.color {
			color: cyan;
		}
		.red{
			background: red;
		}
		.green{
			background: yellow;
		}
	</style>

	<body>

		<div>
			我可以跟在你
		</div>
		<div class="red">
			身边
		</div>
		<div class="yelow">
			一直守护你
		</div>
		<p>There are zero green divs</p>
	</body>
	<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
	<script type="text/javascript">
		//		$("div:last").addClass('backgroud');
		$('div').last().removeClass('yelow').addClass('backgroud color');
//从jQuery 1.4开始，该.addClass()方法的参数可以接收一个函数。
		$( "div" ).addClass(function( index, currentClass ) {
  var addedClass;
 
  if ( currentClass === "red" ) {
    addedClass = "green";
    $( "p" ).text( "你在哪里" );
  }
 
  return addedClass;
});
	</script>

</html>

toggleClass();根据类的存在或状态参数的值添加或删除匹配元素集中每个元素的一个或多个类

 1 <!doctype html>
 2 <html lang="en">
 3 
 4     <head>
 5         <meta charset="utf-8">
 6         <title>toggleClass demo</title>
 7         <style>
 8             p {
 9                 margin: 4px;
10                 font-size: 16px;
11                 font-weight: bolder;
12                 cursor: pointer;
13             }
14             
15             .blue {
16                 color: blue;
17             }
18             
19             .highlight {
20                 background: red;
21             }
22         </style>
23         <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
24     </head>
25 
26     <body>
27 
28         <p class="blue">Click to toggle (<span>clicks: 0</span>)</p>
29         <p class="blue highlight">highlight (<span>clicks: 0</span>)</p>
30         <p class="blue">on these (<span>clicks: 0</span>)</p>
31         <p class="blue">paragraphs (<span>clicks: 0</span>)</p>
32 
33         <script>
34             var count = 0;
35             $("p").each(function() {
36                 var $thisParagraph = $(this);
37                 var count = 0;
38                 $thisParagraph.click(function() {
39                     count++;
40                     $thisParagraph.find("span").text("clicks: " + count);
41                     $thisParagraph.toggleClass("highlight", count % 2 === 0);
42                 });
43             });
44         </script>
45 
46     </body>
47 
48 </html>

attr（）替换属性值

$("").attr("src","")

hasClass()

$("input").val();

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p></p>
</body>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$('p').text(function(n){
return n
})
</script>
</html>

筛选

1.$("p").eq(1)
2.$('p').first()
3.$('p').last()
4.

$("div").click(function(){
  if ( $(this).hasClass("protected") )
    $(this)
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: 0 });
});
5.$('p').filter(".selected, :first")
与指定表达式匹配的元素集合