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

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