jquery基础知识

最新推荐文章于 2022-08-25 23:22:41 发布

qq_40153458

最新推荐文章于 2022-08-25 23:22:41 发布

阅读量52

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_40153458/article/details/115681964

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="query.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <div class="a"></div>
    <div id="b"></div>
    <p></p>
    <ol>
        <li></li>
    </ol>
    <a href="#">b b </a>
    <div index="1" data-index="2">我是div</div>
    <input type="text" value="请输入内容">
    <span></span>

    <script>
       //选择器
        $('div')
        $('.a')
        $('#b')
        $('*')
        $('div,p')
        $('ol>li')
        $('ol li')
        
        $('li:first')
        $('li:last')
        $('li:eq(2)')
        $('li:odd')
        $('li:even')

        $('li').parent()
        $('ol').children('li')
        $('ol').find('li')
        $('ol').siblings('li')
        $('p').nextAll('li')
        $('p').prevAll('li')
        $('div').hasClass('a')
        $('div').eq(2)

        //属性样式
        $('a').prop('href','http://www.baidu.com')
        $('a').attr('index','11')
        $('a').data('index','22')
        $("div").html()
        $("div").text("123")
        $("input").val("123");


        $('div').css('background','red')

        $('p').addClass('a')
        $('p').removeClass('a')
        $('p').toggle('a')

        //元素
        var li = $('<li></li>')
        $('ol').append(li)
        $('ol').prepend(li)

        var div = $("<div>112</div>");
        $('.a').before(div)
        $('.a').after(div)

        $('span').remove()
        $('ul').empty()
        $('ul').html('')

        //宽高
           // 1. width() / height() 获取设置元素 width和height大小 
           $("div").width()
           $("div").width(300);
            // 2. innerWidth() / innerHeight()  获取设置元素 width和height + padding 大小 
          $("div").innerWidth()

            // 3. outerWidth()  / outerHeight()  获取设置元素 width和height + padding + border 大小 
           $("div").outerWidth()

            // 4. outerWidth(true) / outerHeight(true) 获取设置 width和height + padding + border + margin
           $("div").outerWidth(true)

        //位置
        $("div").offset()
        $("div").offset().top
        $("div").offset().left
        $("div").offset({
            top: 200,
            left: 200 
        })

        $("div").position()
        $("div").position().top
        $("div").position().left
      
        $("div").scrollTop()
        $("div").scrollLeft()
        $("div").scrollTop(100)

        //事件
        $('div').click(fn)
        $('div').on({
        'click':fn1 ,
        'mouseover':fn2 
        })
        $('div').on('click mouseover',fn1)

        $('ul').on('click','li',fn)

        $('div').one('click',fn)

        $("div").off(); 
        $("div").off("click");
        $("ul").off("click", "li");
        //自动触发
        //触发默认行为
        $("div").click()
        $("div").trigger("click")
        //不触发默认行为
         $("div").triggerHandler("click");

        //效果
        $('div').hide(100,'linear',fn)
        $('div').show(100,'swing',fn)
        $('div').toggle(100,fn)

        $('div').slideDown(100,'linear',fn)
        $('div').slideUp(100,'swing',fn)
        $('div').slideToggle(100,fn)

        $('div').fadeIn(100,'linear',fn)
        $('div').fadeOut(100,'swing',fn)
        $('div').fadeToggle(100,fn)
        $('div').fadeTo(100,0.3,'linear',fn)

        $('div').animate({
        left: 500,
        top: 300,
        opacity: .4,
        width: 500
        },100,fn)

        $('div').hover(fn1,fn2)
                               
        $('div').stop().show(100,'swing',fn) // stop 方法必须写到动画的前面
        
        function fn(){}
        function fn1(){}
        function fn2(){}





    </script>

</body>

</html>