3、屬性

例子說明：用經(jīng)典的全選按鈕來說明用法。

    
    


    

        
        
        
        
            
            
                
                    1
                
                
                    2
                
                
                    3
                
            
        
    

    
    
        function Select(){
            //$('#tb1') 找到id為tb1的元素
            //.find(':checkbox')    該元素下所有類型為checkbox的input元素
            //.prop('checked',true) 并添加屬性checked=true
            $('#tb1').find(':checkbox').prop('checked',true);
        }

        function Reverse(){
            //反選函數(shù)的作用是：選中的變成不選中，不選中的變成選中
            $('#tb1').find(':checkbox').each(function(){    //找到id為tb1標(biāo)簽下所有的類型為checkbox的元素進(jìn)行循環(huán)
                var content = $(this).next();   //查找被循環(huán)元素的下一個(gè)元素
                console.log($(content).text()); //獲取該元素的文本內(nèi)容
                if($(this).prop('checked')){    //判斷是否已經(jīng)選中：this代表的就是正在被循環(huán)的元素，獲取其checked屬性的值
                    $(this).prop('checked',false);          //為該元素添加屬性
                    $(content).text('選中的變成不選中');    //修改該元素的文本內(nèi)容
                }else{
                    $(this).prop('checked',true);
                    $(content).text('不選中的變成選中');
                }
            })
        }

        function Cancel(){
            $('#tb1').find(':checkbox').prop('checked',false);  //添加屬性checked=false，也就是不選中
        }
    

4、CSS

例子說明：使用大多數(shù)網(wǎng)站都有用到的“回到頂部”按鈕來舉例。

    
    


    
這是頂部

    
    
這是底部


    
    
        /*
        scrollTop用法：
        讀取：$("選擇器").scrollTop()     //獲取當(dāng)前滾動(dòng)條距離選擇器頂部距離
        設(shè)置：$("選擇器").scrollTop(1000) //設(shè)置滾動(dòng)條距離選擇器頂部距離為1000px；
        其他知識(shí)點(diǎn)：
        $(window).height();     //獲取當(dāng)前瀏覽器可視部分的高度，也就是說在瀏覽器窗口改變大小時(shí)，這個(gè)值也會(huì)改變;
        $(document).height();   //獲取整個(gè)頁面的高度(包含不可視部分)，這個(gè)值是固定的，不會(huì)隨瀏覽器窗口大小而改變;
         */
         
        function GoTop(){
            $(document).scrollTop(0);     //設(shè)置滾動(dòng)條距離當(dāng)前頁面頂部的距離為0，也就達(dá)到返回頂部的效果
            var bcolor = $('#d1').css('background-color');  //獲取id為d1的元素的background-color樣式屬性的值
            console.log(bcolor);
            $('#d1').css('background-color','blue');       //設(shè)定id為d1的元素的background-color樣式屬性的值為green
        }

        function GoBottom(){
            var dpx = $(document).height();     //獲取當(dāng)前頁面的高度
            var wpx = $(window).height();       //獲取當(dāng)前瀏覽器窗口的高度
            console.log(dpx);
            console.log(wpx);
            $(window).scrollTop(dpx);           //設(shè)置滾動(dòng)條距離當(dāng)前頁面頂部的距離為當(dāng)前頁面的高度，也就達(dá)到返回底部的效果
            $('#d1').css('background-color','green');
        }