winney

It is never too old to learn.

0%
winney

发表于 更新于 分类于

前端插件

前端模板

Jquery Upload File

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<link rel="stylesheet" type="text/css" href="js/jQuery-File-Upload-9.18.0/css/jquery.fileupload.css" />

<script src="js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/jQuery-File-Upload-9.18.0/js/vendor/jquery.ui.widget.js"></script>
<script type="text/javascript" src="js/jQuery-File-Upload-9.18.0/js/jquery.iframe-transport.js"></script>
<script type="text/javascript" src="js/jQuery-File-Upload-9.18.0/js/jquery.fileupload.js"></script>
<input type="hidden" name="game_apk" />
<span class="btn btn-success fileinput-button">
	<i class="fa fa-plus"></i>
	<span>请上传apk文件</span>
 	 <input id="fileupload_1" type="file" name="files[]" multiple>
</span>
<div id="progress"></div>
$('#fileupload_1').fileupload({
    url: "上传文件请求地址",
    dataType: 'json',
    done: function (e, data) {
        $.each(data.result.files, function (index, file) {
          $(':input[name=game_apk]').val(decodeURIComponent(file.url));
        });
    },
    fail: function (e, data) {
        console.log("上传失败")
    },
    progressall: function (e, data) {
        console.log(progress);
        $("#progress").html(progress + '%');
    }
});

jquery.copy.js

点击复制内容移动端全兼容(专治各种移动端浏览器)

  • 单页面一个复制
1
2
3
4
5
6
7
8
<button id="copy">复制链接</button>
$.copy({
    // imgUrl:"success-tips.png",   // 分享图标地址
    text:"复制成功", //分享提示文案
    copyUrl:"复制的内容/链接",   // 自定义复制链接地址
    tipTime:2000, 	// 分享提示消失时间
    copyId:"#copy"	// 复制按钮id
});
  • 单页面多个复制链接
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var data = [
    { "url": "www.baidu.com" },
    { "url": "www.qq.com" },
    { "url": "www.163.com" }
];

$.each(data,function(i,item){
    $("body").append('<button id="copy'+i+'">复制链接</button>');
    $.copy({
        // imgUrl:"success-tips.png",  // 分享图标地址
        text:"复制成功",  // 分享提示文案
        copyUrl:item.url,  // 自定义复制链接地址
        tipTime:2000,  // 分享提示消失时间
        copyId:"#copy"+i  // 复制按钮id
    });
});

mobileSelect.js-多级联动下拉菜单

mobileSelect.js-github

datetimepicker多次点击input日期选择器不显示

遇到datetimepicker多次（包括第二次点击）点击input框时日期选择器不显示，需要使用鼠标监听触发：

1
2
3
4
5
/*点方input框时加租监听毒件*/
document.getElementsByName('input的name名称')[0].addEventListener('click',myfunc)
function myfunc(e){
	e.currentTarget.blur();
}

以上这段代码必须放在datetimepicker方法的后面。

例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//日历
var startDate = $('#startDate').fdatepicker({
	format: "yyyy-mm-dd",
	todayBtn: true
}).on('changeDate', function (ev){
	startDate.hide();
	$('#endDate')[0].focus();
}).data('datepicker');

var endDate = $('#endDate').fdatepicker({
	format: "yyyy-mm-dd",
	todayBtn: true,
}).on('changeDate', function (ev){
	endDate.hide();
}).data('datepicker');

//解决输入框点击多次（包括两次）不显示的问题
document.getElementById('startDate').addEventListener('click',myfunc);
document.getElementById('endDate').addEventListener('click',myfunc);
function myfunc(e){
	e.currentTarget.blur();
}

swiper

轮播图由两层效果改为三层
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
// 加上这个样式，控制偏移量
<style>
    #certify .swiper-slide.swiper-slide-prev{
        transform: translateX(480px) scale(0.8) !important;
    }
    #certify .swiper-slide.swiper-slide-next{
        transform: translateX(-480px) scale(0.8) !important;
    }
    #certify .swiper-slide.swiper-slide-next + .swiper-slide{
        transform: translateX(-986px) scale(0.6) !important;
    }
</style>


var certifySwiper = new Swiper('.detail', {
    watchSlidesProgress: true,
    slidesPerView: 'auto',
    centeredSlides: true,
    loop: true,
    loopedSlides: 5,
    autoplay: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    // pagination: {
    // 	el: '.swiper-pagination',
    // 	clickable: true,
    // },
    on: {
        progress: function (progress) {
            for (i = 0; i < this.slides.length; i++) {
                var slide = this.slides.eq(i);
                var slideProgress = this.slides[i].progress;
                modify = 1;
                if (Math.abs(slideProgress) > 1) {
                    modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
                }
                translate = slideProgress * modify * 260 + 'px';
                scale = 1 - Math.abs(slideProgress) / 5;
                zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                slide.transform('translateX(' + translate + ') scale(' + scale + ')');
                slide.css('zIndex', zIndex);
                slide.css('opacity', 1);
                if (Math.abs(slideProgress) > 3) {
                    slide.css('opacity', 0);
                }
            }
        },
        setTransition: function (transition) {
            for (var i = 0; i < this.slides.length; i++) {
                var slide = this.slides.eq(i)
                slide.transition(transition);
            }
        },
        
        // 加上这段代码
        slideChangeTransitionStart: function() {
            $("#certify  .swiper-slide-prev").prev(".swiper-slide").css({"transform": "translateX(986px) scale(0.6)"});
        },
    }

});

 // 加上这段代码
// 修改样式
$("#certify  .swiper-slide-prev").prev(".swiper-slide").css({"transform": "translateX(986px) scale(0.6)"});

jquery.cityselect.js—城市选择插件—省市联动效果

第74款插件：jquery.cityselect.js基于jQuery+JSON的省市或自定义联动效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// HTML代码
<div id="city"> 
    <select class="prov"></select>  
    <select class="city" disabled="disabled"></select> 
    <select class="dist" disabled="disabled"></select> 
</div>
// JS和CSS代码 ，请注意这里默认需要把城市数据库 city.min.js 放到 jquery.cityselect.js 所在的数据库中，千万不要丢失！

<script src="./js/jquery.js"></script>
<script src="./js/Plugins/City/jquery.cityselect.js"></script>

<script type="text/javascript">
    $(function(){
        $("#city").citySelect({
            nodata:"none",
            required:false
        }); 
    });
</script>
注意：要配置服务器访问页面，不然city.min.js的获取路径有问题

Bootstrap Multiselect

Bootstrap Multiselect 中文网

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<link rel="stylesheet" href="./js/Plugins/bootstrap/css/bootstrap.min.css">
<script src="./js/jquery.js"></script>
<script src="./js/Plugins/bootstrap/js/bootstrap.min.js"></script>

<script src="./js/Plugins/bootstrap-multiselect/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="./js/Plugins/bootstrap-multiselect/bootstrap-multiselect.css">
<select id="example-getting-started" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<script type="text/javascript">
    $(document).ready(function() {
        $('#example-getting-started').multiselect();
    });
</script>

CKEditor-富文本编辑器

CKEditor CDN

CKEditor

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CKEditor 5 – Classic editor</title>
    <script src="https://cdn.ckeditor.com/ckeditor5/35.0.1/classic/ckeditor.js"></script>
</head>
<body>
    <h1>Classic editor</h1>
    <div id="editor">
        <p>This is some sample content.</p>
    </div>
    <script>
        ClassicEditor
            .create( document.querySelector( '#editor' ) )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

Distpicker—中国省市区地址三级联动插件

distpicker-github

jQuery中国省市区地址三级联动插件Distpicker

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="./js/jquery.js"></script>
<script src="./js/Plugins/distpicker/distpicker.data.js"></script>
<script src="./js/Plugins/distpicker/distpicker.js"></script>
<div data-toggle="distpicker">
  <select data-province="---- 选择省 ----"></select>
  <select data-city="---- 选择市 ----"></select>
  <select data-district="---- 选择区 ----"></select>
</div>
<div id="distpicker1">
  <select></select>
  <select></select>
  <select></select>
</div>

$("#distpicker1").distpicker();

city-picker—地区联动插件

city-picker—github

1
2
3
4
5
6
7
<link rel="stylesheet" href="./js/Plugins/city-picker/city-picker.css">
<script src="./js/jquery.js"></script>
<script src="./js/Plugins/city-picker/city-picker.data.js"></script>
<script src="./js/Plugins/city-picker/city-picker.js"></script>
<div style="position: relative;"><!-- container -->
    <input readonly type="text" data-toggle="city-picker" placeholder="请选择省/市" data-level="city" >
</div>

Web Uploader—现代文件上传组件

zTree— jQuery 树插件

jstree—树插件

Font Awesome—字体图标

fastclick—解决移动端click事件延迟300ms

fastclick-github

jQuery WeUI

swiper

粒子插件–页面特效

Particles
1
npm install particles.js

particles-插件

前端react 粒子特效

particles官网

particles的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";

// 在组件外定义下面两个函数
const particlesInit = async (main) => {
  console.log(main);
  await loadFull(main);
};

const particlesLoaded = (container) => {
  console.log(container);
};

// 粒子参数
const options = {
    "background": {
        "color": {
            "value": "#232741"
        },
        "position": "50% 50%",
        "repeat": "no-repeat",
        "size": "cover"
    },
    // 帧数，越低越卡,默认60
    "fpsLimit": 120,
    "fullScreen": {
        "zIndex": 1
    },
    "interactivity": {
        "events": {
            "onClick": {
                "enable": true,
                "mode": "push"
            },
            "onHover": {
                "enable": true,
                "mode": "slow"
            }
        },
        "modes": {
            "push": {
                //点击是添加1个粒子
                "quantity": 3,
            },
            "bubble": {
                "distance": 200,
                "duration": 2,
                "opacity": 0.8,
                "size": 20,
                "divs": {
                    "distance": 200,
                    "duration": 0.4,
                    "mix": false,
                    "selectors": []
                }
            },
            "grab": {
                "distance": 400
            },
            //击退
            "repulse": {
                "divs": {
                    //鼠标移动时排斥粒子的距离
                    "distance": 200,
                    //翻译是持续时间
                    "duration": 0.4,
                    "factor": 100,
                    "speed": 1,
                    "maxSpeed": 50,
                    "easing": "ease-out-quad",
                    "selectors": []
                }
            },
            //缓慢移动
            "slow": {
                //移动速度
                "factor": 2,
                //影响范围
                "radius": 200,
            },
            //吸引
            "attract": {
                "distance": 200,
                "duration": 0.4,
                "easing": "ease-out-quad",
                "factor": 3,
                "maxSpeed": 50,
                "speed": 1

            },
        }
    },
    //  粒子的参数
    "particles": {
        //粒子的颜色
        "color": {
            "value": "#ffffff"
        },
        //是否启动粒子碰撞
        "collisions": {
            "enable": true,
        },
        //粒子之间的线的参数
        "links": {
            "color": {
                "value": "#ffffff"
            },
            "distance": 150,
            "enable": true,
            "warp": true
        },
        "move": {
            "attract": {
                "rotate": {
                    "x": 600,
                    "y": 1200
                }
            },
            "enable": true,
            "outModes": {
                "bottom": "out",
                "left": "out",
                "right": "out",
                "top": "out"
            },
            "speed": 6,
            "warp": true
        },
        "number": {
            "density": {
                "enable": true
            },
            //初始粒子数
            "value": 40
        },
        //透明度
        "opacity": {
            "value": 0.5,
            "animation": {
                "speed": 3,
                "minimumValue": 0.1
            }
        },
        //大小
        "size": {
            "random": {
                "enable": true
            },
            "value": {
                "min": 1,
                "max": 3
            },
            "animation": {
                "speed": 20,
                "minimumValue": 0.1
            }
        }
    }
}


{/* 粒子插件 */}
<Particles
  id="tsparticles"
  init={particlesInit}
  loaded={particlesLoaded}
  options={options}
/>

clipboard.js-复制功能

1
2
3
4
5
var clipboard = new ClipboardJS(".copy-btn");
clipboard.on('success', function(e) {
    layer.msg('复制成功', {id: 'clipboard', time: 1000});
    e.clearSelection();
});

Clipboard

模拟环形进度条

circle-progress.js

1
2
3
4
5
6
7
8
9
// 创建模拟环形进度条
// 导出文件过程中-网络请求卡顿/接口pending状态下的交互效果（假进度-只提供用户交互）
var canvas = new EnableCircle({
    id:'le-canvas',		// 被渲染元素的canvas的ID
    value: 96,			// 最大值
    target: 'primary',
    lineWidth: 10,		// 环形宽度
    lineCap: 'round',
});

Circle Progress: JavaScript circular progress bar plugin (tigrr.github.io)

移动前端学习笔记（2）——移动端点击（touch、click、tap、fastclick）

iScroll.js

改变滚动条滚动速度

iScroll框架的使用和修改

鼠标滚轮滚动

iscroll支持在pc端浏览器中使用鼠标滚轮控制区域滚动，但操作起来很不灵敏。这是由于iscroll对鼠标滚轮事件做了拦截，然后缩小了滚轮的滚动距离，详见iscroll4.js源代码608-609行：
wheelDeltaX = e.wheelDeltaX / 12;//控制X轴鼠标滚轮速度*
wheelDeltaY = e.wheelDeltaY / 12;//控制Y轴鼠标滚轮速度

iScroll.js修改滚动速度

Easy Sass

使用 VSCode 编辑器来编译 Sass

分页插件

jquery.pagination

Pagination

jQuery分页插件pagination.js

树形结构

jsTree 注意：要使用高版本的JQ版本

单选/多选下拉框

xm-select 使用手册

拾色器插件

jdavidhermoso/ jQueryColorPicker

jquerycolorpicker

jQuery颜色选择器ColorPicker

Tagged: colorpicker

图片放大功能(类似放大镜)

enlarge.js

filamentgroup / enlarge

yb /enlarge.js

页面效果

拖拽替换图片的排列顺序

上拉加载下拉刷新

iScroll 5

swiper

pulltorefresh

cubiq/iscroll

daterangepicker日历插件

模拟ios日历时间选择效果

Mobiscroll demo demo

jQuery-mobiscroll

jQuery仿QQ登录表单弹出窗

jQuery仿QQ登录表单弹出窗

下拉框

Select2 select2-github

bootstrap-select jQuery Selectric jQuery Selectric

好用的自定义select下拉插件jQuery Selectric

jQuery模拟select下拉框插件SelectBox

jQuery自定义下拉框插件select-mania

可搜索、多选的下拉框插件-简单-xm-select
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
第一步: 下载 https://gitee.com/maplemei/xm-select/blob/master/dist/xm-select.js#
第二步: 引入 xm-select.js
第三步: 写一个`<div id="demo1"></div>`
第四步: 渲染
	var demo1 = xmSelect.render({
		el: '#demo1',
		language: 'zn',
		data: [
			{name: '张三', value: 1},
			{name: '李四', value: 2},
			{name: '王五', value: 3},
		]
	})
<div id="game_id_select" class="xm-select-demo"></div>

// 游戏数据列表
var applist = [] 
// 游戏下拉框
var game_id_select = xmSelect.render({
	el: '#game_id_select', 
	name:'',   // 如果将值存在另外一个隐藏input里，将name设置为空，否则为对应的name值
	filterable: true,	// 可搜索
	tips: '请选择游戏',
	searchTips: '请输入游戏',
	height: 300,
	style: {
		width: '200px'
	},
	prop: {
		name: 'app_name',  // 数据中对应的name值的属性名
		value: 'app_id',	// 数据中对应的value值的属性名
	},
	data: applist,
	on: function(data){
		 /*---处理动态赋值-开始-----*/
		var arr = data.arr      // 当前多选已选中的数据
			, str = '';         // 选中数据的valueStr集合
		arr.map(function(item, index) {
			console.log(item);
			str += (index == 0) ? item.app_id : ',' + item.app_id;
		})
		// 动态赋值(在on时触发事件，获取到的值不是最新选择的值,是上次选中的值，要动态赋值)
		// mini.get('game_id').setValue(str)  mini的用法
		$('[name="game_id"]').val(str)
		/*---处理动态赋值-结束-----*/
	},
})

3D轮播图支持滚轮

jQuery-3dlbt

jQuery头像上传裁剪

jqueryJcropPhp

日历插件

My97DatePicker

穿梭插件

左侧导航栏

导出数据表格

layui-excel-GitHub

LAY-EXCEL 简单快捷的导出插件

excel导出

table2excel

TableExport

绘制图表插件

Highcharts

Highcharts兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库

获取地图位置

百度

QQ

移动端下拉刷新，上拉加载更多插件

dropload-gh-pages

加载插件

nice-validator

jQuery仿QQ登录表单弹出窗

https://www.jq22.com/jquery-info8342

文件下载

download.js

Bootstrap-select-匹配实时搜索功能下拉框

https://www.bootstrapselect.cn/

Query file upload 的正确用法（限制上传大小和文件类型）

参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
add: function (e, data) {
    var file = data.originalFiles[0].name.split(".");
    
    文件名有可能是sdk-icon1.apk.zip   所以不能只判断含有apk，而是判断根据.拆分的数组中的最后一个是不是apk
    if(file[file.length -1].indexOf("apk") == -1) {
      msg("请上传apk后缀名文件");
      return false;
    }

    // data.originalFiles[0].size   这里的大小的单位是b
    if(data.originalFiles[0].size > 2 * 1024 * 1024 * 1024) {
      msg("应用完整包文件不能超过2G");    //
      return false;
    }

    data.submit();    //如果满足条件就上传文件（执行上传文件）
}

is.js-强大的通用js表单验证插件

is.js 是一个微型通用性数据检查验证包。目前提供了数据类型、存在性、正则表达、字符串、数学、对象、数组、运行环境、时间、配置10大类110个验证方法。

移动端选择控件

原生 js 移动端选择控件，不依赖任何库

仿IOS选择下拉框

mobileSelect.js

sublime

Sublime Text

前端神器-sublime text3插件安装及使用

fastclick

处理移动端click延迟

日期选择器-datetimepicker

多次点击input日期选择器不显示

解决方法：

1
2
3
4
5
6
//解决输入框点击多次（包括两次）不显示的问题
document.getElementById('startDate').addEventListener('click', myfunc);
document.getElementById('endDate').addEventListener('click', myfunc);
function myfunc(e) {
	e.currentTarget.blur();
}

**兼容IE日历插件—My97DatePicker **

My97DatePicker

调用方法：

1
2
1、<script type="text/javascript" src="libs/My97DatePicker/WdatePicker.js"></script>
2、直接调用：在调用的输入框  onclick = "WdatePicker({dateFmt:'yyyy/MM/dd'});"

jquery.SuperSlide自动轮播插件

jQueryValidation

jquery Validation表单验证使用详解

laypage

laypage.js分页插件使用方法详解

validform

Validform基础及用法

Validform小结

bootstrap-switch

bootstrap-switch

Bootstrap 开关（switch）控件

Lazy Load

Lazy Load 中文网

icheck

iCheck不一样的checkbok

hui-iconfont

字体图标

UMeditor

UEditor Mini版本

UEditor

编辑器

在线示例

在线演示
使用说明
第一步，下载最新版本
第二步，打开浏览器
  • 使用浏览器打开 _examples/index.html 查看
UEditor相关链接

FASTADMIN

nprogress

NProgress显示顶部进度条效果及使用详解

jquery.autocomplete

seajs

seajs中文文档

Font Awesome

Font Awesome-中文文档

HttpWatch

网页数据分析工具

专业化网页抓包数据分析工具

ionic

http://www.ionic.wang/

ART-TEMPLATE—高性能 JavaScript 模板引擎

artTemplate

Underscore.js —JavaScript实用库

extjs

Atom_工具使用

由github发布的前端开发工具

非常强大和非常开发的开发工具平台

Atom的插件和主题安装和配置

发表于 更新于 分类于 ，

js字符串连接换行符没有效果解决办法

1
2
3
4
var a = 'aaaaa', b = 'bbbbb', c = 'ccccc';
var arr = [a,b,c];
var str = arr.join("\n");
console.log(str);

js 去掉字符串前后空格

js去掉字符串前后空格的五种方法
js 去掉字符串前后空格
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
使用jquery

$.trim(str) 

jquery内部实现为：

function trim(str){   
    return str.replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,'');   
}
<script type="text/javascript">
　　 function trim(str){ //删除左右两端的空格
　　   return str.replace(/(^s*)|(s*$)/g, "");
　　 }
　　 function ltrim(str){ //删除左边的空格
　　   return str.replace(/(^s*)/g,"");
　　 }
　　 function rtrim(str){ //删除右边的空格
　　   return str.replace(/(s*$)/g,"");
　　 }
</script>
JS 去字符串空格 总结

str为要去除空格的字符串:
去除所有空格: 
str = str.replace(/\s+/g,""); 
去除两头空格: 
str = str.replace(/^\s+|\s+$/g,"");
去除左空格：
str=str.replace( /^\s*/, '');
去除右空格：
str=str.replace(/(\s*$)/g, "");

jQuery UI

监听输入框的值变化事件

1
2
3
$(".search-input").bind('input porpertychange',function(){
	.....
});

不足：输入中文时，每输入一个字母，都会触发

监听输入框的值变化-优化

改为使用compositionstart和compositionend

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 搜索框
var flag = true;
$(".optionList .searchIpt").on("compositionstart", function() {
    flag = false;
});
$(".optionList .searchIpt").on("compositionend", function() {
    flag = true;
});
$(".optionList .searchIpt").on("keyup", function() {
    if(flag) {
        var text = $(this).val().trim();
        // 匹配查询结果
        searchCheck(text, ".searchIpt");
    }
});

回到页面顶部

1
2
3
4
5
6
7
8
9
10
11
window.onscroll = function(){
    if (document.documentElement.scrollTop || document.body.scrollTop > 0) {
        document.getElementById("test").style.display='block';
    }else{
        document.getElementById("test").style.display='none';
    }
}
test.onclick = function(){
    document.body.scrollTop = document.documentElement.scrollTop = 0;
    document.getElementById("test").style.display = "none";
}

过滤选择器

jQuery 学习之路（2）：选择器与过滤器

一、基本选择器

1
2
3
4
5
6
7
8
9
标签选择器：　　$('button')

ID选择器：　　$('#id1')

类选择器：　　$('.class1')

多重选择器：　　$('#id1,.class1,button')

全体选择器：　　$('*')

基本选择器完全根据 CSS 选择器的规范而来，对于了解 CSS 的用户非常容易掌握。

二、层次选择器

1
2
3
4
子选择器：　　$('parent > child')　　　　　　　　
后代选择器：　　$('ancester descendant')
单一兄弟选择器：　　$('prev + next')
所有兄弟选择器：　　$('prev ~ siblings')

　　子选择器和后代选择器的区别：子选择器是后代选择器的子集，前者只筛选出符合条件的直接子元素，后者筛选出符合条件的所有子孙元素。
　　单一兄弟选择器与所有兄弟选择器类似，前者只筛选出符合条件的下一个同辈元素，后者筛选出符合条件的后面的所有的同辈元素。

三、属性选择器

　　属性选择器可以筛选出包含特定属性的元素，或者根据属性的值的格式来筛选出元素。

1
2
3
4
5
6
7
属性包含：　　　　　　　　[attr]
属性值为指定字符串：　　　　[attr = "value"]
属性值不为指定字符串：　　　　[attr != "value"]
属性值以指定字符串开始：　　　　[attr ^= "value"]
属性值以指定字符串结束：　　　　[attr $= "value"]
属性值包含指定字符串：　　　　[attr *= "value"]
多属性筛选：　　　　　　　　[attr1 *= "value1"][attr2 = "value2"]

　　其中，[name != “value”] 的实现效率较低，可以使用 :not([attr = ‘value’]) 的形式

四、基本过滤器

　　有些过滤器的实现并不高效，原因参见官网，对于这部分过滤器，建议使用 .filter(selector) 来调用，如 $(‘div’).filter(‘:hidden’) ，后面所有的这类过滤器都以红色特殊标出。

1
2
3
4
5
6
7
8
9
10
11
12
:animated　　　　    当前执行动画的元素
:eq(index)　　　　    取出指定索引的元素（jQuery 对象是集合，索引从0开始）
:gt(index)　　　　　　取出索引大于指定值的元素
:lt(index)　　　　　　　　取出索引小于指定值的元素
:first 　　　　　 取出第一个元素，即索引为0的元素
:last　　　　　　取出最后一个元素，即索引为 size()-1 的元素
:even　　　　　　取出索引为偶数的元素
:odd　　　　　　取出索引为奇数的元素
:header　　　　　取出所有标题元素，如 h1,h2,h3 等
:root　　　　　　取出根元素
:not(selector)　　取出所有不匹配指定过滤器的元素　
:focus　　　　　　　　　　当前得到焦点的元素

五、子元素过滤器

1
2
3
4
5
6
7
8
9
10
:first-child　　　　　　　　是其父元素的第一个子元素
:last-child　　　　　　　　是其父元素的最后一个元素
:first-of-type　　　　　　　　是同辈同类元素中的第一个元素
:last-of-type　　　　　　　　是同辈同类元素中的最后一个元素
:only-child　　　　　　　　是其父元素的唯一子元素
:only-of-type　　　　　　在同辈元素中，没有同类元素的元素，即此元素是同辈元素中唯一的该类型元素
:nth-child(index)　　　　其父元素的第 index 元素，该 index 从 1 开始
:nth-last-child(index)　　　　其父元素的倒数第 index 元素，该 index 从 1 开始
:nth-of-type(index)　　　　　　是同辈的同类元素中的第 index 元素，该 index 从 1 开始
:nth-last-of-type(index)　　　　是同辈的同类元素中倒数第 index 元素，该 index 从 1 开始

六、内容过滤器

1
2
3
4
:contains(text)　　　　　　包含指定字符串的元素
:empty　　　　　　　　　　没有子元素的元素
:has(selector)　　　　　　 包含至少一个指定的选择器匹配的元素
:parent　　　　　　　　　　包含至少一个子节点的（一个元素或文本）元素

七、表单过滤器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
:input
:text
:password
:button
:reset
:submit
:radio
:checkbox
:checked
:selected
:file
:image
:focus
:enabled
:disabled

八、可见性过滤器

1
2
:hidden　　　　当前隐藏的元素
:visible　　　　当前显示的元素

Tabs切换内容

1
2
3
4
$(".tab li").click(function(){
    $(".tab li").eq($(this).index()).addClass("active").siblings().removeClass("active");
    $(".tabContent div").hide().eq($(this).index()).show();
})

jQuery自定义扩展

插件

  • jquery-ui
  • jquery-lazyload
  • jquery-color

jquery获取name属性为数组的值

1
2
3
4
<input type="text" name="nameArr[]" value="1" title="标题1">
<input type="text" name="nameArr[]" value="2" title="标题2">

var inputs = $('input[name^="nameArr"]');

需求

新增按钮事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
$("#hb-setting").on("click", "#drawCard-add", function () {
    var i = $(this).data('index') + 1;  // name值的下标
    var li = '<div class="layui-form-item gear-item">'+
                '<label class="layui-form-label"></label>'+
                '<div class="layui-input-block">'+
                    '<div class="layui-input-inline">'+
                        '<input type="number" name="gear7['+ i +']" min="0" lay-verify="required" lay-reqText="..." placeholder="请输入..." class="layui-input">'+
                    '</div>'+
                    '<div class="layui-input-inline">'+
                        '<input type="number" name="reg_day7['+ i +']" min="0" lay-verify="required" lay-reqText="..." placeholder="请输入..." class="layui-input">'+
                    '</div>'+
                    '<div class="layui-input-inline">'+
                        '<input type="number" name="draw_card_times7['+ i +']" min="0" lay-verify="draw_card_times" placeholder="请输入..." class="layui-input">'+
                    '</div>'+
                    '<div class="layui-input-inline">'+
                        '<input type="text" name="money7['+ i +']" lay-verify="drawCard_money" placeholder="请输入..." class="layui-input">'+
                    '</div>'+
                    '<div class="layui-input-inline w154">'+
                        '<input type="text" name="frontend_money7['+ i +']" placeholder="请输入前端展示金额" class="layui-input">'+
                    '</div>'+
                    '<div class="layui-input-inline w154">'+
                        '<input type="text" name="describe7['+ i +']" lay-verify="required" lay-reqText="..." placeholder="请输入..." class="layui-input">'+
                    '</div>'+
                    '<div class="layui-inline">'+
                        '<i class="layui-icon layui-icon-add-circle" id="drawCard-add" data-index="'+ i +'"></i> '+
                    ' </div>'+
                '</div>'+
            '</div>';

    $(this).removeAttr("id");
    $(this).removeClass("layui-icon-add-circle");
    $(this).addClass("layui-icon-reduce-circle");
    $(this).addClass("drawCard-del");

    // 在前面追加元素
    $("#drawCard_hb_tr").before(li);

    form.render(); //更新全部

    // 活动状态为“关闭”时——不强制要求输入档位内容
    var name_arr = ['gear7', 'reg_day7', 'describe7', 'cash_notice7'];
    updateVerify($('[name="reward_7"]').val(), name_arr);
})
更新表单的验证条件函数

开启状态，必填，关闭状态，不必填

1
2
3
4
5
6
7
8
9
10
11
12
13
// 更新表单的验证条件
 function updateVerify(status, name_arr) {
    for(var i in name_arr) {
        // 关闭状态，不强制要求输入档位内容
        if(status === "0") {
            $('[name^="' + name_arr[i]+ '"]').removeAttr("lay-verify");
        } else {
            $('[name^="' + name_arr[i]+ '"]').attr("lay-verify", "required");
        }
    }

    form.render(); // 更新表单元素
 }
减去按钮事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// 删除按钮
$("#hb-setting").on("click", ".drawCard-del", function () {
    var idx = $(this).data('index');  // 当前被删除的index
    $(this).parent(".layui-inline").parent(".layui-input-block").parent(".layui-form-item").remove();   // 删除当前列的元素

    updateGearIndex(idx, "#drawCard-add");      
});


// 更新档位中的name值/减号/加号的下标
function updateGearIndex(idx, add_btn) {
    var gear_items = $('.layui-show').find(".gear-item");  // 档位配置的所有列
    var gear_len = gear_items.length;  // 档位的列数
    // 更新下标
    for(var j = idx; j < gear_len; j++) {
        var inputs = $(gear_items[j]).find('.layui-input-block').children().find('input');   // 当前横列的所有input
        $(gear_items[j]).find('.layui-icon-reduce-circle').attr('data-index', j);    // 修改减号的index——都减1

        for(var k = 0; k < inputs.length; k++) {
            var name = $(inputs[k]).attr('name');
            $(inputs[k]).attr("name", setCharOnIndex(name, name.length - 2, j));    // 修改name值的下标-减1
        }
    }
    form.render(); //更新全部

     // 修改加号的data-index属性
    $(add_btn).attr('data-index', gear_len -1);
}
切换状态事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 // 监听活动状态-等级红包
 form.on('select(reward_1)', function(data){
    var name_arr = ['gear1', 'reg_day1', 'level1', 'describe1', 'cash_notice1'];

    updateVerify(data.value, name_arr);

    upateLabelIcon(data.value, ['cash_level1', 'cash_notice1']);
}); 

// 更新表单元素是否必填的 * 图标
function upateLabelIcon(status, name_arr2) {
    for(var i in name_arr2) {
        if(status === "0") {
            $('[name="' + name_arr2[i] + '"]').parent(".layui-input-block").siblings(".layui-form-label").removeClass("required");
        } else {
            $('[name="' + name_arr2[i] + '"]').parent(".layui-input-block").siblings(".layui-form-label").addClass("required");
        }
    }
}

jquery获取name属性为数组的值（天王老子来了我也这样写）…

1
2
3
4
5
6
7
8
9
10
11
12

//补充一下知识
$("input[name^='news']")         选择所有的name属性以'news'开头的input元素 
$("input[name$='news']")         选择所有的name属性以'news'结尾的input元素 
$("input[name*='man']")          选择所有的name属性包含'news'的input元素

//下面是代码
var jurisdiction={};//创建一个空对象
$('input[name^="jurisdiction"]:checked').each(function(index,element){	//index下标 element 当前选中的元素
  jurisdiction[index] = $(this).val();//压入对象数组
});

jquery js 获取input name为数组或者属性相同的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<input type="text" name="nameArr[]" value="1" title="标题1">
<input type="text" name="nameArr[]" value="2" title="标题2">
 
<input type="text" id="video_url0" value="0" name="nameArr0" class="video_url" placeholder="请上传活动视频">
<input type="text" id="video_url1" value="1" name="nameArr1" class="video_url" placeholder="请上传活动视频">
<input type="text" id="video_url2" value="2" name="nameArr2" class="video_url"
placeholder="请上传活动视频">
 
$("input[name^='nameArr']")//获取所有的name属性以'nameArr'开头的input元素 
$("input[name$='nameArr']")//获取所有的name属性以'nameArr'结尾的input元素 
$("input[name*='nameArr']")//获取所有的name属性包含'nameArr'的input元素
 
//创建一个空数组
var data_arr = [];
//index下标 element 当前选中的元素
$('input[name^="nameArr"]').each(function(index,element){
    //压入数组	
    data_arr[index] = $(this).val();
});
console.log(data_arr);

发表于 更新于 分类于

判断当前设备是否为移动端

1
2
3
function isMobile() {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

判断当前设备是否为Android设备

1
2
3
function isAndroid() {
  return /Android/i.test(navigator.userAgent);
}

判断当前设备是否为iOS设备

1
2
3
function isIOS() {
  return /iPhone|iPad|iPod/i.test(navigator.userAgent);
}

判断当前设备是否为PC端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function isDesktop() {
    const userAgent = navigator.userAgent;
    // 移动设备关键词
    const mobileKeywords = ['Mobile', 'Android', 'iPhone', 'iPad', 'Windows Phone', 'BlackBerry', 'Nokia', 'SymbianOS'];

    // 判断是否包含移动设备关键词
    for (let keyword of mobileKeywords) {
        if (userAgent.includes(keyword)) {
            return false; 
        }
    }

    return true; 
}

JavaScript中的navigator.userAgent属性来获取用户代理字符串

如果将iPod也视为移动设备，可以将iPod添加到mobileKeywords中。

判断当前环境(当前所在客户端)

判断是否为微信

1
2
3
4
function isWeChat() {
    var ua = navigator.userAgent.toLowerCase();
    return ua.indexOf('micromessenger') > -1;
}

判断是否为QQ

1
2
3
4
function isQQ() {
    var ua = navigator.userAgent.toLowerCase();
    return ua.indexOf("qq") !== -1;
}

判断是否为支付宝

1
2
3
4
function isAlipay() {
    var ua = navigator.userAgent.toLowerCase();
    return ua.indexOf('alipayclient') > -1;
}

判断是否为微博

1
2
3
4
function isWeibo() {
    var ua = navigator.userAgent.toLowerCase();
    return ua.indexOf('weibo') > -1;
}