jQuery_01

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());

});

当点击任意一个元素的时候，即弹出内容为页面上所有信息的对话框。