jquery(1)
1.什么是jquery
它是轻量级的js库，它兼容CSS3，还兼容各种浏览器，jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种 应用也说得很详细，同时还有许多成熟的插件可供选择。
2.jquery设计思想
1）选择网页元素
a.模拟css选择元素 b.独有表达式选择 c.混合筛选方法
$('div')--元素选择
$('#div')--id选择
$('.box')--类选择
代码1：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-1.10.1.min.js"></script> 7 </head> 8 <body> 9 <div id="div1" class="box">div</div> 10 <p>hello world</p> 11 <span class="box">span</span> 12 </body> 13 <script> 14 $('.box').css('background','red'); 15 </script> 16 </html>
运行后：
$('element:first')--第一个元素
$('element:last')--最后一个元素
$('element:eq(3)')---下标为3的元素
代码2：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-1.10.1.min.js"></script> 7 </head> 8 <body> 9 <ul> 10 <li class="li1"></li> 11 <li class="li1"></li> 12 <li></li> 13 <li></li> 14 <li></li> 15 <li></li> 16 </ul> 17 </body> 18 <script> 19 $('li:first').css('background','blue');//选择第一个元素 20 $('li:last').css('background','red');//选择最后一个元素 21 $('li:eq(3)').css('background','green');//下标为3的元素 22 </script> 23 </html>
运行后：
代码3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-1.10.1.min.js"></script>
</head>
<body>
<ul>
<li class="li1"></li>
<li class="li1"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<script>
$('li:even').css('background','orange');//奇数行变色
$('li:odd').css('background','pink');//偶数行变色
</script>
</html>
运行效果：
代码4（混合筛选方法）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-1.10.1.min.js"></script> 7 </head> 8 <body> 9 <ul> 10 <li ></li> 11 <li class="box"></li> 12 <li></li> 13 <li class="box"></li> 14 <li></li> 15 <li></li> 16 </ul> 17 </body> 18 <script> 19 $('li').filter('.box').css('background','blue'); 20 </script> 21 </html>
运行效果：
