JQuery 学习笔记 选择器之一
更新时间：2009年07月23日 17:26:47 作者：
对于JQuery是啥东东的描述我在此也就不多说了,哈,如果有兴趣的话我相信不会懒的去查吧,哈^^
本章主要先对Jquery的选择器进行说明下,本人也不敢说讲解,哈,因为我也是正在学习中,本系列文章所写目的只在与对自己学习过程中的心得等记录下来,一方面加强自己的印象,另一方面共享下学习的经验,呵,小弟刚开始写这种文章，希望大家多多支持^^，有哪些方法不好可以跟贴指导指导^^
现在,让我们一起开始在JQuery的世界里飞翔吧^^
首先,本章先来学习JQuery最基本的选择器的使用咯
先声明下,使用JQuery最基本的规则
$(document).ready(function(){
//do something
})
而在本系列文章中,采用缩写
$(
function(){
//do something
}
)
关于例子中使用的外部JS文件jquery-1.3.2.js则是使用JQuery的最基本的库文件，没有的同学可以去 这里下载也可到我CSDN的资源里去下
好咯,以下是我做测试用的HTML文件内容,大家可参考下
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css"><!--
.test{
background:red;}
--></style><style type="text/css" bogus="1"> .test{
background:red;}</style>
<script src="js/jquery-1.3.2.js"></script>
<script type="text/javascript"><!--
$(
function(){
var result = $("#sResult");
$("#aFirst").click(function(){
result.html($("#oneP").html());
})
$("#aSecond").click(
function(){
result.html("");
$("form").each(function(){
result.html(result.html() + $(this).html());
})
}
)
$("#aThird").click(
function(){
result.html("");
$(".test").each(
function(){
result.html(result.html() + $(this).html());
}
)
}
)
$("#aFourthly").click(function(){
result.html($("*").html());
})
}
)
// --></script>
<title>无标题文档</title>
</head>
<body>
<form>
<p id="oneP">one</p> <div><p>two</p></div>
</form>
<form>
<p class="test">three</p>
</form>
<a href="#" id="aFirst">获取ID为"oneP"的HTML内容</a>|
<a href="#" id="aSecond">获取所有Form元素的HTML的内容</a>|
<a href="#" id="aThird">获取CSS样式为test的HTML的内容</a>|
<a href="#" id="aFourthly">获取页面所有HTML内容</a><br />
Result:
<div style=" border-bottom-color:#000; border:1px solid " >
<span id="sResult"></span>
</div>
</body>
</html>
本章讲的内容分别就是四个连接元素aFirst、aSecond、aThird、aFourthly所完成的功能
先对代码中一起不属性选择器的内容进行解释下吧
1.element.html(string content)
这个方法也是属于比较常用的功能吧
当此方法无传参数时，则用于读取当前element的纯HTML内容，如果传参进去使用时，则为修改element的HTML内容，这应该还算好理解吧^^
2.each()
此方法主要就是用于遍历element数组，比如例子中的aSecond连接，当点击aSecond时,将会遍历页面中的两个Form表单,并用.html()方法来显示每个表单的内容
课外就简单讲到这,现在该讲正题咯
1.$("#ID")
描述:此方法用于根据Element的ID来获取该元素,学过JS的人应该很容易了解此意思,就相当于JS里的document.getElementById("ID");
在例子中,就用此方法来获取ID为oneP的元素,并显示其HTML内容.
返回值:Element
2.$("TagName")
描述:此方法用于获取某种元素的的集合,相当于JS里的document.getElementsTagName("TagName").如例子中获取所有的Form表单元素集合.
返回值:Array(Element);
3.$(".className")
描述:此方法用于获取使用某个样式的元素集合,如例子中获取样式为test的元素集合.
返回值:Array(Element);
4.$("*")
描述:用于获取页面上所有的HTML,目前还不知道这个有哪些实用的地方,哈,先存着
返回值:Array(Element);
5.$("#ID,TagName,.className,...N")
描述:此方法其实就是把前四种选择器合起来一起用,以","进行分隔,返回一个元素集合,上面没例子,我就在这稍做个解释,比如要获取ID为oneP、DIV元素、样式为test的元素，即可使用$("#oneP,div,.test")。
返回值：Array(Element)；
相关文章
下面小编就为大家带来一篇Jquery鼠标放上去显示全名的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
jQuery已经被广泛使用，凭借其简洁的API，对DOM强大的操控性，易扩展性越来越受到web开发人员的喜爱，我在社区也发布了很多的jQuery插件2009-07-07
有时候我们需要读取JSON格式的数据文件，在jQuery中可以使用Ajax或者 $.getJSON()方法实现，下面有个不错的示例，需要的朋友可以参考下2013-11-11
这篇文章主要介绍了jQuery基于Ajax方式提交表单功能,结合实例形式分析了jQuery使用ajax方式提交表单的具体步骤与常见操作技巧,需要的朋友可以参考下2017-02-02
这篇文章主要为大家详细介绍了jQuery实现表单验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了jQuery实现倒计时重新发送短信验证码功能,结合实例形式分析了基于jQuery的倒计时操作功能实现方法,涉及jQuery表单提交、验证、正则操作等技巧,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了CSS+jQuery实现简单的折叠菜单的代码，非常不错，具有参考借鉴价值，需要的朋友参考下吧2016-12-12
下面小编就为大家带来一篇Iscrool下拉刷新功能实现方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
点击某个按钮，删除某条记录后，提示删除成功，然后刷新dialog。2013-03-03
这篇文章主要介绍了jQuery实现指定区域外单击关闭指定层的方法,可实现在弹出层外任意位置点击关闭弹出层的功能,涉及jQuery事件操作方法,包含了详尽的代码功能说明,非常简单实用,需要的朋友可以参考下2016-06-06
最新评论