jQuery, make work easy !
jQuery从入门到精通
要使用jQuery框架,首先需要在页面加载jquery.js文件,其次在编写jquery代码时先编写$(document).ready(function(){ jquery code});类似于window.load()。他们之间的却别在于load事件必须在页面完全加载后执行,ready不需要等页面加载完成就可以执行。其还有一种简单的写法:$(function( jquery code){});
访问局部的页面内容
DOM获取页面中某个节点或者某一类节点的固有方法:
getElementById(elementID) / getElementsByName(elementName)等。
jQuery使用如下方式获取局部页面内容:
1、#id(根据给定的ID匹配一个元素)
返回值:Element
例:查找ID为myDiv的层内容
HTML代码:
<div id="myDiv"> <p>点击将获得本层的内容</p> </div> |
jQuery代码:
$("#myDiv").click(function(){ alert($("#myDiv").text()); }); |
2、element(根据给定的元素类型名匹配所有该类型的元素)
返回值:Array<Element>
例:点击获得所有段落的内容
HTML代码
<p>这是第一个段落</p> <p>这是第二个段落</p> <p>这是第三个段落</p> |
jQuery代码
$("p").click(function(){ alert($("p").text()); }); |
如果取出所返回的一组元素中的第一个则可以用:
$("p:first").text()
如果取出最后一个元素则用:
$("p:last").text()
如果取出指定某个元素则用
$("p:eq(number)").text()
注意number从0开始
如果取出某个元素之后的所有元素则用:
$("p:gt(number)").text()
如果取出某个元素之前的所有元素则用:
$("p:lt(number)").text()
3、.class(根据给定的样式匹配元素)
返回值:Array<Element>
参数:class(String):一个用以搜索的样式,一个元素可以有多个样式,但是只要有一个符合就能被匹配到。
例:查找所有样式为myClass的元素
HTML代码
<div class="myClass">层样式名称为myclass</div> <div class="notMe">层样式名称为notMe</div> <span class="myClass">span的样式名称为myClass</span> |
jQuery代码
$(".myClass").click(function(){ alert($(".myClass").text()); }); |
注:同样可以使用2中提供的方法查找指定的某个元素
4、*(匹配所有元素,多用于结合上下文来搜索)
返回值:Array<Element>
例:找到每一个元素
HTML代码
<div>div</div> <span>span</span> |
jQuery代码
$("*").click(function(){ alert($("*").text()); }); |
当点击任意一个元素的时候,即弹出内容为页面上所有信息的对话框。