初學jQuery使用方法

標籤：對象   log   元素   參考   round   滾動   ogg   fse   回調   

jQuery引用

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>//先引用jQuery源包    <script>        $("p:odd").html("偶數標籤");//對標籤叫用作業    </script>//even奇數；gt()大於；lt(小於)

jQuery方法

jQuery完整使用方法參考http://jquery.cuishifeng.cn/手冊

擷取元素

$(‘#tag-p i‘).eq(0).html(‘<h1>good<h1>‘);//選擇對應的索引值去修改1$(‘#tag-p i:eq(1)‘).html(‘<h1>good<h1>‘);//選擇對應的索引值去修改2

js和jQuery互換

var tp = document.getElementById("tag-p");//jsvar $tp = $(‘#tag-p‘);//jQueryvar $tpi = $(‘#tag-p i‘)alert($tp);//通過jQuery擷取元素返回jQ對象,通過原生js擷取返回js對象$(tp).html("js轉jQ");//js轉jQalert($tp.get(0).innerHTML = "jq轉js");//jQ轉js$tp[0].innerHTML = "jq轉js";//第二種方法alert($tpi.html());//預設擷取是第一個元素

css操作

$(‘img‘).attr("src");//擷取元素屬性$(‘p‘).addClass("on");//為標籤添加樣式$(‘p‘).toggleClass("on");//反向添加樣式，如果有則清除，沒有則添加var $p = $(‘p‘);//統一添加樣式        $p.css({            "background":"pink",//第一種書寫形式            width:300,//第二種書寫形式            "height":"30px"    });    alert($(‘#box‘).offset().left);//彈出左邊距離alert($(‘#box‘).position().top);//彈出定位的距頂端距離alert($(‘#box‘).outerWidth());//彈出包括外邊距$(window).scroll(function(){            console.log( $(window).scrollTop() );        })//滾動屬性，即時列印出滾動距離        $(‘.box2‘).appendTo($(‘#box‘));//將前面的元素添加到後面元素裡$(‘#box‘).css("background","green").find(‘.box3‘).css("background","skyblue").siblings().css("background","orange");//除了box3為skyblue顏色，其他為orange//on的作用$(‘#list li‘).click(function(){            alert( $(this).index() );        })//點擊元素彈出索引值$(‘#list‘).on(‘click‘,‘li‘,function(){            alert( $(this).index() );        } );//on事件對新增加的元素li也起作用$(‘#list‘).append("<li>4</li>").append("<li>5</li>");//在後面增加元素

效果

$(‘#btn‘).click(function(){            $(‘#box‘).hide(2000).show(1000);//用2000ms的速度隱藏樣式,並在1000ms內還原        })$(‘#btn‘).click(function(){            $(‘#box‘).hide(2000,function(){                $(this).show(‘fast‘);            });//使用回呼函數的方法實現效果，效果與上面一樣        })$(‘#btn‘).click(function(){            $(‘#box‘).toggle(‘fast‘);        });//逆向變換*///建立自訂動畫函數（animate）$(‘#box‘).hover(function(){            $(this).stop(true,flase).animate({                "width":‘600px‘,                "border-radius":"150px"            },1000);        },function(){            $(this).stop(true,false).animate({                "width":"150px",                "baorder-radius":"0"            },2000)        })

註：效果實現方法有多中，具體可參考jQuery文檔

初學jQuery使用方法