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 tools之tabs 选项卡/页签
Jul 25 Javascript
JS操作Cookies的小例子
Oct 15 Javascript
jQuery is()函数用法3例
May 06 Javascript
JavaScript中Function()函数的使用教程
Jun 04 Javascript
基于JS代码实现实时显示系统时间
Jun 16 Javascript
JavaScript ES5标准中新增的Array方法
Jun 28 Javascript
JS构造函数与原型prototype的区别介绍
Jul 04 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
AngularJS实现的2048小游戏功能【附源码下载】
Jan 03 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 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
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
php+websocket 实现的聊天室功能详解
2020/05/27 PHP
什么是JavaScript
2009/08/13 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
js写一个字符串转成驼峰的实例
2013/06/21 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
基于jquery实现表格无刷新分页
2016/01/07 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
基于滚动条位置判断的简单实例
2017/12/14 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
2019/01/29 Javascript
d3.js实现图形拖拽
2019/12/19 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
python GUI模拟实现计算器
2020/06/22 Python
吃透移动端 Html5 响应式布局
2019/12/16 HTML / CSS
为奢侈时尚带来了慈善元素:Olivela
2018/09/29 全球购物
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
信息专业个人的自我评价
2013/12/27 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技
python blinker 信号库
2022/05/04 Python
win10蓝屏0xc0000001安全模式进不了怎么办?win10出现0xc0000001的解决方法
2022/08/05 数码科技