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
4000
.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