標籤：utf-8 meta 使用 jquery element css hello 比較 設計
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>
運行效果：
jquery(1)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
