jquery入門指南(二)

toggle:如果被選元素可見,則隱藏這些元素,如果被選元素隱藏,則顯示這些元素。
語法:$(selector).toggle(speed,callback,switch)

淡入淡出: fadeIn fadeOut
下拉顯示: slideUp slideDown
--不推薦使用

動畫:animate
--推薦使用

樣式:
.css('width'); //獲取一個樣式,帶單位 200px
.css('background','yellow'); //設(shè)置一個樣式
.css({'background':'yellow','width':200}); 設(shè)置多個樣式

 <script src="js/jquery-1.7.2.js"></script>
    <script>
        $(function(){
            alert($('div').eq(0).css('width'));
        });
    </script>

屬性:
.attr('屬性名') //獲取一個屬性
.attr('name','value'); //設(shè)置一個屬性
.attr({
name1:'v1',
name2:20
}) //批量設(shè)置屬性

class操作:
addClass
removeClass

<script src="js/jquery-1.7.2.js"></script>
    <script>
        $(function(){
            $('#btn1').click(function(){
                //$('#div1').addClass('aa');
                $('#div1').removeClass('aa');
            });
        });
    </script>

內(nèi)容操作:
非表單元素的內(nèi)容:
.html() 獲取innerHTML
.html(設(shè)置的內(nèi)容) 設(shè)置
表單標簽:
.val() 獲取內(nèi)容
.val(設(shè)置的內(nèi)容) 設(shè)置

<script src="js/jquery-1.7.2.js"></script>
    <script>
        $(function(){
            $('#btn1').click(function(){
                //alert($('#div1').html());
                $('#div1').html('123456789');
            });
        });
    </script>
<body>
<input type="button" id="btn1" value="aaaa">
<div id="div1">123</div>

原生對象 jquery對象

  • 原生對象的屬性和方法,不能直接用于 jquery對象
  • jquery對象的屬性和方法, 不能 直接用于 原生對象
    原生 對象轉(zhuǎn)化為 jquery 對象 $(原生)
    jquery對象轉(zhuǎn)化為 原生對象 $( )[0]

索引:
.index();

<script src="js/jquery-1.7.2.js"></script>
    <script>
        $(function(){
            alert($('.on').index());
        });
    </script>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li class="on"></li>
        <li></li>
        <li></li>
    </ul>
</body>

鏈式操作:分步驟地對jQuery對象實現(xiàn)各種操作.

<script>
        $(function(){
            $('input').click(function(){
                //$('#div1').css('width',200).hide().css('height',300).show();
                $('#div1').animate({'width':200}).hide();
            });

        });
    </script>
<body>
<input type="button" value="aaa">
<div id="div1"></div>
</body>

兄弟節(jié)點:siblings
函數(shù)用于選取每個匹配元素的所有同輩元素(不包括自己),并以jQuery對象的形式返回。如果沒有符合條件的元素,則返回空的jQuery對象。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一、樣式篇 第1章 初識jQuery (1)環(huán)境搭建 進入官方網(wǎng)站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,665評論 0 44
  • jQuery基礎(chǔ)(一)——樣式篇 1-2環(huán)境搭建 1-3 jQuery HelloWorld體驗 $(docume...
    croyance0601閱讀 1,162評論 0 8
  • 原文鏈接 http://blog.poetries.top/2016/10/20/review-jQuery 關(guān)注...
    前端進階之旅閱讀 16,940評論 18 503
  • 第一章 jQuery簡介 1-1 jQuery簡介 1.簡介 2.優(yōu)勢 3.特性與工具方法 1-2 環(huán)境搭建 進入...
    mo默22閱讀 1,773評論 0 11
  • 我用了兩年的時間,完成了所謂的在該有的年紀做的該做的事情,戀愛、結(jié)婚、生子……而在此之前,我只是我自己,愛...
    筱元子閱讀 225評論 0 0

友情鏈接更多精彩內(nèi)容