整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
html頁面，顯示的內容太多，會影響用戶體驗，如果有一些，點擊才出現的內容，就可以減少內容的干擾。使用jquery就可以很快的實現。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>div隱藏測試</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
</script>
</head>
<body>
<button id="controller">隱藏或者顯示</button>
<div id="contents" style="display: none;">
<p>div的內容</p>
</div>
<script>
$("#controller").click(function () {
if ($("#contents").is(":hidden")) {
$("#contents").show()
} else {
$("#contents").hide()
}
})
</script>
</body>
</html>
$("#contents").is(":hidden") 可以判斷是否是隱藏
$("#contents").show() 表示display:block,
$("#contents").hide() 表示display:none;
操作元素的屬性
$("#contents").attr("style","display:none;"); //隱藏div
$("#contents").attr("style","display:block;"); //顯示div
也可以操作css屬性
$("#contents").css("display","none"); //隱藏div
$("#contents").css("display","block"); //顯示div
也可以直接使用toggle轉換開關實現
$("#contents").toggle()
ndex.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>模態窗口</title>
</head>
<body>
<script>
//alert(1);
function pop(){
//傳遞參數到模態窗口
var obj=new Object();
obj.name="Hello World---來自父窗口";
var returnStr = window.showModalDialog("model.html",obj,
"dialogHeight=200px;dialogTop=200px;dialogLeft=200px;");
alert("模態窗口返回參數"+returnStr);
//刷新頁面
window.location.reload();
}
</script>
<button onClick="pop()">打開模態窗口</button>
<p>模態窗口傳參數，并獲取返回值</p>
</body>
</html>
model.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<script>
// 接受父窗口的參數
var obj=window.dialogArguments;
alert(obj.name);
// 返回參數到父窗口
window.returnValue=’Hello World---來自模態窗口’;
</script>
模態窗口
</body>
</html>
如果直接在瀏覽器中無法正常運行，那么就將其放在服務器容器中。
人建議：學習 jQuery 前先掌握基本的 JavaScrpit 語法，特別是對函數要掌握，jQuery 基本上是使用函數。
jQuery 是一個輕量級 JavaScript 庫
jQuery 庫位于一個 JavaScript 文件中，其中包含了所有的 jQuery 函數，需要通過 <script>標簽引入 jQuery 庫才能進行使用
本地引入
共有兩個版本的 jQuery 可供下載 http://jQuery.com：一份是精簡過的，另一份是未壓縮的（供調試或閱讀）
從 Google 加載 CDN jQuery 核心文件（ 版本可更換 ）
src = http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js
從 Microsoft 加載 CDN jQuery 核心文件（ 版本可更換 ）
src = http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js
基礎語法：$(selector).action()
美元符號（$）定義 jQuery
選擇符（selector）“ 查詢 ” 和 “ 查找 ” HTML 元素
jQuery 的 action() 執行對元素的操作
文檔就緒函數
文檔就緒函數，用于在頁面加載成功后執行的指定代碼
如果在文檔沒有完全加載之前就運行函數，操作可能失敗
通常該函數用于替換 window.onload 事件，文檔就緒函數的執行效率更高
$(document).ready(function(){
code block
});可以簡寫為:
$(function(){
code block
});jQuery 使用 $ 符號作為 jQuery 的簡寫
jQuery 標識符
使用 jQuery 全名
jQuery(document).ready(function(){
jQuery("button").click(function(){
code block
});
});使用 jQuery 簡寫
$(function(){
$("button").click(function(){
code block
});
});自定義 jQuery 別名
var jq = $.noConflict();
jq(function(){
jq("button").click(function(){
code block
});
});注：因為 javascrpit 某些框架中也使用 $ 作為簡寫( 就像 jQuery )，noConflict() 方法是為了解決 javascrpit 框架之間符號沖突而定義的方法，它會釋放 $ 標識符的控制，這樣其他腳本也可以使用這個符號
jQuery 元素選擇器和屬性選擇器允許您通過標簽名、屬性名或內容對 HTML 元素進行選擇
jQuery 元素選擇器
jQuery 使用 CSS 選擇器來選取 HTML 元素
$(this) 當前 HTML 元素
$("p") 選取 <p> 元素
$("p.intro") 選取所有 class="intro" 的 <p> 元素
$("p#demo") 選取所有 id="demo" 的 <p> 元素
$("div#intro .head") 選取 id="intro" 的 <div> 元素中的所有 class="head" 的元素
jQuery 屬性選擇器
jQuery 使用 XPath 表達式來選擇帶有給定屬性的元素
$("[href]") 選取所有帶有href 屬性的元素
$("[href='#']") 選取所有帶有 href 值等于"#" 的元素
$("[href!='#']") 選取所有帶有 href 值不等于 "#" 的元素
$("[href$='.jpg']") 選取所有 href 值以 ".jpg" 結尾的元素
jQuery CSS 選擇器
jQuery CSS 選擇器可用于改變 HTML 元素的 CSS 屬性
把所有 p 元素的背景顏色更改為紅色：$("p").css("background-color","red")
jQuery 事件處理方法是 jQuery 中的核心函數
事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。術語由事件“觸發”（或“激發”）經常會被使用
例子：按鈕的點擊事件被觸發時會調用一個函數
$("button").click(function() {..some code... } )
常用事件函數
$(document).ready(function) 將函數綁定到文檔的就緒事件（當文檔完成加載時）
$(selector).click(function) 觸發或將函數綁定到被選元素的點擊事件
$(selector).change(function) 觸發、或將函數綁定到指定元素的 change 事件
$(selector).dblclick(function) 觸發或將函數綁定到被選元素的雙擊事件
$(selector).focus(function) 觸發或將函數綁定到被選元素的獲得焦點事件
$(selector).mouseover(function) 觸發或將函數綁定到被選元素的鼠標懸停事件
效果通常綁定在某在事件上，例如通過點擊按鈕產生隱藏效果
常見的用于效果的函數
1.隱藏、顯示、切換
- 隱藏 `$(selector).hide(speed,callback)` ： `$("p").hide();`
- 顯示`$(selector).show(speed,callback)` ： `$("p").show(1000);`
- 切換隱藏/顯示`$(selector).toggle(speed,callback)` ： `$("p").toggle();`speed 和 callback 都是可選參數
speed 參數規定顯示/隱藏的速度，可選值為：”slow”、”fast” 或毫秒值
callback 參數是顯示/隱藏完成后所執行的函數名稱
2.淡入、淡出
- 淡入 `$(selector).fadeIn(speed,callback)` ： `$("#div1").fadeIn("slow");`
- 淡出 `$(selector).fadeOut(speed,callback)` ： `$("#div3").fadeOut(3000);`
- 切換淡入/淡出 `$(selector).fadeToggle(speed,callback)` ： ` $("#div1").fadeToggle();`
- 漸變為特定透明度 `$(selector).fadeTo(speed,opacity,callback)` ：`$("#div2").fadeTo("slow",0.4);`speed 和 callback 都是可選參數，opacity 為必需參數
speed 參數規定淡入/淡出的速度，可選值為：”slow”、”fast” 或毫秒值
callback 參數是顯示/隱藏完成后所執行的函數名稱
opacity 參數將淡入淡出效果設置為給定的不透明度（值介于 0 與 1 之間)
3.滑動
- 向下滑動 `$(selector).slideDown(speed,callback)` ： `$("#panel").slideDown();`
- 向上滑動 `$(selector).slideUp(speed,callback)` : `$("#panel").slideUp();`
- 切換向上滑動/向下滑動 `slideToggle()` : `$("#panel").slideToggle();`speed 和 callback 都是可選參數
speed 參數規定向上滑動/向下滑動的速度，可選值為：”slow”、”fast” 或毫秒值
callback 參數是向上滑動/向下滑動完成后所執行的函數名稱
4.動畫
- 自定義動畫 `$(selector).animate({params},speed,callback)`params 是必需參數， speed 和 callback 是可選參數
params 參數定義形成動畫的 CSS 屬性
speed 參數規定效果的時長，可選值為：”slow”、”fast” 或毫秒值
callback 參數是動畫完成后所執行的函數名稱
注： 默認地，所有 HTML 元素都有一個靜態位置，且無法移動，如需對位置進行操作，要記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute！
- 停止動畫 ·`$(selector).stop(stopAll,goToEnd);`
stopAll 和 goToEnd 都是可選參數
stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向后執行
goToEnd 參數規定是否立即完成當前動畫。默認是 false。
默認地，stop() 會清除在被選元素上指定的當前動畫
實例
使用絕對值
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});使用相對值
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
width:'+=150px'
});
});使用隊列功能 ( 逐一進行 animate 調用 )
$("button").click(function(){
var div=$("div");
div.animate({height:'300px',opacity:'0.4'},"slow");
div.animate({width:'300px',opacity:'0.8'},"slow");
div.animate({height:'100px',opacity:'0.4'},"slow");
div.animate({width:'100px',opacity:'0.8'},"slow");
});5.方法連接
允許我們在相同的元素上運行多條 jQuery 命令，一條接著另一條，這樣的話，瀏覽器就不必多次查找相同的元素。如需鏈接一個動作，您只需簡單地把該動作追加到之前的動作上
例如： 把 css(), slideUp() 和 slideDown() 鏈接在一起。”p1” 元素首先會變為紅色，然后向上滑動，然后向下滑動
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
對內容操作
1.獲取內容
- `$(selector).text();` 設置或返回所選元素的文本內容 - `$(selector).html();` 設置或返回所選元素的內容（包括 HTML 標記） - `$(selector).val();` 設置或返回表單字段的值
2.設置內容
- `$(selector).text(string);` 設置所選元素的文本內容 - `$(selector).val(string);` 設置所選元素的內容（包括 HTML 標記） - `$(selector).html(string);` 設置表單字段的值
3.回調函數
i：被選元素列表中當前元素的下標
origText：原始（舊的）值
res：以函數新值返回您希望使用的字符串
- `$(selector).text(function(i,origText){return res;});` 設置或返回所選元素的文本內容
- `$(selector).val(function(i,origText){return res;});` 設置或返回所選元素的內容（包括 HTML 標記）
- `$(selector).html(function(i,origText){return res;});` 設置或返回表單字段的值對屬性操作
1.獲取屬性
- `$(selector).attr("attribute");` 獲取指定元素的所選屬性2.設置屬性
- `$(selector).attr("attribute","value");` 設置所選屬性的值
- `$(selector).attr({"attribute1":"value1", "attribute2":"value2"});` 同時設置多個屬性的值3.attr() 的回調函數
i ： 被選元素列表中當前元素的下標
origValue : 原始（舊的）值
res ： 以函數新值返回您希望使用的字符串
- `$(selector).attr("attribute",function(i,origValue){return res});`對元素/內容操作
與前面的 對內容操作 不同的是：上面的三個方法會將原來的值覆蓋，而這里的方法是在原值基礎上進行修改
1.添加
參數可以是多個，如果多個含有 html 的內容，則相當于增加了多個 html 元素
- `$(selector).append("text");` 在被選元素的結尾插入內容
- `$(selector).prepend("text");` 在被選元素的開頭插入內容
- `$(selector).prepend("text");` 在被選元素之后插入內容
- `$(selector).before("text");` 在被選元素之前插入內容2.刪除
- `$(selector).remove();` 刪除被選元素（及其子元素） - `$(selector).empty();` 從被選元素中刪除子元素 - `$(selector).remove(selector);` 刪除指定選擇器的元素
對 CSS 元素操作
前三種方法是針對已經寫好的樣式
- `$(selector).addClass("className1 className2");` 向被選元素添加一個或多個類
- `$(selector).removeClass("className1 className2");` 從被選元素刪除一個或多個類
- `$(selector).toggleClass("className");` 對被選元素進行添加/刪除類的切換操作
- `$(selector).css();`返回樣式屬性
- `$(selector).css("attribute","value");`設置單個樣式屬性
- `$(selector).css({"propertyname":"value","propertyname":"value",...});`設置多個樣式屬性對尺寸操作
注意參數，中間四種沒有沒有參數，不能進行設置
- `$(selector).width("text");` 設置或返回元素的寬度（不包括內邊距、邊框或外邊距）
- `$(selector).height("text");` 設置或返回元素的高度（不包括內邊距、邊框或外邊距）
- `$(selector).innerWidth();`返回元素的寬度（包括內邊距）
- `$(selector).innerHeight(");`返回元素的高度（包括內邊距）
- `$(selector).outerWidth();`返回元素的寬度（包括內邊距和邊框）
- `$(selector).outerHeight();` 返回元素的高度（包括內邊距和邊框）
- `$(selector).outerWidth(true);`返回元素的寬度（包括內邊距、邊框和外邊距）
- `$(selector).outerHeight(true);` 返回元素的高度（包括內邊距、邊框和外邊距）祖先
向上遍歷 DOM 樹
- `$(selector).parent();` 返回被選元素的直接父元素，該方法只會向上一級對 DOM 樹進行遍歷 - `$(selector).parents();` 返回被選元素的所有祖先元素，它一路向上直到文檔的根元素 (<html>) - `$(selector).parents(selector);` 返回經過過濾的所有祖先元素，它一路向上直到文檔的根元素 (<html>) - `$(selector).parentsUntil() ;`返回介于兩個給定元素之間的所有祖先元素
祖先
向下遍歷 DOM 樹，以查找元素的后代
- `$(selector).children();` 返回被選元素的所有直接子元素，該方法只會向下一級對 DOM 樹進行遍歷
- `$(selector).children(selector);` 返回被選元素的經過過濾的子元素，該方法只會向下一級對 DOM 樹進行遍歷
- `$(selector).find("selector");` 返回被選元素的后代元素，一路向下直到最后一個后代(此方法必須有參數，如果是全部則為 "*" )同胞
DOM 樹中遍歷元素的同胞元素
- `$(selector).siblings(selector);` 返回被選元素的所有同胞元素（selector可選） - `$(selector).next();` 返回被選元素的下一個同胞元素 - `$(selector).nextAll();` 返回被選元素的所有跟隨的同胞元素 - `$(selector).nextUntil(selecotr);` 返回介于兩個給定參數之間的所有跟隨的同胞元素 - prev(), prevAll() 以及 prevUntil() 方法的工作方式與上面的方法類似，只不過方向相反而已：它們返回的是前面的同胞元素（在 DOM 樹中沿著同胞元素向后遍歷，而不是向前）
過濾
允許您基于其在一組元素中的位置來選擇一個特定的元素
- `$(selector).first();` 返回被選元素的首個元素 - `$(selector).last();` 返回被選元素的最后一個元素 - `$(selector).eq();` 返回被選元素中帶有指定索引號的元素（索引號從 0 開始） - `$(selector).filter(selector);` 不匹配這個標準的元素會被從集合中刪除，匹配的元素會被返回 - `$(selector).not(selector);` not() 方法與 filter() 相反，返回不匹配標準的所有元素
AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）
簡短地說，在不重載整個網頁的情況下，AJAX 通過后臺加載數據，并在網頁上進行顯示
load 方法
- `$(selector).load(URL,data,callback);` 方法從服務器加載數據，并把返回的數據放入被選元素中
必需的 URL 參數規定您希望加載的 URL。
可選的 data 參數規定與請求一同發送的查詢字符串鍵/值對集合。
可選的 callback 參數是 load() 方法完成后所執行的函數名稱
callback 回調函數
$(selector).load(URL,data,function(responseTxt,statusTxt,xhr){});
responseTxt - 包含調用成功時的結果內容
statusTXT - 包含調用的狀態
xhr - 包含 XMLHttpRequest 對象
responseTxt - 包含調用成功時的結果內容
statusTXT - 包含調用的狀態
xhr - 包含 XMLHttpRequest 對象
get/post 方法
必需的 URL 參數規定您希望請求的 URL
可選的 callback 參數是請求成功后所執行的函數名
- `$.get(URL,callback);` 通過 HTTP GET 請求從服務器上請求數據
GET - 從指定的資源請求數據
GET 基本上用于從服務器獲得（取回）數據。注釋：GET 方法可能返回緩存數據
- `$.post(URL,data,callback);` 通過 HTTP POST 請求從服務器上請求數據
data 是要提交給服務器的數據，如果數據有多個，使用 json 格式
POST - 向指定的資源提交要處理的數據
POST 也可用于從服務器獲取數據。不過，POST 方法不會緩存數據，并且常用于連同請求一起發送數據
回調函數
data : 存有被請求頁面的內容
status : 存有請求的狀態( success/fail )
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});注意： ajax 不能訪問本地文件，需要解決跨域訪問的問題
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
