jQuery基础学习笔记(下)

8.jQuery的扩展与noConflict

1.jQuery扩展

    <script src="../../jquery-2.1.3.min.js"></script>
    <script src="js2.js"></script>
    <script src="js.js"></script>

    <div></div>

js2.js

$.js2 = function () {//不常见
  alert("HELLO JS2");
};

//$.fn1.js2 = function () {//必须是fn
$.fn.js2 = function () {
  $(this).text("hello");
};

js.js

$(document).ready(function () {
 //   $.js2();

    $("div").js2();
});

2.noConflict

<div>HELLO</div>
<button id="btn">按钮</button>

/*
$(document).ready(function () {
    $("#btn").click(function () {
        $("div").text("改了");
    });
});*/

/*
$.noConflict();//$符号被占用,之后不是jQuery了,直接用jQuery
jQuery(document).ready(function () {
    jQuery("#btn").click(function () {
        jQuery("div").text("改了");
    });
});*/

var jq = $.noConflict();
jq(document).ready(function () {
    jq("#btn").click(function () {
        jq("div").text("改了");
    });
<div style="text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;">});</span></div>

9.jQuery UI下载与使用

1.jQuery UI介绍

认识jQuery UI
1.jQuery UI:
    是以jQuery为基础的JavaScript网页用户界面的开源库.包括底层用户交互,动画,特效和可变换主题的可视控件.我们可以直接用它来构建具有很好交互性的web应用程序.
2.jQuery UI:
    包括了许多维持状态的小部件(Widget),因此,它与典型的jQuery插件使用模式略有不同.所有的jQuery UI小部件(Widget)使用相同的模式,所以,只要您学会使用其中一个,您就知道如何使用其他的小部件(Widget).
3.jQuery UI:
    IE 6.0+,Firefox 3+,Safari 3.1+,Opera 9.6+,Google Chrome.
4.jQuery UI主要分为3个部分:交互,小部件和特效库
    a):交互
        交互部分是一些与鼠标交互相关的内容,包括Draggable,Droppable,Resizable,Selectable和Sortable等
    b):小部件
        主要是一些界面的扩展,包括AutoComplete,ColorPicker,Dialog,Slider,Tabs,ProgressBar,Spinner等
    c):效果

        用于提供丰富的动画效果,包括:Add Class,Color Animation,Toggle等

2.下载jQuery UI

1.http://jqueryui.com
2.主题预览:http://jqueryui.com/themeroller/
3.api:http://api.jqueryui.com

4.自定义配置:http://jqueryui.com/download/

3.使用jQuery UI

先引入jQuery,再加入jquery-ui.min.js,jquery-ui.min.css

<script src="../../jquery-2.1.3.min.js"></script>
    <script src="jquery-ui.min.js"></script>
    <script src="js.js"></script>
    <link type="text/css" href="jquery-ui.min.css" rel="stylesheet">

<a href="http://www.baidu.com" id="a_btn">百度</a>
<button>百度</button>
<input type="text">

$(document).ready(function () {
    $("#a_btn").button();
    $("button").datepicker();//无效
    $("input").datepicker();
});

10.jQuery瀑布流

布局,图片位置摆放,滚动加载

<div id="container">
    <div class="box"><!--很多个-->
        <div class="content">
            <img src="image/1.png" height="50px">
        </div>
    </div></div>

/*布局*/
*{
    padding: 0px;
    margin: 0px;
}

.box{
    position: relative;
    float: left;
}

.content{
    padding: 10px;
    border: 1px solid gray;
    box-shadow: 0 0 5px gray;
    border-radius: 5px;
}

.content img{
    width: 150px;
}

#container{
    width: 1500px;
    position: relative;
}

//此方法更改窗口宽度会出现问题

var dataImg=[];
var lastboxHeight;
var firstin = true;

/*图片位置摆放*/
$(document).ready(function () {
    $(window).on("load", function () {
        imgLocation();
        //滚动加载:
        dataImg = {"data": [{"src": "1.png"}, {"src": "2.png"}, {"src": "3.png"}, {"src": "4.png"}, {"src": "5.png"}]};//Json
        scrollside();
        window.onscroll = function () {//监听鼠标滚动事件
            scrollside();
            firstin = false;
        }
    });
});

function imgLocation() {
    var box = $(".box");
    var boxWidth = box.eq(0).width();//获取图片宽度
    var num = Math.floor($(window).width() / boxWidth);//获取一排摆放个数
    var boxArr = [];//数组
    box.each(function (index, value) {//循环  (位置,元素)
        var boxHeight = box.eq(index).height();
        if (index < num) {
            boxArr[index] = boxHeight;
        } else {
            var minboxHeight = Math.min.apply(null, boxArr);//获取最小高度
            var minboxIndex = $.inArray(minboxHeight, boxArr);//获取最小高度对应的位置
            $(value)//jQuery对象
                .css({
                    "position": "absolute",
                    "top": minboxHeight,
                    "left": box.eq(minboxIndex).position().left
                });
            boxArr[minboxIndex] += box.eq(index).height();//更新高度为加了一张图片的高度
        }
    });
}

function scrollside() {
    var box = $(".box");
    lastboxHeight = box.last().get(0).offsetTop //最后一张图片距离上边的高度
        + Math.floor(box.last().height() / 2);
//    var documentHeight = $(document).height();//当前容器的高度
    var documentHeight =  document.documentElement.clientHeight;//屏幕高度
    var scrollHeight = $(window).scrollTop();//滚动过的高度
    if (lastboxHeight < scrollHeight + documentHeight) {
        addimg();
    }
}

function addimg(){
    $.each//遍历
    (dataImg.data, function (index, value) {
        var box = $("<div>").addClass("box").appendTo($("#container"));
        var content = $("<div>").addClass("content").appendTo(box);
        $("<img>").attr//获取数据
        ("src", "./image/" + $(value).attr("src")).appendTo(content);
    });
    imgLocation();
    if(firstin){
        scrollside();
    }
}

瀑布流源码: http://download.csdn.net/detail/oyuemijindu/8446697