JQuery基础一
http://www.cnblogs.com/Chenfengtao/archive/2012/01/12/2320490.html??
jquery 使用方法
1、在瀏覽器點擊F12，調(diào)出源碼設(shè)置端點F11進(jìn)行調(diào)試
2、要操作DOM對象，首先要把DOM對象封裝成juery對象:
jQuery(document).ready(function () {
?alert('頁面加載完了2');
?});
juery = $,
3、jQuery頁面加載完成寫法
$(function () {
alert('加載完了');
});
4、map是對數(shù)組遍歷 ,arg參數(shù)一般不用理
var arr = [1, 2, 4, 5, 6, 7];
var arrs = $.map(arr, function () {
alert((arguments);//返回function ()函數(shù)有幾個參數(shù)
alert((arguments[0]);//返回function ()函數(shù)第一個參數(shù)
?});
?
var arrs= $.map(arr, function (ele, index) {
return ele * 2;//返回元素值改變后的數(shù)組
});
$.map(arr, function (ele, index) {
alert(ele+'==='+index);
//alert(arguments[0]+'==='+arguments[1]+'=='+arguments[2]);
});
?
5、each對鍵值對遍歷,arg參數(shù)一般不用理
var arr = [45, 56, 43, 23, 112];
$.each(arr, function (k, v) {
? //k---索引,v值
alert(k+'=='+v);
?});
?
?var arr = { "yzk": "椰子殼", "jk": "接口", "ml": "瑪麗" };
?$.each(arr, function (k, v) {
//k====鍵,v====值
? alert(k+'=='+v);
?});
?
6、$.trim取掉空格
// var msg = ' 感冒真舒服,一般都不感冒 ';
// alert('==' +$.trim(msg)+'==');
7、dom對象轉(zhuǎn)換為jqurey對象
<!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="jquery-1.8.3.js" type="text/javascript"></script><script type="text/javascript">$(function () {document.getElementById('btn').onclick = function () {//dom對象 // var dvObj = document.getElementById('dv'); // var jq = $(dvObj); //dom對象轉(zhuǎn)jquery對象 // //var dd= jq.get(0);//jquery對象轉(zhuǎn)dom對象 // var dd = jq[0];//鏈?zhǔn)骄幊?/span>// $(dvObj).css('width', '300px').css('height', '200px').css('backgroundColor', 'yellow').text('哈哈哈');//如果寫內(nèi)容了 那么就是設(shè)置，如果沒寫就是獲取//jquery寫法// $(dvObj).css('width', '300px');// $(dvObj).css('height', '200px');// $(dvObj).css('backgroundColor', 'yellow');// $(dvObj).text('<font color="red",size="7">哈哈哈 太帥了</font>');// dvObj.style.width = '300px';// dvObj.style.height = '200px';// dvObj.style.backgroundColor = 'yellow'; };});</script> </head> <body><input type="button" name="name" value="顯示效果" id="btn" /><div id="dv"></div> </body> </html> View Code8、id選擇器,標(biāo)簽選擇器,類選擇器,優(yōu)先級：標(biāo)簽選擇器->類選擇器->id選擇器
<!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><style type="text/css">/*id選擇器,標(biāo)簽選擇器,類選擇器*//*id選擇器#dv{width:300px;height:200px;background-color:Yellow;}*//*標(biāo)簽選擇器div{width:300px;height:200px;background-color:Yellow;}*//*類選擇器.cls{width: 300px;height: 200px;background-color: Yellow;}*/</style> </head> <body><div id="dv"></div><div class="cls"></div> </body> </html> View Code9、選擇器獲取元素
<!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="jquery-1.8.3.js" type="text/javascript"></script><script type="text/javascript">//點擊按鈕 改變層的樣式，并且在層中 來個font標(biāo)簽 顯示樣式//頁面加載了$(function () {$('#btn').click(function () {$('#dv').css('width', '300px').css('height', '200px').css('backgroundColor', 'orange').html('<font color="red" size="7" face="全新硬筆行書簡">我會用挖掘機控制計算機開飛機</font>');$(this).val('嘎嘎');});});</script> </head> <body><input type="button" name="name" value="哈哈" id="btn" /><div id="dv"></div> </body> </html> View Code標(biāo)簽選擇器、類選擇器獲取元素
<!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="jquery-1.8.3.js" type="text/javascript"></script><style type="text/css">.cls{background-color:Orange;border:1px solid red;}</style><script type="text/javascript">$(function () {$('#btn').click(function () {// $('p').text('我們都是好人'); //隱式迭代$('.cls').text('文能提筆控蘿莉');// so easy --各種選擇器 });});</script> </head> <body><input type="button" name="name" value="改變" id="btn" /><p>床前明月光</p><p class="cls">疑是地上霜</p><p>舉頭望明月</p><p>低頭思故鄉(xiāng)</p> </body> </html> View Code標(biāo)簽改變，鼠標(biāo)形狀改變
<!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="jquery-1.8.3.js" type="text/javascript"></script><script type="text/javascript">$(function () {$('p').click(function () {$(this).text('我心疼壞了').css('color', 'red');}).mouseover(function () {$(this).css('cursor', 'pointer');}).mouseout(function () {$(this).css('color', '');});});</script> </head> <body><p>鋤禾日當(dāng)午</p><p>汗滴禾下土</p><p>誰知盤中餐</p><p>粒粒皆辛苦</p> </body> </html> View Code多條件選擇器
?
<!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="jquery-1.8.3.js" type="text/javascript"></script><script type="text/javascript">// $(function () {// $('#btn').click(function () {// //$('div.cls').css('backgroundColor','green'); // }); // // });</script><script type="text/javascript">$(function () {$('#btn').click(function () {//多條件選擇器$('p,strong,div.cls').css('backgroundColor','red');});});</script><style type="text/css">.cls{width:100px;height:50px;background-color:Orange;}</style> </head> <body><input type="button" name="name" value="效果" id="btn" /><p>這是p</p><strong>這是strong</strong><div class="cls"></div><div style=" width:300px; height:200px; background-color:Yellow;"></div> </body> </html> View Code層選擇器
<!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="jquery-1.8.3.js" type="text/javascript"></script><script type="text/javascript">$(function () {$('#btn').click(function () {//所有的// $('*').css('backgroundColor', 'red');//層中所有的p標(biāo)簽,// $('div p').css('backgroundColor','red');//直接的子元素，如果在直接的子元素中還有該元素.那么也可以//$('div>p').css('backgroundColor', 'red');//層后面的直接的p標(biāo)簽//$('div+p').css('backgroundColor', 'red');//層后面所有的p標(biāo)簽//$('div~p').css('backgroundColor', 'red'); });});</script> </head> <body><input type="button" name="name" value="顯示效果" id="btn" /><p>這是p標(biāo)簽第一個</p><p>這是第二個p標(biāo)簽</p><div style="width: 300px; height: 200px; background-color: Green;"><p>層中的第一個</p><p>層中的中間的<p>層中的p中的p</p></p><p>層中的第二個</p><strong><p>strong中的p</p></strong></div><p>層后面的第一個</p><strong>content</strong><p>層后面的第二個</p> </body> </html> View Code?
<!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="jquery-1.8.3.js" type="text/javascript"></script><script type="text/javascript">$(function () {$('#btn').click(function () {//層后面的第一個// $('div').next().css('color','red');//層后面所有的//$('div').nextAll().css('color','blue');//層前面的第一個//$('div').prev().css('color', 'blue');//層前面所有的// $('div').prevAll().css('color', 'blue');//兄弟元素//$('#p1').siblings().css('color', 'blue'); });});</script></head> <body><input type="button" name="name" value="顯示效果" id="btn" /><p id="p1">這是P</p><p>這是P</p><div style=" width:300px; height:200px; background-color:Yellow;"><p>這是P</p><p>這是P</p><p>這是P</p></div><strong>content</strong><p>這是P</p><p>這是P</p> </body> </html> View Code頁面上有一個ul球隊列表當(dāng)鼠標(biāo)移動到某個li上的時候改行背景顏色變紅，當(dāng)點擊某個li的時候，讓該li之前的所有l(wèi)i背景色變黃，之后的所有l(wèi)i背景色變藍(lán)。自己不變色。
<!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="jquery-1.8.3.js" type="text/javascript"></script><script type="text/javascript">//頁面上有一個ul球隊列表當(dāng)鼠標(biāo)移動到某個li上的時候改行背景顏色變紅，當(dāng)點擊某個li的時候，讓該li之前的所有l(wèi)i背景色變黃，之后的所有l(wèi)i背景色變藍(lán)。自己不變色。 $(function () {// $('#uu li').mouseover(function () {// $(this).css('backgroundColor', 'red');// }).click(function () {// // $(this).prevAll('li').css('backgroundColor', 'yellow');// // $(this).nextAll('li').css('backgroundColor', 'blue');// //第二種方式// $(this).prevAll('li').css('backgroundColor', 'yellow').end().nextAll('li').css('backgroundColor', 'blue');// }).mouseout(function () {// $(this).css('backgroundColor', '');// });// if ($('#uu1').length) { // alert('存在'); // } else { // alert('不存在'); // } });</script> </head> <body><ul id="uu"><li>熱火</li><li>騎士</li><li>馬刺</li><li>雷霆</li><li>公牛</li><li>小牛</li><li>火箭</li></ul> </body> </html> View CodeprevAll() 獲得當(dāng)前匹配元素集合中每個元素的前面的同胞元素，使用選擇器進(jìn)行篩選是可選的。
10、元素添加與移除類樣式
<!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="jquery-1.8.3.js" type="text/javascript"></script><script type="text/javascript">$(function () {$('#btn').click(function () {//為某個元素添加類選擇器的樣式$('#p1').addClass('cls');});$('#btnrem').click(function () {//移除的是所有的類樣式$('#p1').removeClass();});});</script><style type="text/css">.cls{background-color:Yellow;}.cls1{color:Blue;}p{font-size:100px;}</style> </head> <body><input type="button" name="name" value="添加樣式" id="btn" /><input type="button" name="name" value="移除樣式" id="btnrem" /><p id="p1" class="cls1">這是p</p> </body> </html> View Code <!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="jquery-1.8.3.js" type="text/javascript"></script><script type="text/javascript">$(function () {$('#btnoff').click(function () {//$('body').addClass('cls');//$('body').toggleClass('cls'); // if ($('body').hasClass('cls')) { // $('body').removeClass('cls'); // } else { // $('body').addClass('cls'); // } });});</script><style type="text/css">.cls{background-color:Black;}</style> </head> <body><input type="button" name="name" value="關(guān)燈/開燈" id="btnoff" /><p>這是p</p> </body> </html> View Code11、過濾器
<!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><style type="text/css">div{width:200px;height:100px;background-color:Orange;margin-bottom:10px;}</style><script src="jquery-1.8.3.js" type="text/javascript"></script><script type="text/javascript">$(function () {$('#btn').click(function () {// $('ul').first().css('backgroundColor','red');// $('ul :first').css('backgroundColor', 'red');// $('ul li:first').css('color','red');//偶數(shù) 但是顯示效果的時候奇數(shù)//$('ul li:even').css('color','red');//奇數(shù) 顯示效果是偶數(shù)$('ul li:odd').css('color','red');});});</script> </head> <body><input type="button" name="name" value="顯示效果" id="btn" /><ul><li>喬峰</li><li>西門吹雪</li><li>梅超風(fēng)</li><li>楊過</li><li>喬布斯</li><li>老馬</li></ul></body> </html> View Code12、按元素序號獲取元素
<!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><style type="text/css">div{width: 300px;height: 30px;background-color: Green;margin-bottom: 20px;}</style><script src="jquery-1.8.3.js" type="text/javascript"></script><script type="text/javascript">$(function () {$('#btn').click(function () {//索引獲取元素//$('div:eq(3)').css('backgroundColor','red');//索引小于3的元素//$('div:lt(3)').css('backgroundColor', 'red');//索引大于3的元素// $('div:gt(3)').css('backgroundColor', 'red');// $('div:gt(3):lt(2)').css('backgroundColor', 'red');//$(':header').css('backgroundColor', 'red'); });});</script> </head> <body><input type="button" name="name" value="顯示效果" id="btn" /><h1>第一個</h1><h2>第一個</h2><h3>第一個</h3><h4>第一個</h4><h5>第一個</h5><h6>第一個</h6><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> </body> </html> View Codetable行點誰誰變黃,siblings() 獲得匹配集合中每個元素的同胞,通過選擇器進(jìn)行篩選是可選的。
<!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="jquery-1.8.3.js" type="text/javascript"></script><script type="text/javascript">$(function () {$('#tb tr').click(function () {$(this).css('backgroundColor', 'yellow').siblings('tr').css('backgroundColor', '');});});</script> </head> <body><table border="1" id="tb" style=" cursor:pointer;"><tr><td>芙蓉姐姐</td><td>鳳姐姐</td></tr><tr><td>芙蓉姐姐</td><td>鳳姐姐</td></tr><tr><td>芙蓉姐姐</td><td>鳳姐姐</td></tr><tr><td>芙蓉姐姐</td><td>鳳姐姐</td></tr><tr><td>芙蓉姐姐</td><td>鳳姐姐</td></tr></table> </body> </html> View Code?星級評分
<!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="jquery-1.8.3.js" type="text/javascript"></script><script type="text/javascript">$(function () {$('#tb td').mouseover(function () {$(this).text('★').prevAll('td').text('★');}).mouseout(function () {$('#tb td').text('☆');});});</script> </head> <body><table border="1" id="tb" style=" cursor:pointer;"><tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td></tr></table> </body> </html> View Code相對元素,$('div p').css('color','red');用相對元素實現(xiàn)('p', $('div')).css('color','red');
<!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.10.2.js"></script><script type="text/javascript">$(function () {$('#btn').click(function () {//$('div p').css('color','red'); $('p', $('div')).css('color','red');});});</script> </head> <body><input type="button" name="name" value="顯示效果" id="btn" /><div style=" width:300px; height:200px; background-color:Green;"><p>這是p</p></div> </body> </html> View Code?
轉(zhuǎn)載于:https://www.cnblogs.com/ecollab/p/6131012.html
總結(jié)
- 上一篇： 不是所有国产软件都像360一样流氓！这些
- 下一篇： 面对爱情，相当真诚的星座，将心比心，单纯