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")
与指定表达式匹配的元素集合