JQuery 入门学习附常用UI模块

一.简介

jQuery 库可以通过一行简单的标记被添加到网页中

jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性：

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

jQuery产生的对象时jQuery独有的，只能自己调用

书写规则

　　支持链式操作；

　　在变量前加"$"符号（var $variable = jQuery 对象）；

　　注：此规定并不是强制要求

二.Jquery安装

jQuery 库是一个 JavaScript 文件，可以使用 HTML 的 <script> 标签引用它

<head>

<script src="jquery.js"></script>

</head>

下载 jQuery

有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）

下载地址:http://jquery.com/download/

通过 jQuery，可以选取（查询，query） HTML 元素，并对它们执行“操作”（actions）

三.查找元素

1.选择器

基本选择器

#id          //“#” 指ID

element   //指向 DOM 节点的标签名

.class　　//“." 类

*　　　　//匹配所有元素

selector1,selector2,selectorN　　//将每一个选择器匹配到的元素合并后一起返回

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	所有 class="intro" 的元素
element	$("p")	所有 <p> 元素
.class.class	$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素
基本筛选器
:first	$("p:first")	第一个 <p> 元素
:last	$("p:last")	最后一个 <p> 元素
:even	$("tr:even")	所有偶数 <tr> 元素
:odd	$("tr:odd")	所有奇数 <tr> 元素
:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
:gt(no)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素
:header	$(":header")	所有标题元素 <h1> - <h6>
:animated		所有动画元素
内容选择器
:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的 <p> 元素
:visible	$("table:visible")	所有可见的表格
s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素
属性
[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='#']")	所有 href 属性的值等于 "#" 的元素
[attribute!=value]	$("[href!='#']")	所有 href 属性的值不等于 "#" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有 href 属性的值包含以 ".jpg" 结尾的元素
表单选择器
:input	$(":input")	所有 <input> 元素
:text	$(":text")	所有 type="text" 的 <input> 元素
:password	$(":password")	所有 type="password" 的 <input> 元素
:radio	$(":radio")	所有 type="radio" 的 <input> 元素
:checkbox	$(":checkbox")	所有 type="checkbox" 的 <input> 元素
:submit	$(":submit")	所有 type="submit" 的 <input> 元素
:reset	$(":reset")	所有 type="reset" 的 <input> 元素
:button	$(":button")	所有 type="button" 的 <input> 元素
:image	$(":image")	所有 type="image" 的 <input> 元素
:file	$(":file")	所有 type="file" 的 <input> 元素
表单对象属性
:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

查找选择器：

函数	描述
.add()	将元素添加到匹配元素的集合中。
.andSelf()	把堆栈中之前的元素集添加到当前集合中。
.children()	获得匹配元素集合中每个元素的所有子元素。
.closest()	从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素。
.contents()	获得匹配元素集合中每个元素的子元素，包括文本和注释节点。
.each()	对 jQuery 对象进行迭代，为每个匹配元素执行函数。
.end()	结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态。
.eq()	将匹配元素集合缩减为位于指定索引的新元素。
.filter()	将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。
.find()	获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。
.first()	将匹配元素集合缩减为集合中的第一个元素。
.has()	将匹配元素集合缩减为包含特定元素的后代的集合。
.is()	根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。
.last()	将匹配元素集合缩减为集合中的最后一个元素。
.map()	把当前匹配集合中的每个元素传递给函数，产生包含返回值的新 jQuery 对象。
.next()	获得匹配元素集合中每个元素紧邻的同辈元素。
.nextAll()	获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。
.nextUntil()	获得每个元素之后所有的同辈元素，直到遇到匹配选择器的元素为止。
.not()	从匹配元素集合中删除元素。
.offsetParent()	获得用于定位的第一个父元素。
.parent()	获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。
.parents()	获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。
.parentsUntil()	获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止。
.prev()	获得匹配元素集合中每个元素紧邻的前一个同辈元素，由选择器筛选（可选）。
.prevAll()	获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。
.prevUntil()	获得每个元素之前所有的同辈元素，直到遇到匹配选择器的元素为止。
.siblings()	获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。
.slice()	将匹配元素集合缩减为指定范围的子集。

例：

$("div").children()      //div中的每个子元素,第一层

$("div").find("span")    //div中的包含的所有span元素,子子孙孙

$("p").next()       　　　//紧邻p元素后的一个同辈元素

$("p").nextAll()         //p元素之后所有的同辈元素

$("#test").nextUntil("#test2")    //id为"#test"元素之后到id为'#test2'之间所有的同辈元素,掐头去尾

$("p").prev()            //紧邻p元素前的一个同辈元素

$("p").prevAll()         //p元素之前所有的同辈元素

$("#test").prevUntil("#test2")    //id为"#test"元素之前到id为'#test2'之间所有的同辈元素,掐头去尾

$("p").parent()          //每个p元素的父元素

$("p").parents()         //每个p元素的所有祖先元素,body,html

$("#test").parentsUntil("#test2")    //id为"#test"元素到id为'#test2'之间所有的父级元素,掐头去尾

$("div").siblings()      //所有的同辈元素,不包括自己

查找元素

实例：

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("p").css("background-color","red");

  });

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

<button type="button">Click me</button>

</body>

</html>

基本筛选器及CSS样式操作

<html>

<head>

<script type="text/javascript" src="/jquery-1.12.4.js"></script>

<script type="text/javascript">

$(document).ready(function()

{

  $("button").click(function()

  {

  $(".test").hide();

  });

});

</script>

</head>

<body>

<h2 class="test">This is a heading</h2>

<p class="test">This is a paragraph.</p>

<p>This is another paragraph.</p>

<button type="button">Click me</button>

</body>

</html>

隐藏标签

<html>

<head>

<script type="text/javascript" src="jquery-1.12.4.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("button").click(function(){

    $("#test").hide();

  });

});

</script>

</head>

<body>

<h2>This is a heading</h2>

<p>This is a paragraph.</p>

<p id="test">This is another paragraph.</p>

<button type="button">Click me</button>

</body>

</html>

查找ID操作

<html>

<head>

<script type="text/javascript" src="/jquery-1.12.4.js"></script>

<script type="text/javascript">

$(document).ready(function()

{

  $("button").click(function()

  {

  $(".test").hide();

  });

});

</script>

</head>

<body>

<h2 class="test">This is a heading</h2>

<p class="test">This is a paragraph.</p>

<p>This is another paragraph.</p>

<button type="button">Click me</button>

</body>

</html>

查找类操作　

<!DOCTYPE html>

<html>

<head>

<script src="jquery-1.12.4.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    alert("Value: " + $("#test").val());

  });

});

</script>

</head>

<body>

<p>姓名：<input type="text" id="test" value="获取表单内容"></p>

<button>显示值</button>

</body>

</html>

获取表单内容

四.属性操作

属性操作主要有以下几种：

方法	描述
addClass()	向匹配的元素添加指定的类名。
attr()	设置或返回匹配元素的属性和值。
hasClass()	检查匹配的元素是否拥有指定的类。
html()	设置或返回匹配的元素集合中的 HTML 内容。
removeAttr()	从所有匹配的元素中移除指定的属性。
removeClass()	从所有匹配的元素中删除全部或者指定的类。
toggleClass()	从匹配的元素中添加或删除一个类。
val()	设置或返回匹配元素的值。
text()	设置或返回文本的值

例：

<!DOCTYPE html>

<html>

<head>

<script src="jquery-1.12.4.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    alert($("#test").attr("href"));

  });

});

</script>

</head>

<body>

<p><a href="http://www.baidu.com" id="test">梦里寻他千百度</a></p>

<button>显示 href 值</button>

</body>

</html>

获取属性

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-1.12.4.js"></script>

    <style>

        .test{

            background-color: dodgerblue;

            width: 950px;

            margin: 0 auto;

            font-size: 24px;

            font-weight: bold;

        }

    </style>

</head>

<body>

    <div>

        给DIV加样式

    </div>

<script>

    $("div").addClass("test");

</script>

</body>

</html>

给DIV加样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-1.12.4.js"></script>

</head>

<body>

<a>我只想证明html()返回的是元素的代码</a>

<script>

    var val = $("a").html();

    alert(val)

</script>

</body>

</html>

html()返回的是元素的代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-1.12.4.js"></script>

</head>

<body>

<a href="/index" onclick="RemoveAttr(this);">click me</a>

<script>

    function RemoveAttr(ths) {

        $(ths).removeAttr("href");

        alert("天呢！我的href属性呢！")

    }

</script>

</body>

</html>

移除属性removeAttr

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-1.12.4.js"></script>

</head>

<body>

<input type="text" name="用户名">

<input type="button" value="点我"/>

<script>

    $(":button").click(function(){

    alert("你输入的内容是" + $(":text").val());

  });

</script>

</body>

</html>

获文本框值val()

五.CSS操作

CSS 属性	描述
css()	设置或返回匹配元素的样式属性。
height()	设置或返回匹配元素的高度。
offset()	返回第一个匹配元素相对于文档的位置。
offsetParent()	返回最近的定位祖先元素。
position()	返回第一个匹配元素相对于父元素的位置。
scrollLeft()	设置或返回匹配元素相对滚动条左侧的偏移。
scrollTop()	设置或返回匹配元素相对滚动条顶部的偏移。
width()	设置或返回匹配元素的宽度。

例:

<!DOCTYPE html>

<html>

<head>

<script src="jquery-1.12.4.js"></script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    alert("Background color = " + $("p").css("background-color"));

  });

});

</script>

</head>

<body>

<h2>这是标题</h2>

<p style="background-color:#ff0000">这是一个段落。</p>

<button>返回 p 元素的背景色</button>

</body>

</html>

css()

<!DOCTYPE html>

<html>

<head>

<script src="jquery-1.12.4.js">

</script>

<script>

$(document).ready(function(){

  $("button").click(function(){

    var txt="";

    txt+="Width of div: " + $("#div1").width() + "</br>";

    txt+="Height of div: " + $("#div1").height();

    $("#div1").html(txt);

  });

});

</script>

</head>

<body>

<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>

<br>

<button>显示 div 的尺寸</button>

<p>width() - 返回元素的宽度。</p>

<p>height() - 返回元素的高度。</p>

</body>

</html>

width()/height()

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .divH {

            height: 1800px;

        }

        .divT {

            width: 50px;

            height: 50px;

            font-size: 23px;

            background-color: #2F4F4F;

            color: white;

            position: fixed;

            right: 18px;

            bottom: 18px;

        }

        .divT:hover{

            cursor: pointer;

        }

        .hide {

            display: none;

        }

    </style>

</head>

<body>

    <div class="divH"></div>

    <div class="divT hide" onclick="ReturnTop();"><strong>返回顶部</strong></div>

    <script src="../../jquery-1.12.4.js"></script>

    <script>

        window.onscroll = function () {

            var current = $(window).scrollTop();

            if (current > 180){

                $(".divT").removeClass("hide");

            }else {

                $(".divT").addClass("hide");

            }

        };

        function ReturnTop() {

            $(window).scrollTop(0);

        }

    </script>

</body>

</html>

返回顶部小实例

六.文档处理

方法	描述
after()	在匹配的元素之后插入内容。
append()	向匹配元素集合中的每个元素结尾插入由参数指定的内容。
appendTo()	向目标结尾插入匹配元素集合中的每个元素。
before()	在每个匹配的元素之前插入内容。
clone()	创建匹配元素集合的副本。
detach()	从 DOM 中移除匹配元素集合。
empty()	删除匹配的元素集合中所有的子节点。
hasClass()	检查匹配的元素是否拥有指定的类。
insertAfter()	把匹配的元素插入到另一个指定的元素集合的后面。
insertBefore()	把匹配的元素插入到另一个指定的元素集合的前面。
prepend()	向匹配元素集合中的每个元素开头插入由参数指定的内容。
prependTo()	向目标开头插入匹配元素集合中的每个元素。
remove()	移除所有匹配的元素。
removeAttr()	从所有匹配的元素中移除指定的属性。
replaceAll()	用匹配的元素替换所有匹配到的元素。
replaceWith()	用新内容替换匹配的元素。
unwrap()	移除并替换指定元素的父元素。
wrap()	把匹配的元素用指定的内容或元素包裹起来。
wrapAll()	把所有匹配的元素用指定的内容或元素包裹起来。
wrapinner()	将每一个匹配的元素的子内容用指定的内容或元素包裹起来。

例：

$("p").append("<b>test</b>");    //每个p元素内后面追加内容

$("p").appendTo("div");    　　　 //p元素追加到div内后

$("p").prepend("<b>Hello</b>");  //每个p元素内前面追加内容

$("p").prependTo("div");    　   //p元素追加到div内前

$("p").after("<b>test</b>");     //每个p元素同级之后插入内容

$("p").before("<b>test</b>");    //在每个p元素同级之前插入内容

$("p").insertAfter("#test");     //所有p元素插入到id为test元素的后面

$("p").insertBefore("#test");    //所有p元素插入到id为test元素的前面

$("p").replaceWith("<b>Paragraph. </b>");    //将所有匹配的元素替换成指定的HTML或DOM元素

$("<b>Paragraph. </b>").replaceAll("p");     //用匹配的元素替换掉所有 selector匹配到的元素

$("p").empty();     //删除匹配的元素集合中所有的子节点，不包括本身

$("p").remove();    //删除所有匹配的元素,包括本身

$("p").detach();    //删除所有匹配的元素(和remove()不同的是:所有绑定的事件、附加的数据会保留下来)

$("p").clone()    　　//克隆元素并选中克隆的副本

$("p").clone(true)   //布尔值指事件处理函数是否会被复制

用法

七.事件

方法	描述
bind(type,[data],fn)	向匹配元素附加一个或更多事件处理器
blur([[data],fn])	触发、或将函数绑定到指定元素的 blur 事件
change([[data],fn])	触发、或将函数绑定到指定元素的 change 事件
click([[data],fn])	触发、或将函数绑定到指定元素的 click 事件
dblclick([[data],fn])	触发、或将函数绑定到指定元素的 double click 事件
delegate()	向匹配元素的当前或未来的子元素附加一个或多个事件处理器
die()	移除所有通过 live() 函数添加的事件处理程序。
error([[data],fn])	触发、或将函数绑定到指定元素的 error 事件
event.isDefaultPrevented()	返回 event 对象上是否调用了 event.preventDefault()。
event.pageX	相对于文档左边缘的鼠标位置。
event.pageY	相对于文档上边缘的鼠标位置。
event.preventDefault()	阻止事件的默认动作。
event.result	包含由被指定事件触发的事件处理器返回的最后一个值。
event.target	触发该事件的 DOM 元素。
event.timeStamp	该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。
event.type	描述事件的类型。
event.which	指示按了哪个键或按钮。
focus([[data],fn])	触发、或将函数绑定到指定元素的 focus 事件
focusin([data],fn)
keydown([[data],fn])	触发、或将函数绑定到指定元素的 key down 事件
keypress([[data],fn])	触发、或将函数绑定到指定元素的 key press 事件
keyup([[data],fn])	触发、或将函数绑定到指定元素的 key up 事件
live()	为当前或未来的匹配元素添加一个或多个事件处理器
load()	触发、或将函数绑定到指定元素的 load 事件
mousedown([[data],fn])	触发、或将函数绑定到指定元素的 mouse down 事件
mouseenter([[data],fn])	触发、或将函数绑定到指定元素的 mouse enter 事件
mouseleave([[data],fn])	触发、或将函数绑定到指定元素的 mouse leave 事件
mousemove([[data],fn])	触发、或将函数绑定到指定元素的 mouse move 事件
mouseout([[data],fn])	触发、或将函数绑定到指定元素的 mouse out 事件
mouseover([[data],fn])	触发、或将函数绑定到指定元素的 mouse over 事件
mouseup([[data],fn])	触发、或将函数绑定到指定元素的 mouse up 事件
one()	向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
ready()	文档就绪事件（当 HTML 文档就绪可用时）
resize([[data],fn])	触发、或将函数绑定到指定元素的 resize 事件
scroll([[data],fn])	触发、或将函数绑定到指定元素的 scroll 事件
select([[data],fn])	触发、或将函数绑定到指定元素的 select 事件
submit([[data],fn])	触发、或将函数绑定到指定元素的 submit 事件
toggle()	绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。
trigger()	所有匹配元素的指定事件
triggerHandler()	第一个被匹配元素的指定事件
unbind()	从匹配元素移除一个被添加的事件处理器
undelegate()	从匹配元素移除一个被添加的事件处理器，现在或将来
unload([[data],fn])	触发、或将函数绑定到指定元素的 unload 事件

例:

<html>

<head>

<script type="text/javascript" src="jquery-1.12.4.js"></script>

</head>

<body>

<p>change</p>

用户: <input class="field" type="text" />

<p>Car:

<select class="field" name="choice">

<option value="a">Volvo</option>

<option value="b">Saab</option>

</select>

</p>

<script type="text/javascript">

  $(".field").change(function(){

    $(this).css("background-color","red");

  });

</script>

</body>

</html>

change事件

<html>

<head>

<script type="text/javascript" src="jquery-1.12.4.js"></script>

<style>

    .change{

        background-color: rosybrown;

        width: 950px;

        margin: 0 auto;

    }

</style>

</head>

<body>

<p>这是一个段落</p>

<button>double click</button>

<script type="text/javascript">

  $("button").dblclick(function(){

    $("p").addClass("change");

  });

</script>

</body>

</html>

双击dbclick

<html>

<head>

<script type="text/javascript" src="jquery-1.12.4.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $(document).mousemove(function(e){

    $("span").text(e.pageX + ", " + e.pageY);

  });

});

</script>

</head>

<body>

<p>鼠标位于坐标： <span></span>.</p>

</body>

</html>

mousemove

<html>

<head>

    <meta charset="UTF-8">

    <script type="text/javascript" src="jquery-1.12.4.js"></script>

</head>

<body>

<p>移动到这里来</p>

<script type="text/javascript">

  $("p").mouseenter(function(){

    $("p").css("background-color","yellow");

  });

  $("p").mouseleave(function(){

    $("p").css("background-color","blue");

  });

</script>

</body>

</html>

鼠标事件

<html>

<head>

<script type="text/javascript" src="/jquery/jquery.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $("input").keydown(function(){

    $("input").css("background-color","#FFFFCC");

  });

  $("input").keyup(function(){

    $("input").css("background-color","#D6D6FF");

  });

});

</script>

</head>

<body>

Enter your name: <input type="text" />

<p>当发生 keydown 和 keyup 事件时，输入域会改变颜色。请试着在其中输入内容。</p>

</body>

</html>

keydown/keyup

//bind 为每个匹配元素绑定事件处理函数，绑定多个用{}。

$("p").bind("click", function(){

  alert( $(this).text() );

});

$(menuF).bind({

    "mouseover":function () {

     $(menuS).parent().removeClass("hide");

     },"mouseout":function () {

     $(menuS).parent().addClass("hide");

}

});         

$("p").one( "click", fun...)    //one 绑定一个一次性的事件处理函数

$("p").unbind( "click" )        //解绑一个事件

bind

八.效果

方法	描述
animate()	对被选元素应用“自定义”的动画
clearQueue()	对被选元素移除所有排队的函数（仍未运行的）
delay()	对被选元素的所有排队函数（仍未运行）设置延迟
dequeue()	运行被选元素的下一个排队函数
fadeIn()	逐渐改变被选元素的不透明度，从隐藏到可见
fadeOut()	逐渐改变被选元素的不透明度，从可见到隐藏
fadeTo()	把被选元素逐渐改变至给定的不透明度
hide()	隐藏被选的元素
queue()	显示被选元素的排队函数
show()	显示被选的元素
slideDown()	通过调整高度来滑动显示被选元素
slideToggle()	对被选元素进行滑动隐藏和滑动显示的切换
slideUp()	通过调整高度来滑动隐藏被选元素
stop()	停止在被选元素上运行动画
toggle()	对被选元素进行隐藏和显示的切换

例：

<html>

<head>

<script type="text/javascript" src="jquery-1.12.4.js"></script>

<script type="text/javascript">

$(document).ready(function(){

  $(".btn1").click(function(){

  $("p").fadeOut()

  });

  $(".btn2").click(function(){

  $("p").fadeIn();

  });

});

</script>

</head>

<body>

<p>This is a paragraph.</p>

<button class="btn1">Hide</button>

<button class="btn2">Show</button>

</body>

</html>

fadein/fadeout

<html>

<head>

<script type="text/javascript" src="jquery-1.12.4.js"></script>

<script type="text/javascript">

  $(".btn1").click(function(){

  $("p").hide();

  });

  $(".btn2").click(function(){

  $("p").show();

  });

</script>

</head>

<body>

<p>hide/show</p>

<button class="btn1">Hide</button>

<button class="btn2">Show</button>

</body>

</html>

hide

九.对象访问

$.trim() 　　//去除字符串两端的空格

$.each() 　　//遍历一个数组或对象，for循环

$.inArray() //返回一个值在数组中的索引位置，不存在返回-1

$.grep() 　 //返回数组中符合某种标准的元素

$.extend()  //将多个对象，合并到第一个对象

$.makeArray() //将对象转化为数组

$.type()    //判断对象的类别（函数对象、日期对象、数组对象、正则对象等等

$.isArray() //判断某个参数是否为数组

$.isEmptyObject() //判断某个对象是否为空(不含有任何属性)

$.isFunction()    //判断某个参数是否为函数

$.isPlainObject() //判断某个参数是否为用"{}"或"new Object"建立的对象

$.support()       //判断浏览器是否支持某个特性

<!DOCTYPE html>

<html lang="en">

<!--.each实现原理-->

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--<script src="jquery-1.12.4.js"></script>-->

</head>

<body>

    <script>

        function myeach(obj,func) {

            for(var i=0;i<obj.length;i++){

                var current = obj[i];

                var ret= func(i,current);

                if (ret = false){

                    break

                }

            }

        }

        var li=[11,22,33];

        myeach(li,function (k,v) {

            console.log(k,v);

            return false;

        })

    </script>

</body>

</html>

.each实现原理

十.插件拓展

jQuery.fn.extend({

  check: function() {

    return this.each(function() { this.checked = true; });

  },

  uncheck: function() {

    return this.each(function() { this.checked = false; });

  }

});

$("input[type=checkbox]").check();

$("input[type=radio]").uncheck();

//方式二

jQuery.extend({

  min: function(a, b) { return a < b ? a : b; },    //三元运算

  max: function(a, b) { return a > b ? a : b; }

});

jQuery.min(2,3);     //2

jQuery.max(4,5);    //5

Jquery 参考手册:http://www.php100.com/manual/jquery/

十一.实例小练习

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>正反选</title>

    <script src="jquery-1.12.4.js"></script>

</head>

<body>

    <div>

         <button onclick="selectall();">全选</button>

         <button onclick="cancel();">取消</button>

         <button onclick="reverse();">反选</button>

     <table border="1">

         <tr>

             <td><input type="checkbox"></td>

             <td>111</td>

         </tr>

         <tr>

             <td><input type="checkbox"></td>

             <td>222</td>

         </tr>

         <tr>

             <td><input type="checkbox"></td>

             <td>333</td>

         </tr>

         <tr>

             <td><input type="checkbox"></td>

             <td>444</td>

         </tr>

     </table>

    </div>

    <script>

        function selectall() {

            $("table :checkbox").prop('checked',true)

        }

        function cancel() {

            $("table:checkbox").prop("checked",false)

        }

        function reverse() {

            $("table :checkbox").each(function () {

                if($(this).prop("checked")){

                    $(this).prop("checked",false)

                }else {

                    $(this).prop("checked",true)

                }

            }

            )

        }

    </script>

</body>

</html>

正反选

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>模态对话框</title>

    <style>

        .shade{

            position: fixed;

            left: 0;

            top: 0;

            right: 0;

            bottom: 0;

            background: rgba(0,0,0,.6) ;

            z-index: 20;

        }

        .modal{

            position: fixed;

            left: 50%;

            top: 50%;

            height: 300px;

            width: 400px;

            margin-top: -150px;

            margin-left: -200px;

            z-index: 30;

            border: 1px solid #ddd;

            background-color: white;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

    <div>

        <input type="button" value="添加" onclick="Add();" />

        <table border="1">

            <thead>

                <tr>

                    <th >主机名</th>

                    <th >IP</th>

                    <th >端口</th>

                    <th>操作</th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td target="host">c1.com</td>

                    <td target="ip">1.1.1.1</td>

                    <td target="port">8888</td>

                    <td onclick="Edit(this);">Edit</td>

                </tr>

               <tr>

                    <td target="host">c2.com</td>

                    <td target="ip">1.1.1.1</td>

                    <td target="port">8888</td>

                    <td onclick="Edit(this);">Edit</td>

                </tr>

            <tr>

                    <td target="host">c3.com</td>

                    <td target="ip">1.1.1.1</td>

                    <td target="port">8888</td>

                    <td onclick="Edit(this);">Edit</td>

                </tr>

            <tr>

                    <td target="host">c4.com</td>

                    <td target="ip">1.1.1.1</td>

                    <td target="port">8888</td>

                    <td onclick="Edit(this);">Edit</td>

                </tr>

            </tbody>

        </table>

    </div>

    <div class="shade hide"></div>

    <div  class="modal hide">

        <form action="" method="get">

            <p>主机名：<input type="text" id="host" name="host"></p>

            <p>IP地址：<input type="text" id='ip' name="ip"></p>

            <p>端口号：<input type="text" id='port' name="port"></p>

            <input type="submit" value="提交" onclick="return SubmitForm();">

            <input type="button" value="取消" onclick="HideModal();">

        </form>

    </div>

    <script src="jquery-1.12.4.js"></script>

    <script>

        function SubmitForm() {

            var flag=true;

            $(".modal").find('input[type="text"]').each(function () {

                var value = $(this).val();

                if(value.trim().length == 0){

                    flag = false;

                    return flag;

                }

            });

            return flag;

        }

        function Edit(ths) {

            $(".shade,.modal").removeClass("hide");

            var preList = $(ths).prevAll();

            preList.each(function () {

                var text = $(this).text();

                var target = $(this).attr('target');

                $("#"+target).val(text);

            });

        }

        function HideModal() {

            $(".shade,.modal").addClass("hide");

            $(".modal").find("input[type='text']").val("");

        }

        function Add() {

            $(".shade,.modal").removeClass("hide");

        }

    </script>

</body>

</html>

模态对话框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>轮播图</title>

    <style>

        *{

            margin: 0;

            padding: 0;

            list-style: none;

        }

        .outer{

            position: relative;

            height: 454px;

            width: 730px;

            margin: 0 auto;

            border: dashed 1px lightskyblue;

            cursor: pointer;

        }

        .outer .img li{

            position: absolute;

            left: 0;

            top:0;

        }

        .outer .num{

            position: absolute;

            left: 0;

            bottom: 0;

            font-size: 0px;

            width: 100%;

            text-align: center;

        }

        .outer .num li{

            display: inline-block;

            width: 20px;

            height: 20px;

            background-color: darkgray;

            line-height: 20px;

            text-align: center;

            font-size: 16px;

            border-radius: 60%;

            margin: 5px;

        }

        .outer .public{

            width: 40px;

            height: 60px;

            background-color: #555555;

            text-align: center;

            line-height: 60px;

            top:50%;

            margin-top: -30px;

            position: absolute;

            opacity: 0.4;

            font-size: 40px;

            font-weight: bold;

        }

        .outer .btn_right{

            right: 0;

        }

        .outer:hover .public{

             display: block;

         }

        .outer .num li.current{

            background-color: brown;

        }

    </style>

</head>

<body>

    <div class="outer">

        <ul class="img">

            <li><img src="img/1.jpg"></li>

            <li><img src="img/2.jpg"></li>

            <li><img src="img/3.jpg"></li>

            <li><img src="img/4.jpg"></li>

            <li><img src="img/5.jpg"></li>

        </ul>

        <ul class="num">

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

        </ul>

        <div class="btn_left public"> < </div>

        <div class="btn_right public"> > </div>

    </div>

    <script src="jquery-1.12.4.js"></script>

    <script>

        $(function () {

            $(".num li").first().addClass("current");

            $(".num li").mouseover(function () {

                $(this).addClass("current").siblings().removeClass("current");

                var index = $(this).index();

                i = index;

                $(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);

            });

            //自动轮播

            i = 0;

            var time = setInterval(move,2000);

            function move() {

                i++;

                if(i == 5){

                    i = 0;

                }

                $(".num li").eq(i).addClass("current").siblings().removeClass("current");

                $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);

            }

            //如果有鼠标点击时暂停

             $(".outer").hover(function () {

                 clearInterval(time);

             },function () {

                 time = setInterval(move,2000);

                     }

             );

            //右滑动

            $(".btn_right").click(function () {

                move();

            });

            //左滑动

            $(".btn_left").click(function () {

                if(i==0){

                    i = 5;

                }

                i = i-2;

                move();

            })

        })

    </script>

</body>

</html>

轮播图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>放大镜</title>

    <script src="jquery-1.12.4.js"></script>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .outer{

            width: 350px;

            height: 350px;

            border: dashed 1px rosybrown;

        }

        .outer .small_box{

            position: relative;

        }

        .outer .small_box .float{

            height: 175px;

            width: 175px;

            background-color: darkgray;

            opacity: 0.4;

            fill-opacity: 0.4;

            position: absolute;

            display: none;

        }

        .outer .big_box{

            height: 400px;

            width: 400px;

            overflow: hidden;

            position:absolute;

            left: 360px;

            top: 0px;

            z-index: 1;

            border: 5px solid rebeccapurple;

            display: none;

        }

        .outer .big_box img{

            position: absolute;

            z-index: 5;

        }

    </style>

</head>

<body>

    <div class="outer">

            <div class="small_box">

                <div class="float"></div>

                <img src="img/small.jpg">

            </div>

            <div class="big_box">

                <img src="img/big.jpg">

            </div>

        </div>

    <script src="jquery-1.12.4.js"></script>

    <script>

        $(function(){

          $(".small_box").mouseover(function(){

              $(".float").css("display","block");

              $(".big_box").css("display","block")

          })

          $(".small_box").mouseout(function(){

              $(".float").css("display","none");

              $(".big_box").css("display","none")

          })

          $(".small_box").mousemove(function(e){

              var _event=e || window.event;

              var float_width=$(".float").width();

              var float_height=$(".float").height();

              console.log(float_height,float_width);

              var float_height_half=float_height/2;

              var float_width_half=float_width/2;

              console.log(float_height_half,float_width_half);

               var small_box_width=$(".small_box").height();

               var small_box_height=$(".small_box").width();

//  鼠标点距离左边界的长度与float应该与左边界的距离差半个float的width,height同理

              var mouse_left=_event.clientX-float_width_half;

              var mouse_top=_event.clientY-float_height_half;

              if(mouse_left<0){

                  mouse_left=0

              }else if (mouse_left>small_box_width-float_width){

                  mouse_left=small_box_width-float_width

              }

              if(mouse_top<0){

                  mouse_top=0

              }else if (mouse_top>small_box_height-float_height){

                  mouse_top=small_box_height-float_height

              }

               $(".float").css("left",mouse_left+"px");

               $(".float").css("top",mouse_top+"px")

               var percentX=($(".big_box img").width()-$(".big_box").width())/ (small_box_width-float_width);

               var percentY=($(".big_box img").height()-$(".big_box").height())/(small_box_height-float_height);

              console.log(percentX,percentY)

               $(".big_box img").css("left", -percentX*mouse_left+"px")

               $(".big_box img").css("top", -percentY*mouse_top+"px")

          })

    })

    </script>

</body>

</html>

放大镜

<!DOCTYPE html>

<html lang="en">

<!--商城菜单-->

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-1.12.4.js"></script>

    <style>

        *{

    margin: 0;

    padding: 0;

}

.hide{

    display:none;

}

.header-nav {

    height: 39px;

    background: #c9033b;

}

.header-nav .bg{

    background: #c9033b;

}

.header-nav .nav-allgoods .menuEvent {

    display: block;

    height: 39px;

    line-height: 39px;

    text-decoration: none;

    color: #fff;

    text-align: center;

    font-weight: bold;

    font-family: 微软雅黑;

    color: #fff;

    width: 100px;

}

.header-nav .nav-allgoods .menuEvent .catName {

    height: 39px;

    line-height: 39px;

    font-size: 15px;

}

.header-nav .nav-allmenu a {

    display: inline-block;

    height: 39px;

    vertical-align: top;

    padding: 0 15px;

    text-decoration: none;

    color: #fff;

    float: left;

}

.header-menu a{

    color:#656565;

}

.header-menu .menu-catagory{

    position: absolute;

    background-color: #fff;

    border-left:1px solid #fff;

    height: 316px;

    width: 230px;

     z-index: 4;

     float: left;

}

.header-menu .menu-catagory .catagory {

    border-left:4px solid #fff;

    height: 104px;

    border-bottom: solid 1px #eaeaea;

}

.header-menu .menu-catagory .catagory:hover {

    height: 102px;

    border-left:4px solid #c9033b;

    border-bottom: solid 1px #bcbcbc;

    border-top: solid 1px #bcbcbc;

}

.header-menu .menu-content .item{

    margin-left:230px;

    position:absolute;

    background-color:white;

    height:314px;

    width:500px;

    z-index:4;

    float:left;

    border: solid 1px #bcbcbc;

    border-left:0;

    box-shadow: 1px 1px 5px #999;

}

    </style>

</head>

<body>

<div class="pg-header">

    <div class="header-nav">

        <div class="container narrow bg">

            <div class="nav-allgoods left">

                <a id="all_menu_catagory" href="#" class="menuEvent">

                    <strong class="catName">全部商品分类<>

                    <span class="arrow" style="display: inline-block;vertical-align: top;"></span>

                    </strong>

                </a>

            </div>

        </div>

    </div>

    <div class="header-menu">

        <div class="container narrow hide">

            <div id="nav_all_menu" class="menu-catagory">

                <div class="catagory" float-content="one">

                    <div class="title">家电</div>

                    <div class="body">

                        <a href="#">空调</a>

                    </div>

                </div>

                <div class="catagory" float-content="two">

                    <div class="title">床上用品</div>

                    <div class="body">

                        <a href="http://www.baidu.com">床单</a>

                    </div>

                </div>

                <div class="catagory" float-content="three">

                    <div class="title">水果</div>

                    <div class="body">

                        <a href="#">橘子</a>

                    </div>

                </div>

            </div>

            <div id="nav_all_content" class="menu-content">

                <div class="item hide" float-id="one">

                    <dl>

                        <dt><a href="#" class="red">厨房用品</a></dt>

                        <dd>

                            <span>| <a href="#" target="_blank" title="勺子">勺子</a> </span>

                        </dd>

                    </dl>

                    <dl>

                        <dt><a href="#" class="red">厨房用品</a></dt>

                        <dd>

                            <span>| <a href="#" target="_blank" title="菜刀">菜刀</a> </span>

                        </dd>

                    </dl>

                    <dl>

                        <dt><a href="#" class="red">厨房用品</a></dt>

                        <dd>

                            <span>| <a href="#">菜板</a> </span>

                        </dd>

                    </dl>

                    <dl>

                        <dt><a href="#" class="red">厨房用品</a></dt>

                        <dd>

                            <span>| <a href="#" target="_blank" title="碗">碗</a> </span>

                        </dd>

                    </dl>

                </div>

                <div class="item hide" float-id="two">

                    <dl>

                        <dt><a href="#" class="red">厨房用品</a></dt>

                        <dd>

                            <span>| <a href="#" target="_blank" title="">角阀</a> </span>

                        </dd>

                    </dl>

                    <dl>

                        <dt><a href="#" class="red">厨房用品</a></dt>

                        <dd>

                            <span>| <a href="#" target="_blank" title="角阀">角阀</a> </span>

                        </dd>

                    </dl>

                    <dl>

                        <dt><a href="#" class="red">厨房用品</a></dt>

                        <dd>

                            <span>| <a href="#" target="_blank" title="角阀">角阀</a> </span>

                        </dd>

                    </dl>

                </div>

                <div class="item hide" float-id="three">

                    <dl>

                        <dt><a href="#" class="red">厨房用品3</a></dt>

                        <dd>

                            <span>| <a href="#" target="_blank" title="角阀">角阀3</a> </span>

                        </dd>

                    </dl>

                    <dl>

                        <dt><a href="#" class="red">厨房用品3</a></dt>

                        <dd>

                            <span>| <a href="http://www.meilele.com/category-jiaofa/" target="_blank" title="角阀">角阀3</a> </span>

                        </dd>

                    </dl>

                </div>

            </div>

        </div>

    </div>

</div>

<script src="jquery-1.12.4.js"></script>

<script>

    $(function () {

            Change_menu("#all_menu_catagory","#nav_all_menu","#nav_all_content")

        });

    function Change_menu(menuF,menuS,menuT) {

        $(menuF).bind("mouseover",function () {

            $(menuS).parent().removeClass("hide");

        });

        $(menuF).bind("mouseout",function () {

            $(menuS).parent().addClass("hide");

        });

        $(menuS).children().bind("mouseover",function () {

            $(menuS).parent().removeClass("hide");

            $items = $(menuT).find('[float-id="'+$(this).attr("float-content")+'"]');

            $items.removeClass("hide").siblings().addClass("hide");

        });

        $(menuS).bind("mouseout",function () {

            $(menuS).parent().addClass("hide");

            $(menuT).children().addClass("hide");

        });

        $(menuT).children().bind("mouseover",function () {

                $(menuS).parent().removeClass("hide");

                $(this).removeClass("hide");

            });

            $(menuT).children().bind("mouseout",function () {

                $(menuS).parent().addClass("hide");

                $(this).addClass("hide");

            });

    }

</script>

</body>

</html>

商城菜单

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="jquery-1.12.4.js"></script>

    <style>

        *{

            margin: 0 ;

        }

        .bor_sty{

            border: 1px solid red;

            width: 200px;

            height: 20px;

        }

        .outer{

            height: 400px;

            width: 350px;

            background-color: gainsboro;

            border: 1px dashed beige;

            margin: 0 auto;

        }

        input{

            height: 25px;

            width: 200px;

        }

        .subut input{

            margin-left: 50px;

            background-color: #B2002E;

        }

        .tran{

            border: 1px solid transparent;

            width: 200px;

            height: 22px;

            margin-left: 50px;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

    <div class="outer">

        <form action="" method="post">

            Host：<input type="text" name="test">

            <div class="tran">

                <div class="bor_sty hide">warning</div>

            </div>

            <div class="subut">

                <input type="submit" name="commit" onclick="return Submit();">

            </div>

        </form>

    </div>

    <script>

        function Submit() {

            $("form").find("input[type='text']").each(function () {

                flag = true;

                var value = $(this).val();

                if (value.trim().length==0){

                    $(this).siblings().children().removeClass("hide");

                    flag = false;

                    return false;

                }else{

                    $(this).siblings().children().addClass("hide");

                }

            });

            return flag;

        }

    </script>

</body>

</html>

前端FORM验证

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>返回顶部</title>

    <script src="jquery-1.12.4.js"></script>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .div1{

            background-color: palegoldenrod;

            height: 600px;

            width: 100%;

        }

        .div2{

            background-color: antiquewhite;

            height: 600px;

        }

        .div3{

            position: fixed;

            width: 60px;

            height: 40px;

            background-color: grey;

            right: 0;

            bottom: 10px;

            font-size: 12px;

            cursor: pointer;

            line-height: 40px;

            text-align: center;

        }

        .hide{

            display: none;

        }

    </style>

</head>

<body>

    <div class="div1">111</div>

    <div class="div2">222</div>

    <div class="div3 hide">返回顶部</div>

    <script>

        window.onscroll=function(){

              var current=$(window).scrollTop();

              console.log(current)

              if (current>100){

                  $(".div3").removeClass("hide")

              }

              else {

              $(".div3").addClass("hide")

          }

          }

           $(".div3").click(function div3(){

               $(window).scrollTop(0)

           })

    </script>

</body>

</html>

返回顶部

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0px;

            padding: 0px;

        }

        .tab_outer{

            margin: 0px auto;

            width: 60%;

        }

        .menu{

            background-color: #cccccc;

            border: 1px solid #ccc;

            line-height: 40px;

        }

        .menu li{

            display: inline-block;

            color: white;

        }

        .menu li:hover {

            cursor: pointer;

        }

        .menu a{

            padding: 11px;

        }

        .content{

            border: 1px solid #ccc;

            height: 300px;

            font-size: 30px;

        }

        .hide{

            display: none;

        }

        .current{

            background-color: #0099dd;

            color: black;

        }

    </style>

</head>

<body>

    <div class="tab_outer">

          <ul class="menu">

              <li xxx="c1" class="current" onclick="Tab(this);">菜单一</li>

              <li xxx="c2" onclick="Tab(this);">菜单二</li>

              <li xxx="c3" onclick="Tab(this);">菜单三</li>

          </ul>

          <div class="content">

              <div id="c1">内容一</div>

              <div id="c2" class="hide">内容二</div>

              <div id="c3" class="hide">内容三</div>

          </div>

    </div>

    <script src="../../jquery-1.12.4.js"></script>

    <script>

        function Tab(self) {

            $(self).addClass("current").siblings().removeClass("current");

            var x = "#" + $(self).attr("xxx");

            $(x).removeClass("hide").siblings().addClass("hide");

        }

    </script>

</body>

</html>

菜单切换

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{

            margin: 0;

            background-color: #dddddd;

        }

        .w{

            margin: 0 auto;

            width: 980px;

        }

        .pg-header{

            background-color: black;

            color: white;

            height: 48px;

        }

        .pg-body .menu{

            position: absolute;

            left: 200px;

            width: 180px;

            background-color: white;

            float: left;

        }

        li {

            list-style-type: none;

        }

        .pg-body .menu .active{

            background-color: #425a66;

            color: white;

        }

        .pg-body .fixed{

            position: fixed;

            top: 10px;

        }

        .pg-body .content{

            position: absolute;

            left: 385px;

            right: 200px;

            background-color: white;

            float: left;

        }

        .pg-body .content .item{

            height: 900px;

        }

    </style>

</head>

<body>

    <div class="pg-header">

        <div class="w"></div>

    </div>

    <div class="pg-body">

        <div id="menu" class="menu">

            <ul>

                <li menu="funcOne">第一章</li>

                <li menu="funcTwo">第二章</li>

                <li menu="funcStree">第三章</li>

            </ul>

        </div>

        <div id="content" class="content">

            <div class="item" con="funcOne">床前明月管</div>

            <div class="item" con="funcTwo">疑是地上霜</div>

            <div class="item" con="funcStree" style="height: 100px">我是郭德纲</div>

        </div>

    </div>

    <script src="../../jquery-1.12.4.js"></script>

    <script>

        window.onscroll = function () {

            var onTop = $(window).scrollTop();

            if (onTop >= 48){

                $("#menu").addClass("fixed");

            }else {

                $("#menu").removeClass("fixed");

            }

            var flag = false;

            $(".item").each(function () {

                var topH = $(this).offset().top;

                var HH = $(this).height() + topH;

                var wH = $(window).height();

                if ((wH + onTop) == HH){

                    $("ul .active").removeClass("active");

                    $("li:last").addClass("active");

                    flag = true;

                    return

                }

                if (flag){

                    return

                }

                var menuCon = $(this).attr("con");

                if ((topH < onTop) && (onTop < HH)){

                    $("ul [menu='" + menuCon +"']").addClass("active");

                }else {

                    $("ul [menu='" + menuCon +"']").removeClass("active");

                }

            })

        }

    </script>

</body>

</html>

滚动菜单

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <div style="border: 1px solid #ddd;width: 600px;position: absolute;">

        <div id="title" style="background-color: black;height: 40px;color: white;">

            <strong>标题</strong>

        </div>

        <div style="height: 300px;">

            内容

        </div>

    </div>

<script type="text/javascript" src="../../jquery-1.12.4.js"></script>

<script>

    $(function () {

        $('#title').mouseover(function () {

            $(this).css('cursor','move');

        }).mousedown(function (e) {

            var _event = e || widows.event;

            var ord_x = _event.clientX;

            var ord_y = _event.clientY;

            var parent_left = $(this).parent().offset().left;

            var parent_top = $(this).parent().offset().top;

            $(this).bind('mousemove',function (e) {

                var _new_event = e || window.event;

                var new_x = _new_event.clientX;

                var new_y = _new_event.clientY;

                var x = parent_left + (new_x - ord_x);

                var y = parent_top + (new_y - ord_y);

                $(this).parent().css('left',x+'px');

                $(this).parent().css('top',y+'px');

            })

        }).mouseup(function () {

            $(this).unbind('mousemove');

        });

    })

</script>

</body>

</html>

拖动面板

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <!--1 隐藏与显示-->

    <!--2 淡入淡出-->

    <!--3 滑动-->

    <!--4 效果-回调:每一个动画执行完毕之后所能执行的函数方法或者所能做的一件事-->

    <p>hello</p>

    <button id="hide">隐藏</button>

    <button id="show">显示</button>

    <button id="toggle">隐藏/显示</button>

    <script src="../../jquery-1.12.4.js"></script>

    <script>

        $(document).ready(function(){

            $("#hide").click(function(){

                $("p").hide(1000);

            });

            $("#show").click(function(){

                $("p").show(1000);

            });

        //用于切换被选元素的 hide() 与 show() 方法。

            $("#toggle").click(function(){

                $("p").toggle(2000);

            });

        });

    </script>

</body>

</html>

隐藏与显示

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .edit-mode{

            background-color: #b3b3b3;

            padding: 8px;

            text-decoration: none;

            color: white;

        }

        .editing{

            background-color: #f0ad4e;

        }

    </style>

</head>

<body>

    <div style="padding: 20px">

        <input type="button" onclick="CheckAll('#edit_mode', '#tb1');" value="全选" />

        <input type="button" onclick="CheckReverse('#edit_mode', '#tb1');" value="反选" />

        <input type="button" onclick="CheckCancel('#edit_mode', '#tb1');" value="取消" />

        <a id="edit_mode" class="edit-mode" href="javascript:void(0);"  onclick="EditMode(this, '#tb1');">进入编辑模式</a>

    </div>

    <table border="1">

        <thead>

        <tr>

            <th>选择</th>

            <th>主机名</th>

            <th>端口</th>

            <th>状态</th>

        </tr>

        </thead>

        <tbody id="tb1">

            <tr>

                <td><input type="checkbox" /></td>

                <td edit="true">v1</td>

                <td>v11</td>

                <td edit="true" edit-type="select" sel-val="1" global-key="STATUS">在线</td>

            </tr>

            <tr>

                <td><input type="checkbox" /></td>

                <td edit="true">v1</td>

                <td>v11</td>

                <td edit="true" edit-type="select" sel-val="2" global-key="STATUS">下线</td>

            </tr>

            <tr>

                <td><input type="checkbox" /></td>

                <td edit="true">v1</td>

                <td>v11</td>

                <td edit="true" edit-type="select" sel-val="1" global-key="STATUS">在线</td>

            </tr>

        </tbody>

    </table>

    <script type="text/javascript" src="../../jquery-1.12.4.js"></script>

    <script>

        /*

         监听是否已经按下control键

         */

        window.globalCtrlKeyPress = false;

        window.onkeydown = function(event){

            if(event && event.keyCode == 17){

                window.globalCtrlKeyPress = true;

            }

        };

        window.onkeyup = function(event){

            if(event && event.keyCode == 17){

                window.globalCtrlKeyPress = false;

            }

        };

        /*

         按下Control，联动表格中正在编辑的select

         */

        function MultiSelect(ths){

            if(window.globalCtrlKeyPress){

                var index = $(ths).parent().index();

                var value = $(ths).val();

                $(ths).parent().parent().nextAll().find("td input[type='checkbox']:checked").each(function(){

                    $(this).parent().parent().children().eq(index).children().val(value);

                });

            }

        }

    </script>

    <script type="text/javascript">

$(function(){

    BindSingleCheck('#edit_mode', '#tb1');

});

function BindSingleCheck(mode, tb){

    $(tb).find(':checkbox').bind('click', function(){

        var $tr = $(this).parent().parent();

        if($(mode).hasClass('editing')){

            if($(this).prop('checked')){

                RowIntoEdit($tr);

            }else{

                RowOutEdit($tr);

            }

        }

    });

}

function CreateSelect(attrs,csses,option_dict,item_key,item_value,current_val){

    var sel= document.createElement('select');

    $.each(attrs,function(k,v){

        $(sel).attr(k,v);

    });

    $.each(csses,function(k,v){

        $(sel).css(k,v);

    });

    $.each(option_dict,function(k,v){

        var opt1=document.createElement('option');

        var sel_text = v[item_value];

        var sel_value = v[item_key];

        if(sel_value==current_val){

            $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).attr('selected',true).appendTo($(sel));

        }else{

            $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).appendTo($(sel));

        }

    });

    return sel;

}

STATUS = [

    {'id': 1, 'value': "在线"},

    {'id': 2, 'value': "下线"}

];

BUSINESS = [

    {'id': 1, 'value': "车上会"},

    {'id': 2, 'value': "二手车"}

];

function RowIntoEdit($tr){

    $tr.children().each(function(){

        if($(this).attr('edit') == "true"){

            if($(this).attr('edit-type') == "select"){

                var select_val = $(this).attr('sel-val');

                var global_key = $(this).attr('global-key');

                var selelct_tag = CreateSelect({"onchange": "MultiSelect(this);"}, {}, window[global_key], 'id', 'value', select_val);

                $(this).html(selelct_tag);

            }else{

                var orgin_value = $(this).text();

                var temp = "<input value='"+ orgin_value+"' />";

                $(this).html(temp);

            }

        }

    });

}

function RowOutEdit($tr){

    $tr.children().each(function(){

        if($(this).attr('edit') == "true"){

            if($(this).attr('edit-type') == "select"){

                var new_val = $(this).children(':first').val();

                var new_text = $(this).children(':first').find("option[value='"+new_val+"']").text();

                $(this).attr('sel-val', new_val);

                $(this).text(new_text);

            }else{

                var orgin_value = $(this).children().first().val();

                $(this).text(orgin_value);

            }

        }

    });

}

function CheckAll(mode, tb){

    if($(mode).hasClass('editing')){

        $(tb).children().each(function(){

            var tr = $(this);

            var check_box = tr.children().first().find(':checkbox');

            if(check_box.prop('checked')){

            }else{

                check_box.prop('checked',true);

                RowIntoEdit(tr);

            }

        });

    }else{

        $(tb).find(':checkbox').prop('checked', true);

    }

}

function CheckReverse(mode, tb){

    if($(mode).hasClass('editing')){

        $(tb).children().each(function(){

            var tr = $(this);

            var check_box = tr.children().first().find(':checkbox');

            if(check_box.prop('checked')){

                check_box.prop('checked',false);

                RowOutEdit(tr);

            }else{

                check_box.prop('checked',true);

                RowIntoEdit(tr);

            }

        });

    }else{

        $(tb).children().each(function(){

            var tr = $(this);

            var check_box = tr.children().first().find(':checkbox');

            if(check_box.prop('checked')){

                check_box.prop('checked',false);

            }else{

                check_box.prop('checked',true);

            }

        });

    }

}

function CheckCancel(mode, tb){

    if($(mode).hasClass('editing')){

        $(tb).children().each(function(){

            var tr = $(this);

            var check_box = tr.children().first().find(':checkbox');

            if(check_box.prop('checked')){

                check_box.prop('checked',false);

                RowOutEdit(tr);

            }else{

            }

        });

    }else{

        $(tb).find(':checkbox').prop('checked', false);

    }

}

function EditMode(ths, tb){

    if($(ths).hasClass('editing')){

        $(ths).removeClass('editing');

        $(tb).children().each(function(){

            var tr = $(this);

            var check_box = tr.children().first().find(':checkbox');

            if(check_box.prop('checked')){

                RowOutEdit(tr);

            }else{

            }

        });

    }else{

        $(ths).addClass('editing');

        $(tb).children().each(function(){

            var tr = $(this);

            var check_box = tr.children().first().find(':checkbox');

            if(check_box.prop('checked')){

                RowIntoEdit(tr);

            }else{

            }

        });

    }

}

    </script>

</body>

</html>

编辑框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>登录</title>

    <link href="css/reset.css" type="text/css" rel="stylesheet">

    <link href="css/main.css" type="text/css" rel="stylesheet">

    <script src="js/jquery-1.12.4.js"></script>

</head>

<body>

    <div class="w950">

        <!--top-->

        <div class="img">

            <img src="img/logo_small.png">

        </div>

        <!--main-->

        <div class="center clearfix">

            <div class="main_left">

                <img src="img/login_logo.png">

            </div>

            <div class="main_right">

                <form  action="https:/www.baidu.com" method="post">

                    <div class="loginname">

                        <span> * </span>用户名：

                        <input  type="text"  name="username"/>

                        <div class="transp">

                            <div class="message hide">用户名不能为空</div>

                        </div>

                    </div>

                    <div class="passwd">

                         &nbsp;<span style="color: red">* </span>密码：

                        <input  type="password" name="password"/>

                        <div class="transp">

                            <div class="message hide">密码不能为空</div>

                        </div>

                    </div>

                    <div class="auth">

                        <span style="color: red"> * </span>验证码：

                        <input  type="text" name="code"/>

                        <div class="transp">

                            <div class="message hide">验证码不能为空</div>

                        </div>

                    </div>

                    <div class="chose">

                        <input type="checkbox" />

                        <span>自动登录</span>&nbsp;

                        <span><a href="#">忘记密码?</a></span>

                    </div>

                    <div class="log">

                        <input type="submit" name="commit" value="登&nbsp;&nbsp;&nbsp;录" onclick=" return Submit();"> </input>

                    </div>

                </form>

                <div class="resgister">

                    <p><a style="color: white;">免费注册>></a></p>

                </div>

            </div>

        </div>

        <!--foot-->

        <div class="foot clearfix">

            <p>© 2004-2015 www.test.com.cn All Rights Reserved. 版权所有</p>

        </div>

    </div>

    <script>

        function Submit() {

            $("form").find("input").each(function () {

                flag = true;

                var value = $(this).val();

                console.log(value)

                if (value.trim().length==0){

                    console.log($(this).siblings().children().classList);

                    $(this).siblings().children().removeClass("hide");

                    flag = false;

                    return false;

                }else{

                    $(this).siblings().children().addClass("hide");

                }

            });

            return flag;

        }

    </script>

</body>

</html>

用户登录

@charset "utf-8";

/*顶部样式*/

.w950 .img{border:none;box-sizing:border-box;height: 70px;margin-bottom: 20px;margin-top: 20px}

/*中部样式*/

.w950 .center{width: 950px;height: auto;border: 1px solid gainsboro;}

.w950 .center .main_left{float: left}

.w950 .center .main_right{float: left;margin-left: 100px;margin-top: 40px}

.w950 .center .main_right input{width: 250px;height: 30px;}

.w950 .center .main_right .auth input{width: 120px;height: 30px;}

.w950 .center .main_right .chose{margin-left: 55px;}

.w950 .center .main_right .chose input{width: 15px;height: 15px;}

.w950 .center .main_right .chose a{color: #0000EE;cursor: pointer;}

.w950 .center .main_right .log input{margin-top:17px;width: 250px;height: 35px;background-color: crimson;margin-left: 50px;color: white}

.w950 .center .main_right .loginname span{color: red}

.w950 .center .main_right .resgister{float: right; margin-left: 342px; !important;width:115px;height:32px;background-color: #7cbe56;margin-top: 50px;}

.w950 .center .main_right .resgister p{text-align: center;line-height: 32px;font-size: 16px;color: white;}

.w950 .center .main_right .message{margin-left:0px;width: 252px;height: 17px;border: 1px solid indianred;text-align: center;line-height: 16px;}

.w950 .center .main_right .transp{margin-left:66px;width: 252px;height: 19px;border: 1px solid transparent;}

.hide{display: none;}

/*尾部样式*/

.w950 .foot{height: 40px;margin-top: 12px}

.w950 .foot p{text-align: center;line-height: 40px;color: dimgray;}

/**html&Css式样初始化**/

.clearfix:after{ content:"."; display:block; height:0; visibility:hidden; clear:both; }

html {border:0;} /*初始化html样式，对应页面中的html标签*/

body,div{padding:0; margin:0;}/*初始化这些标签的内外边距*/

body {width:100%;margin:0px auto;font-family:"simsong,Tahoma,verdana";font-size:12px;}/*初始化body标签的字体和大小,页面的边距及宽度*/

table{margin:0 auto;}/*初始化table标签的边距*/

img{vertical-align:top;border:0;}/*初始化图片标签的样式及其垂直居中*/

caption,th {text-align:left;}/*初始化标签的对齐方式*/

strong {font-weight:normal;}/*初始化加粗标签的样式*/

a {color:#000000;text-decoration:none;outline:none;}/*初始化链接标签的样式：文字颜色和下划线*/

a:hover {color:#0000ff;text-decoration:underline;}/*初始化链接标签鼠标悬停动作的样式：文字颜色和下划线*/

用户登录页面样式