標籤：style blog http color os java 使用 io strong
1、$(document).ready()方法和window.onload方法區別
為了正常操作頁面元素，我們需要把操作元素的JS代碼寫在$(document).ready()（Jquery）或window.onload（普通JS）中。$(document).ready()(這種寫法實際上是/把dom對象document轉換成了jQuery對象，然後註冊ready()事件)一般我們可以簡化為
$(function(){
........jquery代碼...........
});
下面介紹一些它們的區別：
2、$.map函數（obj, fn）和$.each（obj, fn）函數。
$.each（obj, fn(key,value)）用於遍曆鍵值對集合，如果是普通數組，則鍵為下標index
var dict = { ‘person1‘: ‘人類1‘, ‘person2‘: ‘人類2‘ }; var result = $.each(dict, function (k,v) { alert(k+"==="+v);//結果是分別彈出person1===人類1，person2====人類2 });$.map函數（obj, fn(value,index)）
var arrInt = [1, 3, 5, 7, 9]; var result = $.map(arrInt, function (val, index) { //通過實際觀察，發現，傳遞的函數有兩個參數，其中第一個參數表示遍曆的數組中的元素的值，第二個表示元素的索引 return val * 2; }); alert(result); //結果是2,6,10,14,183、Dom和Jquery對象轉換
dom對象轉為jquery對象，var div=document.getElementById();var jqdom=$(div),這樣就可以用jquery的一些成員，如text
jquery對象轉為dom對象:var domobj=jqdom[0];這樣又可以用dom的一些成員了，如innnerText
4、選取器：
標籤選取器：$(‘p‘)；
ID選取器：$(‘#p1‘);
類別選取器:$(‘.a‘)
組合選取器：$(‘#btn,#p1,span‘)
標籤+類別選取器：$(‘p.a‘)；
層次選取器:$(‘div p‘);
$(‘div >p‘)div下直接子項目；
$(‘div ~ p‘)在div後，搜尋所有p兄弟，等於$(‘div‘).nextAll(‘p‘)；
$(‘div +p‘)div後只找緊挨著的第一個p元素兄弟，等於$(‘div‘).next(‘p‘)；
5、隱式迭代：$(‘p‘).text(‘‘);無需迴圈便可設定所有p標籤文字
6、鏈式編程：
用鏈式編程時，需要注意next(),nextAll返回的已經不是原來的元素，也可以用end（）恢複前一次的狀態。如$(this).prevAll().css(‘‘).end().siblings();
text()、html()、val()這些方法用來設定值的時候可以鏈式編程，但是擷取內容的時候不能鏈式編程，因為擷取值的時候，返回值內容變了。【並不是任何時候都能鏈式編程，當返回值不是原來的對象時，就不能鏈式編程了。】
$(‘p‘).text(‘我們都是p!‘).css(‘border‘, ‘5px solid yellow‘).click(function () { alert($(this).text()); });7、設定與擷取
設定css：$(this).css({‘width‘:‘100px‘,‘border‘:‘1px‘});擷取css中某個屬性var width=$(this).css(‘width‘)
設定attr：$(this).attr(‘width‘,‘100px‘)，擷取attr某個屬性：var width=$(this).attr(‘width‘)
設定text：$(this).text(‘text1‘),擷取text,var txt=$(this).text()
設定val:$(this).val(‘text1‘),擷取text,var val=$(this).val()
8、過濾器:
$(‘p:first‘)第一個p元素，等於$(‘p‘).first()
$(‘p‘:last)最後一個p元素，等於$(‘p‘).last();
$(‘p:eq(2)‘)根據索引
$(‘p:even‘)選取所有偶數個p
$(‘odd)選取所有奇數個p
$(‘p:gt(index)‘)大於索引
$(‘p:lt(index)‘)小於索引
$(‘header‘)選取所有h1-h6元素
$(‘input:not(.myclass)‘)選取樣式名不是myclass
過濾器練習：
過濾器練習<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <script src="scripts/jquery-1.8.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $(‘#table1 tr:first‘).css(‘font-size‘, ‘30px‘); $(‘#table1 tr:last‘).css(‘color‘, ‘red‘); $(‘#table1 tr:gt(0):lt(3)‘).css(‘fontSize‘, ‘28px‘); $(‘#table1 tr:odd‘).css(‘backgroundColor‘, ‘red‘); }); </script></head><body> <table id="table1" border="1"> <tr> <td> 姓名 </td> <td> 成績 </td> </tr> <tr> <td> tom </td> <td> 100 </td> </tr> <tr> <td> jim </td> <td> 99 </td> </tr> <tr> <td> john </td> <td> 98 </td> </tr> <tr> <td> jason </td> <td> 97 </td> </tr> <tr> <td> aaa </td> <td> 97 </td> </tr> <tr> <td> 平均分 </td> <td> 98 </td> </tr> </table></body></html>
9、Jquery效果：
| animate() | 對被選元素應用“自訂”的動畫 |
| clearQueue() | 對被選元素移除所有排隊的函數（仍未啟動並執行） |
| fadeIn() | 逐漸改變被選元素的不透明度，從隱藏到可見 |
| fadeOut() | 逐漸改變被選元素的不透明度，從可見到隱藏 |
| fadeTo() | 把被選元素逐漸改變至給定的不透明度 |
| hide() | 隱藏被選的元素 |
| show() | 顯示被選的元素 |
| slideDown() | 通過調整高度來滑動顯示被選元素 |
| slideToggle() | 對被選元素進行滑動隱藏和滑動顯示的切換 |
| slideUp() | 通過調整高度來滑動隱藏被選元素 |
| stop() | 停止在被選元素上運行動畫 |
| toggle() | 對被選元素進行隱藏和顯示的切換 |
Jquery效果簡單易用，可以在w3cschool中查看效果示範
Jquery效果練習：仿QQ好友選項卡
仿QQ好友選項卡<html xmlns="http://www.w3.org/1999/xhtml"><head> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } div { width: 200px; height: 500px; border: 1px solid blue; } ul { list-style-type: none; } ul li { text-align: center; } h3 { background-color: Orange; cursor: pointer; margin-bottom: 2px; } </style> <script src="jquery-1.8.2.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //設定好友名稱的背景色 $(‘h3 ~ ul > li‘).css({ ‘backgroundColor‘: ‘blue‘, ‘margin-bottom‘: ‘2px‘ }); //為“好友組標題”註冊單擊事件 $(‘ul li h3‘).click(function () { $(‘#snd‘).attr(‘src‘, ‘1.WAV‘); $(this).next(‘ul‘).slideToggle(500); }); }); </script></head><body> <bgsound id="snd" loop="0" src=""> <div> <ul> <li> <h3> 我的好友</h3> <ul> <li>毛毛</li> <li>狗狗</li> <li>蛋蛋</li> </ul> </li> <li> <h3> 我的同學</h3> <ul> <li>張三</li> <li>李四</li> <li>王五</li> </ul> </li> <li> <h3> 男朋友</h3> <ul> <li>高富帥</li> <li>搞搞搞</li> <li>付福福</li> </ul> </li> <li> <h3> 備胎</h3> <ul> <li>lyj</li> <li>zzz</li> <li>fff</li> </ul> </li> </ul> </div></body></html>
jquery的初步總結
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
