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="data: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"}]};//Jsonscrollside();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

jQuery基础学习笔记(下)相关推荐

jQuery基础学习笔记(上)
1.简介及语法认识jQuery 1.jQuery: jQuery库可以通过一行简单的标记被添加到网页中. 2.什么事jQuery: jQuery是一个JavaScript函数库. 3 ...
计算机网络基础学习笔记(下)
学习视频随看随记 ABCD类型地址的分类根据地址左起第-个十进制数的值,可以判断出网络类别(小于127的为A类, 128 ~ 191 的为B类,192 ~ 223的为C类) ; 根据网络类别,就可 ...
jQuery基础学习笔记(中)
5.CSS操作及jQuery的盒子模型 1.jQuery CSS方法 <div></div> css.css .style1{width: 100px;height: 100p ...
jQuery 基础学习笔记
1. jQuery 的执行时间: $(document).ready(function(){--- jQuery functions go here ----// 保证当文档对象加载完成后,进行元素事 ...
Oracle PL/SQL语句基础学习笔记(下)
游标游标: 游标(cursor)可以被看作指向结果集(a set of rows)中一行的指针(pointer).在oracle数据库中可以使用显示或隐式两种游标. 1.隐式游标在执行一个sql语 ...
ASP.Net MVC开发基础学习笔记（5）：区域、模板页与WebAPI初步
http://blog.jobbole.com/85008/ ASP.Net MVC开发基础学习笔记(5):区域.模板页与WebAPI初步 2015/03/17 · IT技术 · .Net, Asp. ...
guido正式发布python年份_Python 基础学习笔记.docx
Python 基础学习笔记基于<Python语言程序设计基础(第2版)> 第一部分初识Python语言第1章程序设计基本方法 1.1 计算机的概念计算机是根据指令操作数据的设备, ...
Python3 基础学习笔记 C08 【类】
CSDN 课程推荐:<8小时Python零基础轻松入门>,讲师齐伟,苏州研途教育科技有限公司CTO,苏州大学应用统计专业硕士生指导委员会委员:已出版<跟老齐学Python:轻松入门& ...
Python3 基础学习笔记 C07【函数】
CSDN 课程推荐:<8小时Python零基础轻松入门>,讲师齐伟,苏州研途教育科技有限公司CTO,苏州大学应用统计专业硕士生指导委员会委员:已出版<跟老齐学Python:轻松入门& ...

jQuery基础学习笔记(下)