jQuery基础

2019独角兽企业重金招聘Python工程师标准>>>

效果

显示、隐藏

    $('#btn').click(function () { //给button添加点击事件
        
        $('#div').hide();   //隐藏div
        $('#div').show();   //显示div

        $('#div').hide('slow');   //控制隐藏动画的时长

        //设置隐藏动画的时间和回调
        $('div').hide(2000, function () {
            console.log('div is hide');
        });

        $('div').toggle(2000);  //隐藏和显示来回切换
    });

淡入、淡出

        $('div').fadeOut(); //淡出div
        $('div').fadeIn();

        $('div').fadeOut('slow'); //设置淡出时间

        $('div').fadeOut('2000', function () {
            console.log('fade out');
        });

        $('div').fadeToggle('slow');    //切换淡入、淡出效果

滑动隐藏、显示

        $('div').slideUp(); //滑动收起，隐藏元素
        $('div').slideDown(); //滑动展开，显示元素

        //收起、展开切换
        $('div').slideToggle('slow', function () {
            console.log('');
        });

动画

提示：默认地，所有 HTML 元素都有一个静态位置，且无法移动。 如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

        $('div').animate({left:'100px'});

        $('div').animate({
            left:'100px',
            width:'-=50px', //使用相对值
            height:'-=50px'});

        $('div').animate({height:'hide'}); //hide：隐藏，show:显示，toggle：隐藏、显示切换

//停止动画
   $('#stop').click(function () {
        //stop函数用于停止当前的动画序列，第一个参数控制是否清除动画队列，第二个参数控制是否立即完成动画效果
//        这两个参数默认都为false
        $('div').stop(false, true);
    })

链接方法

//将多个动画效果通过 “.” 链接在一起
$('#show').click(function () {
        $('div').css('color','red').slideUp(2000).slideDown(2000);
    });
    
    //换行显示
    $('#show').click(function () {
        $('div').css('color','red')
            .slideUp(2000)
            .slideDown(2000);
    });

 

jQuery HTML

获取标签内容、属性

    console.log($('div').text());   //text()返回标签文本内容
    print($('div').html()); //html()返回标签内容，包括HTML标记

    $('#show').click(function () {
        print($('#input').val());   //获取文本框输入的内容
    });

    print($('#input').attr('type'));    //获取标签的属性
    print($('#href').attr('href'));

设置标签内容、属性

        $('#input').val("xiaobai"); //设置文本框的内容
        $('#div').text('hello world'); //设置div文本内容
        $('#div').html('<b>nihap</b>'); //设置div文本内容,包括HTML标记
        
        
       $('#show').click(function () {
        //i是div标签的序号，original是div标签原始文本值，将函数返回值设置为div标签文本
        $('#div').text(function (i,original) {
            print(original);
            print(i);
            return 'new value' + original;
        });

        $('#href').attr({   //修改标签属性
            'href':'http://www.taobao.com',
        });
    });

添加元素

    //append、prepend是在标签内部添加元素，添加的元素属于这个标签
    $('#div').append('xiaobai');    //标签后边追加内容
    $('#div').append('<button>appendbutton</button>');  //div后添加按钮
    $('#div').prepend('<img src="./src/2.jpeg">'); //div前面添加图片
    
    //before、after是在标签外部添加元素，添加的元素不属于这个标签
    $('#div').before('good morning');   //在div标签之前添加文本
    $('#div').after('morning');         //在div标签之后添加文本
    $('#div').before('<p>this is p</p>');

删除元素、内容

        $('#div').remove(); //移除元素及子元素
        $('#div').empty();  //删除子元素以及文本内容

        $('div').remove('#div2');   //移除id=div2 的P标签
        $('div').remove();  //移除所有div标签

添加、删除类

    //定义blue类、import类
    <style>
        .blue{
            background-color: blue;
        }

        .import{
            font-weight: bold;
        }
    </style>
    
    //给标签添加类，如果标签有其他选择器，会根据选择器的优先级别显示
    <script>
    $('#btn').click(function () {
        $('#div2').addClass('blue');
        $('#div1').addClass('blue import'); //添加多个类
        $('div').addClass('import');
    });
    
    //删除类
    $('#remove').click(function () {
        $('#div1').removeClass('blue'); 
    });

    //切换 添加、删除类
    $('#toggle').click(function () {
        $('#div1, #div2').toggleClass('blue');      
    });
</script>

获取、设置CSS属性

         //获取div1的background-color
        alert($('#div1').css('background-color')); 
        
        //设置div2的背景颜色
        $('#div2').css('background-color', 'green'); 

        //设置多个css属性
        $('#div').css({'background-color':'blue', 'font-size':'30px'});

标签尺寸

width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）

innerWidth() 方法返回元素的宽度（包括内边距）
innerHeight() 方法返回元素的高度（包括内边距）

outerWidth() 方法返回元素的宽度（包括内边距和边框）
outerHeight() 方法返回元素的高度（包括内边距和边框）

outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）
outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）

jQuery遍历

获取祖先元素

        //获取div1的直接父标签，设置CSS属性
        let parent = $("#div4").parent().css("background-color", "green");

        //parents，拿到标签的所有祖先元素
        $("#div4").parents().css("background-color", "green");

        //过滤祖先元素
        $("#div4").parents("#div3").css("background-color", "green");

        //返回j介于div4和div2之间的 div4的祖先元素
        $("#div4").parentsUntil("#div2").css("background-color", "green");

获取后代元素

        //返回元素的直接子元素
        $("#div").children().css("background-color", "green");
        //过滤子元素，ID= div4的div标签
        $("#div").children("div#div4").css("background-color", "green");

        //查找div的所有后代元素
        $("#div").find("*").css("background-color", "green");

        //查找div后代元素中 class=1的标签
        $("#div").find(".1").css("background-color", "green");

兄弟元素

       //div1标签的兄弟元素
        $("#div1").siblings().css("background-color", "green");

        //div标签的下一个兄弟元素
        $("#div1").next().css("background-color", "green");

        //div标签之后的所有兄弟元素
        $("#div1").nextAll().css("background-color", "green");

        //div1 和 div2之间的兄弟元素
        $("#div1").nextUntil("#div2").css("background-color", "green");

        //div2标签上一个兄弟元素
        $("#div2").prev().css("background-color", "green");

        //div2标签之前的所有兄弟元素
        $("#div2").prevAll().css("background-color", "green");

        //div1 和 div2之间的兄弟元素
        $("#div2").prevUntil("#div1").css("background-color", "green");

过滤

       //first() 取出所有元素中的第一个
        $("#div1").siblings().first().css("background-color", "green");

        //last() 取出所有元素中的最后一个
        $("#div1").siblings().last().css("background-color", "green");

        //eq() 指定元素的序号，序号从0开始，1代表第二个元素
        $("#div1").siblings().eq(1).css("background-color", "green");

        //filter() 过滤元素
        $("#div1").siblings().filter("#div2").css("background-color", "green");

        //not()与filter相反，除了div2以外的其他元素
        !$("#div1").siblings().not("#div2").css("background-color", "green");

AJAX

load

        //从文本加载内容到div1, responseTxt:调用成功的结果内容，statusTxt：调用的状态，"success"或"error"，xhr是XMLHttpRequest对象
        $("#div1").load("./1.txt", function (responseTxt,statusTxt,xhr) {
            print(responseTxt);
            print(statusTxt);
            print(xhr);
        });

        //获取index.html中 id=p 的标签的内容，加载到div1中
        $("#div1").load("./index.html #p", function (responseTxt,statusTxt,xhr) {
            print(responseTxt, statusTxt, xhr);
        })

get

        $.get("./index.html", function (data, status) {
            console.log(status);
            console.log(data);
        })

转载于:https://my.oschina.net/mexiaobai1315/blog/1618841