JQuery 学习笔记 选择器之一


Posted in Javascript onJuly 23, 2009

本章主要先对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);
Javascript 相关文章推荐
解决3.01版的jquery.form.js中文乱码问题的解决方法
Mar 08 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 Javascript
escape编码与unescape解码汉字出现乱码的解决方法
Jul 02 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
如何使用jquery修改css中带有!important的样式属性
Apr 28 Javascript
JS调用打印机功能简单示例
Nov 28 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
Dec 26 Javascript
微信小程序上传图片实例
May 28 Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 jQuery
原生js实现无缝轮播图效果
Jan 28 Javascript
javascript IFrame 强制刷新代码
Jul 23 #Javascript
jQuery TextBox自动完成条
Jul 22 #Javascript
JavaScript 动态生成方法的例子
Jul 22 #Javascript
模仿jQuery each函数的链式调用
Jul 22 #Javascript
js 代码集(学习js的朋友可以看下)
Jul 22 #Javascript
javascript Base类 包含基本的方法
Jul 22 #Javascript
javascript 表单规则集合对象
Jul 21 #Javascript
You might like
PHP入门速成(2)
2006/10/09 PHP
提升PHP执行速度全攻略(下)
2006/10/09 PHP
不错的一篇面向对象的PHP开发模式(简写版)
2007/03/15 PHP
php 过滤器实现代码
2010/08/09 PHP
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
8个必备的PHP功能开发
2015/10/02 PHP
js 内存释放问题
2010/04/25 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
实用的Jquery选项卡TAB示例代码
2013/08/28 Javascript
javascript计时器事件使用详解
2014/01/07 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
js 动态添加元素(div、li、img等)及设置属性的方法
2016/07/19 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
vue2.0模拟锚点的实例
2018/03/14 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
vue实现记事本功能
2019/06/26 Javascript
[11:01]2014DOTA2西雅图邀请赛 冷冷带你探秘威斯汀
2014/07/08 DOTA
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
python实现多层感知器MLP(基于双月数据集)
2019/01/18 Python
pytorch点乘与叉乘示例讲解
2019/12/27 Python
使用Keras实现简单线性回归模型操作
2020/06/12 Python
浅谈pytorch中torch.max和F.softmax函数的维度解释
2020/06/28 Python
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
世界上最大的高分辨率在线图片库:Alamy
2018/07/07 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
Harman Audio官方商店:购买JBL、Harman Kardon、Infinity和AKG
2019/12/05 全球购物
C语言中break与continue的区别
2012/07/12 面试题
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
医生个人年终总结
2015/02/28 职场文书
小兵张嘎电影观后感
2015/06/03 职场文书