Query
1、簡介
定義
jQuery創始人是美國John Resig，是優秀的Javascript框架；
javascript
jQuery是一個輕量級、快速簡潔的javaScript庫。css
jQuery對象
jQuery產生的對象時jQuery獨有的，只能本身調用html
書寫規則
支持鏈式操做；java
在變量前加"$"符號（var $variable = jQuery 對象）；jquery
注：此規定並非強制要求。數組
2、尋找元素
選擇器
基本選擇器、層級選擇器、屬性選擇器 與CSS相似，這裏再也不細說，詳細猛戳這裏。瀏覽器
基本篩選器app
$('li:first') //第一個元素
$('li:last') //最後一個元素
$("tr:even") //索引爲偶數的元素，從 0 開始
$("tr:odd") //索引爲奇數的元素，從 0 開始
$("tr:eq(1)") //給定索引值的元素
$("tr:gt(0)") //大於給定索引值的元素
$("tr:lt(2)") //小於給定索引值的元素
$(":focus") //當前獲取焦點的元素
$(":animated") //正在執行動畫效果的元素
內容選擇器框架
$("div:contains('nick')") //包含nick文本的元素
$("td:empty") //不包含子元素或者文本的空元素
$("div:has(p)") //含有選擇器所匹配的元素
$("td:parent") //含有子元素或者文本的元素
表單選擇器ide
$(":input") //匹配全部 input, textarea, select 和 button 元素
$(":text") //全部的單行文本框
$(":password") //全部密碼框
$(":radio") //全部單選按鈕
$(":checkbox") //全部複選框
$(":submit") //全部提交按鈕
$(":reset") //全部重置按鈕
$(":button") //全部button按鈕
$(":file") //全部文件域
$("input:checked") //全部選中的元素
$("select option:selected") //select中全部選中的option元素
篩選器
過濾
$("p").eq(0) //當前操做中第N個jQuery對象,相似索引
$('li').first() //第一個元素
$('li').last() //最後一個元素
$(this).hasClass("test") //元素是否含有某個特定的類,返回布爾值
$('li').has('ul') //包含特定後代的元素
查找
$("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() //全部的同輩元素,不包括本身
3、屬性操做
基本屬性操做
$("img").attr("src"); //返回文檔中全部圖像的src屬性值
$("img").attr("src","test.jpg"); //設置全部圖像的src屬性
$("img").removeAttr("src"); //將文檔中圖像的src屬性刪除
$("input[type='checkbox']").prop("checked", true); //選中複選框
$("input[type='checkbox']").prop("checked", false); $("img").removeProp("src"); //刪除img的src屬性
CSS類
$("p").addClass("selected"); //爲p元素加上 'selected' 類
$("p").removeClass("selected"); //從p元素中刪除 'selected' 類
$("p").toggleClass("selected"); //若是存在就刪除,不然就添加
HTML代碼/文本/值
$('p').html(); //返回p元素的html內容
$("p").html("Hello <b>nick</b>!"); //設置p元素的html內容
$('p').text(); //返回p元素的文本內容
$("p").text("nick"); //設置p元素的文本內容
$("input").val(); //獲取文本框中的值
$("input").val("nick"); //設置文本框中的內容
4、CSS操做
樣式
$("p").css("color"); //訪問查看p元素的color屬性
$("p").css("color","red"); //設置p元素的color屬性爲red
$("p").css({ "color": "red", "background": "yellow" }); //設置p元素的color爲red，background屬性爲yellow（設置多個屬性要用{}字典形式）
位置
$('p').offset() //元素在當前視口的相對偏移,Object {top: 122, left: 260}
$('p').offset().top $('p').offset().left $("p").position() //元素相對父元素的偏移,對可見元素有效，Object {top: 117, left: 250}
$(window).scrollTop() //獲取滾輪滑的高度
$(window).scrollLeft() //獲取滾輪滑的寬度
$(window).scrollTop('100') //設置滾輪滑的高度爲100
尺寸
$("p").height(); //獲取p元素的高度
$("p").width(); //獲取p元素的寬度
$("p:first").innerHeight() //獲取第一個匹配元素內部區域高度(包括補白、不包括邊框)
$("p:first").innerWidth() //獲取第一個匹配元素內部區域寬度(包括補白、不包括邊框)
$("p:first").outerHeight() //匹配元素外部高度(默認包括補白和邊框)
$("p:first").outerWidth() //匹配元素外部寬度(默認包括補白和邊框)
$("p:first").outerHeight(true) //爲true時包括邊距
5、文檔處理
內部插入
$("p").append("<b>nick</b>"); //每一個p元素內後面追加內容
$("p").appendTo("div"); //p元素追加到div內後
$("p").prepend("<b>Hello</b>"); //每一個p元素內前面追加內容
$("p").prependTo("div"); //p元素追加到div內前
外部插入
$("p").after("<b>nick</b>"); //每一個p元素同級以後插入內容
$("p").before("<b>nick</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) //布爾值指事件處理函數是否會被複制
6、事件
頁面載入
當頁面載入成功後再運行的函數事件
$(document).ready(function(){ do something... }); //簡寫
$(function($) { do something... });
頁面處理
//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 不一樣的是當時間發生時纔去臨時綁定。
$("p").delegate("click",function(){ do something... }); $("p").undelegate(); //p元素刪除由 delegate() 方法添加的全部事件
$("p").undelegate("click") //從p元素刪除由 delegate() 方法添加的全部click事件
事件
$("p").click(); //單擊事件
$("p").dblclick(); //雙擊事件
$("input[type=text]").focus() //元素得到焦點時,觸發 focus 事件
$("input[type=text]").blur() //元素失去焦點時,觸發 blur事件
$("button").mousedown()//當按下鼠標時觸發事件
$("button").mouseup() //元素上放鬆鼠標按鈕時觸發事件
$("p").mousemove() //當鼠標指針在指定的元素中移動時觸發事件
$("p").mouseover() //當鼠標指針位於元素上方時觸發事件
$("p").mouseout() //當鼠標指針從元素上移開時觸發事件
$(window).keydown() //當鍵盤或按鈕被按下時觸發事件
$(window).keypress() //當鍵盤或按鈕被按下時觸發事件,每輸入一個字符都觸發一次
$("input").keyup() //當按鈕被鬆開時觸發事件
$(window).scroll() //當用戶滾動時觸發事件
$(window).resize() //當調整瀏覽器窗口的大小時觸發事件
$("input[type='text']").change() //當元素的值發生改變時觸發事件
$("input").select() //當input 元素中的文本被選擇時觸發事件
$("form").submit() //當提交表單時觸發事件
$(window).unload() //用戶離開頁面時
(event object) 對象
全部的事件函數均可以傳入event參數方便處理事件
$("p").click(function(event){ alert(event.type); //"click"
}); (evnet object)屬性方法： event.pageX //事件發生時，鼠標距離網頁左上角的水平距離 event.pageY //事件發生時，鼠標距離網頁左上角的垂直距離 event.type //事件的類型 event.which //按下了哪個鍵 event.data //在事件對象上綁定數據，而後傳入事件處理函數 event.target //事件針對的網頁元素 event.preventDefault() //阻止事件的默認行爲(好比點擊連接，會自動打開新頁面) event.stopPropagation() //中止事件向上層元素冒泡
7、效果
基本
$("p").show() //顯示隱藏的匹配元素
$("p").show("slow"); //參數表示速度,("slow","normal","fast"),也可爲900毫秒
$("p").hide() //隱藏顯示的元素
$("p").toggle(); //切換 顯示/隱藏
滑動
$("p").slideDown("900"); //用900毫秒時間將段落滑下
$("p").slideUp("900"); //用900毫秒時間將段落滑上
$("p").slideToggle("900"); //用900毫秒時間將段落滑上，滑下
淡入淡出
$("p").fadeIn("900"); //用900毫秒時間將段落淡入
$("p").fadeOut("900"); //用900毫秒時間將段落淡出
$("p").fadeToggle("900"); //用900毫秒時間將段落淡入,淡出
$("p").fadeTo("slow", 0.6); //用900毫秒時間將段落的透明度調整到0.6
8、對象訪問
$.trim() //去除字符串兩端的空格 $.each() //遍歷一個數組或對象，for循環 $.inArray() //返回一個值在數組中的索引位置，不存在返回-1 $.grep() //返回數組中符合某種標準的元素 $.extend() //將多個對象，合併到第一個對象 $.makeArray() //將對象轉化爲數組 $.type() //判斷對象的類別（函數對象、日期對象、數組對象、正則對象等等 $.isArray() //判斷某個參數是否爲數組 $.isEmptyObject() //判斷某個對象是否爲空(不含有任何屬性) $.isFunction() //判斷某個參數是否爲函數 $.isPlainObject() //判斷某個參數是否爲用"{}"或"new Object"創建的對象 $.support() //判斷瀏覽器是否支持某個特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="../../jquery-1.12.4.js"></script>
<script> li = [11,22,33]; $.each(li,function (k,v) { console.log(this); console.log(k,v); if (k == 1){ return false; } }) </script>
<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 = [10,20,30]; myEach(li,function (k,v) { console.log(k,v); return false; }) </script>
</body>
</html>
9、插件拓展機制
//方式一
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="title">111</div>
<div class="title">222</div>
<script src="../../jquery-1.12.4.js"></script>
<script> jQuery.fn.extend({ show1: function () { var val = this.text(); val = val + "sb"; return val; }, show2: function () { } }); var ret = $(".title").show1(); console.log(ret); jQuery.extend({ s1: function (arg) { var val = $(arg).text(); return val + "sb"; }, s2: function () { } }); var ret2 = $.s1(".title"); console.log(ret2); </script>
</body>
</html>
10、實例
<!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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> .menu{ height: 600px; width: 30%; background-color: #2F4F4F; float: left; } .title{ line-height: 50px; color: #ddd; } .title:hover{ cursor: pointer; color: lightcyan; font-size: 18px; } .hide{ display: none; } </style>
</head>
<body>
<div class="outer">
<div class="menu">
<div class="item">
<div class="title" onclick="Show(this);">菜單一</div>
<div class="con">
<div>111</div>
<div>111</div>
<div>111</div>
</div>
</div>
<div class="item">
<div class="title" onclick="Show(this);">菜單二</div>
<div class="con hide">
<div>222</div>
<div>222</div>
<div>222</div>
</div>
</div>
<div class="item">
<div class="title" onclick="Show(this);">菜單三</div>
<div class="con hide">
<div>333</div>
<div>333</div>
<div>333</div>
</div>
</div>
</div>
</div>
<script src="../../jquery-1.12.4.js"></script>
<script>
function Show(self) { $(self).next().removeClass("hide").parent().siblings().children(".con").addClass("hide"); } </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 lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="in">fadein</button>
<button id="out">fadeout</button>
<button id="toggle">fadetoggle</button>
<button id="fadeto">fadeto</button>
<div id="id1" style="display:none; width: 80px;height: 80px;background-color: blueviolet"></div>
<div id="id2" style="display:none; width: 80px;height: 80px;background-color: orangered "></div>
<div id="id3" style="display:none; width: 80px;height: 80px;background-color: darkgreen "></div>
<script src="../../jquery-1.12.4.js"></script>
<script> $(document).ready(function(){ $("#in").click(function(){ $("#id1").fadeIn(1000); $("#id2").fadeIn(1000); $("#id3").fadeIn(1000); }); $("#out").click(function(){ $("#id1").fadeOut(1000); $("#id2").fadeOut(1000); $("#id3").fadeOut(1000); }); $("#toggle").click(function(){ $("#id1").fadeToggle(1000); $("#id2").fadeToggle(1000); $("#id3").fadeToggle(1000); }); $("#fadeto").click(function(){ $("#id1").fadeTo(1000,0.4); $("#id2").fadeTo(1000,0.5); $("#id3").fadeTo(1000,0); }); }); </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style> #flipshow,#content,#fliphide,#toggle{ padding: 5px; text-align: center; background-color: blueviolet; border:solid 1px red; } #content{ padding: 50px; display: none; } </style>
</head>
<body>
<div id="flipshow">出現</div>
<div id="fliphide">隱藏</div>
<div id="toggle">toggle</div>
<div id="content">helloworld</div>
<script src="../../jquery-1.12.4.js"></script>
<script> $(document).ready(function(){ $("#flipshow").click(function(){ $("#content").slideDown(1000); }); $("#fliphide").click(function(){ $("#content").slideUp(1000); }); $("#toggle").click(function(){ $("#content").slideToggle(1000); }) }); </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 lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="outer">
<div class="section">
<div class="icons" style="display: inline-block">
<a onclick="Add(this);"><button>+</button></a>
</div>
<div class="inputs" style="display: inline-block">
<input type="checkbox">
<input type="text" value="IP">
</div>
</div>
</div>
<script src="../../jquery-1.12.4.js"></script>
<script>
function Add(self) { $(self).parentsUntil("outer").clone().find("a").html("<button>-</button>").attr("onclick","Remove(this);").end().eq(1).appendTo(".outer"); } function Remove(self) { $(self).parentsUntil("outer").eq(1).remove(); } </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<title>購物商城</title>
<style>
*{ margin: 0; padding: 0; } .outer{ position:relative; width:350px; height:350px; border:1px solid black; } .outer .small-box{ position: relative; z-index: 1; } .outer .small-box .mark{ position: absolute; display: block; width: 350px; height: 350px; background-color: #fff; filter: alpha(opacity=0); opacity: 0; z-index: 10; } .outer .small-box .float-box{ display: none; width: 175px; height: 175px; position: absolute; background: #DAEEFC; filter: alpha(opacity=40); opacity: 0.4; } .outer .big-box{ position: absolute; top: 0; left: 351px; width: 350px; height: 350px; overflow: hidden; border: 1px solid transparent; z-index: 1; } .outer .big-box img{ position: absolute; z-index: 5 } </style>
</head>
<body>
<div class="outer">
<div class="small-box">
<div class="mark"></div>
<div class="float-box" ></div>
<img width="350" height="350" src="../../css/1.jpg">
</div>
<div class="big-box">
<img width="900px" height="900px" src="../../css/1.jpg" >
</div>
</div>
<script src="../../jquery-1.12.4.js"></script>
<script> $(function(){ $(".mark").mouseover(function () { $(".float-box").css("display","block"); $(".big-box").css("display","block"); }); $(".mark").mouseout(function () { $(".float-box").css("display","none"); $(".big-box").css("display","none"); }); $(".mark").mousemove(function (e) { var _event = e || window.event; //兼容多個瀏覽器的event參數模式
var float_box_width = $(".float-box")[0].offsetWidth; var float_box_height = $(".float-box")[0].offsetHeight;//175,175
var float_box_width_half = float_box_width / 2; var float_box_height_half = float_box_height/ 2;//87.5,87.5
var small_box_width = $(".outer")[0].offsetWidth; var small_box_height = $(".outer")[0].offsetHeight;//360,360
var mouse_left = _event.clientX - float_box_width_half; var mouse_top = _event.clientY - float_box_height_half; if (mouse_left < 0) { mouse_left = 0; } else if (mouse_left > small_box_width - float_box_width) { mouse_left = small_box_width - float_box_width; } if (mouse_top < 0) { mouse_top = 0; } else if (mouse_top > small_box_height - float_box_height) { mouse_top = small_box_height - float_box_height; } $(".float-box").css("left",mouse_left + "px"); $(".float-box").css("top",mouse_top + "px"); var percentX = ($(".big-box img")[0].offsetWidth - $(".big-box")[0].offsetWidth) / (small_box_width - float_box_width); var percentY = ($(".big-box img")[0].offsetHeight - $(".big-box")[0].offsetHeight) / (small_box_height - float_box_height); console.log($(".big-box img")[0].offsetWidth,$(".big-box")[0].offsetWidth,small_box_width,float_box_width) 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>
<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">
<b class="catName">所有商品分類</b>>
<span class="arrow" style="display: inline-block;vertical-align: top;"></span>
</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">廚房用品</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="http://www.meilele.com/category-jiaofa" target="_blank" title="角閥">金菜刀</a> </span>
</dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<script src="../../jquery-1.12.4.js"></script>
<script> $(function () { Change("#all_menu_catagory","#nav_all_menu","#nav_all_content") }); function Change(menuF,menuS,menuT) { $(menuF).bind({ "mouseover":function () { $(menuS).parent().removeClass("hide"); },"mouseout":function () { $(menuS).parent().addClass("hide"); } }); $(menuS).children().bind({ "mouseover":function () { $(menuS).parent().removeClass("hide"); var $item = $(menuT).find('[float-id="' + $(this).attr("float-content") + '"]'); $item.removeClass("hide").siblings().addClass("hide"); }, "mouseout":function () { $(menuS).parent().addClass("hide"); $(menuT).parent().addClass("hide"); } }); $(menuT).children().bind({ "mouseover":function () { $(menuS).parent().removeClass("hide"); $(this).removeClass("hide"); }, "mouseout":function () { $(menuS).parent().addClass("hide"); $(this).addClass("hide"); } }) } </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>
<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; } .modal form { position: fixed; left: 50%; top: 50%; height: 200px; width: 229px; border: 1px; margin-left: -115px; margin-top: -100px; } .modal form p { float: right; margin-top: 12px; } .modal form span { float: right; display: inline-block; height: 18px; width: 170px; background-color: #FFEBEB; text-align: center; border: 1px solid #ffbdbe; color: #e4393c; font-size: 14px; visibility: hidden; } .modal form [type="button"] { position: absolute; bottom: -30px; left: 115px; } .modal form [value="提交"]{ left: 50px; } </style>
</head>
<body>
<div style="width: 300px; margin: 0 auto">
<input type="button" value="添加主機" onclick="return Add();" />
<table style="border: 2px solid #F5F5F5; width: 300px;">
<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">.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"><br><span></span></p>
<p>IP地址:<input type="text" id='ip' name="ip"><br><span></span></p>
<p>端口號:<input type="text" id='port' name="port"><br><span></span><br></p>
<input type="button" value="提交" onclick="return SubmitForm();">
<input type="button" value="取消" onclick="HideModal();">
</form>
</div>
<script src="../../jquery-1.12.4.js"></script>
<script> $(function () { $("tr:even").css("background-color","#f5f5f5"); }); function Edit(ths) { $(".shade,.modal").removeClass("hide"); prevList = $(ths).prevAll(); prevList.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(""); Addd = false; } function SubmitForm() { var flag = Detection(); try { if (Addd && flag){ $("tbody").append($("tr").last().clone()); $(".modal").find("input[type='text']").each(function () { var value = $(this).val(); var name = $(this).attr("name"); ($("tr").last().children()).each(function () { if ($(this).attr("target") == name){ $(this).text(value); return } } )}); Addd = false; HideModal(); return false; } }catch (e){} if (flag){ $(".modal").find("input[type='text']").each(function () { var value = $(this).val(); var name = $(this).attr("name"); $(prevList).each(function () { if ($(this).attr("target") == name){ $(this).text(value); return } } )}); $(".modal,.shade").addClass("hide"); HideModal(); } return flag; } function Detection() { var flag = true; $(".modal").find("input[type='text']").each(function () { var value = $(this).val(); if (value.length == 0){ $(this).next().next().css("visibility","visible").text("親，不能爲空"); flag = false; return false; }else { $(this).next().next().css("visibility","hidden").text(""); } if ($(this).attr('name') == "host"){ var r = /(\.com)$/; if (r.test(value) == false){ $(this).next().next().css("visibility","visible").text("主機名必須以.com結尾"); flag = false; return false; } }else if ($(this).attr('name') == "ip"){ var r2 = /^(([0-2]?[0-9][0-9]?)\.){3}([0-2]?[0-9][0-9]?)$/; if (r2.test(value) == false){ $(this).next().next().css("visibility","visible").text("ip 地址格式有誤"); flag = false; return false; } }else if ($(this).attr('name') == "port"){ var r3 = /^([0-9]{1,5})$/; if ((r3.test(value) == false) || (value > 65535)){ $(this).next().next().css("visibility","visible").text("端口必須爲0-65535"); flag = false; return false; } }else { $(this).next().next().css("visibility","hidden").text(""); } }); return flag; } function Add() { Addd = true; $(".shade,.modal").removeClass("hide"); } </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{ margin: 0; padding: 0; } ul{ list-style: none; } .out{ width: 730px; height: 454px; margin: 50px auto; position: relative; } .out .img li{ position: absolute; left: 0; top: 0; } .out .num{ position: absolute; left:0; bottom: 20px; text-align: center; font-size: 0; width: 100%; } .out .btn{ position: absolute; top:50%; margin-top: -30px; width: 30px; height: 60px; background-color: aliceblue; color: black; text-align: center; line-height: 60px; font-size: 40px; display: none; } .out .num li{ width: 20px; height: 20px; background-color: black; color: #fff; text-align: center; line-height: 20px; border-radius: 60%; display: inline; font-size: 18px; margin: 0 10px; cursor: pointer; } .out .num li.active{ background-color: red; } .out .left{ left: 0; } .out .right{ right: 0; } .out:hover .btn{ display: block; color: white; font-weight: 900; background-color: black; opacity: 0.8; cursor: pointer; } .out img { height: 100%; width: 100%; } </style>
</head>
<body>
<div class="out">
<ul class="img">
<li><a href="#"><img src="images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="images/5.jpg" alt=""></a></li>
</ul>
<ul class="num">
<!--<li class="active">1</li>-->
<!--<li>2</li>-->
<!--<li>3</li>-->
<!--<li>4</li>-->
<!--<li>5</li>-->
</ul>
<div class="left btn"><</div>
<div class="right btn">></div>
</div>
<script src="../../jquery-1.12.4.js"></script>
<script> $(function(){ var size=$(".img li").size(); for (var i= 1;i<=size;i++){ var li="<li>"+i+"</li>"; $(".num").append(li); } $(".num li").eq(0).addClass("active"); $(".num li").mouseover(function(){ $(this).addClass("active").siblings().removeClass("active"); var index=$(this).index(); i=index; $(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000); }); i=0; var t=setInterval(move,1500); function move(){ i++; if(i==size){ i=0; } $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); } function moveL(){ i--; if(i==-1){ i=size-1; } $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); } $(".out").hover(function(){ clearInterval(t); },function(){ t=setInterval(move,1500); }); $(".out .right").click(function(){ move() }); $(".out .left").click(function(){ moveL() }) }); </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>
相關文章
- 1. Solr -- query和filter query
- 2. Query DSL for elasticsearch Query
- 3. query
- 4. MySQL: Query Parsing （MySQL query解析）
- 5. media-query
- 6. Match Query
- 7. Query Cache
- 8. NHibernate Query
- 9. hdu4339 Query
- 10. jpa-query
- 更多相關文章...
- • PDO::query - PHP參考手冊
- • SQLite Explain（解釋） - SQLite教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章