美文网首页
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