jQuery常用方法和練習(xí)例子

要點：

? ? 1匣沼、jQuery方法內(nèi)置循環(huán):

? ? ? ? ? ? $('div').css('backgroundColor','red'):給所有DIV標(biāo)簽添加紅色背景

? ? 2、this出現(xiàn)在jQuery的function中浸船，代表循環(huán)時玫锋，當(dāng)前正在處理的DOM對象

? ? 3滓走、$(this)，把當(dāng)前DOM對象轉(zhuǎn)換在JQuery迫肖，以便使用jQuery方法

? ? 4锅劝、隱式條件判斷語句：

? ? ? ? ? ? ? ? var result=條件表達(dá)式?真返回值:假返回值;

? ? 5、each(function) 對象的每個元素都做操作蟆湖。

? ? 收藏：jQuery樣式故爵。https://www.layui.com/demo/rate.html

常用方法：

? ? 1、篩選器：

? ? next('篩選條件')? ? 當(dāng)前的下一個

? ? nextAll('篩選條件')? ? 當(dāng)前的后面所有

? ? nextUntil('篩選條件')? ? 從下一個隅津，到滿足'篩選條件'的前一個標(biāo)簽诬垂，

? ? prev('篩選條件')? ? 當(dāng)前的上一個

? ? prevAll('篩選條件')? ? 當(dāng)前位置前面的所有同級標(biāo)簽

? ? prevUntil('篩選條件')? ? 從上一個，到滿足‘篩選條件’的前一個標(biāo)簽

? ? parent('篩選條件')? ? 父標(biāo)簽

? ? parents('篩選條件')? ? 向上一直找伦仍，直到html

? ? parentsUntil('篩選條件')? ? 向上一直找到'滿足篩選條件的標(biāo)簽'

? ? children('篩選條件')? ? 子標(biāo)簽

? ? siblings('篩選條件')? ? 除自已外结窘，其它兄弟標(biāo)簽

? ? find('篩選條件')? ? ? ? 遍歷自已包含的所有標(biāo)簽，找到‘符合條件的所有標(biāo)簽’

? ? first()? ? ? ? ? ? ? ? ? ? 結(jié)果里的第一個

? ? last()? ? ? ? ? ? ? ? ? ? 結(jié)果里的最后一個

? ? eq(數(shù)值)/ eq('數(shù)值')? ? ? ? 結(jié)果的表列里充蓝，第幾個值

? ? 2隧枫、內(nèi)容方法：

? ? ? ? text()? ? 取值/賦值喉磁，無參數(shù)，獲取文本內(nèi)容官脓；text('this a text'),賦值

? ? ? ? html()? ? 取值/賦值协怒，無參數(shù)，獲取文本內(nèi)容卑笨；text('<p>this is a html</p>'),賦值

? ? ? ? val()? ? ? input標(biāo)簽孕暇，取值/賦值，無參數(shù)赤兴，獲取value妖滔；val('value新值'),賦值。jQuery版本3以前桶良，checkbox和radio會出現(xiàn)不同步座舍，必須使用prop? ? ? ?

? ? ? ? prop(屬性，值)? ? 設(shè)置或返回被選元素的屬性和值艺普。使用字典同時多值簸州，設(shè)置：prop('checked','checked')，獲取屬性值：prop('checked')歧譬，結(jié)果undefine，代表沒有此屬性搏存。

? ? ? ? attr(屬性瑰步，值)? ? ? 設(shè)置被選元素的屬性和值¤得撸可以接受字典值缩焦。

? ? ? ? prop與attr區(qū)別：prop? 對于HTML元素本身就帶有的固有屬性? attr? 對于HTML元素我們自定義的加在標(biāo)簽中的屬性。?

? ? ? ? 具有 true 和 false 兩個屬性的屬性责静，如 checked, selected 或者 disabled 使用prop()

? ? $("img").attr("width",function(n,v){? ? ? ? \\n當(dāng)前對象在篩選器里的索引袁滥，v是獲取到width的值。

? ? ? return v-50;

? ? });

? ? <img src='https://static2.51cto.com/51cto/cms/homepage/2015/images/logo.gif' width='500px' />

? ? 3灾螃、樣式方法：

? ? ? ? hasClass('樣式名')? ? ? ? ? ? 判斷是否包含樣式名

? ? ? ? addClass('樣式名'):? ? ? ? ? 添加calss樣式

? ? ? ? removeClass('樣式名'):? ? 刪除class樣式

? ? ? ? toggleClass('樣式名'):? ? 不存在則添加题翻，存在則刪除

? ? 4、文檔處理：

? ? ? ? append(htmlstring) :在指定標(biāo)簽內(nèi)部的最后添加內(nèi)容

? ? ? ? prepend(htmlstring):在指定標(biāo)簽內(nèi)部的最前面添加內(nèi)容

? ? ? ? after(htmlstring):在指定標(biāo)簽結(jié)束符后腰鬼，外面添加

? ? ? ? before(htmlstring):在指定標(biāo)簽開始符前嵌赠，外面添加

? ? ? ? remove()：刪除當(dāng)前元素

? ? ? ? empty():清空所有子元素

? ? ? ? clone()：返回復(fù)制的元素html

? ? ? //添加

? ? ? $('#s1').click(function(){

? ? ? ? var s='<li>我是新來的</li>';

? ? ? ? $('#uli').after(s)

? ? ? })

? ? ? //remove()

? ? ? $('#r1').click(function(){

? ? ? $('#uli').remove();)}

? ? ? //empty();清空所有子元素

? ? $('#e1').click(function(){

? ? ? $('#uli').empty();

? ? })

? ? //clone，復(fù)制id=uli的元素熄赡，并追加到body

? ? $('body').append($('#uli').clone())

? ? 5姜挺、鼠標(biāo)坐標(biāo)

? ? ? ? scrollTop(值) 設(shè)置/獲取當(dāng)前對象的滾動條上下位置。

? ? ? ? scrollLeft(值) 設(shè)置/獲取當(dāng)前對象的滾動務(wù)左右位置彼硫。

? ? ? ? offset().left? ? 獲取元素左上角的當(dāng)前X坐標(biāo)

? ? ? ? offset().top? ? 獲取元素左上角的當(dāng)前Y坐標(biāo)

? ? ? ? offset({left:0,top:0})? ? ? ? 設(shè)置當(dāng)前元素的坐標(biāo)

? ? ? ? event.x? ? 獲取鼠標(biāo)當(dāng)前X坐標(biāo)

? ? ? ? event.y? ? 獲取鼠標(biāo)當(dāng)前Y坐標(biāo)

? ? ? $(document.body).mousemove(function(){

? ? ? ? $('#xx').text(event.x);

? ? ? ? $('#yy').text(event.y);

? ? ? })

? ? ? $('#divmove').offset({left:100,top:100})

? ? 6炊豪、jQuery綁定四種事件凌箕。

? ? ? ? 直接綁定:.click

? ? ? ? bind綁定：

? ? ? ? ? ? $('c1').bind('click',function(){....})

? ? ? ? delegate/undelegate綁定：在jQuery1.7中 .delegate()已被.on()取代

? ? ? ? ? ? $('c1').delegate('a','click',function(){ .... })

? ? ? ? ? ? $( elements ).delegate( selector, events, data, handler );

? ? ? ? on/off綁定

? ? ? ? ? ? $( elements ).on( events, [selector], data, handler );

? ? ? ? ? ? $('c1').on('click',function (){...})

<style>

? ? .d1{

? ? ? ? height:300px;

? ? ? ? width:300px;

? ? ? ? border:1px solid sandybrown;

? ? }

? ? .d2{

? ? ? ? height:200px;

? ? ? ? width:200px;

? ? ? ? margin:40px 40px;

? ? ? ? border:1px solid rebeccapurple;

? ? }

</style>

? ? <div class="d2">

? ? ? ? <span>lala</span>

? ? </div>

</div>

? ? $('.d1').on('click','span',function(){

? ? ? ? alert($(this).text())

? ? })

</script>

? ? 7、元素高度和寬度：

? ? ? ? image.png

? ? ? ? height/width:獲取/設(shè)置元素高度/寬度-內(nèi)容高词渤、寬

? ? ? ? innerHeight/innerWidth:獲取/設(shè)置元素高度/寬度-內(nèi)容高\寬+padding

? ? ? ? outerHeight/outerWidth:獲取/設(shè)置元素高度/寬度-內(nèi)容高\寬+padding+border

? ? ? ? outerHeight(true)/outerWidth(true):獲取/設(shè)置元素高度/寬度-內(nèi)容高\寬+padding+border+margin

<style>

? ? #out{

? ? ? ? height:300px;

? ? ? ? width:300px;

? ? ? ? border:10px solid darkred;

? ? ? ? padding:20px;

? ? }

? ? #in{

? ? ? ? height:100px;

? ? ? ? width:100px;

? ? ? ? border:10px solid rebeccapurple;

? ? ? ? padding:5px;

? ? ? ? margin-top:30px;

? ? }

</style>

? ? <div id="in">

? ? ? ? <span id="nei">

? ? ? ? ? ? lalalalala

? ? ? ? </span>

? ? </div>

</div>

? ? var height_in=$('#in').width();

? ? t="height:"+height_in+'<br>';

? ? height_in=$('#in').innerWidth();

? ? t=t+"height:"+height_in+'<br>';

? ? height_in=$('#in').outerHeight();

? ? t=t+"height:"+height_in+'<br>';

? ? height_in=$('#in').outerHeight(true);

? ? t=t+"height:"+height_in+'<br>';

? ? $('#nei').html(t);

</script>

? ? ? ? 8牵舱、return false阻止事件發(fā)生

? ? ? ? ? ? 以下程序，不跳轉(zhuǎn)到href這個網(wǎng)址

? ? <div class="d2">

? ? ? ? <a onclick="return doNot()" >lala</a>

? ? </div>

</div>

? ? function doNot(){

? ? ? ? alert($('a').text());

? ? ? ? return false;

? ? }

</script>

? ? ? ? 9掖肋、jquery擴展

? ? ? ? ? ? .extend

? ? ? ? ? ? .fn.extend

1仆葡、左側(cè)彈出菜單，點擊出現(xiàn)子菜單志笼，其它隱藏

? ? HTML

? <div id='f1'>

? ? <div id='m1' class='bg'>菜單一</div>

? ? ? <ul>

? ? ? ? <li>sub11</li>

? ? ? ? <li>sub12</li>

? ? ? ? <li>sub13</li>

? ? ? </ul>

? ? <div id='m2' class='bg'>菜單二</div>

? ? ? <ul>

? ? ? ? <li>sub21</li>

? ? ? ? <li>sub22</li>

? ? ? ? <li>sub23</li>

? ? ? </ul>

? ? <div id='m3' class='bg'>菜單三</div>

? ? ? <ul>

? ? ? ? <li>sub31</li>

? ? ? ? <li>sub32</li>

? ? ? ? <li>sub33</li>

? ? ? </ul>

? </div>

? ? jQuery:

? <script>

? ? $(document).ready(function (){$('.bg').next().hide()});? ? ? ? ? ? ? ? ? ? //文檔加載完隱藏所有標(biāo)簽

? ? $('.bg').click(function(){$(this).next().toggle().siblings('ul').hide()}) //點擊展開沿盅，再點隱藏效果，鏈?zhǔn)骄幊獭?/p>

? </script>

2纫溃、彈出窗口,窗口其它元素不可操作腰涧。點叉關(guān)閉

? ? CSS樣式

? ? .header-menu{

? ? ? display:inline-block;

? ? ? margin-right:20px;

? ? ? height:40px;

? ? }

? ? .zhezhao{

? ? ? display:none;

? ? ? position:fixed;

? ? ? left:0;

? ? ? top:0;

? ? ? right:0;

? ? ? bottom:0;

? ? ? background-color:gray;

? ? ? z-index:8;

? ? ? opacity:0.7;

? ? }

? ? .regedit{

? ? ? display:none;

? ? ? width:400px;

? ? ? height:600px;

? ? ? position:fixed;

? ? ? background:white;

? ? ? left:50%;

? ? ? top:50%;

? ? ? margin-left:-200px;

? ? ? margin-top:-300px;

? ? ? z-index:9;

? ? }

? ? .login{

? ? ? display:none;

? ? ? width:400px;

? ? ? height:400px;

? ? ? position:fixed;

? ? ? background:white;

? ? ? left:50%;

? ? ? top:50%;

? ? ? margin-left:-200px;

? ? ? margin-top:-300px;

? ? ? z-index:9;

? ? }

? ? .divouter{

? ? ? width:100%;

? ? ? background:gray;

? ? ? text-align:right;

? ? }

? ? .close_flag{

? ? ? padding-right:10px;

? ? ? padding-top:10px;

? ? ? width:30px;

? ? }

? ? .show{

? ? ? display:block;

? ? }

? ? HTML

?

? <div class='header'>

? ? <span id='regedit' name='regedit' class='header-menu'>注冊</span>

? ? <span id='login'? name='login' class='header-menu'>登陸</span>

? </div>

?

? <div class='zhezhao'></div>

?

? <div class='regedit'>

? ? <div class='divouter'>

? ? ? <span id='hide' name='regedit' class='close_flag'>?<span>

? ? </div>

? </div>

?

? <div class='login'>

? ? <div class='divouter'>?

? ? ? <span id='hide' name='login' class='close_flag'>?<span>

? ? </div>

? </div>

? ? jQuery

? ? //顯示注冊/登陸框

? ? $('.header-menu').click(function(){

? ? ? $('.zhezhao').addClass('show');

? ? ? var sh = $(this).attr('name');? ? ? ? //使用獲取到的屬性值進(jìn)行二次定位紊浩，達(dá)到動態(tài)效果窖铡。

? ? ? var s='.'+sh;

? ? ? $(s).addClass('show');? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

? ? })

? ? //關(guān)閉顯示/登陸框

? ? $('.close_flag').click(function(){

? ? ? $('.zhezhao').removeClass('show');

? ? ? var hi=$(this).attr('name');

? ? ? var h='.'+hi;

? ? ? $(h).removeClass('show');

? ? })

3、鼠標(biāo)移入和移出背景變色：

? ? HTML：

? <style>

? ? .header{

? ? ? background-color:#1c97f5;

? ? ? height:40px;

? ? ? width:100%;

? ? ? min-width:960px;

? ? ? margin:0 auto;

? ? ? line-height:40px;

? ? ? text-align:right;

? ? }

? ? .header-menu{

? ? ? display:inline-block;

? ? ? margin-right:20px;

? ? ? height:40px;

? ? }

? </style>

? <div class='header'>

? ? <span class='header-menu'>注冊</span>

? ? <span class='header-menu'>登陸</span>

? </div>

? ? jQuery：

? ? $('.header-menu').mouseover(function(i,v){$(this).css({'backgroundColor':'#2550aa','color':'white'})})

? ? $('.header-menu').mouseout(function(i,v){$(this).css({'backgroundColor':'','color':''})})

4坊谁、TAB式菜單：

? ? HTML

? <style>

? ? .tab_div{

? ? ? background:gray;

? ? ? height:30px;

? ? ? width:100%;

? ? }

? ? .tab_div span{

? ? ? color:white;

? ? ? line-height:30px;

? ? ? display:inline-block;

? ? ? height:30px;

? ? ? padding-right:10px;

? ? ? padding-left:10px;

? ? }

? ? .tab_content{

? ? ? display:none;

? ? ? position:absolute;

? ? ? background:#dde0e3;

? ? ? width:100%;

? ? ? top:52px;

? ? ? bottom:0px;

? ? }

? ? .tab_over{

? ? ? background-color:#4e5154;

? ? }

</style>

? ? <div class='tab_div'><span id='t1'>標(biāo)簽一</span><span id='t2'>標(biāo)簽二</span><span id='t3'>標(biāo)簽三</span>

? ? </div>

? ? <div id='tab_content'>

? ? ? <div name='t1' class='tab_content'>111111</div>

? ? ? <div name='t2' class='tab_content'>2222222</div>

? ? ? <div name='t3' class='tab_content'>333333</div>

? ? </div>

? ? jQuery

? ? //tab菜單腳本费彼，實現(xiàn)方法千千萬~這里沒有選擇Addclass，因為class有前后定義的毛病~

? ? ? $("[name='t1']").show()

? ? ? $('.tab_div').children().mouseover(function(){

? ? ? ? $(this).addClass('tab_over').siblings().removeClass('tab_over');

? ? ? ? var d=$(this).addClass('tab_over').attr('id');

? ? ? ? var n = "[name='"+d+"']"

? ? ? ? $(n).show().siblings().each(function(){

? ? ? ? ? $(this).hide()

? ? ? ? })

? ? ? });

? ? //方案二：可以刪除子菜單ID口芍，省代碼~更簡潔~

? ? ? $(document).ready(function(){

? ? ? ? $(".tab_div").children().mouseover(function(i){

? ? ? ? ? $(this).addClass('tab_over').siblings().removeClass('tab_over');

? ? ? ? ? $('.tab_content').eq($(this).index()).show().siblings().hide();

? ? ? ? })

? ? ? })

5箍铲、點贊動態(tài)效果

? ? html:

<style>

? ? #zan{

? ? position: relative;

? ? width: 30px;

? ? cursor:pointer;

? ? }

? ? .jiayi{

? ? ? ? ? color:red;

? ? ? ? ? position:absolute;

? ? ? ? }

</style>

? ? jQuery:

? ? $(document).ready(function () {

? ? ? ? $('#zan').click(function(){

? ? ? ? ? ? var font_size=14;

? ? ? ? ? ? var top=0;

? ? ? ? ? ? var right=0;

? ? ? ? ? ? var opacity=1;

? ? ? ? ? ? var ta=document.createElement('span');

? ? ? ? ? ? ? ? ? ? ? ? $(ta).addClass('jiayi');

? ? ? ? ? ? $(ta).css('font-size',font_size+'px');

? ? ? ? ? ? $(ta).css('top',top+'px');

? ? ? ? ? ? $(ta).css('right',right+'px');

? ? ? ? ? ? $(ta).css('opacity',opacity);

? ? ? ? ? ? $(ta).text('+1');

? ? ? ? ? ? $(this).append(ta);

? ? ? ? ? ? var inter=setInterval(function(){

? ? ? ? ? ? ? ? font_size+=1;

? ? ? ? ? ? ? ? top-=2;

? ? ? ? ? ? ? ? right-=2;

? ? ? ? ? ? ? ? opacity-=0.1;

? ? ? ? ? ? ? ? $(ta).css('font-size',font_size+'px');

? ? ? ? ? ? ? ? $(ta).css('top',top+'px');

? ? ? ? ? ? ? ? $(ta).css('right',right+'px');

? ? ? ? ? ? ? ? $(ta).css('opacity',opacity);

? ? ? ? ? ? ? ? if (opacity<0){

? ? ? ? ? ? ? ? ? ? $(ta).remove();

? ? ? ? ? ? ? ? ? ? clearInterval(inter);

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },20)

? ? ? ? });

? ? })

</script>

6、注冊框判斷是否為空鬓椭，為空返回并提示：

? ? ? ? 本質(zhì)是用return跳出函數(shù)颠猴，并給標(biāo)簽返回一個False。

? ? ? ? HTML

? <span id='regedit' name='regedit' class='header-menu'>注冊</span>

? <span id='login'? name='login' class='header-menu'>登陸</span>

</div>

? <div class='regedit'>

? ? <div class='divouter'>

? ? <span id='hide' name='regedit' class='close_flag'>?</span>

? </div>

? <div>

? ? ? <table >

? ? ? ? ? <tbody id="reg_tb">

? ? ? ? ? ? ? <tr>

? ? ? ? ? ? ? ? ? <td>用戶名：</td>