首页 > 代码库 > jquery(1)

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="http://www.mamicode.com/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> 

 

运行效果:

  技术分享

 

 

jquery(1)