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:插件程序
一:核心部分
$(expr)
说明:该函数可以通过css选择器,Xpath或html代码来匹配目标元素,所有的jQuery操作都以此为基础
参数:expr:字符串,一个查询表达式或一段html字符串
例子:
未执行jQuery前:
<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()" >jQuery</a>
jQuery代码及功能:
function jq(){
alert($("div > p").html());
}
运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容
function jq(){
$("<div><p>Hello</p></div>").appendTo("body");
}
运行:当点击id为test的元素时,向body中添加“<div><p>Hello</p></div>”
$(elem)
说明:限制jQuery作用于一个特定的dom元素,这个函数也接受xml文档和windows对象
参数: elem:通过jQuery对象压缩的DOM元素
例子:
未执行jQuery前:
<p>one</p>
<div>
<p>two</p>
</div><p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:
function jq(){
alert($(document).find("div > p").html());
}
运行:当点击id为test的元素时,弹出对话框文字为two,即div标签下p元素的内容
function jq(){
$(document.body).background("black");
}
运行:当点击id为test的元素时,背景色变成黑色
$(elems)
说明:限制jQuery作用于一组特定的DOM元素
参数: elem:一组通过jQuery对象压缩的DOM元素
例子:
未执行jQuery前:
<form id="form1">
<input type="text" name="textfield">
<input type="submit" name="Submit" value="提交">
</form>
<a href="#" id="test" onClick="jq()">jQuery</a>
function jq(){
$(form1.elements ).hide();
}
$( function(){
$(document.body).background("black");
})
<p>one</p>
<div>
<p>two</p>
</div>
<p>three</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
function jq(){
var f = $("div");
alert($(f).find("p").html())
}
<img src="1.jpg"/>
<img src="1.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>
function jq(){
$("img").each(function(){
this.src = "2.jpg"; });
}
<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
function jq(){
alert($("p").eq(1).html())
}
<p>This is just a test.</p>
<p>So is this</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
function jq(){
alert($("p").get(1).innerHTML);
}
<div id="test1"></div>
<div id="test2"></div>
<a href="#" id="test" onClick="jq()">jQuery</a>
function jq(){
alert($("div").index(document.getElementById('test1')));
alert($("div").index(document.getElementById('test2')));
}
<img src="test1.jpg"/>
<img src="test2.jpg"/>
<a href="#" id="test" onClick="jq()">jQuery</a>
function jq(){
alert($("img").length);
}
<a href="1.htm" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:function jq(){
alert($("#test").href());
$("#test").href("2.html");
}
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:function jq(){
$("#test").after("<b>Hello</b>");
}
<a href="#" id="test" onClick="jq()">jQuery</a><b>Hello</b>
<p id="test">after</p><a href="#" onClick="jq()">jQuery</a>
jQuery代码及功能function jq(){
$("a").after($("#test"));
}
<a href="#" onClick="jq()">jQuery</a><p id="test">after</p>
<a href="#" id="test" onClick="jq()">jQuery</a>
jQuery代码及功能:function jq(){
$("#test").append("<b>Hello</b>");
}
<a href="#" onClick="jq()">jQuery<b>Hello</b></a>
同理还有append(elem) append(elems) before(html) before(elem) before(elems)请执行参照append和after的方来测试、理解!<p id="test">after</p><a href="#" onClick="jq()">jQuery</a>
jQuery代码及功能function jq(){
$("a"). appendTo ($("#test"));
}
<p id="test">after<a href="#" onClick="jq()">jQuery</a> </p>
<p id="test">after</p><a href="#" onClick="jq()">jQuery</a>
jQuery代码及功能:function jq(){
$("#test").clone().appendTo($("a"));
}
<p id="test">after</p><a href="#" onClick="jq()">jQuery</a><p id="test">after</p>
<div id="test">
<span>span</span>
<p>after</p>
</div>
<a href="#" onClick="jq()">jQuery</a>
function jq(){
$("#test").empty();
}
<div id="test"></div><a href="#" onClick="jq()">jQuery</a>
<p id="a">p</p>
<div>div</div>
<p id="a">
P
<div>div</div>
</p>
<div>
div
<p id="a">p</p>
</div>
<p id="a">
<div>div</div>
P
</p>
<p>Test Paragraph.</p> <a href="#" onClick="jq()">jQuery</a>
jQuery代码及功能:function jq(){
$("p").wrap("<div class='wrap'></div>");
}
<div class='wrap'><p>Test Paragraph.</p></div>
<p>Test Paragraph.</p><div id="content"></div>
<a href="#" onClick="jq()">jQuery</a>
function jq(){
$("p").wrap( document.getElementById('content') );
}
<div id="content"><p>Test Paragraph.</p></div>
<p>Hello</p><p><span>Hello Again</span></p>
<a href="#" onClick="jq()">jQuery</a>
function jq(){
var f=$("p").add("span");
for(var i=0;i < $(f).size();i++){
alert($(f).eq(i).html());}
}
<p>Hello</p><p><span>Hello Again</span></p>
jQuery代码及功能:function jq(){
var f=$("p").add([document.getElementById("a"), document.getElementById("b")])
for(var i=0;i < $(f).size();i++){
alert($(f).eq(i).html());}
}
<div>
<p>one</p>
<span>
<u>two</u>
</span>
</div>
function jq(){
var f= $("u").ancestors();
for(var i=0;i < $(f).size();i++){
alert($(f).eq(i).html());}
}
<p>one</p>
<div id="ch">
<span>two</span>
</div>
function jq(){
alert($("#ch").children().html());
}
<div id="ch">
<span>two</span>
<span id="sp">three</span>
</div>
function jq(){
alert($("#ch").children(“#sp”).html());
}
<p>This is just a test.</p><p>So is this</p>
jQuery代码及功能:function jq(){
alert($("p").contains("test").html());
}
<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>
jQuery代码及功能:function jq(){
alert($("p").filter(".selected").html())
}
<p>Hello</p><p id="a">Hello Again</p><p class="selected">And Again</p>
Query代码及功能:function jq(){
alert($("p").find("#a").html())
}
<p>Hello</p><p id="a">Hello Again</p><p class="selected">And Again</p>
Query代码及功能:function jq(){
alert($("#a").is("p"));
}
<p>Hello</p><p id="a">Hello Again</p><p class="selected">And Again</p>
jQuery代码及功能function jq(){
alert($("p").next().html());
alert($("p").next(".selected").html());
}
<p>one</p><p id="a">two</p>
<a href="#" onclick="js()">jQuery</a>
function js(){
alert($("p").not(document.getElementById("a")).html());
alert($("p").not(“#a”).html());
}
<p>one</p>
<div>
<p id="a">two</p>
</div>
<a href="#" onclick="js()">jQuery</a>
function js(){
alert($("div").siblings().eq(1).html());
}
<img src="test.jpg"/><a href="#" onclick="js()">jQuery</a>
jQuery代码及功能:function js(){
alert($("img").attr("src"));
}
<img/><a href="#" onclick="js()">jQuery</a>
jQuery代码及功能:function js(){
$("img").attr({ src: "test.jpg", alt: "Test Image" });
}
<img/><a href="#" onclick="js()">jQuery</a>
jQuery代码及功能function js(){
$("img").attr(“src”,”test.jpg”);
}
<img alt="test"/><a href="#" onclick="js()">jQuery</a>
jQuery代码及功能:function js(){
$("img"). removeAttr("alt");
}
<p>Hello</p><p class="selected">Hello Again</p><a href="#" onclick="js()">jQuery</a>
$("p")的结果是返回对象 [<p>Hello</p>,<p class="selected">Hello Again</p> ]<div id="a" style="background:blue; color:red">css</div><P id="b">test</P>
$(function(){
if($.browser.msie) {
alert("这是一个IE浏览器");}
else if($.browser.opera) {
alert("这是一个opera浏览器");}
})
$.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中每组对象传入到函数中var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);
$(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 ); });
})
$(function(){
var arr= $.grep( [0,1,2,3,4], function(i){ return i > 2; });
$.each(arr, function(i){ alert(i); });
})
$(function(){
var arr = $.merge( [0,1,2], [2,3,4] )
$.each(arr, function(i){ alert(i); });
})
<p id="a">Hello Again</p><a href="#" onClick=’ ("#a").hide()’>jQuery</a>
当点击连接时,id为a的对象的display变为none。<img src="1.jpg" style="width:150px"/>
<a href="#" onClick='$("img").toggle("slow")'>jQuery</a>
<img src="1.jpg" style="display:none"/><a href="#" onClick='$("img ").fadeIn("slow")'> jQuery </a>
点击连接后可以看到图片逐渐显示。<img src="1.jpg"/>
<a href="#" onClick='$("img ").fadeIn("slow",function(){ alert("Animation Done."); })'> jQuery </a>
<img src="1.jpg"/><br>
<a href="#" onClick='$("img ").fadeTo("slow",0.55,function(){ alert("Animation Done."); })'> jQuery </a>
<img src="1.jpg" style="display:none"/>
<a href="#" onClick='$("img ").slideDown("slow")'>jQuery</a>
$(function(){
$("#a").hover(function(){$(this).addClass("red");},
function(){ $(this).removeClass("red");
});
})
$(function(){
$("#a"). toggle (function(){$(this).addClass("red");},
function(){ $(this).removeClass("red");
});
})
$("#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)
用于UI事件
blur(fn) focus(fn)
以上事件的扩展再扩展为5类
举例,click(fn) 扩展 click() unclick() oneclick(fn) unclick(fn)
click(fn):增加一个点击时触发某函数的事件
click():可以在其他事件中执行匹配对象的click事件。
unclick ():不执行匹配对象的click事件。
oneclick(fn):只增加可以执行一次的click事件。
unclick (fn):增加一个点击时不触发某函数的事件。
上面列举的用于browers、form、keyboard、mouse、UI的事件都可以按以上方法扩展。
七: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({ 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); }
)
$("#a").load("ajax.htm", function() { alert("load is done"); } );
仰天一笑 徐羽 向ajax.htm页面发出请求,将返回结果装入id为a的内容中,然后再执行函数callback。