jQuery

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

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

为什么使用jQuery

JS存在的痛点:

复杂的DOM操作
浏览器兼容问题
事件\动画比较复杂
网络请求存在跨域问题

jQuery的亮点:

轻松实现DOM操作
轻松解决浏览器兼容问题
轻松实现动画和事件

中文在线文档：

http://jquery.cuishifeng.cn

一个jQuery使用实例

<html>
<head>
    <meta charset="UTF-8">
    <title>使用JQuery</title>
</head>
<body>
    <div id="main">
        <div class="wordDiv">
            <p>我是一段文字</p>
        </div>
        <div class="imageDiv">
            <img src="images/img_01.jpg">
        </div>
        <div class="buttons">
            <button>显示</button>
            <button>隐藏</button>
            <button>切换（隐藏/显示）</button>
        </div>
    </div>

    <script src="js/jquery-3.1.1.js" type="text/javascript"></script>
    <script>
        //jQuery基本书写格式 $(...)

        //获取标签, 类似css方式
        var wordDiv = $('#main .wordDiv');
        var img = $('#main .imageDiv img');

        //查看获取的标签的属性
        console.log(wordDiv.attr('class'));

        //修改标签属性的值
        img.attr('src','images/img_03.jpg');

        //查看标签的文本内容
        console.log($('#main .wordDiv p').text());

        //修改标签的内容
        $('#main .wordDiv p').text('这段文字被改变了');

        //查看标签中的html内容
        console.log($('#main .imageDiv').html());

        //修改标签中的html内容
        $('#main .imageDiv').html('<img src="images/img_04.jpg">');

        //事件
        //按钮点击后隐藏或显示图片
        $('button').eq(0).on('click',function () {
            $('#main .wordDiv p').show();
            $('#main .imageDiv img').show();
        });

        $('button').eq(1).on('click',function () {
            $('#main .wordDiv p').hide();
            $('#main .imageDiv img').hide();
        });

        //切换（隐藏/显示）
        $('button').eq(2).on('click',function () {
            //toggle表示在hide和show两种状态来回切换,500表示过度动画执行的时长
            $('#main .wordDiv p').toggle(500);
            $('#main .imageDiv img').toggle(500);
        });

        //遍历
        var values = [11,22,33,44,55];
        $.each(values,function (index,value) {
            console.log(index + ":" + value);
        })

        //查询数组中元素的下标
        console.log($.inArray(22,values));

        //写css
        $('.wordDiv').css({
            backgroundColor : 'red',//注意, 如果是background-color这种写法的属性, 改写成backgroundColor这样写法
            margin : '20px',
            fontSize: '30px',
            color: 'white'
        });

    </script>
</body>
</html>

使用jQuery实现瀑布流效果

html和css部分

var boxWidth = 0;
var boxes = null;

createBoxes();

//监听页面加载完毕
$(window).on('load',function () {
    pinterest();

    //监听页面滚动
    $(window).scroll(checkScroll);
});

function imageBox(index) {
    //创建标签并拼接标签
    var box = $('<div>').addClass('box').appendTo($('#main'));
    var imageContainer = $('<div>').addClass('image-container').appendTo(box);
    $('<img>').attr('src','images/' + index + '.jpg').appendTo(imageContainer);
    boxes.push(box);
    if(boxWidth == 0) {
        boxWidth = box.outerWidth();
        console.log(boxWidth)
    }
}

function createBoxes() {
    boxes = [];

    for(var i = 0; i < 40; i++) {
        imageBox(i);
    }
}

function pinterest() {
    var boxHeightsInRow = [];
    console.log($(window).width());
    var countInRow = Math.floor($(window).width() / boxWidth);
    console.log(countInRow);

    $('#main').css({
        width : countInRow * boxWidth + 'px',
        margin : '0 auto'
    });

    $.each(boxes,function (index, value) {
        if(index < countInRow) {
            boxHeightsInRow.push(boxes[index].outerHeight());
        }
        else {
            var minHeight = Math.min.apply(this,boxHeightsInRow);
            var minHeightIndex = $.inArray(minHeight,boxHeightsInRow);
            console.log(minHeight,minHeightIndex);
            boxes[index].css({
                position : 'absolute',
                top : minHeight + 'px',
                left : minHeightIndex * boxWidth + 'px',
            });
            boxHeightsInRow[minHeightIndex] += boxes[index].outerHeight();
        }

        console.log(boxHeightsInRow);
    })
}

function checkScroll() {

    var lastBox = $('#main>div').last();
    var lastBoxCenterTop = $(lastBox).offset().top - $(lastBox).outerHeight();
    var windowHeight = $(window).height();
    var scrollTop = $(window).scrollTop();

    console.log("lastBoxCenterTop:" + lastBoxCenterTop + "windowHeight:" + windowHeight + "scrollTop:" + scrollTop);

    if(lastBoxCenterTop <= windowHeight + scrollTop) {
        imageBox(Math.floor(Math.random() * 40));
        pinterest();
    }
}

jQuery

jQuery

results matching ""

No results matching ""