js及jquery常用代码
1、获取屏幕尺寸
document.documentElement.scrollWidth;
document.documentElement.scrollHeight;
$(window).width();
$(window).height();
2、页面加载完成执行代码块及DOM加载完毕之后执行
$(document).ready(function(){
//脚本
}); $().ready(function() {
//脚本
}) $(function() {
//脚本
})
3、页面分辨率改变后执行
window.onresize=function(){
//脚本
}
$(window).resize(function(){
//脚本
});
4、定时器
setInterval(, 0)
5、点击跳转页面
<li onclick="window.open('xxx.html','_self')"></li>
6、遍历所有td2类里的数值,根据数值大小改变数值颜色
for (var i = 0; i < $('.td2').length; i++) {
var reference = $('.td2').eq(i).text();
if (reference < 50) {
$('.td2').eq(i).css({
color: '#007DFF',
});
} else if (reference >= 50 && reference < 100) {
$('.td2').eq(i).css({
color: '#15C046',
});
}else if (reference >= 100 && reference < 200) {
$('.td2').eq(i).css({
color: '#FFC000',
});
} else {
$('.td2').eq(i).css({
color: '#FF0909',
});
}
}
7、返回顶部
$('.class').on('click',function(){
$('body,html').animate({
scrollTop: 0
},500);
return false;
})
8、判断某个标签是否含有某个类
$(this).hasClass('box-show')
9、隐藏多余的内容
// each遍历
$('.li-out').each(function() {
var words = $(this).text().length;
if (words > 96) {
$(this).text($(this).text().slice(0, 96) + "...");
}
});
10、获取当前时间自己写格式
var date = new Date;
var year = date.getFullYear();
var month = date.getMonth() + 1;
month = (month < 10 ? "0" + month : month);
var day = date.getDate();
day = (day < 10 ? "0" + day : day);
var week_number = date.getDay();
var week;
switch (week_number) {
case 0:
week = "星期日";
break;
case 1:
week = "星期一";
break;
case 2:
week = "星期二";
break;
case 3:
week = "星期三";
break;
case 4:
week = "星期四";
break;
case 5:
week = "星期五";
break;
case 6:
week = "星期六";
break;
}
$('.get_year').text(year);
$('.get_month').text(month);
$('.get_day').text(day);
11、点击空白区域下拉菜单收回
$("body").click(function(event) {
if ($(event.target).parents(".select").length === 0) {
$(".select ul").hide();
}
});
12、阻止冒泡
even.stopPropagation()
//ie 阻止冒泡
even.cancelBubble = true
13、菜单切换
$('.top-li').click(function(event){
$(this).addClass('active').siblings().removeClass('active').parent().parent().next('.llnconter').children('.con-ul').eq($(this).index()).show().siblings('.con-ul').hide()
});
14、点击展开隐藏div
$('.class').click(function() {
$(this).toggleClass('class'); //按钮变化效果
$('.class').animate({ //需要隐藏展开的div
width: 'toggle'
}, 350) //动画时间
});
15、echarts图表中在legend里带入数据和百分比占比
legend: {
orient: 'vertical',
right: 0 *scale,
top: 30 *scale,
height: 150 *scale,
itemWidth: 9 * scale,
itemHeight: 9 * scale,
itemGap: 18 * scale,
data: ['诊查1收入占比', '诊查2收入占比', '诊查3收入占比', '诊查4收入占比', '诊查5收入占比', '挂号1收入占比', '挂号2收入占比', '挂号3收入占比', '挂号4收入占比', '挂号5收入占比'],
formatter: function (e) {
var total = 0
for (var i = 0; i < llnoption6.series[0].data.length; i++) {
total += llnoption6.series[0].data[i].value
}
for (i = 0; i < llnoption6.series[0].data.length; i++) {
var ePercent = (llnoption6.series[0].data[i].value / total * 100).toFixed(2) + '%'
if (llnoption6.series[0].data[i].name === e) {
return '{a|'+ e +'}{b| ¥'+ llnoption6.series[0].data[i].value + '}{c'+i+'| '+ ePercent +'} '
}
}
},
textStyle: {
rich: {
a: {
color: '#999',
fontSize: 12 * scale
},
b: {
color: '#333',
fontSize: 12 * scale
},
c0: {
color: '#44ABFF',
},
c1: {
color: '#31D1F7',
},
c2: {
color: '#20C9C6',
},
c3: {
color: '#3BDA97',
},
c4: {
color: '#73DF6D',
},
c5: {
color: '#D5DA37',
},
c6: {
color: '#F6C541',
},
c7: {
color: '#FE9C56',
},
c8: {
color: '#F96A6A',
},
c9: {
color: '#FB7AA2',
},
}
}
},
legend
16、
js及jquery常用代码的更多相关文章
- jquery常用代码集锦
1. 如何修改jquery默认编码(例如默认GB2312改成 UTF-8 ) 1 2 3 4 5 $.ajaxSetup({ ajaxSettings : { contentT ...
- 三种动态加载js的jquery实例代码另附去除js方法
!-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...
- js与jquery常用数组方法总结
昨天被问数组方法的时候,问到sort()方法是否会改变原来的数组.本来我猜是不会,也是这么说,马上我又觉得,知识这种东西,不确定的时候直接说不确定或不知道就好,只是凭借着不确定的猜测或者是记忆,害人害 ...
- js及jquery常用插件
1.backstretch背景图片插件 可实现背景自适应效果 <script src="dist/js/lib/backstretch/jquery.backstretch.min.j ...
- 【js】前端 js/jquery 常用代码和实践
1.获取某天后几天的日期 //d为传入的日期 days为d后面的几天function getAfterDate(d,days){ var dd = new Date(d); dd.setDate(dd ...
- js|jquery常用代码
页面重定位: window.location.replace("http://www.bczs.net"); window.location.href = "http:/ ...
- Jquery学习总结(1)——Jquery常用代码片段汇总
1. 禁止右键点击 ? 1 2 3 4 5 $(document).ready(function(){ $(document).bind("contextmenu",fun ...
- js和jQuery常用选择器
笔者觉得js是前台基础中的基础,而其选择器则是js基础中的基础,因长期使用框架导致js生疏,所有查资料,回顾一下js的常用选择器: 1.document.getElementById("id ...
- jquery常用代码
转自:未找到 以下是jquery中比较常用的一些操作实现方式: $("标签名") //取html元素 document.getElementsByTagName("&qu ...
随机推荐
- C++学习书籍推荐《Effective STL(英文)》下载
百度云及其他网盘下载地址:点我 作者简介 Scott Meyers is one of the world's foremost authorities on C++, providing train ...
- C语言学习书籍推荐《C语言程序设计 现代方法(第2版)》下载
下载地址:点我 C语言仍然是计算机领域的通用语言之一,但现在的C语言已经和当初的时候大不相同了.本书主要的一个目的就是通过一种“现代方法”来介绍C语言,书中强调标准C,强调软件工程,不再强调“手工优化 ...
- windows7(win7)64/32位激活工具
win7激活工具中文绿色免费版是改自binbin的作品,我们修改的windows7激活工具grldr模拟激活是别人的东西,能激活win7旗舰.原作者是binbin,其他的激活工具都是基于grldr模拟 ...
- Spring Boot + Elasticsearch 实现索引的日常维护
全文检索的应用越来越广泛,几乎成了互联网应用的标配,商品搜索.日志分析.历史数据归档等等,各种场景都会涉及到大批量的数据,在全文检索方面,方案无外乎Lucene.Solr.Elasticsearch三 ...
- 剑指offer第二版-1.赋值运算符函数
面试题1:赋值运算符函数题目要求:为自定义类添加赋值运算符函数,考察一些细节点的书写.
- STM32F072从零配置工程-建立工程文件
快速建立工程有两种方法: 第一种是通过官方提供的外设库来搭建,好处是使用库函数,而不需要深入研究寄存器配置: 第二种是通过STM32CubeMX,好处是直观快速,可以直接帮你配置好功能和时钟,不过使用 ...
- MyBatis从入门到精通:第一章数据库创建文件
/*创建数据库mybatis,并指定编码方式为utf8,字符比较规则为utf8_general_ci*/ CREATE DATABASE mybatis DEFAULT CHARACTER SET u ...
- html css 布局小细节
学了两个月的html和css每天都重复一样的生活,敲着大同小异的代码,这样的生活枯燥无味.我腻了,我也累了!小米首页算是我写的第三个静态页面,写了好久,很多细节都把握不好,下面的这个简单的布局细节是我 ...
- .net持续集成sonarqube篇之sonarqube安装与基本配置
系列目录 Sonarqube下载与安装 Sonarqube下载地址是:https://www.sonarqube.org/downloads/下载版本有两个,一个是长期支持版,另一个是最新版,此处安装 ...
- sessionID是如何在客户端和服务器端传递的?
sessionID是如何在客户端和服务器端传递的? 服务器初次创建session的时候后返回session到客服端(在返回头(response)中有setCookie),浏览器会把sessionnam ...