jQuery技术积累笔记

jQuery文档

目录

jQuery文档. 1

第一章         认识jquery 9

一、jquery.js和jquery.min.js的区别介绍. 9

二、jQuery版本说明. 9

三、页面加载事件(可以写多个ready()). 12

四、链式操作. 13

五、jquery中获得一个对象的所有子元素内容. 13

六、jquery中的变量 与 DOM中的变量. 13

七、DOM对象 转换成jquery对象. 13

八、jquery对象 转换成 DOM对象. 14

九、释放jquery对$符号的控制权. 14

第二章         jquery选择器. 15

一、   jquery完善的处理机制. 15

二、   判断页面是否选择的对象. 15

三、   基本选择器. 15

四、层次选择器. 16

五、过滤选择器(index从0开始). 17

六、子元素过滤选择器(index从1开始). 17

七、内容过滤选择器. 17

八、可见性选择器. 18

九、属性过滤选择器. 18

十、表单对象属性选择器. 19

十一、表单选择器. 20

第三章 jquery中的DOM操作. 21

一、查找元素节点. 21

二、查找属性节点. 21

三、创建元素节点. 21

四、创建文本节点. 22

五、创建属性节点. 22

六、插入节点. 22

七、删除节点. 23

八、清空节点. 23

九、复制节点. 23

十、替换节点. 23

十一、包裹节点. 24

十二、属性操作. 24

十三、样式操作. 25

十四、设置和获取HTML、文本和值. 25

十五、遍历节点. 26

十六、CSS-DOM操作. 27

第四章 jquery中的事件和动画. 28

一、加载DOM 28

二、事件绑定. 28

三、合并事件. 30

四、事件冒泡. 30

五、阻止冒泡. 31

六、阻止默认行为. 31

七、事件对象的属性. 31

八、移除事件. 32

九、一次性事件:绑定的事件执行一次后自动移除. 32

十、事件命名空间. 32

十一、jquery中的动画. 33

十二、自定义动画animate 33

三十、其它动画. 34

第五章 对表单、表格的操作及更多应用. 35

一、表格奇偶行不同的样式. 35

二、复选框应用. 35

第六章 jquery与Ajax的应用. 40

一、load()方法. 40

二、$.get()方法和$.post()方法. 41

三、$.getScript()方法和$.getJSON()方法. 44

四、$.ajax()方法. 45

五、Cookie与Session的区别. 47

第七章 js数组方法大全. 48

第N章:工作积累. 49

判断当前设备是移动端还是PC端. 49

PC、平板、手机关闭当前页问题. 50

字符串补零. 50

字符串截取-处理字符串过长. 51

字符串截取-获取指定字符后面的内容. 52

滑动至指定id的div块. 53

根据传入复选框的id为真的条件给其他复选框勾选上. 54

计算两个数字的百分比. 55

获取完整年份. 56

获取当前月的第一天. 57

获取当前月的最后一天. 58

时间戳转换成普通时间或周数. 60

获取两个字符串日期直接相隔的天数. 62

去掉字符串前后所有空格. 63

鼠标移入、移出触发的事件. 64

select下拉框设置高度的完美解决办法. 64

滚动条样式. 65

标移到最外边滚动条关闭下拉框. 65

判断元素是否在数组内. 66

根据超过6条数据则换行的js拼接技巧. 69

window.open()打开窗口的几种方式. 71

第N+1章:正则验证方法大全. 72

检查输入手机号码是否正确. 72

检查输入的身份证号是否正确. 73

检查输入的字符是否具有特殊字符. 74

检查输入的URL地址是否正确. 75

检查输入的电话号码格式是否正确. 76

校验ip地址的格式. 77

检查输入字符串是否为空或者全部都是空格. 78

检查输入对象的值是否符合整数格式. 79

检查输入字符串是否符合正整数格式. 79

检查输入字符串是否是带小数的数字格式,可以是负数. 80

检查输入对象的值是否符合端口号格式. 81

检查输入对象的值是否符合E-Mail格式. 82

检查输入字符串是否符合金额格式. 82

检查输入字符串是否只由英文字母和数字和下划线组成. 83

检查输入字符串是否只由英文字母和数字组成. 84

检查输入字符串是否只由汉字、字母、数字组成. 85

字符1是否以字符串2结束. 86

字符1是否以字符串2开始. 87

字符1是包含字符串2 88

判断是否是日期. 89

检查输入的起止日期是否正确,且结束日期>=起始日期. 90

检查输入的Email信箱格式是否正确. 92

检查证券代码是否正确. 93

第N+2章:常用CSS 94

CSS鼠标效果手型效果. 94

相对位置. 95

 

 

 

 

 

一、jquery.js和jquery.min.js的区别介绍

区别:
jquery.js是完整的未压缩的jQuery库,文件比较大,一般用于阅读学习源码或修改源码,一般不用于线上项目。

jquery.min.js是由完整版的jQuery库经过压缩得来,压缩后功能与未压缩的完全一样,只是将其中的空白字符、注释、空行等与逻辑无关的内容删除,并进行一些优化。这个版本一般用于网站引用使用,减小文件体积,降低网站流量,提升访问速度等。

 

二、jQuery版本说明

1、jquery-2.0以上版本不再支持IE 6/7/8) 并不是最新的版本就最好的,而是根据您项目需求所适合的版本!

2、百度引用地址 (推荐目前最稳定的,不会出现延时打不开情况)。

3、jQuery各版本:

jquery-3.3.1(最新)

官网jquery压缩版引用地址:

 

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

 

jquery-3.2.1

官网jquery压缩版引用地址:

 

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

 

jquery-3.1.1

官网jquery压缩版引用地址:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

 

 

jquery-3.0.0

官网jquery压缩版引用地址:

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

jquery-2.1.4

百度压缩版引用地址:

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

微软压缩版引用地址:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>

官网jquery压缩版引用地址:

<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

jquery-2.1.1

百度压缩版引用地址:

<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

微软压缩版引用地址:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.1.min.js"></script>

官网jquery压缩版引用地址:

<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>

jquery-2.0.0

百度压缩版引用地址:

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

微软压缩版引用地址:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>

官网jquery压缩版引用地址:

<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>

jquery-1.11.3

百度压缩版引用地址:

<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

微软压缩版引用地址:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.3.min.js"></script>

官网jquery压缩版引用地址:

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

jquery-1.11.1

百度压缩版引用地址:

<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>

微软压缩版引用地址:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.1.min.js"></script>

官网jquery压缩版引用地址:

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

jquery-1.10.2

百度压缩版引用地址:

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

微软压缩版引用地址:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.2.min.js"></script>

官网jquery压缩版引用地址:

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

jquery-1.9.1

百度压缩版引用地址:

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

微软压缩版引用地址:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.1.min.js"></script>

官网jquery压缩版引用地址:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

jquery-1.8.3

百度压缩版引用地址:

<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>

微软压缩版引用地址:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.3.min.js"></script>

官网jquery压缩版引用地址:

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

jquery-1.7.2

百度压缩版引用地址:

<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>

微软压缩版引用地址:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js"></script>

官网jquery压缩版引用地址:

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

jquery-1.6.4

百度压缩版引用地址:

<script src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js"></script>

微软压缩版引用地址:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.4.min.js"></script>

官网jquery压缩版引用地址:

<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

jquery-1.5.2

百度压缩版引用地址:

<script src="http://libs.baidu.com/jquery/1.5.2/jquery.min.js"></script>

微软压缩版引用地址:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.2.min.js"></script>

官网jquery压缩版引用地址:

<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>

jquery-1.4.4

百度压缩版引用地址:

<script src="http://libs.baidu.com/jquery/1.4.4/jquery.min.js"></script>

微软压缩版引用地址:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.min.js"></script>

官网jquery压缩版引用地址:

<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

jquery-1.4.2

百度压缩版引用地址:

<script src="http://libs.baidu.com/jquery/1.4.2/jquery.min.js"></script>

微软压缩版引用地址:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.2.min.js"></script>

官网jquery压缩版引用地址:

<script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>

jquery-1.3.2

百度压缩版引用地址:

<script src="http://libs.baidu.com/jquery/1.3.2/jquery.min.js"></script>

微软压缩版引用地址:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.3.2.min.js"></script>

官网jquery压缩版引用地址:

<script src="http://code.jquery.com/jquery-1.3.2.min.js"></script>

jquery-1.2.3

百度压缩版引用地址:

<script src="http://libs.baidu.com/jquery/1.2.3/jquery.min.js"></script>

微软压缩版引用地址:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.2.3.min.js"></script>

官网jquery压缩版引用地址:

<script src="http://code.jquery.com/jquery-1.2.3.min.js"></script>

 

三、页面加载事件(可以写多个ready()

jQuery技术积累笔记

 

四、链式操作

链式操作:jquery允许你在一句代码中操做任何与其相关联的元素,包括其子元素、父元素等 。

选择名称为myDiv的元素,为其自身添加css1的样式,然后再选择其所有子元素a,为其移除css2样式。

jQuery技术积累笔记

 

五、jquery中获得一个对象的所有子元素内容

jQuery技术积累笔记

 

六、jquery中的变量 与 DOM中的变量

jQuery技术积累笔记

 

七、DOM对象 转换成jquery对象

jQuery技术积累笔记

 

八、jquery对象 转换成 DOM对象

jQuery技术积累笔记

 

九、释放jquery对$符号的控制权

jQuery技术积累笔记

 

 

 

 

 

 

 

 

 

jQuery技术积累笔记

 

jQuery技术积累笔记

 

jQuery技术积累笔记

 

四、层次选择器

jQuery技术积累笔记

例子:

jQuery技术积累笔记

五、过滤选择器(index从0开始)

jQuery技术积累笔记

 

六、子元素过滤选择器(index从1开始)

jQuery技术积累笔记

 

七、内容过滤选择器

jQuery技术积累笔记

 

八、可见性选择器

jQuery技术积累笔记

 

九、属性过滤选择器

jQuery技术积累笔记

十、表单对象属性选择器

jQuery技术积累笔记

 

十一、表单选择器

jQuery技术积累笔记

 

 

 

 

 

 

第三章 jquery中的DOM操作

一、查找元素节点

jQuery技术积累笔记

二、查找属性节点

jQuery技术积累笔记

 

三、创建元素节点

jQuery技术积累笔记

 

四、创建文本节点

jQuery技术积累笔记

 

五、创建属性节点

jQuery技术积累笔记

 

六、插入节点

jQuery技术积累笔记

 

七、删除节点

jQuery技术积累笔记

八、清空节点

jQuery技术积累笔记

 

九、复制节点

jQuery技术积累笔记

 

十、替换节点

jQuery技术积累笔记

 

十一、包裹节点

jQuery技术积累笔记

十二、属性操作

jQuery技术积累笔记

 

十三、样式操作

jQuery技术积累笔记

十四、设置和获取HTML、文本和值

jQuery技术积累笔记

 

十五、遍历节点

jQuery技术积累笔记

十六、CSS-DOM操作

jQuery技术积累笔记

第四章 jquery中的事件和动画

一、加载DOM

$(window).load() 等价于 window.onload 事件。

$(document).ready() 相当于window.onload事件,但有些区别: 

(1)执行时机: window.onload 是在网页中所有元素(包括元素的所有关联文件)完全加载后才执行。

$(document).ready() 是在DOM完全就绪时就可以被调用,此时,并不意味着这些元素关系的文件都已经下载完毕。

(2)多次使用:可以在同一个页面注册多个$(document).ready()事件。

(3)简写方式:可以缩写成 $(function(){ })  或  $().ready()。

 

二、事件绑定

bind( type, [data], fn );

type

type:指事件的类型:

 

blur(失去焦点)、

focus(获得焦点)、

load(加载完成)、

unload(销毁完成)、

resize(调整元素大小)、

scroll(滚动元素)、

click(单击元素事件)、

dbclick(双击元素事件)、

mousedown(按下鼠标)、

mouseup(松开鼠标)、

mousemove(鼠标移过)、

mouseover(鼠标移入)、

mouseout(鼠标移出)、

mouseenter(鼠标进入)、

mouseleave(鼠标离开)、

change(值改变)、

select(下拉框索引改变)、

submit(提交按钮)、

keydown(键盘按下)、

keyup(键盘松开)、

keypress(键盘单击)、

error(异常)

data

data:指事件传递的属性值,event.data 额外传递给对象事件的值。

fu

fn:指绑定的处理函数,在此函数体内,$(this)指携带相应行为的DOM元素。

例子:

jQuery技术积累笔记

三、合并事件

jQuery技术积累笔记

 

四、事件冒泡

下面的例子,BODY元素下有DIV元素,DIV元素下有SPAN元素,分别将三种元素都注册click事件。
那么,click事件会按照DOM的层次结构,像水泡一样不断向上直到顶端,所以称之为事件冒泡。

jQuery技术积累笔记

五、阻止冒泡

jQuery技术积累笔记

 

六、阻止默认行为

jQuery技术积累笔记

 

七、事件对象的属性

jQuery技术积累笔记

//事件对象的属性

event.type() //返回:click

event.target() //获取当前元素

event.relatedTarget() //引发事件的元素

event.pageX()/event.pageY() //获取鼠标相对于页面的XY坐标

event.which() //在单击事件中获取到对应的按键 鼠标左中右分别是123  event.metaKey() //获取操作中的相关功能键(ctrl/alt/shift

八、移除事件

jQuery技术积累笔记

 

九、一次性事件:绑定的事件执行一次后自动移除

jQuery技术积累笔记

 

十、事件命名空间

jQuery技术积累笔记

十一、jquery中的动画

jQuery技术积累笔记

 

十二、自定义动画animate

jQuery技术积累笔记

 css中的不是所有属性都可以用Jquery动画(animate函数)来动态改变,下面总结了JQ可以操作元素的一些属性:

    * backgroundPosition

    * borderWidth

    * borderBottomWidth

    * borderLeftWidth

    * borderRightWidth

    * borderTopWidth

    * borderSpacing

    * margin

    * marginBottom

    * marginLeft

    * marginRight

    * marginTop

    * outlineWidth

    * padding

    * paddingBottom

    * paddingLeft

    * paddingRight

    * paddingTop

    * height

    * width

    * maxHeight

    * maxWidth

    * minHeight

    * maxWidth

    * font

 

三十、其它动画

jQuery技术积累笔记

 

 

 

 

 

 

第五章 对表单、表格的操作及更多应用

一、表格奇偶行不同的样式

//表格奇偶行才一共不同的样式
$("tr:odd").addClass("oddTr"); //给奇数行添加oddTr样式  
$("tr:even").addClass("evenTr"); //给偶数行添加evenTr样式

jQuery技术积累笔记

二、复选框应用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
<form action="#" method="post" id="regForm">
    <fieldset>
        <legend>复选框应用</legend>
        <div class="checkbox">
            你爱好的运动是?
           
<input type="checkbox" id="CheckedAN" value="全选/全不选"/>全选/全不选
           
<br />
            <input type="checkbox" name="items" value="足球"/>足球
           
<input type="checkbox" name="items" value="篮球"/>篮球
           
<input type="checkbox" name="items" value="羽毛球" />羽毛球
           
<input type="checkbox" name="items" value="乒乓球" />乒乓球
           
<br />
            <input type="button" id="CheckedAll" value="全选"/>
            <input type="button" id="CheckedNo" value="全不选"/>
            <input type="button" id="CheckedRev" value="反选" />
            <input type="button" id="send" value="提交" />
        </div>
    </fieldset>
</form>

</body>

<style>
    .checkbox{
       
border: 1px solid #A9A9A9;
       
margin: 10px auto;
       
padding: 10px 10px;
    }
</
style>
<script>
    $(function(){
       
//全选
       
$("#CheckedAll").click(function(){
           
//$("[name=items]:checkbox").attr('checked',true);//只有第一次生效
           
$("[name=items]:checkbox").prop('checked',true);//只有第一次生效
       
});
       
//全不选
       
$("#CheckedNo").click(function(){
           
//$("[name=items]:checkbox").attr('checked',false);//只有第一次生效
           
$("[name=items]:checkbox").prop('checked',false);
        });
       
//反选
       
$("#CheckedRev").click(function(){
            $(
"[name=items]:checkbox").each(function(){
               
this.checked=!this.checked;
            })
        });
       
//提交
       
$("#send").click(function(){
           
var str="你选中的是:\r\n";
            $(
"[name=items]:checked").each(function(){
               
str+=$(this).val()+"\r\n";
            })
            alert(
str);
        });
       
//全选/全不选
       
$("#CheckedAN").click(function(){
            $(
"[name=items]:checkbox").prop("checked",this.checked);
        })
       
//当复选框取消某一个选项的选中状态是时,全选/全不选需要取消选中状态
       
$("[name=items]:checkbox").click(function(){
           
var tmp=$("[name=items]:checkbox");
            $(
"#CheckedAN").prop("checked",tmp.length==tmp.filter(":checked").length);
        })
    })
</
script>
</html>

jQuery技术积累笔记

第六章 jquery与Ajax的应用

Ajax的核心是XMLHttpRequest对象,它是Ajax实现的关键——发送异步请求、接收相应即执行回调都是通过他来完成的。

jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是load()、$.get()和$.post()方法,第3层是$.getScript()和$.getJSON()方法。

一、load()方法

load()方法是jQuery中最为简单和常用的jQuery方法,能载入远程HTML代码和插入DOM中,一般用于获取静态的数据文件。

语法格式为:load(url [,data] [,callback])

url:要请求的页面的地址 

data:要发送的相关参数 

callback:回调函数

jQuery技术积累笔记

二、$.get()方法和$.post()方法

语法格式为:

$.get( url [,data] [,callback] [,type])

$.post( url [,data] [,callback] [,type])

url:要请求的页面的地址 

data:要发送的相关参数 

callback:回调函数 

type:指定服务器返回内容的格式 xml html script json text _default 

form表单中的GET与POST的区别:
GET
请求的数据会附在URL地址之后(就是把数据放置在HTTP协议头中),以?分割URL和传输数据,参数之间以&相连,而且提交的数据最多只能是2KB,而且GET方式提交的数据会给浏览器缓存起来,从浏览器的历史记录中可以找到,所以安全性较差;
POST请求会把提交的数据放置在HTTP包的包体中,不会附着在地址栏中,提交的数据理论上没有大小限制,所以POST的安全性要比GET高。

$.get()

$(function(){
    $(
"#send").click(function(){
       
$.get("get3.php", {
           
username $("#username").val() ,
           
content $("#content").val()
        },
function (data, textStatus){
           
//data : 请求返回的内容
           
//textStatus : 请求状态 success error notmodified timeout
            //
dataHTML时,直接加载
           
var username = data.username;
           
var content = data.content;
           
var txtHtml = "<div class='comment'><h6>"+username+":</h6><p class='para'>"+content+"</p></div>";
            $(
"#resText").html(txtHtml); // 把返回的数据添加到页面上
       
},"json");
    })
});

jQuery技术积累笔记

$.post()

$(function(){
    $(
"#send").click(function(){
       
$.post("get3.php", {
           
username $("#username").val() ,
           
content $("#content").val()
        },
function (data, textStatus){
           
//data : 请求返回的内容
           
//textStatus : 请求状态 success error notmodified timeout
            //
dataHTML时,直接加载
           
var username = data.username;
           
var content = data.content;
           
var txtHtml = "<div class='comment'><h6>"+username+
                         
":</h6><p class='para'>"+content+"</p></div>";
            $(
"#resText").html(txtHtml); // 把返回的数据添加到页面上
       
},"json");
    })
});

jQuery技术积累笔记

 

三、$.getScript()方法和$.getJSON()方法

$.getScript(url[,data][,callback])方法,相当于$.get()方法的Script版本,相当于指定type参数为"script";$.getJson(url[,data][,callback])方法,相当于$.get()方法的Json版本,相当于指定type参数为"json";

$(function(){
   
$.getScript('jquery.color.js',function(){
        $(
"<p>加载JavaScript完毕</p>").appendTo("body");
        $(
"#go").click(function(){
            $(
".block").animate( { backgroundColor: 'pink' }, 1000)
                .
animate( { backgroundColor: 'blue' }, 1000);
        });
    });
});

jQuery技术积累笔记

$(function(){
    $(
'#send').click(function() {
       
$.getJSON('test.json', function(data) {
            $(
'#resText').empty();
           
var html = '';
           
$.each( data  , function(commentIndex, comment) {
               
html += '<div class="comment"><h6>' + comment['username'] +
                       
':</h6><p class="para">' + comment['content'] + '</p></div>';
            })
            $(
'#resText').html(html);
        })
    })
});

jQuery技术积累笔记

 

四、$.ajax()方法

/*
url :
请求的地址
type : 请求的方式 GET POST 默认为GET
timeout :
请求超时时间(单位:毫秒)
data : 请求时发送的参数(String,Object
dataType : 预期返回的数据类型 xml html script json jsonp text
async :
表示发送同步/异步请求,默认为true,表示异步
bdforeSend : 发送请求前触发事件,如果return false则取消发送 function(XmlHttpRequest){}
complete :
请求完成后触发事件,不管成功与否 function(XmlHttpRequest, textStatus){}
success :
请求完成并且成功时触发事件 function(data, textStatus){}
error :
请求完成并且失败时触发事件 function(XmlHttpRequest, textStatus, errorThrown){}
global :
是否为全局请求,默认为true,可使用AjaxStartAjaxStop控制各种事件
*/
$.ajax({
   
url : "test.aspx",
   
type : "POST",
   
timeout : "3000",
   
data : {id:"123", name:"dier"},
   
dataType : "HTML",
   
async : true,
   
success : function(data,textStatus){
        $(
"#myDiv").html( data );
    },
   
error : function(XmlHttpRequest, textStatus, errThrown){
        $(
"#myDiv").html( "请求失败:" + errThrown );
    }
});

jQuery技术积累笔记

五、Cookie与Session的区别

Cookie是早期的会话跟踪技术,它会将信息保存到客户端浏览器中。浏览器访问网站时会携带这些cookie信息,达到鉴别身份的目的。
Session是在Cookie的基础上建立起来的会话跟踪技术,它将信息保存在服务器端。Session中能够存储负责的Java对象,因此使用更加方便。Session依赖于名为JSESSIONID的Cookie。

 

 

 

 

 

 

 

 

 

 

第七章 js数组方法大全

 

 

 

 

 

 

 

 

 

 

 

 

 

 

第N章:工作积累

判断当前设备是移动端还是PC

<script type="text/javascript">

       //平台、设备和操作系统

       var system = {

           win: false,

           mac: false,

           xll: false,

           ipad:false

       };

       //检测平台

       var p = navigator.platform;

       system.win = p.indexOf("Win") == 0;

       system.mac = p.indexOf("Mac") == 0;

       system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);

       system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false;

       //跳转语句

       if (system.win || system.mac || system.xll||system.ipad) {

              alert("电脑端访问");

       } else {

              alert("移动端访问");

       }

</script>

jQuery技术积累笔记

PC、平板、手机关闭当前页问题

function closeW() {

   window.opener = null;

   window.open("","_self") ;

   window.close();//关闭浏览器窗口适用PC端、平板端

   window.history.back();//如果是手机端的则返回上一页面

}

jQuery技术积累笔记

 

字符串补零

/*
 *
方法:字符串补零  [适用于处理:月、日(0--9)的情况]
 * @param str
 * returns {string}
*/

function strAddZero(str){
   
var  strAddZero = str + "" ;
   
//判断字符串长度为1,在改字符串前面补零
   
strAddZero = (strAddZero.length > 1) ? strAddZero : 0 + strAddZero;
   
return strAddZero;
}

jQuery技术积累笔记

 

字符串截取-处理字符串过长

/*
 *
方法:字符串截取-处理字符串过长
 * 入参:dataStr:字符串
 *    subLength:截取长度(整型)
 *
出参:dataStr:字符串
*/
function getSortExplan(dataStr,subLength) {
  
if(typeof(dataStr)!="undefined" && dataStr != null) {
     
if(dataStr.length > subLength) {
        
var html = "";
        
var sortContent = dataStr.substr(0,subLength);
        
var contentTag = "<p style='font-weight:bold;' title='"+dataStr+"'>"
                    
+sortContent+"...</p>";
        
return contentTag;
      }
else {
        
return dataStr;
      }
   }
else {
     
return "";
   }
}

jQuery技术积累笔记

 

字符串截取-获取指定字符后面的内容

/*
*
方法:字符串截取-获取指定字符后面的内容(这里指定字符"-"
* 入参:obj:字符串
* 出参:obj:字符串
*/
function getCaption(obj){
   obj = obj +
"";
   
var index=obj.lastIndexOf("\-");
    obj=obj.
substring(index+1,obj.length);
   
return obj;
}

jQuery技术积累笔记

滑动至指定id的div块

/*
 *
方法:滑动至指定iddiv
 * @param scrollToID : 滑动到该id的名称
 * @param distanceTop : 距离顶边位置 [数值]
 * @param scrollTime :
滚动时间 [数值]
*/

function slideToID(scrollToID,distanceTop,scrollTime) {
  
//"#"+slideToID:滑动到该id ; parseInt(distanceTop):距离顶边位置 ; scrollTime:滚动时间
   
$('html, body').animate({scrollTop: $("#"+scrollToID).offset().top - parseInt(distanceTop)},
                              parseInt(scrollTime));
  
//$('html, body').animate({scrollTop: $('#dw_sign').offset().top - 45}, 500);//实例
}

jQuery技术积累笔记

根据传入复选框的id为真的条件给其他复选框勾选上

/*
 *
方法:根据传入复选框的id为真的条件给其他复选框勾选上
 *入参:parameterId:复选框的Id。是否勾选的复选框,作为条件
 *   parameterName:复选框的name。当parameterId的复选框为真时,将复选框nameparameterName的勾选上
*/
function isTrueOtherIsTrue(parameterId,parameterName){
  
//parameterId:入参复选框的Id ;  parameterName:复选框的name
  
var trueOrFalse = document.getElementById(parameterId).checked;
  
var parameterNames = document.getElementsByName(parameterName);
  
  
if(trueOrFalse){//入参的idchecked为真,即已勾选
    
for(var i = 0; i < parameterNames.length; i++){
       
parameterNames[i].checked = true;
     }
   }
else{//入参的idchecked为假,即未勾选
    
for( var i = 0; i < parameterNames.length; i++){
       
parameterNames[i].checked = false;
     }
   }
}

jQuery技术积累笔记

计算两个数字的百分比

/*
 *
方法:计算两个数字的百分比
 * @param number1
 * @param number2
 * @returns {string}
*/

var  percentage = function (number1, number2) {
  
var num = parseFloat(number1);
  
var total = parseFloat(number2);
  
if (isNaN(num) || isNaN(total)) {
     
return "-";
   }
   
//小数点后两位百分比
  
return (Math.round(num / total * 10000) / 100.00 + "%");
}

jQuery技术积累笔记

 

获取完整年份

/*
 *
方法:获取完整年份
*/
function FullYear(){
   
var date=new Date;
   
var year=date.getFullYear();
   
return year;
}

jQuery技术积累笔记

 

获取当前月的第一天

/*
 *
方法:获取当前月的第一天
*/
function getCurrentMonthFirst(){
  
var date=new Date();
  
date.setDate(1);
  
return date;
}

 

/*
 *
方法:获取当前月的第一天
 */
function getCurrentMonthFirst(){
   
var date=new Date();
   
date.setDate(1);
   
var year = date.getFullYear();
   
var month = date.getMonth()+1;
   
var day = date.getDate();
   
if(day < 10){
      
day = "0"+day;
    }
  
if(month < 10){
     
month = "0"+month;
   }
   
var date_ = year+"-"+month+"-"+day;
   
return date_;
}

 

jQuery技术积累笔记

jQuery技术积累笔记

 

获取当前月的最后一天

/*
 *
方法:获取当前月的最后一天
*/
function getCurrentMonthLast(){
   
var date=new Date();
   
var currentMonth=date.getMonth();
   
var nextMonth=++currentMonth;
   
var nextMonthFirstDay=new Date(date.getFullYear(),nextMonth,1);
   
var oneDay=1000*60*60*24;
   
return new Date(nextMonthFirstDay-oneDay);
}

 

/*
 *
方法:获取当前月的最后一天
 */
function getCurrentMonthLast(){
   
var date=new Date();
   
var currentMonth=date.getMonth();
   
var nextMonth=++currentMonth;
   
var nextMonthFirstDay=new Date(date.getFullYear(),nextMonth,1);
   
var oneDay=1000*60*60*24;
   
var lasTDate = new Date(nextMonthFirstDay-oneDay);
   
var year = lasTDate.getFullYear();
   
var month = lasTDate.getMonth()+1;
   
var day = lasTDate.getDate();
  
if(month < 10){
     
month = "0"+month;
   }
   
var date_ = year+"-"+month+"-"+day;
   
return date_;
}

jQuery技术积累笔记

jQuery技术积累笔记

时间戳转换成普通时间或周数

/*
 *
方法:时间戳转换成普通时间或周数
 * 入参:timeStamp:时间戳
 *    timetype:时间类型("yyyy-MM-dd HH:mm:ss",
 *                    "yyyy-MM-dd","yyyy-MM",
 *                    "yyyy","HH:mm:ss",
 *                    "HH:mm",
 *                    "mm:ss",
 *                    "week")
 *
出参:dateTimeStr
*/

function timeStampToDateOrWeeks(timeStamp,timetype){
  
var time = new Date(timeStamp);
  
var year = time.getFullYear();//
  
var month = time.getMonth() + 1;//
  
var day = time.getDate();//
  
var hh = time.getHours();//
  
var mm = time.getMinutes();//
  
var ss = time.getSeconds();//
  
//判断时间类型
  
if(timetype == "yyyy-MM-dd HH:mm:ss"){//--日 时::
     
var dateTimeStr = year + "-"+month+"-"+day+" "+hh+":"+mm+":"+ss;
   }
else if(timetype == "yyyy-MM-dd"){//--
     
var dateTimeStr= year + "-"+month+"-"+day;
   }
else if(timetype == "yyyy-MM"){//-
     
var dateTimeStr= year + "-"+month;
   }
else if(timetype == "yyyy"){//
     
var dateTimeStr= year;
   }
else if(timetype == "HH:mm:ss"){//::
     
var dateTimeStr = hh+":"+mm+":"+ss;
   }
else if(timetype == "HH:mm"){//:
     
var dateTimeStr = hh+":"+mm;
   }
else if(timetype == "mm:ss"){//:
     
var dateTimeStr = mm+":"+ss;           
   }
else if(timetype == "week"){//某一天在一年中的第几周   
          
var time,week,checkDate = new Date(timeStamp);
           
checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
           
time = checkDate.getTime();
           
checkDate.setMonth(0);
           
checkDate.setDate(1);
           
week=Math.floor(Math.round((time - checkDate) / 86400000) / 7) + 1;
     
var dateTimeStr= week;
   }
  
return dateTimeStr;//返回时间类型
}

jQuery技术积累笔记

获取两个字符串日期直接相隔的天数

/*
 *
方法:获取两个字符串日期直接相隔的天数
 * 入参:strDateStart:开始时间 {2018-06-01}
 *     strDateEnd:
结束时间 {2018-06-30}
 *
出参:iDays:相隔的天数
 */
function getDays(strDateStart,strDateEnd){
  
var strSeparator = "-"; //日期分隔符
  
var oDate1;
  
var oDate2;
  
var iDays;
  
oDate1= strDateStart.split(strSeparator);
  
oDate2= strDateEnd.split(strSeparator);
  
var strDateS = new Date(oDate1[0], oDate1[1]-1, oDate1[2]);
  
var strDateE = new Date(oDate2[0], oDate2[1]-1, oDate2[2]);
  
//把相差的毫秒数转换为天数
  
iDays = parseInt(Math.abs(strDateS - strDateE ) / 1000 / 60 / 60 /24);
  
return iDays ;
}

jQuery技术积累笔记

 

去掉字符串前后所有空格

//去掉字符串前后所有空格
function Trim(str){
   
return str.replace(/(^\s*)|(\s*$)/g, "");
}

jQuery技术积累笔记

 

鼠标移入、移出触发的事件

onmouseover = "showTips()" onmouseout = "hideTips()"

 

select下拉框设置高度的完美解决办法

<select data-edit-select="1"
onmousedown="if(this.options.length>3){this.size=4}"
onblur="this.size=0"
onchange="this.size=0"
style="width: 250px;position:absolute;z-index:1;">
    <option selected>选择区服</option>
    <option>测试一区</option>
    <option>测试二区</option>
    <option>测试三区</option>
    <option>测试四区</option>
    <option>测试五区</option>
    <option>测试六区</option>
    <option>测试七区</option>
    <option>测试八区</option>
    <option>测试九区</option>
    <option>测试十区</option>
</select>

jQuery技术积累笔记

 

滚动条样式

$("#divId").niceScroll({cursorcolor: "#cfd9f8", cursorwidth: "6px", boxzoom: false});

jQuery技术积累笔记

 

标移到最外边滚动条关闭下拉框

//鼠标移到最外边滚动条关闭下拉框
$("#workLogAllBody").bind('scroll', function(){
    $(
"#useIdList").data("kendoMultiSelect").close();
    $(
"#createDeptId").data("kendoMultiSelect").close();
    $(
"#logType").data("kendoMultiSelect").close();
});

jQuery技术积累笔记

 

判断元素是否在数组内

这里请注意:必须是元素与数组中的元素相同才返回true,否者返回false。

/**
 *
方法:jQuery判断元素是否在数组内
 
* 入参:
 
*      arr:数组
 
*      str:字符串
 
* 出参:
 
*      true:元素在数组内
 
*      false:元素不在数组内
 
*/
function strInArrJQuery(str,arr){
   
if($.inArray(str, arr) != -1){
       
return true;
    }
else{
       
return false;
    }
   
//实例说明
   
/*
    var arr = ["a", "b", "c"];
    // jquery $.inArray("c", arr)
    var result = $.inArray("c", arr); //
返回index2,失败返回-1
    */

}

/**
 *
方法:js判断元素是否在数组内
 
* 入参:
 
*      arr:数组
 
*      str:字符串
 
* 出参:
 
*      true:元素在数组内
 
*      false:元素不在数组内
 
*/
function strInArrJs(str,arr){
   
if(arr.indexOf(str) != -1){
       
return true;
    }
else{
       
return false;
    }
   
//实例说明
   
/*
    var arr = ["a", "b", "c"];
    // js arr.indexOf("c")
    var result1 = arr.indexOf("c"); //
返回index2,失败返回-1
    */

}

jQuery技术积累笔记

jQuery技术积累笔记

 

根据超过6条数据则换行的js拼接技巧

//获取全省应用链接
function getApplicationLink(){
   
$.ajax({
       
type: 'POST',
       
url: ctx + "/cmsLink/getApplicationLink.json",
       
data:{
           
"channeCode":"index_qsyylj",//频道代码
           
"linkType":"1"//超链接类型 0-文字类型  1-图片类型
       
},
       
async:true,
       
success: function(result){
           
var applicationLink = result.resultData;
           
var appHtml = "<li>";//拼接html
            //
向上取整,有小数就整数部分加1
           
var loopNum = Math.ceil(applicationLink.length / 6);//确定循环的行数
           
for(var i = 0 ;applicationLink.length > i ; i++){
               
var link_name = applicationLink[i].link_name;//链接名称
               
var link_addr = applicationLink[i].link_addr;//链接地址
               
var link_img = applicationLink[i].link_img;//链接图片
               
appHtml += "<ul class=\"yw-ul2\">";
               
appHtml += "<li>";
               
appHtml += "<a onclick=\"toSystem('"+link_addr+"','业务模块-"+link_name+"');\"><img src="+link_img+" style=\"width:96px;height: 96px;\" alt=\""+link_name+"\"></a>";
               
appHtml += "<a onclick=\"toSystem('"+link_addr+"','业务模块-"+link_name+"');\">"+link_name+"</a>";
               
appHtml += "</li>";
               
appHtml += "</ul>";
               
for(var j = 1 ;loopNum >= j ;j++){//循环每6
                   
if(((i+1) == 6*j) && (applicationLink.length != 6*j)){
                       
appHtml += "</li>";
                       
appHtml += "<li>";
                       
break;
                    }
                }
            }
           
appHtml += "</li>";
            $(
"#applicationLinkId").html(appHtml);
        }
    });
}

jQuery技术积累笔记

window.open()打开窗口的几种方式

1. 在当前窗口打开百度,并且使URL地址出现在搜索栏中.

window.open("http://www.baidu.com/", "_search");

window.open("http://www.baidu.com/", "_self");

2. 在一个新的窗口打开百度

window.open("http://www.baidu.com/", "_blank");

3. 打开一个新的窗口,并命名为"hello"

window.open("", "hello");

 

 

 

 

 

 

 

第N+1章:正则验证方法大全

检查输入手机号码是否正确

/*
用途:检查输入手机号码是否正确
输入:

s:字符串
返回:
如果通过验证返回
true,否则返回false
*/

function checkMobile(s){
   
var regu =/^[1][3][0-9]{9}$/;
   
var re = new RegExp(regu);
   
if (re.test(s)) {
       
return true;
    }
else{
       
return false;
    }
}

jQuery技术积累笔记

 

检查输入的身份证号是否正确

/**
 *
检查输入的身份证号是否正确
 
* 输入:str  字符串
 
返回:true flase; true表示格式正确
 
*/
function checkCard(str) {
   
//15位数身份证正则表达式
   
var arg1 = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;
   
//18位数身份证正则表达式
   
var arg2 = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[A-Z])$/;
   
if (str.match(arg1) == null && str.match(arg2) == null) {
       
return false;
    }
   
else {
       
return true;
    }
}

jQuery技术积累笔记

检查输入的字符是否具有特殊字符

/**
 *
检查输入的字符是否具有特殊字符
 
* 输入:str  字符串
 
* 返回:true flase; true表示包含特殊字符
 
* 主要用于注册信息的时候验证
 
*/
function checkQuote(str) {
   
var items = new Array("~", "`", "!", "@", "#", "$", "%", "^", "&", "*", "{", "}", "[", "]", "(", ")");
   
items.push(":", ";", "'", "|", "\\", "<", ">", "?", "/", "<<", ">>", "||", "//");
   
items.push("admin", "administrators", "administrator", "管理员", "系统管理员");
   
items.push("select", "delete", "update", "insert", "create", "drop", "alter", "trancate");
    str = str.
toLowerCase();
   
for (var i = 0; i < items.length; i++) {
       
if (str.indexOf(items[i]) >= 0) {
           
return true;
        }
    }
   
return false;
}

jQuery技术积累笔记

检查输入的URL地址是否正确

/**
 *
检查输入的URL地址是否正确
 
* 输入:str  字符串
 
返回:true flase; true表示格式正确
 
*/
function checkURL(str) {
   
if (str.match(/(http[s]?|ftp):\/\/[^\/\.]+?\..+\w$/i) == null) {
       
return false
   
}
   
else {
       
return true;
    }
}

jQuery技术积累笔记

检查输入的电话号码格式是否正确

/*
用途:检查输入的电话号码格式是否正确
输入:

strPhone:字符串
返回:
如果通过验证返回
true,否则返回false
*/

function checkPhone(strPhone) {
   
var phoneRegWithArea = /^[0][1-9]{2,3}-[0-9]{5,10}$/;
   
var phoneRegNoArea = /^[1-9]{1}[0-9]{5,8}$/;
   
if (strPhone.length > 9) {
       
if (phoneRegWithArea.test(strPhone)) {
           
return true;
        }
else {
           
return false;
        }
    }
else {
       
if (phoneRegNoArea.test(strPhone)) {
           
return true;
        }
else {
           
return false;
        }
    }
}

jQuery技术积累笔记

 

校验ip地址的格式

/**用途:校验ip地址的格式
 输入:
strIPip地址
 返回:如果通过验证返回
true,否则返回false
 
**/
function isIP(strIP) {
   
if (isNull(strIP)) return false;
   
var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //匹配IP地址的正则表达式
   
if(re.test(strIP))
    {
       
if( RegExp.$1 <256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256) return true;
    }
   
return false;
}

jQuery技术积累笔记

 

检查输入字符串是否为空或者全部都是空格

/*
用途:检查输入字符串是否为空或者全部都是空格
输入:
str
返回:
如果全是空返回
true,否则返回false
*/

function isNull( str ){
   
if ( str == "" ) return true;
   
var regu = "^[ ]+$";
   
var re = new RegExp(regu);
   
return re.test(str);
}

jQuery技术积累笔记

检查输入对象的值是否符合整数格式

/*
用途:检查输入对象的值是否符合整数格式
输入:
str 输入的字符串
返回:如果通过验证返回
true,否则返回false
*/

function isInteger( str ){
   
var regu = /^[-]{0,1}[0-9]{1,}$/;
   
return regu.test(str);
}

jQuery技术积累笔记

检查输入字符串是否符合正整数格式

/*
用途:检查输入字符串是否符合正整数格式
输入:

s:字符串
返回:
如果通过验证返回
true,否则返回false
*/

function isNumber( s ){
   
var regu = "^[0-9]+$";
   
var re = new RegExp(regu);
   
if (s.search(re) != -1) {
       
return true;
    }
else {
       
return false;
    }
}

jQuery技术积累笔记

检查输入字符串是否是带小数的数字格式,可以是负数

/*
用途:检查输入字符串是否是带小数的数字格式,可以是负数
输入:

s:字符串
返回:
如果通过验证返回
true,否则返回false
*/

function isDecimal( str ){
   
if(isInteger(str)) return true;
   
var re = /^[-]{0,1}(\d+)[\.]+(\d+)$/;
   
if (re.test(str)) {
       
if(RegExp.$1==0&&RegExp.$2==0) return false;
       
return true;
    }
else {
       
return false;
    }
}

jQuery技术积累笔记

检查输入对象的值是否符合端口号格式

/*
用途:检查输入对象的值是否符合端口号格式
输入:
str 输入的字符串
返回:如果通过验证返回
true,否则返回false
*/

function isPort( str ){
   
return (isNumber(str) && str<65536);
}

jQuery技术积累笔记

检查输入对象的值是否符合E-Mail格式

/*
用途:检查输入对象的值是否符合E-Mail格式
输入:
str 输入的字符串
返回:如果通过验证返回
true,否则返回false
*/

function isEmail( str ){
   
var myReg = /^[-_A-Za-z0-9][email protected]([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;
   
if(myReg.test(str)) return true;
   
return false;
}

jQuery技术积累笔记

检查输入字符串是否符合金额格式

/*
用途:检查输入字符串是否符合金额格式
格式定义为带小数的正数,小数点后最多三位
输入:

s:字符串
返回:
如果通过验证返回
true,否则返回false
*/

function isMoney( s ){
   
var regu = "^[0-9]+[\.][0-9]{0,3}$";
   
var re = new RegExp(regu);
   
if (re.test(s)) {
       
return true;
    }
else {
       
return false;
    }
}

jQuery技术积累笔记

检查输入字符串是否只由英文字母和数字和下划线组成

/*
用途:检查输入字符串是否只由英文字母和数字和下划线组成
输入:

s:字符串
返回:
如果通过验证返回
true,否则返回false
*/

function isNumberOr_Letter( s ){//判断是否是数字或字母
   
var regu = "^[0-9a-zA-Z\_]+$";
   
var re = new RegExp(regu);
   
if (re.test(s)) {
       
return true;
    }
else{
       
return false;
    }
}

jQuery技术积累笔记

检查输入字符串是否只由英文字母和数字组成

/*
用途:检查输入字符串是否只由英文字母和数字组成
输入:

s:字符串
返回:
如果通过验证返回
true,否则返回false
*/

function isNumberOrLetter( s ){//判断是否是数字或字母
   
var regu = "^[0-9a-zA-Z]+$";
   
var re = new RegExp(regu);
   
if (re.test(s)) {
       
return true;
    }
else{
       
return false;
    }
}

jQuery技术积累笔记

检查输入字符串是否只由汉字、字母、数字组成

/*
用途:检查输入字符串是否只由汉字、字母、数字组成
输入:

value:字符串
返回:
如果通过验证返回
true,否则返回false
*/

function isChinaOrNumbOrLett( s ){//判断是否是汉字、字母、数字组成
   
var regu = "^[0-9a-zA-Z\u4e00-\u9fa5]+$";
   
var re = new RegExp(regu);
   
if (re.test(s)) {
       
return true;
    }
else{
       
return false;
    }
}

jQuery技术积累笔记

字符1是否以字符串2结束

/*
用途:字符1是否以字符串2结束
输入:
str1:字符串;str2:被包含的字符串
返回:如果通过验证返回
true,否则返回false
*/

function isLastMatch(str1,str2){
    alert(str1+
"==="+str2);
   
var index = str1.lastIndexOf(str2);
   
if(str1.length==index+str2.length) return true;
   
return false;
}

jQuery技术积累笔记

字符1是否以字符串2开始

/*
用途:字符1是否以字符串2开始
输入:
str1:字符串;str2:被包含的字符串
返回:如果通过验证返回
true,否则返回false
*/

function isFirstMatch(str1,str2) {
   
var index = str1.indexOf(str2);
   
if(index==0) return true;
   
return false;
}

jQuery技术积累笔记

字符1是包含字符串2

/*
用途:字符1是包含字符串2
输入:str1:字符串;str2:被包含的字符串
返回:如果通过验证返回
true,否则返回false
*/

function isMatch(str1,str2) {
   
var index = str1.indexOf(str2);
   
if(index==-1) return false;
   
return true;
}

jQuery技术积累笔记

 

 

 

 

 

 

 

 

 

判断是否是日期

/*
用途:判断是否是日期
输入:
date:日期;fmt:日期格式
返回:如果通过验证返回
true,否则返回false
*/

function isDate( date, fmt ) {
   
if (fmt==null) fmt="yyyyMMdd";
   
var yIndex = fmt.indexOf("yyyy");
   
if(yIndex==-1) return false;
   
var year = date.substring(yIndex,yIndex+4);
   
var mIndex = fmt.indexOf("MM");
   
if(mIndex==-1) return false;
   
var month = date.substring(mIndex,mIndex+2);
   
var dIndex = fmt.indexOf("dd");
   
if(dIndex==-1) return false;
   
var day = date.substring(dIndex,dIndex+2);
   
if(!isNumber(year)||year>"2100" || year< "1900") return false;
   
if(!isNumber(month)||month>"12" || month< "01") return false;
   
if(day>getMaxDay(year,month) || day< "01") return false;
   
return true;
}

function getMaxDay(year,month) {
   
if(month==4||month==6||month==9||month==11)
       
return "30";
   
if(month==2)
       
if(year%4==0&&year%100!=0 || year%400==0)
           
return "29";
       
else
            return
"28";
   
return "31";
}

jQuery技术积累笔记

检查输入的起止日期是否正确,且结束日期>=起始日期

/*
用途:检查输入的起止日期是否正确,规则为两个日期的格式正确,
且结束如期
>=起始日期
输入:

startDate:起始日期,字符串
endDate:结束日期,字符串
返回:
如果通过验证返回
true,否则返回false
*/

function checkTwoDate( startDate,endDate ) {
   
if( !isDate(startDate) ) {
        alert(
"起始日期不正确!");
       
return false;
    }
else if( !isDate(endDate) ) {
        alert(
"终止日期不正确!");
       
return false;
    }
else if( startDate > endDate ) {
        alert(
"起始日期不能大于终止日期!");
       
return false;
    }
   
return true;
}

jQuery技术积累笔记

检查输入的Email信箱格式是否正确

/*
用途:检查输入的Email信箱格式是否正确
输入:

strEmail:字符串
返回:
如果通过验证返回
true,否则返回false
*/

function checkEmail(strEmail) {
   
//var emailReg = /^[_a-z0-9][email protected]([_a-z0-9]+\.)+[a-z0-9]{2,3}$/;
   
var emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
   
if( emailReg.test(strEmail) ){
       
return true;
    }
else{
        alert(
"您输入的Email地址格式不正确!");
       
return false;
    }
}

jQuery技术积累笔记

检查证券代码是否正确

/*
用途:检查证券代码是否正确
输入:

secCode:证券代码
返回:
如果通过验证返回
true,否则返回false
*/

function checkSecCode( secCode ) {
   
if( secCode.length !=6 ){
        alert(
"证券代码长度应该为6");
       
return false;
    }
   
if(!isNumber( secCode ) ){
        alert(
"证券代码只能包含数字");
       
return false;
    }
   
return true;
}

jQuery技术积累笔记

第N+2章:常用CSS

CSS鼠标效果手型效果

<a href="#" style="cursor:hand">CSS鼠标手型效果</a>
<a href="#" style="cursor:pointer">CSS鼠标手型效果(建议使用)</a>
<a href="#" style="cursor:auto">CSS鼠标由系统自动给出效果</a>
<a href="#" style="cursor:crosshair">CSS鼠标十字型 效果</a>
<a href="#" style="cursor:text">CSS鼠标I字形效果</a>
<a href="#" style="cursor:wait">CSS鼠标等待效果</a>
<a href="#" style="cursor:default">CSS鼠标默认效果</a>
<a href="#" style="cursor:e-resize">CSS鼠标向右的箭头效果</a>
<a href="#" style="cursor:ne-resize">CSS鼠标向右上箭头效果</a>
<a href="#" style="cursor:n-resize">CSS鼠标向上箭头效果</a>
<a href="#" style="cursor:nw-resize">CSS鼠标向左上箭头效果</a>
<a href="#" style="cursor:w-resize">CSS鼠标向左箭头效果</a>
<a href="#" style="cursor:sw-resize">CSS鼠标向坐下箭头效果</a>
<a href="#" style="cursor:s-resize">CSS鼠标向右下箭头效果</a>

jQuery技术积累笔记

 

相对位置

position: relative; right: 30px;top:3px;