首页 > 代码库 > jquery(1)

jquery(1)

2024-09-22 04:48:59   217人阅读

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)


联系
我们