初学jQuery使用方法

Posted 2021-01-01 zhuzq

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");//js
var $tp = $(‘#tag-p‘);//jQuery
var $tpi = $(‘#tag-p i‘)
alert($tp);//通过jQuery获取元素返回jQ对象,通过原生js获取返回js对象
$(tp).html("js转jQ");//js转jQ
alert($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文档