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 相关文章推荐
jquery创建div 实现代码
Apr 27 Javascript
jquery uaMatch源代码
Feb 14 Javascript
使用js修改客户端注册表的方法
Aug 09 Javascript
网页防止tab键的使用快速解决方法
Nov 07 Javascript
JS控制图片翻转示例代码(兼容firefox,ie,chrome)
Dec 19 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
使用JQuery FancyBox插件实现图片展示特效
Nov 16 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
Vue.js自定义指令的用法与实例解析
Jan 18 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
原生js二级联动效果
Jun 20 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 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
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
jQuery Ajax使用 全解析
2010/12/15 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
2015/02/28 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
JS中将多个逗号替换为一个逗号的实现代码
2017/06/23 Javascript
Dropify.js图片宽高自适应的方法
2017/11/27 Javascript
微信小程序云开发详细教程
2019/05/16 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
2019/09/23 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
如何在selenium中使用js实现定位
2020/08/18 Javascript
[00:33]2018DOTA2亚洲邀请赛TNC出场
2018/04/04 DOTA
Python3字符串学习教程
2015/08/20 Python
python django 增删改查操作 数据库Mysql
2017/07/27 Python
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
pygame实现烟雨蒙蒙下彩虹雨
2019/11/11 Python
python扫描线填充算法详解
2020/02/19 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
基于Django signals 信号作用及用法详解
2020/03/28 Python
python matlab库简单用法讲解
2020/12/31 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
师范应届毕业生自荐信
2013/11/18 职场文书
人力资源主管职责范本
2014/03/05 职场文书
班训口号大全
2014/06/18 职场文书
感恩祖国演讲稿
2014/09/09 职场文书
庆七一宣传标语
2014/10/08 职场文书
2014年采购部工作总结
2014/11/20 职场文书
辩论会主持词
2015/07/03 职场文书
周一问候语大全
2015/11/10 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
Mysql文件存储图文详解
2021/06/01 MySQL