勤加練習,必能得心應手!不期速成,日拱一卒?!
態度決定一切 |
七:Ajax支持
通用方式:
$.ajax(prop) 通過一個ajax請求,回去遠程數據,prop是一個hash表,它可以傳遞的key/value有以下幾種。
(String)type:數據傳遞方式(get或post)。
((String)url:數據請求頁面的url
((String)data:傳遞數據的參數字符串,只適合post方式
((String)dataType:期待數據返回的數據格式(例如 "xml", "html", "script",或 "json")
((Boolean)ifModified:當最后一次請求的相應有變化是才成功返回,默認值是false
((Number)timeout:設置時間延遲請求的時間。可以參考$.ajaxTimeout
((Boolean)global:是否為當前請求觸發ajax全局事件,默認為true
((Function)error:當請求失敗時觸發的函數。
((Function)success:當請求成功時觸發函數
((Function)complete:當請求完成后出發函數
jQuery代碼及說明
$.ajax({url: "ajax.htm",
success:function(msg){
$(div"#a").html(msg);
}
});
將ajax.htm返回的內容作為id為a的div內容
$.ajax({ url: "ajax.aspx",
type:"get",
dataType:"html",
data: "name=John&location=Boston",
success:function(msg){
$("#a").html(msg);
}
});
用get方式向ajax.aspx頁面傳參數,并將返回內容負給id為a的對象。
$.ajaxTimeout(time) 設置請求結束時間
$.ajaxTimeout( 5000 )
其它簡化方式:
$.get(url, params, callback) 用get方式向遠程頁面傳遞參數,請求完成后處理函數,除了url外,其它參數任意選擇!
$.get( "ajax.htm" , function(data){ $("#a").html(data) })
$.get( "ajax.asp",
{ name: "young", age: "25" },
function(data){ alert("Data Loaded: " + data); }
)
$.getIfModified(url, params, callback) 用get方式向遠程頁面傳遞參數,從最后一次請求后如果數據有變化才作出響應,執行函數callback
$.getJSON(url, params, callback) 用get方式向遠程json對象傳遞參數,請求完成后處理函數callback。
$.getScript(url, callback) 用get方式載入并運行一個遠程javascript文件。請求完成后處理函數callback。
$.post(url, params, callback) 用post方式向遠程頁面傳遞參數,請求完成后處理函數callback
load(url, params, callback) 載入一個遠程文件并載入頁面DOM中,并執行函數callback
$("#a").load("ajax.htm", function() { alert("load is done"); } );
向ajax.htm頁面發出請求,將返回結果裝入id為a的內容中,然后再執行函數callback。六:事件處理
hover(Function, Function) 當鼠標move over時觸發第一個function,當鼠標move out時觸發第二個function
樣式:<style>.red{color:#FF0000}</style>
Html代碼: <div id="a">sdf</div>
jQuery代碼及效果
$(function(){
$("#a").hover(function(){$(this).addClass("red");},
function(){ $(this).removeClass("red");
});
})
最終效果是當鼠標移到id為a的層上時圖層增加一個red樣式,離開層時移出red樣式
toggle(Function, Function) 當匹配元素第一次被點擊時觸發第一個函數,當第二次被點擊時觸發第二個函數
樣式:<style>.red{color:#FF0000}</style>
Html代碼: <div id="a">sdf</div>
jQuery代碼及效果
$(function(){
$("#a"). toggle (function(){$(this).addClass("red");},
function(){ $(this).removeClass("red");
});
})
最終效果是當鼠標點擊id為a的層上時圖層增加一個red樣式,離開層時移出red樣式
bind(type, fn) 用戶將一個事件和觸發事件的方式綁定到匹配對象上。
trigger(type) 用戶觸發type形式的事件。$("p").trigger("click")
還有:unbind() unbind(type) unbind(type, fn)
Dynamic event(Function) 綁定和取消綁定提供函數的簡捷方式
例:
$("#a").bind("click",function() {
$(this).addClass("red");
})
也可以這樣寫:
$("#a").click(function() {
$(this).addClass("red");
});
最終效果是當鼠標點擊id為a的層上時圖層增加一個red樣式,
jQuery提供的函數
用于browers事件
error(fn) load(fn) unload(fn) resize(fn) scroll(fn)
用于form事件
change(fn) select(fn) submit(fn)
用于keyboard事件
keydown(fn) keypress(fn) keyup(fn)
用于mouse事件
click(fn) dblclick(fn) mousedown(fn) mousemove(fn)
mouseout(fn) mouseover(fn) mouseup(fn)
四:JavaScript處理
$.browser() 判斷瀏覽器類型,返回boolen值
$(function(){
if($.browser.msie) {
alert("這是一個IE瀏覽器");}
else if($.browser.opera) {
alert("這是一個opera瀏覽器");}
})
當頁面載入式判斷瀏覽器類型,可判斷的類型有msie、mozilla、opera、safari
$.each(obj, fn) obj為對象或數組,fn為在obj上依次執行的函數,注意區分$().each()
$.each( [0,1,2], function(i){ alert( "Item #" + i + ": " + this ); });
分別將0,1,2為參數,傳入到function(i)中
$.each({ name: "John", lang: "JS" }, function(i){ alert( "Name: " + i + ", Value: " + this );
{ name: "John", lang: "JS" }為一個hash對象,依次將hash中每組對象傳入到函數中
$.extend(obj, prop) 用第二個對象擴展第一個對象
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);
執行后settings對象為{ validate: true, limit: 5, name: "bar" }
可以用下面函數來測試
$(function(){
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);
$.each(settings, function(i){ alert( i + "=" + this ); });
})
$.grep(array,fn) 通過函數fn來過濾array,將array中的元素依次傳給fn,fn必須返回一個boolen,如fn返回true,將被過濾
$(function(){
var arr= $.grep( [0,1,2,3,4], function(i){ return i > 2; });
$.each(arr, function(i){ alert(i); });
})
我們可以看待執行$.grep后數組[0,1,2,3,4]變成[0,1]
$.merge(first, second) 兩個參數都是數組,排出第二個數組中與第一個相同的,再將兩個數組合并
$(function(){
var arr = $.merge( [0,1,2], [2,3,4] )
$.each(arr, function(i){ alert(i); });
})
五:動態效果
在將這部分之前我們先看個例子,相信做網頁的朋友都遇到n級菜單的情景,但點擊某菜單按鈕時,如果它的子菜單是顯示的,則隱藏子菜單,如果子菜單隱藏,則顯示出來,傳統的javascript做法是先用getElementById取出子菜單所在容器的id,在判斷該容器的style.display是否等于none,如果等于則設為block,如果不等于這設為none,如果在將效果設置復雜一點,當點擊按鈕時,不是忽然隱藏和顯示子菜單,而是高度平滑的轉變,這時就要通過setTimeout來設置子菜單的height了,再復雜一點透明度也平滑的消失和顯現,這時顯現下來需要編寫很多代碼,如果js基礎不好的朋友可能只能從別人寫好的代碼拿過來修改了!jQuery實現上面效果只需要1句話就行,$("#a").toggle("slow"), ,學完jQuery后還需要抄襲修改別人的代碼嗎?下面我們逐個介紹jQuery用于效果處理的方法。
hide() 隱藏匹配對象
<p id="a">Hello Again</p><a href="#" onClick=’ ("#a").hide()’>jQuery</a>
當點擊連接時,id為a的對象的display變為none。
show()顯示匹配對象
hide(speed) 以一定的速度隱藏匹配對象,其大小(長寬)和透明度都逐漸變化到0,speed有3級("slow", "normal", "fast"),也可以是自定義的速度。
show(speed) 以一定的速度顯示匹配對象,其大小(長寬)和透明度都由0逐漸變化到正常
hide(speed, callback) show(speed, callback)當顯示和隱藏變化結束后執行函數callback
toggle() toggle(speed) 如果當前匹配對象隱藏,則顯示他們,如果當前是顯示的,就隱藏,toggle(speed),其大小(長寬)和透明度都隨之逐漸變化。
<img src="1.jpg" style="width:150px"/>
<a href="#" onClick='$("img").toggle("slow")'>jQuery</a>
fadeIn(speeds) fadeOut(speeds) 根據速度調整透明度來顯示或隱藏匹配對象,注意有別于hide(speed)和show(speed),fadeIn和fadeOut都只調整透明度,不調整大小
<img src="1.jpg" style="display:none"/><a href="#" onClick='$("img ").fadeIn("slow")'> jQuery </a>
點擊連接后可以看到圖片逐漸顯示。
fadeIn(speed, callback) fadeOut(speed, callback) callback為函數,先通過調整透明度來顯示或隱藏匹配對象,當調整結束后執行callback函數
<img src="1.jpg"/>
<a href="#" onClick='$("img ").fadeIn("slow",function(){ alert("Animation Done."); })'> jQuery </a>
點擊連接后可以看到圖片逐漸顯示,顯示完全后彈出對話框
fadeTo(speed, opacity, callback) 將匹配對象以speed速度調整倒透明度opacity,然后執行函數callback。Opacity為最終顯示的透明度(0-1).
<img src="1.jpg"/><br>
<a href="#" onClick='$("img ").fadeTo("slow",0.55,function(){ alert("Animation Done."); })'> jQuery </a>
大家可以看一下自己看看效果,如果不用jQuery,編寫原始javascript腳本可能很多代碼!
slideDown(speeds) 將匹配對象的高度由0以指定速率平滑的變化到正常!
<img src="1.jpg" style="display:none"/>
<a href="#" onClick='$("img ").slideDown("slow")'>jQuery</a>
三:CSS操作
傳統javascript對css的操作相當繁瑣,比如<div id="a" style="background:blue">css</div>取它的background語法是 document.getElementById("a").style.background,而jQuery對css更方便的操作,$("#a").background(),$("#a").background(“red”)
$("#a")得到jQuery對象[ <div id="a" … /div> ]
$("#a").background()將取出該對象的background樣式。
$("#a").background(“red”)將該對象的background樣式設為redjQuery提供了以下方法,來操作css
background () background (val) color() color(val) css(name) css(prop)
css(key, value) float() float(val) height() height(val) width() width(val)
left() left(val) overflow() overflow(val) position() position(val) top() top(val)
這里需要講解一下css(name) css(prop) css(key, value),其他的看名字都知道什么作用了!
<div id="a" style="background:blue; color:red">css</div><P id="b">test</P>
$( function(){
$(document.body).background("black");
})
運行:當文檔載入時背景變成黑色,相當于onLoad。
$(obj)
說明:復制一個jQuery對象,
參數:obj (jQuery): 要復制的jQuery對象
例子:
未執行jQuery前:
<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代碼及功能:
function jq(){
var f = $("div");
alert($(f).find("p").html())
}
運行:當點擊id為test的元素時,彈出對話框文字為two,即div標簽下p元素的內容。
each(fn)
說明:將函數作用于所有匹配的對象上
參數:fn (Function): 需要執行的函數
例子:
未執行jQuery前:
<img src="1.jpg"/>
<img src="1.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代碼及功能:
function jq(){
$("img").each(function(){
this.src = "2.jpg"; });
}
運行:當點擊id為test的元素時,img標簽的src都變成了2.jpg。
eq(pos)
說明:減少匹配對象到一個單獨得dom元素
參數:pos (Number): 期望限制的索引,從0 開始
例子:
未執行jQuery前:
<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代碼及功能:
function jq(){
alert($("p").eq(1).html())
}
運行:當點擊id為test的元素時,alert對話框顯示:So is this,即第二個<p>標簽的內容
get() get(num)
說明:獲取匹配元素,get(num)返回匹配元素中的某一個元素
參數:get (Number): 期望限制的索引,從0 開始
例子:
未執行jQuery前:
<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代碼及功能:
function jq(){
alert($("p").get(1).innerHTML);
}
運行:當點擊id為test的元素時,alert對話框顯示:So is this,即第二個<p>標簽的內容
注意get和eq的區別,eq返回的是jQuery對象,get返回的是所匹配的dom對象,所有取$("p").eq(1)對象的內容用jQuery方法html(),而取$("p").get(1)的內容用innerHTML
index(obj)
說明:返回對象索引
參數:obj (Object): 要查找的對象
例子:
未執行jQuery前:
<div id="test1"></div>
<div id="test2"></div>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代碼及功能:
function jq(){
alert($("div").index(document.getElementById('test1')));
alert($("div").index(document.getElementById('test2')));
}
運行:當點擊id為test的元素時,兩次彈出alert對話框分別顯示0,1
size() Length
說明:當前匹配對象的數量,兩者等價
例子:
未執行jQuery前:
<img src="test1.jpg"/>
<img src="test2.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代碼及功能:
function jq(){
alert($("img").length);
}
jQuery是一款同prototype一樣優秀js開發庫類,特別是對css和XPath的支持,使我們寫js變得更加方便!如果你不是個js高手又想寫出優秀的js效果,jQuery可以幫你達到目的!
下載地址:Starterkit (http://jquery.bassistance.de/jquery-starterkit.zip)
jQuery Downloads (http://jquery.com/src/)
下載完成后先加載到文檔中,然后我們來看個簡單的例子!
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("a").click(function() {
alert("Hello world!");
});
});
<script>
上邊的效果是點擊文檔中所有a標簽時將彈出對話框,$("a") 是一個jQuery選擇器,$本身表示一個jQuery類,所有$()是構造一個jQuery對象,click()是這個對象的方法,同理$(document)也是一個jQuery對象,ready(fn)是$(document)的方法,表示當document全部下載完畢時執行函數。
在進行下面內容之前我還要說明一點$("p")和$("#p")的區別,$("p")表示取所有p標簽(<p></p>)的元素,$("#p")表示取id為"p"(<span id="p"></span>)的元素.
我將從以下幾個內容來講解jQuery的使用:
1:核心部分
2:DOM操作
3:css操作
4:javascript處理
5:動態效果
6:event事件
7:ajax支持
8:插件程序
/Files/ldwblog/DateTimeField_x.rar
}
ext2.02時間控件 精確到時分
{
ext2.0時間控件 精確到時分
}
轉載http://queue19.javaeye.com/blog/409580
造成ORA-12560: TNS: 協議適配器錯誤的問題的原因有三個:
◆1.監聽服務沒有起起來。windows平臺個一如下操作:開始---程序---管理工具---服務,打開服務面板,
啟動oraclehome92TNSlistener服務。
◆2.database instance沒有起起來。windows平臺如下操作:開始---程序---管理工具---服務,打開服務
面板,啟動oracleserviceXXXX,XXXX就是你的database SID.
◆3.注冊表問題。regedit,然后進入HKEY_LOCAL_MACHINE\SOFTWARE\ORACLE\HOME0將該環境變量ORACLE_SID設置為XXXX,XXXX就是你的database SID.或者右幾我的電腦,屬性--高級--環境變量---系統變量--新建,變量名=oracle_sid,變量值=XXXX,XXXX就是你的database SID.或者進入sqlplus前,在command line下
輸set oracle_sid=XXXX,XXXX就是你的database SID.經過以上步驟,就可以解決問題了。
| |||||||||
日 | 一 | 二 | 三 | 四 | 五 | 六 | |||
---|---|---|---|---|---|---|---|---|---|
25 | 26 | 27 | 28 | 29 | 30 | 31 | |||
1 | 2 | 3 | 4 | 5 | 6 | 7 | |||
8 | 9 | 10 | 11 | 12 | 13 | 14 | |||
15 | 16 | 17 | 18 | 19 | 20 | 21 | |||
22 | 23 | 24 | 25 | 26 | 27 | 28 | |||
29 | 30 | 1 | 2 | 3 | 4 | 5 |