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了,直接用jQueryjQuery(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