美文网首页程序员
jquery入门指南(二)

jquery入门指南(二)

作者: 经典de1956 | 来源:发表于2016-12-01 23:43 被阅读0次

    toggle:如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。
    语法:$(selector).toggle(speed,callback,switch)

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

    动画:animate
    --推荐使用

    样式:
    .css('width'); //获取一个样式,带单位 200px
    .css('background','yellow'); //设置一个样式
    .css({'background':'yellow','width':200}); 设置多个样式

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

    属性:
    .attr('属性名') //获取一个属性
    .attr('name','value'); //设置一个属性
    .attr({
    name1:'v1',
    name2:20
    }) //批量设置属性

    class操作:
    addClass
    removeClass

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

    内容操作:
    非表单元素的内容:
    .html() 获取innerHTML
    .html(设置的内容) 设置
    表单标签:
    .val() 获取内容
    .val(设置的内容) 设置

    <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对象的属性和方法, 不能 直接用于 原生对象
      原生 对象转化为 jquery 对象 $(原生)
      jquery对象转化为 原生对象 $( )[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对象实现各种操作.

    <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>
    

    兄弟节点:siblings
    函数用于选取每个匹配元素的所有同辈元素(不包括自己),并以jQuery对象的形式返回。如果没有符合条件的元素,则返回空的jQuery对象。

    相关文章

      网友评论

        本文标题:jquery入门指南(二)

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