加载次序
.1等页面加载完毕
<script type="text/javascript">
jQuery(window).load(function(){
...
});
</script>
$(window).load(function(){...})
.2一开始加载
$(document).ready(function(){}),或简写为$(function(){})
.3在所有DOM元素加载之前执行的jQuery代码
<script type="text/javascript">
(function() {
alert("DOM还没加载哦!");
})(jQuery)
</script> . toggle函数
var myAudio = document.getElementById("myAudio");
$("#pic1").toggle(function () {
myAudio.src = "upfiles/music/01.mp3";
myAudio.play();
$("#pic1").removeClass('navout');
$("#pic1").addClass('navOn');
}, function () {
myAudio.pause();
$("#pic1").removeClass('navOn');
$("#pic1").addClass('navout');
});
.添加css
$("#creatbox, #creatboxType2").css("display", "none");
document.getElementById("btn1").className="down_btn1 font18bg"; .mouseover函数
$('.title-list li').mouseover(function(){
var liindex = $('.title-list li').index(this);
$(this).addClass('on').siblings().removeClass('on');
$('.product-wrap div.product').eq(liindex).fadeIn().siblings('div.product').hide();
var liWidth = $('.title-list li').width();
$('.lanrenzhijia .title-list p').stop(false,true).animate({'left' : liindex * liWidth + 'px'},);
}); .click函数
$(document).ready(function(){
//页面中的DOM已经装载完成时,执行的代码
$("#Mul > li > a").click(function(){
//找到主菜单项对应的子菜单项
var ulNode = $(this).next("ul");
ulNode.slideToggle();
changeIcon($(this));
});
}); 在元素上加onclick()
<a class="bootstro" onclick="SeachByBytton();" id="btnSearch">
function SeachByBytton() {
AssessmentVModel.GetData();
}
或者
<input type="button" id="btnPrint" value="Export" />
$(document).on('click', '#btnPrint', function () {
ExportToPDF($('#divtoPrint'),[], '导出标题', PDFPageType.Portrait);
});
.开关灯
$(".SoundHuaLi ul li").hover(
function () {
$(this).siblings().find(".li_bg_02").fadeIn()
},
function () {
$(this).siblings().find(".li_bg_02").fadeOut()
}
) . getElementsByTagName
var aBtn=oDiv.getElementsByTagName('input'); .元素选中状态
<script>
window.onload = function(){
var oNav = document.getElementById('nav');
var aLi = oNav.getElementsByTagName('a');
for( var i = aLi.length; i--;){
aLi[i].onclick = function(){
for( var i = aLi.length; i--;){
aLi[i].className = '';
}
this.className = 'active';
}
}
}
</script>
<script type="text/javascript">
(function() {
var radioWrap = document.getElementById("radio_wrap"),
li = radioWrap.getElementsByTagName("li");
for(var i = ; i < li.length; i++){
li[i].onclick = function() {
for(var i = ; i < li.length; i++){
li[i].className = "";
}
this.className = "checked";
}
}
})();
</script> .添加多个样式属性
var oDiv=document.getElementById('div1');
oDiv.style.width='300px';
oDiv.style.height='300px';
oDiv.style.background='green';
$(".Nav_ul_li").css({ "background-color": "", "border": "0px" });
  $(".Nav_ul_li").eq(id).css({ "background-color": "#FBD9D9", "border": "1px solid #FFF", "border-bottom": "0px" }); .让titile滚动
<script language=javascript>
var text = document.title
var timerID
function newtext() {
clearTimeout(timerID)
document.title = text.substring(, text.length) + text.substring(, )
text = document.title.substring(, text.length)
timerID = setTimeout("newtext()", )
}
$(window).load(function () { newtext() })
</script> $('div').css({ height: '200px', background: '#0094ff' });
.下拉导航
<script>
$(document).ready(function () {
$('li.nLi').mousemove(function () {
$(this).find('ul').slideDown();//you can give it a speed
});
$('li.nLi').mouseleave(function () {
$(this).find('ul').slideUp("fast");
});
});
</script> .滚动事件
$(window).scroll(function(){
if($(this).scrollTop() > ){
$('#updown').fadeIn();
$("#logowraper").hide(); } else if($(this).scrollTop() < ) {
$('#updown').fadeOut();
$("#logowraper").show();
};
}); .相对于页面固定
html中:
<script type="text/javascript">
$(".navbg").capacityFixed();
</script>
js中:
(function($){
$.fn.capacityFixed = function(options) {
var opts = $.extend({},$.fn.capacityFixed.deflunt,options);
var FixedFun = function(element) {
var top = opts.top;
element.css({
"top":top
});
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top:
});
} else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: "absolute",
top: top
});
}
});
element.find(".close-ico").click(function(event){
element.remove();
event.preventDefault();
})
};
return $(this).each(function() {
FixedFun($(this));
});
};
$.fn.capacityFixed.deflunt={
right : ,//相对于页面宽度的右边定位
top:
};
})(jQuery); .固定图片的最大宽
var maxwidth = ;
$(".news_text img").each(function(){
if ($(this).width() > maxwidth) {
$(this).width(maxwidth);}
}); .判空
if(send=='' || send==undefined || send==null)
if (send.length>) .禁用右键
<script type="text/javascript">
function stop() {
return false;
}
document.oncontextmenu = stop;
document.onselectstart = stop;
document.oncopy = stop;
document.oncut = stop;
document.onpaste = stop;
</script> .密码输入框样式
<p>密<em style="padding:0 1em;"></em>码:<input name="passwd" type="password" id="passwd" class="log_txt" style="display:none" /><input name="txt_passwd" type="text" id="txt_passwd" value="默认密码:888888" class="log_txt" />
<script>
$("#txt_passwd").focus(function () {
$("#txt_passwd").hide();
$("#passwd").show();
$("#passwd").focus();
});
$("#passwd").blur(function () {
if ($("#passwd").val() == "") {
$("#txt_passwd").show();
$("#passwd").hide()
}
});
</script>
</p> .输入框选中与失去时样式
<script language="javascript" type="text/javascript">
function glb_searchTextOnfocus(obj) {
if (obj.value == '请输入您想要的作品...')
obj.value = '';
obj.style.color = '#333';
}
function glb_searchTextOnBlur(obj) {
if (obj.value == '') {
obj.value = '请输入您想要的作品...';
obj.style.color = '#98BC00';
} else {
obj.style.color = '#333';
}
}
</script>
<input name="q" type="text" class="searchkey " value="请输入您想要的作品..." onfocus="glb_searchTextOnfocus(this);" onblur="glb_searchTextOnBlur(this);" maxlength="" /> .监听回车
$(document).keydown(function(e) {
if (e.keyCode == ) {
$("#btnLogin").click();
}
}) 20点击隐藏与显示切换
.1隐藏的为选择元素只有一个同级
<script>
$(function () {
$(".showbo").each(function () {
$(this).click(function () {
if ($(this).next().css("display") == "none") {
$(this).next().css("display", "block");
} else {
$(this).next().css("display", "none");
}
});
});
})
</script>
<div class="showbo">
<a href="javascript:void(0)" title="@item.DContent.Title">
<span>@(++i)、</span>
@(new HtmlString(GetSubString(item.DContent.Title, )))
</a>
<span class="time">@item.DContent.AddDate.ToString("yyyy-MM-dd")</span>
</div>
<div class="qusans"><span class="qpre">解疑:</span>@item.DContent.Summary</div> .2隐藏的为选择元素多个同级
$(".ziyuanmingtit").each(function () {
$(this).click(function () {
if ($(this).siblings(".zyhih").css("display") == "none") {
$(this).siblings(".zyhih").css("display", "block");
} else {
$(this).siblings(".zyhih").css("display", "none");
}
});
}); <div class="ziyuanming ziyuanmingtit"><a>@item.DContent.Title</a></div>
<div class="ziyuanda">@item.DContent.AddDate.ToString("yyyy-MM-dd")</div>
<div class="zyhih">
<span class="prepre">推荐理由:</span><div class="ppcot">@item.DContent.CustomField09</div>
<span class="prepre">馆员回复:</span><div class="ppcot">@item.DContent.CustomField10</div>
</div>
. js除法四舍五入保留小数点后两位写法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html> <head><title>floatDecimal.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
//保留两位小数
//功能:将浮点数四舍五入,取小数点后2位
function toDecimal(x) {
var f = parseFloat(x);
if (isNaN(f)) {
return;
}
f = Math.round(x*)/;
return f;
}
//制保留2位小数,如:2,会在2后面补上00.即2.00
function toDecimal2(x) {
var f = parseFloat(x);
if (isNaN(f)) {
return false;
}
var f = Math.round(x*)/;
var s = f.toString();
var rs = s.indexOf('.');
if (rs < ) {
rs = s.length;
      s += '.';
}
while (s.length <= rs + ) {
s += '';
}
return s;
}
function fomatFloat(src,pos){
return Math.round(src*Math.pow(, pos))/Math.pow(, pos);
}
//四舍五入
alert("保留2位小数:" + toDecimal(3.14159267));
alert("强制保留2位小数:" + toDecimal2(3.14159267));
alert("保留2位小数:" + toDecimal(3.14559267));
alert("强制保留2位小数:" + toDecimal2(3.15159267));
alert("保留2位小数:" + fomatFloat(3.14559267, ));
alert("保留1位小数:" + fomatFloat(3.15159267, ));
//五舍六入
alert("保留2位小数:" + 1000.003.toFixed());
alert("保留1位小数:" + 1000.08.toFixed());
alert("保留1位小数:" + 1000.04.toFixed());
alert("保留1位小数:" + 1000.05.toFixed());
//科学计数
alert(3.1415.toExponential());
alert(3.1455.toExponential());
alert(3.1445.toExponential());
alert(3.1465.toExponential());
alert(3.1665.toExponential());
//精确到n位,不含n位
alert("精确到小数点第2位" + 3.1415.toPrecision());
alert("精确到小数点第3位" + 3.1465.toPrecision());
alert("精确到小数点第2位" + 3.1415.toPrecision());
alert("精确到小数点第2位" + 3.1455.toPrecision());
alert("精确到小数点第5位" + 3.141592679287.toPrecision());
</script>
</head>
<body>
This is my HTML page. <br>
</body>
</html>
.清空文本输入框的值:
function ResetValue() {
var obj = $("input");
for (var i = ; i < obj.length; i++)
{
if (obj[i].type == "text")
{
obj[i].value = "";
}
}
} 23.鼠标进入控制div展示与收缩
 $("#txtList").mouseenter(function() {
                $("#divChkList").slideDown("fast");
            });
            $("#divMulti").mouseleave(function() {
                $("#divChkList").slideUp("fast");
            });
<div id="divMulti">
                <asp:TextBox ID="txtList" runat="server" Width="100px"></asp:TextBox>
                <div id="divChkList" style="display: none; border: solid 1px #CCCCCC; position: fixed;z-index: 100; height: 160px; width: 100px; overflow-y: scroll;
                    <asp:CheckBoxList ID="chkList" runat="server" RepeatLayout="Table" RepeatDirection="Vertical">
                    </asp:CheckBoxList>
                </div>
            </div>

js一点代码备用的更多相关文章

  1. 网络问卷调查js实现代码

    昨天一个同行妹纸写了一个网络问卷调查的效果,但是有bug,于是就来问我该如何解决这个bug.经过我的分析,bug主要还是出在复选框的那部分,经过修改,bug问题解决,现在贴出如下代码,仅供大家参考: ...

  2. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  3. 在Sublime Text 3 中安装SublimeLinter,Node.js进行JS&CSS代码校验

    转载自:http://www.wiibil.com/website/sublimelinter-jshint-csslint.html 在Sublime Text中安装SublimeLinter,No ...

  4. 仿jQuery的siblings效果的js原生代码

    仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...

  5. SpringMVC学习系列-后记 结合SpringMVC和Hibernate-validator,根据后台验证规则自动生成前台的js验证代码

    在SpringMVC学习系列(6) 之 数据验证中我们已经学习了如何结合Hibernate-validator进行后台的数据合法性验证,但是通常来说后台验证只是第二道保险,为了更好的用户体验会现在前端 ...

  6. 响应式js幻灯片代码一枚

    网站搭建经常会用到js幻灯片轮播,放上几张上档次的美图,为你的爱站增添大气元素.经常看到一些js幻灯片代码,但是感觉不是很美观,有的也不支持自适应缩放,也即是响应式,现在智能手机的普及以及移动浏览器技 ...

  7. ASP.Net MVC4中封装CSS和js冗余代码(不让其大篇的显示在前台上)

    (1)封装CSS和JS代码,使用调用的方式在前台进行调用.是开发看起来简洁和易于管理,可达到重用.   由于asp.netMVC4 框架 ,在封装js和CSS的时候,有如下规范: using Syst ...

  8. 使用正则表达式匹配JS函数代码

    使用正则表达式匹配JS函数代码 String someFunction="init"; Pattern regex = Pattern.compile("function ...

  9. JS倒计时 代码

    JS倒计时 代码 <div> <span id="KSD">3</span>天 <span id="KSH">1 ...

随机推荐

  1. Spring MVC常用注解@PathVariable、@RequestHeader、@CookieValue、@RequestParam、@RequestBody、@SessionAttributes、@ModelAttribute

    简介: handler method参数绑定常用的注解,我们根据他们处理的Request的不同内容部分分为四类:(主要讲解常用类型) A.处理requet uri部分(这里指uri template中 ...

  2. 实现自动解析properties文件并装配到Bean

    主要实现了,配置的属性就装配, 没有配置的属性不装配 思路: 1 . 通过反射获取类内部所有方法名称 2 . 获取perperties 的key集合 3 .  处理字符串,比较两个匹配,如果匹配成功就 ...

  3. Android-25种开源炫酷动画框架

    前言 忙碌的工作终于可以停息一段时间了,最近突然有一个想法,就是自己写一个app,所以找了一些合适开源控件,这样更加省时,再此分享给大家,希望能对大家有帮助,此博文介绍的都是UI上面的框架,接下来会有 ...

  4. Postgres间隔大量写IO的解决办法

    概述 为了保证数据可靠性,同时还要保证好的读写性能,以及读写的一致性,经过多年的积累,REDO日志,shared buffer等基本成为关系型数据库的标配.postgres也不例外. 为了保证数据的可 ...

  5. @RestController和@Controller的差异

    SpringMVC现在使用越来越普及,在使用注解写控制器中发现,需要控制器页面跳转时,需要对类注解为@Controller,而此时,使用freemarker时,在类中写的restful接口会报cann ...

  6. mysql重置密码和mysql error 1044(42000)错误

    #mysql错误:(密码不正确,需要重置密码) ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using passwor ...

  7. 如何正确理解关键字"with"与上下文管理器(转载)

    如果你有阅读源码的习惯,可能会看到一些优秀的代码经常出现带有 “with” 关键字的语句,它通常用在什么场景呢?今天就来说说 with 和 上下文管理器. 对于系统资源如文件.数据库连接.socket ...

  8. Python学习之路上的几个经典问题

    1.python有三元运算符语法(类似C语言的"?")么? 语法如下: [on_true] if [expression] else [on_false] 如果[expressio ...

  9. Druid对比Redshift

    Redshift 内部使用了亚马逊取得了授权的ParAccel 实时注入数据 抛开可能的性能不同, 有功能性的不同 Druid 适合分析大数据量的流式数据, 也能够实时加载和聚合数据一般来讲, 传统的 ...

  10. Log文件太大,手机ROM空间被占满

    客户要装车,进行项目验收了. 今天拿着几台手机去客户处,其中有一台手机从昨天晚上开始就一直开着我们的APP,今天早晨打开手机发现APP没有反应了. 在程序列表中将其杀掉,然后再启动程序,发现程序不能启 ...