jQuery初识~~

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 //html 有参数则赋值innterhtml 无参数则取值 //css 有两个参数 则赋值style 一个参数则取值 参数为对象 则赋多个值

	$('.demo').html('miao').css('color','red').css('border','1px solid red')
    $('.demo').html('miao').css('color','red').css(
        {
            border:'1px solid red',
            color:'red'
        }
    )
    .click(function(){
        $(this).css('color','green')
    })
    console.log($('.demo').html());
    console.log($('.demo').css('color'));

    

   jq转js $(xxx)[0]/$(xxx).get(0)
    console.log($('.demo')[0].offsetTop);
    js转jq $(js_dom)
    console.log($(demo).css());


    $('.con').html('rua').css('background','blue').css('color',"red")
     .mouseenter(function(){
      $(this).css('width','200px').css('height','200px')
    })
     .mouseleave(function(){
        $(this).css('width','500px').css('height','500px')
     })

轮播图例子：

function change(){//封装change函数 改变属性
        $('img').eq(i).show().siblings().hide();
        //展示下标为i的img 隐藏其他的兄弟图片
        $('.indexes li').eq(i).addClass('active').siblings().removeClass('active')
        //给下标为i的li添加active属性 移除其兄弟元素的active属性
    }
    function run() {//封装定时器 进行轮播图
        timer = setInterval(() => {
            i++;
            if (i === 4) i = 0;
            change();
        }, 2000);
    }
    run();
    $('.indexes li').click(function () {
        clearInterval(timer)
        i = $(this).index()//定义当前i的值为点击的index
        change()
        run();
    })
    $('.right').click(function(){//点击右侧按钮 停止计时器 向后切换对应图片
        clearInterval(timer);
        if(++i===4) i=0;
        change();
        run();
    })
    $('.left').click(function(){//点击左侧按钮 停止计时器 向前切换对应图片
        clearInterval(timer);
        if(--i===-1) i=3;
        change();
        run();
    })
    

菜单切换效果：

$('.menu li').click(function(){
        // console.log(this);
        $(this).addClass('active').siblings().removeClass('active')
        //jq 添加类：addClass、删除类：removeClass、siblings兄弟元素
        let index=$(this).index()//获取当前元素下标
        $('.content li').eq(index).show().siblings().hide()
        //展示下标为index的li 隐藏其他的兄弟li
    })