jQuery中的工具和插件
jQuery的工具属性
jQuery类数组操作
length属性
- 表示获取类数组中元素的个数
get()方法
- 表示获取类数组中单个元素“括号中填写该元素的索引值”
index()方法
- 表示用过指定类数组中的元素来获取对应的索引值“括号中填写指定元素的选择器”
$.makeArray()方法
- 表示将指定类数组对象转换成数组对象“括号中填写指定的类数组”
toArray()方法
- 表示将jQuery类数组对象转换成数组对象“括号中填写指定的jQuery类数组对象”
$.inArray()方法
- 表示在指定数组或类数组中查找指定元素的索引值“括号中填写 指定元素 指定数组或类数组 搜索的索引值”
<body>
<div id="d1"></div>
<script src="jquery.js"></script>
<script>
/*
jQuery工具属性
length - 表示获取类数组中元素的个数
get() - 表示获取类数组中单个元素“括号中填写该元素的索引值”
index() - 表示用过指定类数组中的元素来获取对应的索引值“括号中填写指定元素的选择器”
$.makeArray() - 表示将指定类数组对象转换成数组对象“括号中填写指定的类数组”
toArray() - 表示将jQuery类数组对象转换成数组对象“括号中填写指定的jQuery类数组对象”
$.inArray() - 表示在指定数组或类数组中查找指定元素的索引值“括号中填写 指定元素 指定数组或类数组 搜索的索引值”
*/
var $div = $( '#d1' );
console.log( $div );
console.log( $div.length );
console.log( $div.get( 0 ) );
console.log( $div.index( 'div' ) );
console.log( $div.index( '.d1' ) );
var d1 = document.getElementById( 'd1' );
console.log( $div.index( d1 ) );
console.log( $.makeArray( $div ) );
var d2 = document.getElementsByTagName( 'div' );
console.log( $.makeArray( d2 ) );
console.log( $div.toArray() );
console.log( $.inArray( d1, $div ) );
</script>
</body>
jQuery遍历
each()方法
- 表示遍历jQuery对象的数组或类数组“括号中填写执行函数”
$.each()方法
- 表示遍历数组或类数组对象“括号中填写 指定数组或类数组 执行函数”
<body>
<div>我特啊呦弄啥嘞</div>
<div>我特啊呦赌赢</div>
<div>咦！...嫩个鳖孙...</div>
<script src="jquery.js"></script>
<script>
/*
jQuery遍历
each( ) - 表示遍历jQuery对象的数组或类数组“括号中填写执行函数”
$.each( ) - 表示遍历数组或类数组对象“括号中填写 指定数组或类数组 执行函数”
*/
var $div = $( 'div' );
/*
each( )执行函数
index - 表示遍历结果在jQuery对象中的索引值
domEle - 表示遍历的结果( DOM对象 )
*/
$div.each( function ( index, domEle ) {
console.log( index, domEle );
/* 遍历结果是DOM对象 */
console.log( domEle );
/* 把遍历结果由DOM对象转换成jQuery对象 */
console.log( $( domEle ) );
} );
var div = document.getElementsByTagName( 'div' );
/*
$.each( )执行函数
index - 表示遍历结果在jQuery对象中的索引值
domEle - 表示遍历的结果( DOM对象 )
*/
$.each( $div, function ( index, domEle ) {
console.log( index, domEle );
} );
$.each( div, function ( index, domEle ) {
console.log( index, domEle );
} )
</script>
</body>
jQuery字符串处理
$.trim()方法
- 表示处理指定字符串开头和结尾的空格
<body>
<script src="jquery.js"></script>
<script>
/*
jQuery字符串处理
$.trim( ) - 表示处理指定字符串开头和结尾的空格
*/
var zf = ' 啊啊啊 哈哈哈 呀呀呀 ';
console.log( zf );
console.log( zf.length );
var zfs = $.trim( zf );
console.log( zfs );
console.log( zfs.length );
/* DOM中的处理 */
function trim( zf ) {
var xzf = '';
var zzfs = 0, yzfs = 0;
for ( var i = 0; i < zf.length; i++ ) {
var is = zf[i];
if ( is !== ' ' ) {
zzfs = i;
break;
}
}
for ( var s = zf.length-1; s >= 0; s-- ) {
var si = zf[s];
if ( si !== ' ' ) {
yzfs = s;
break;
}
}
var xzf = zf.substring( zzfs, yzfs+1 );
return xzf;
}
console.log( trim( zf ) );
console.log( trim( zf ).length );
</script>
</body>
jQuery的插件
图片懒加载效果
- lazyload插件
- 通过引入外部lazyload插件，在调用由lazyload插件提供的方法 - lazyload()
lazyload插件的注意要求：
- 将图片元素的src属性替换为data-original属性
- 为图片元素设置class属性，属性值为lazyload
- lazyload插件要求为图片元素设置宽度或高度
<head>
<meta charset="UTF-8">
<title>懒加载</title>
<style>
.lazyload {
width: 800px;
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<img class="lazyload" data-original="临时资料/插件/imgs/图片%20(1).jpg">
<img class="lazyload" data-original="临时资料/插件/imgs/图片%20(2).jpg">
<img class="lazyload" data-original="临时资料/插件/imgs/图片%20(3).jpg">
<img class="lazyload" data-original="临时资料/插件/imgs/图片%20(4).jpg">
<img class="lazyload" data-original="临时资料/插件/imgs/图片%20(5).jpg">
<img class="lazyload" data-original="临时资料/插件/imgs/图片%20(6).jpg">
<img class="lazyload" data-original="临时资料/插件/imgs/图片%20(7).jpg">
<img class="lazyload" data-original="临时资料/插件/imgs/图片%20(8).jpg">
<img class="lazyload" data-original="临时资料/插件/imgs/图片%20(9).jpg">
<img class="lazyload" data-original="临时资料/插件/imgs/图片%20(10).jpg">
<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>
<script>
/*
图片懒加载 - lazyload
通过引入外部lazyload插件，在调用由lazyload插件提供的方法 - lazyload( )
lazyload插件的注意要求：
* 将图片元素的src属性替换为data-original属性
* 为图片元素设置class属性，属性值为lazyload
* lazyload插件要求为图片元素设置宽度或高度
*/
var $img = $( '.lazyload' );
$img.lazyload( {
threshold : 50,
event : 'mouseover',
effect : 'fadeIn',
effect_speed : 2000
} );
</script>
</body>
瀑布流效果
- masonry插件
- 通过引入外部masonry插件，在调用由masonry插件提供的方法 - masonry( )
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style>
body {
margin: 0;
}
#d1 {
width: 1200px;
margin: 0 auto;
}
.img {
width: 300px;
display: block;
}
</style>
</head>
<body>
<div id="d1">
<img class="img" src="临时资料/插件/imgs/图片%20(1).jpg">
<img class="img" src="临时资料/插件/imgs/图片%20(2).jpg">
<img class="img" src="临时资料/插件/imgs/图片%20(3).jpg">
<img class="img" src="临时资料/插件/imgs/图片%20(4).jpg">
<img class="img" src="临时资料/插件/imgs/图片%20(5).jpg">
<img class="img" src="临时资料/插件/imgs/图片%20(6).jpg">
<img class="img" src="临时资料/插件/imgs/图片%20(7).jpg">
<img class="img" src="临时资料/插件/imgs/图片%20(8).jpg">
<img class="img" src="临时资料/插件/imgs/图片%20(9).jpg">
<img class="img" src="临时资料/插件/imgs/图片%20(10).jpg">
</div>
<script src="jquery.js"></script>
<script src="masonry.pkgd.js"></script>
<script>
/*
瀑布流效果 - masonry
通过引入外部masonry插件，在调用由masonry插件提供的方法 - masonry( )
*/
var $div = $( '#d1' );
$div.masonry( {
itemSelector : '.img'
} );
</script>
</body>
轮播图效果
- Swiper插件
- 通过引入外部Swiper插件，在调用由Swiper插件提供的方法 - new Swiper( )
Swiper插件的注意要求：
- Swiper插件分为CSS文件和JS文件，要一同引入
- 为轮播图的可视容器设置class属性，属性值为swiper-container
- 为轮播图的所有图片容器设置class属性，属性值为swiper-wrapper
- 设置class属性是为了方便操作
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<link rel="stylesheet" href="swiper.css">
<style>
body {
margin: 0;
}
.swiper-container {
width: 900px;
margin: 25px auto;
}
</style>
</head>
<body>
<!-- 可视窗口容器 -->
<div class="swiper-container">
<!-- 所有图片的容器 -->
<div class="swiper-wrapper">
<img src="临时资料/插件/imgs/图片%20(1).jpg" class="swiper-slide">
<img src="临时资料/插件/imgs/图片%20(4).jpg" class="swiper-slide">
<img src="临时资料/插件/imgs/图片%20(3).jpg" class="swiper-slide">
</div>
</div>
<script src="jquery.js"></script>
<script src="swiper.js"></script>
<script>
/*
轮播图效果 - Swiper
通过引入外部Swiper插件，在调用由Swiper插件提供的方法 - new Swiper( )
Swiper插件的注意要求：
* Swiper插件分为CSS文件和JS文件，要一同引入
* 为轮播图的可视容器设置class属性，属性值为swiper-container
* 为轮播图的所有图片容器设置class属性，属性值为swiper-wrapper
* 设置class属性是为了方便操作
*/
new Swiper('.swiper-container',{
autoplay: true
});
</script>
</body>
jQuery对象和工厂函数
自定义jQuery插件
全局函数插件
jQuery.extend()
- 括号中填写Object类型
- 将jQuery当做一个对象来使用
jQuery对象插件
jQuery.fn.extend()
- 括号中填写Object类型
- 将jQuery当做一个函数来使用
在定义一个构造函数做为扩充插件的属性和方法
- 做为工厂函数的返回值
/* 将jQuery当做一个函数来使用 */
var jQuery = $ = function () {
return new s1();
};
/* 定义一个构造函数 - 做为工厂函数的返回值 */
function s1() {
// 定义对象的属性和方法
}
/* 调用函数的属性或方法 */
var sx = jQuery();
sx.each();
jQuery().each();
$().each();
/* 将jQuery当做一个对象来使用 */
var jQuery = $ = {};
jQuery.each = function () {};
$.each();
jQuery对象方法插件
<head>
<meta charset="UTF-8">
<title>对象方法插件</title>
<style>
.div {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="d1" class="div"></div>
<script src="jquery.js"></script>
<script>
/*
自定义jQuery对象方法插件
jQuery.fn.extend( ) - 括号中填写Object类型
*/
jQuery.fn.extend( {
/* 扩充插件的属性和方法 */
name : '兔子',
backgroundColor : function (selector,options) {
var $elem = $(selector);
if ('color' in options) {
$elem.css('backgroundColor', options.color);
}
}
} );
/* 另一种用法 */
jQuery.fn.backgroundColor = function (selector,options) {
var $elem = $(selector);
if ('color' in options) {
$elem.css('backgroundColor', options.color);
}
};
</script>
<script>
/* 调用自定义插件 */
var $div = $( '#d1' );
console.log( $div.name );
$div.backgroundColor('.div', {
color : 'blue'
});
</script>
</body>
全局函数插件
<script src="jquery.js"></script>
<script>
/*
自定义全局函数插件
jQuery.extend( ) - 括号中填写Object类型
*/
jQuery.extend( {
taigename : '小兔子',
xyxyxy : function () {
console.log( '大兔子' )
}
} );
/* 另一种用法 */
jQuery.xyxyxy = function () {
console.log( '大兔子' );
}
</script>
<script>
/* 调用自定义插件的方法 */
console.log( jQuery.taigename );
jQuery.xyxyxy();
</script>
</body>
来源：https://segmentfault.com/a/1190000016345063
jQuery中的工具和插件的更多相关文章
- JQuery中的工具类（五）
一:1.serialize()序列表表格内容为字符串.返回值jQuery示例序列表表格内容为字符串,用于 Ajax 请求. HTML 代码:<p id="results"&g ...
- jquery-12 jquery中的工具方法有哪些
jquery-12 jquery中的工具方法有哪些 一.总结 一句话总结:四个较常用方法.1.isArray();2.isFunction();3.isEmptyObejct();4.trim(); ...
- JQuery中的工具函数总结
前提引入 前提当然也是要引入Jquery啦... <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" typ ...
- jQuery中的each, data, 插件
一. each() $(' ').each(function (){...}) jQuery.each(collection, callback(indexInArray, valueOfEleme ...
- jquery中的工具方法$.isFunction, $.isArray(), $.isWindow()
本文正式地址:http://www.xiabingbao.com/jquery/2015/07/25/jquery-judge-type 在javascript中对变量类型的判断中,我们讲解了了jqu ...
- jQuery中的supersized的插件的功能描述
Supersized特性: 自动等比例调整图片并填充整浏览器个屏幕. 循环展示图片,支持滑动和淡入淡出等多种图片切换效果. 导航按钮,支持键盘方向键导航. XHTML <div id=" ...
- jQuery中的工具（十）
1. jQuery.each(object, [callback]), 通用遍历方法,可用于遍历对象和数组 不同于遍历 jQuery 对象的 $().each() 方法,此方法可用于遍历任何对象.回调 ...
- jquery中的工具函数 Utilities
noConflict(deep) 释放$和Jquery的控制权 isFunction(obj) isArray(obj) isWindow(obj) isNumeric(obj) type(obj) ...
- JQuery中的DataTables表格插件
一.DataTables表格插件的简介 DataTables是一个jQuery的表格插件.它具有以下特点: 自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定 ...
随机推荐
- Chapter 3 树与二叉树
Chapter 3 树与二叉树 1- 二叉树 主要性质: 1 叶子结点数 = 度为2的结点数 + 1 2 二叉树第i层上最多有 (i≥1)个结点 3 深度为k的二叉树最多有 个结点 ...
- putty开源的ssh软件工具
# 登录远程服务器需要ip和端口即可:还是开源工具用起来无忧无虑.无拘无束,这种感觉实在太舒服了,比起xshell开始免费.后来收费好太多太多,不用担心哪天过期了,想干嘛就干嘛. 软件下载地址:htt ...
- 前端在本地启动服务预览html页面
在开发移动端项目时浏览器里出来的效果往往到真机上和预想的有出入,在开发过程中知道了一个可以在本地自己启动一个服务器在手机预览的办法. 1.首先在终端安装http. npm i http-server ...
- #include <filename.h> 和 #include“filename.h” 有什么区别
对于#include <filename.h> ,编译器从标准库路径开始搜索filename.h,对于#include “filename.h” ,编译器从用户的工作路径开始搜索filen ...
- 深入浅出 Java Concurrency (6): 锁机制 part 1[转]
前面的章节主要谈谈原子操作,至于与原子操作一些相关的问题或者说陷阱就放到最后的总结篇来整体说明.从这一章开始花少量的篇幅谈谈锁机制. 上一个章节中谈到了锁机制,并且针对于原子操作谈了一些相关的概念和设 ...
- sql删除重复的记录保留一条
delete from A_TO_NOW where yuan_name in (select yuan_name from A_TO_NOW group by yuan_name hav ...
- Python - 基本数据类型及其常用的方法之元组
元组 特点:一级元素无法被修改,且不能被增加或者删除. 基本操作: tu = (11, 22, ["aiden", 33, ("qwe", 11)], 77) ...
- MySQL示例数据导入
从官网下载示例数据,参考压缩文件中的README.txt,整理所得 /******************* 示例数据导入 *******************/ /** 官网下载 http://d ...
- KOA 学习（一）
一.安装KOA 用npm下载KOA 就会在koa文件夹下生成 二.输出hello,world 我下载的KOA版本号是2.0.1 const Koa = require('koa'); const ap ...
- css之页面三列布局之左右两边宽度固定，中间自适应
左右两边宽度固定,中间自适应 左右两边绝对定位 可以利用浮动,左边的左浮动,右边的右浮动 css3 flex布局(html http://www.cnblogs.com/myzy/p/5919814. ...