javascript学习记录

时间日历控件

####layDate 
range:true          #是否区间选择;range:'~'来自定义分割字符';
type:'date',       #数据类型;year/month/date/time/datetime;
showBottom:false   #是否显示底部栏;
format:'yyyy年MM月dd日'      #日期的格式
min:-7 ,max:7               #前后七天
show :false                 #显示
zindex:666                  #层级;主要解决元素相互遮盖的情况
btns:['clear','now','confirm']         #下角显示的按钮
theme:default                          #主题可选 molv（墨绿）grid(格子)
##触发回调函数
ready      #打开时
change     #日期时间被切换
done       #选择完毕后

<input readonly type="text"  id="operateTime" name="filter_operateTime" class="box" value="${params.operateTime}"/>

<script type="application/javascript" src="${ctx}/resources/js/laydate/laydate.js"></script>
 //开始结束时间选择器
 laydate.render({
            elem:'#operateTime',
            trigger:'click',
            showBottom:false,
            range:'~',
            // type:'date',
            done:function(value, date, endDate){ //endDate:开启范围选择（range:true）才会返回
                $("body").click();
                $("#operateTime").val(value);
                var data=value.split("~");
                $("#startDate").val(data[0]);
                $("#endDate").val(data[1]);
            }
        });

https://www.jb51.net/article/150932.htm

jQuery

jQuery 是一个 JavaScript 库; 极大地简化了 JavaScript 编程;
jQuery库包含功能:

• HTML元素选取;HTML元素操作;
• CSS操作;
• HTML事件函数;
• JavaScript特效和动画;
• HTML DOM遍历和修改;
• AJAX;
• Utilities;

基本语法:选取html元素执行操作;$(selector).action()

####文档就绪事件;为了在DOM加载完成后才可以对DOM进行操作,避免对未加载的元素进行操作导致错误;
//jQuery入口函数;等到html所有标签(DOM)都加载之后,就会去执行
$(document).ready(function(){
   // 开始写 jQuery 代码...
});
$(function(){
   // 开始写 jQuery 代码...
});
//JavaScript 入口函数;不同于jQuery,js要等到所有内容,包括外部图片之类的文件加载完后,才会执行;
window.onload = function () {
    // 执行代码
}

事件方法

$(selector).blur()   #元素失去焦点时触发
$(selector).hover(inFunction,outFunction)  #鼠标悬停时触发

效果

隐藏;显示;切换;滑动;淡入淡出;以及动画;

//隐藏显示
$("p").hide();
$("p").show();
$("p").toggle(); //切换
//speed:slow;fast或毫秒;
//第二个参数表示过渡使用哪种缓动函数;自带swing/linear
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
$("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });

选择器

jQuery选择器基于元素的id,类,类型,属性,属性值进行查找html元素;
jQuery 中所有选择器都以 $() 开头;

#####基本定位
$("p")               #选择所有<p>的元素;
$("#test")           #选择id=test的元素;id是唯一的;
$(".test")           #选择class=test的所有元素;
$("*")               #选取所有元素;
$("this")            #选取当前元素;
$("p.intro")         #选取class=intro的所有<p>元素;
$("#test,p")  　　    #选取所有<p>和id=test的元素;

####层次选择器
$("div p")                #选择<div>元素内的所有<p>元素;
$("div>p")                #选取所有父级是<div>元素的<p>元素;
$("div+p")                #选择 <div>元素的下一个<p>同辈元素;=>$("div").next("p");
$("p~ul")                 #选择<p>元素之后的每一个<ul>元素;=>$("p").nextAll("ul");
$("div").siblings("p") 　　#获取<div>元素的所有<p>同辈元素;
$("div").prev("p") 　　    #获取<div>元素的前面紧邻的同辈<p>元素

####内容选择器
$("div:contains('Name')") #选取所有<div>中含有'Name'文本的元素 
$("div:empty")            #选取不包含子元素(包括文本元素)的<div>空元素 
$("div:has(p)")           #选取所有含有<p>元素的<div>元素 
$("div:parent")           #选取拥有子元素的(包括文本元素)<div>元素 

#####基本过滤选择器
$("input:not(.test)")     #选择所有class!=test的input元素;
$("input:fist")           #匹配所有input元素中的第一个元素;last最后一个;
$("input:enven")          #匹配索引值为偶数的input元素;从0开始;odd奇数;
$("input:eq(2)")          #匹配索引值=2的input元素;gt大于;lt小于;
$("div:animated")         #选择所有正在执行动画效果的div元素;
$(":header")              #选择所有标题元素;eg:h1,h2,h3...;
$(":root")                #选择该文档的根元素;
$(":focus")               #选取当前获取焦点的元素;

$("div:visible")          #选择所有显示的div元素;hidden隐藏;

####属性过滤选择器
$("div[id]")              　　　　#选取所有拥有属性id的元素
$("input[name='test']")     　　 #选取所有的name属性等于'test'的<input>元素 
$("input[name!='test']")  　　　 #选取所有的name属性不等于'test'的<input>元素 
$("input[name^='news']")        #选取所有的name属性以'news'开头的<input>元素 
$("input[name$='news']")        #选取所有的name属性以'news'结尾的<input>元素 
$("input[name*='news']")        #选取所有的name属性包含'news'的<input>元素 
$("div[title|='en']")           #选取属性title等于'en'或以'en'为前缀(该字符串后跟一个连字符'-')的<div>元素
$("div[title~='en']")           #选取属性title用空格分隔的值中包含字符en的<div>元素
$("div[id][title$='test']")     #选取拥有属性id,并且属性title以'test'结束的<div>元素

插件

niceScroll

niceScroll[官网地址]是完全基于 jQuery 框架的滚动条插件;有着类似 iOS 系统设备的滚动条外观;支持任意的<div><iframe><body>元素的滚动效果;
功能特点:不需要额外css,样式可完全自定义;兼容性强;支持触摸事件;

//常用参数说明
touchbehavior:true,     #是否是触摸式滚动效果
cursorcolor:"#333",     #滚动条的颜色值
cursoropacitymax:0.6,   #滚动条的透明度值
cursorwidth:20,         #滚动条的宽度值
cursorminheight:32,    #设置滚动条的最小高度 (像素)
background:"#00F",      #滚动条的背景色,默认是透明的
autohidemode:true,      #滚动条是否是自动隐藏,默认值为 true

//需要引入jquery.js;jquery.nicescroll.js
<script type="text/javascript" src="${ctx}/resources/js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/jquery.nicescroll-3.7.6.js"></script>
//整个页面使用niceScroll
$(function() {
	$("html").niceScroll({
		cursorborder:"",
		cursorcolor:"#0B51C1",
		boxzoom:true,
	});
})
//返回滚动条对象
var nice = false;
$(function() { 
    nice = $("body").niceScroll();
});
//定位使用
$("#div").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});
//重置滚动条大小(当窗口页面大小变化时使用)
$("html").getNiceScroll().resize();

问题记录:

• 遇到页面滑动不变;
  原因是页面加载其他文件导入页面大小发生变化,滚动条还是基于原先页面大小进行计算;
  解决是重置滚动条大小;
• chrome滑动不断报错;
  原因是从 chrome56 开始,在 window,document 和 body 上注册的 touchstart 和 touchmove 事件处理函数,会默认为是 passive:true;浏览器忽略 preventDefault() 就可以第一时间滚动了
  解决查看https://github.com/inuyaksa/jquery.nicescroll/issues/799