JQuery 入門學習附常用UI模塊

本文轉載自查看原文 2016-09-02 09:11 806 WEB前端

一.簡介

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;}/*初始化鏈接標簽鼠標懸停動作的樣式：文字顏色和下划線*/

用戶登錄頁面樣式

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Ajax.BeginForm結合Jquery UI學習(附源代碼） jQuery UI 之 EasyUI 快速入門 Jquery UI 和Easy UI常用插件 jQuery UI常用插件使用 jQuery學習筆記（一）：入門 Ansible入門筆記（2）之常用模塊 Python學習——python的常用模塊 unity游戲框架學習-UI模塊 jquery ui draggable,droppable 學習總結 Jquery Easy UI初步學習(二)datagrid的使用