美文网首页
jQuery 基本操作

jQuery 基本操作

作者: 梦亦殇灬 | 来源:发表于2018-06-25 19:55 被阅读0次

    一、jQuery选择器

    //jquery-1.12.4.min.js  这是jQuery
    <script type="text/javascript" src="js/jquery-1.12.4.min.js">
    <script type="text/javascript">
        $(fnction(){
            $('#div1').css({color:red;})
        })
    </script>
    <body>
        <div id="div1"> 我是div</div>
    </body>
    //选择器色规则与css相同
    

    二、选择集转移

    • pre()是同级的上一个元素 preAll()是同级的上面所有元素
    • next()是同级的下一个人元素 nextAll()是统计下面的所有元素
        $('#div1').next().css.({
            color:'red',
        })
        $('#div2').nextAll('p').css({
            color:'bule'
        })
    
    • parent() 选择上一级的父元素
    • paren().parent() 获取祖级的元素 (不建议)
    • closest() 获取离自己最近的元素
    • children() 获取元素下的所有元素可以通过end()回调父元素
    • eq(2)获取索引为2的元素
    • siblings() 其他兄弟元素
    • find() 选择属性为xx的元素

    三、样式操作

    写入样式

    $('#div1').css({background:'gold'});
    

    增加样式

    .big{
        background:red;
    }//css里边的样式
    
    $('#div1').addClass('big')
    

    减少样式

    $('$iv1').removeClass('big')
    

    四、点击事件

    $(function(){
        $('#bnt').click(function(){
            $('.box').toggleClass('big')
        })
    })
    

    五、索引值

    .index() 方法

    六、作为选项卡

    利用选择集转移增加样式或者删除样式 改变

    $('#btns input').click(function(){
        $(this).addClass('cur').siblings().removeClass('cur');
    })
    

    七、属性操作

    • html() 可以读取和写入内容
    • prop() 可以读写布尔值
      alert($('#check').prop('checked'));//选中为true,非选中为false    $('#check').prop({checked:true});//设置默认勾选
      
    • attr() 可以读写非布尔值
      $('.box').attr({title:'这是一个div!'});//写入title属性,并赋值    alert($('.box').attr('class'));//读属性class的值,弹出box 
      

    八、特殊效果

    • fadeOut()淡出
    • fadeInt()淡入
    • fadeToggle()切换淡出淡入
    • hide() 隐藏元素
    • show() 显示元素
    • toggle() 切换隐藏显示
    • slideDown 向上卷起
    • slideUp 向下卷起
    • slideToggle 切换展开或者卷起元素

    九、动画

    参数:

    1.什么属性做动画,设置属性
    2.动画执行时间 单位 毫秒
    3.动画曲线
        1.swing(默认值)开始和结束慢 中间块
        2.linear 匀速
    4.回调函数 动画做完之后做的事 可无限嵌套
    
    $('#div').animate({
        width:111,
        height:111},
        100,
        function(){
            $(this).anmate(
                {marginLeft:333;}   
            });
        };
    });
    

    十、循环

    each()函数

    //一起设置
    $('.list li').css({background:red;})
    
    //循环设置
    $('.list li').each(function(indexx){
        $('this').html(index);
    })
    

    相关文章

      网友评论

          本文标题:jQuery 基本操作

          本文链接:https://www.haomeiwen.com/subject/qjhuyftx.html