美文网首页
jQuery:属性操作,特殊效果,层级菜单,动画,循环

jQuery:属性操作,特殊效果,层级菜单,动画,循环

作者: 寻_4533 | 来源:发表于2019-06-16 20:18 被阅读0次

    //属性操作

    // $(function () {

    //    $('.box').html('百度网');//写入内容

    //.html对应的是innerHTML可查可写

    //    $('.box').attr({//attr用于读写一般的属性值

    //        title:'这是一个div'

    //    });//写入

    //    // alert($('.box').attr('class'));//读取类

    //    var $sre = $('#img1').attr('src');

    //    alert($src);

    //    $('#img1').attr({

    //        src:'img/3.png',

    //        alt:'mao'

    //    });

    //prop用于操作多选单选

    //    alert($('#check').prop('checked'));//多选框 默认勾选返回true 否则false .prop只能操作多选框

    //    $('#check').prop({

    //        checked:'true'

    //    });

    //    alert($('.box').text());//获取纯文本

    //html方法获取的是整个标签里的内容 text只能获取里边的纯文字

    // })

    //特殊效果

    // $(function () {

    //  $('#btn').click(function () {

    //      $('.box').fadeOut();//淡出

    //      $('.box').fadeIn();//淡入

    //      $('.box').fadeToggle();//淡入淡出的切换;

    //      $('.box').show();//显示

    //      $('.box').hide();//隐藏

    //      $('.box').toggle();//切换显示隐藏

    //      // .slideDown()下展

    //      //    .slideUp()上收

    //      //    .slideToggle()切换上收下展

    //  })

    // })

    //

    //层级菜单

    $(function () {

    $('.level1').click(function () {

    $(this).next().slideDown().parent().siblings().children('ul').slideUp();

        })

    });

    //动画

    // $(function () {

    //    $('#div1').animate({width:200,height200},1000, function () {//动画,匀速 一秒

    //        // alert('动画执行完了')

    //        $(this).animate({marginLeft:500},1000);//能无限嵌套

    //    });

    // })

    //循环

    $(function () {

    // $('.list li').html('111');

    // $('.list li').css({

    //    background:'yellow'

    // });

        $('.list li').each(function (index) {//each方法 传参第一个参数永远是索引值

    // alert(index);

            $(this).html(index);//写入索引值

        })

    })

    相关文章

      网友评论

          本文标题:jQuery:属性操作,特殊效果,层级菜单,动画,循环

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