`
GoodWell
  • 浏览: 28782 次
  • 性别: Icon_minigender_1
  • 来自: 河北邢台
社区版块
存档分类

jquery入门（一）

jQueryJavaScriptQQ浏览器IE 
阅读更多

JQuery中基本选择器的使用方法

这是我在学习IT技术中首次接触JQuery，对于JQuery的理解我做了如下总结：

1、JQuery概述：Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。其宗旨是写更少的代码,做更多的事情。

2．JQuery初步学习：

(1) Jquery对象的引入方式：

<script type="text/javascript" src="./js/jquery-1.4.4.js"></script>

(2) 加载页面（有两种方式加载）：

Jquery的页面载入事件处理方式

$(document).ready(function(){

});// 加载html 立即加载

或

$(function(){

});

(3) DOM对象与JQuery对象之间进行相互转化

DOM对象 是不能使用Jquery中的方法的. JQuery中的对象也不能使用DOM对象的方法，但两者之间是可以转换的。其转换方式如下：

1．DOM对象转换成Jquery对象的方式

对于一个DOM对象只需要使用$(DOM对象)即可转换成一个Jquery对象

例：var $document=$(document);

2．Jquery对象转换成DOM对象的方式

第一种：可以采用Jquery中get(index)方法获取

get(index)----à取得其中一个匹配的元素。 index表示取得第几个匹配的元素。它返回的是一个DOM对象

例：var domObject = $(".rdc").get(0);

第二种：Jquery对象返回的是一个数组对象可以采用如下方式转换，

var domObject = $("#thed")[index]; index是数组对象的下标

例：var domObject = $("#hed")[0];

(4) 关于jquery对象的主要方法

get(index)方法, Jquery对象转换成DOM对象

size()方法,获取query对象的长度 例：alert(($("tr")[$("tr").size()-1]).innerHTML);

length属性 例： alert(($("tr")[$("tr").length-1]).innerHTML);

注： 使用size()方法与length属性最后得到的结果是一样的。

3、Jquery中的基本选择器

id选择器 ID匹配的选择器Jquery对象 例：$("#thed")

class选择器 class匹配选择器Jquery对象 例：$(".thed")

元素选择器 根据给定的元素名称获取Jquery对象 例：$("tr")

* 匹配所有的元素的Jquery对象 例：$("*")

并列选择器 匹配所有选择器的Jquery组合对象，用英文的逗号区分

例：$("tr,tr.rdc")

<!--引入js类库文件-->

<script type="text/javascript" src="js/jquery-1.4.4.js"></script>

<script type="text/javascript">

$(document).ready(function(){

//ID匹配的选择器Jquery对象

//alert($("#thed"));

/**转换成DOM对象的方式

1、Jquery对象返回的是一个数组对象可以采用如下方式转换

var domObject = $("#thed")[0];

*/

alert(($("#thed")[0]).innerHTML);

//class匹配选择器Jquery对象

alert($(".rdc"));

/**

2、Jquery对象转换成DOM对象可以采用Jquery中get(index)方法获取

get(index)//取得其中一个匹配的元素。 num表示取得第几个匹配的元素。它返回的是一个DOM对象

*/

var domObject=$(".rdc").get(0);

alert(domObject.innerHTML);

//匹配所有的元素的Jquery对象

alert($("*"));

alert($("*").get(0).innerHTML);

//根据给定的元素名称获取Jquery对象

alert($("tr"));

/**采用第一种方式把$("tr")转换成DOM对象*/

alert(($("tr")[$("tr").size()-1]).innerHTML);

alert(($("tr")[$("tr").length-1]).innerHTML);

//匹配所有选择器的Jquery组合对象

alert($("tr,tr.rdc"));

alert(($("tr,tr.rdc")[$("tr,tr.rdc").length-1]).innerHTML);

})

</script>

案例解析：此javacript中介绍了将jquery对象与dom对象之间的转换；

使用了get(index) size()方法以及length属性

附带body代码：

<body>

<div>

<div>

<h1> 选择器的使用方式</h1>

</div>

<div>

<table border="1px" cellpadding="0" cellspacing="0">

<thead>

<tr id="thed">

<th>

序号

</th>

<th>

名称

</th>

<th>

邮箱

</th>

</tr>

</thead>

<tbody id="tbdy">

<tr class="rdc">

<td>

1001

</td>

<td>

goodwell </td>

<td>

goodwell@qq.com

</td>

</tr>

<td>

1002

</td>

<td>

x_j

</td>

<td>

goodwell@qq.com

</td>

</tr>

</tbody>

</table>

</div>

</Cou

分享到：
| jquery总结
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics