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 相关文章推荐
JavaScript 事件参考手册
Dec 24 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
Jul 26 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
JavaScript实现自动跳转文本功能
May 25 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 Javascript
vue elementui form表单验证的实现
Nov 11 Javascript
vue.js仿hover效果的实现方法示例
Jan 28 Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 Javascript
vue实现下拉加载其实没那么复杂
Aug 13 Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 Javascript
JavaScript构造函数原理及实现流程解析
Nov 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
PHP页面间传递参数实例代码
2008/06/05 PHP
php5 pdo新改动加载注意事项
2008/09/11 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
解密ThinkPHP3.1.2版本之模板继承
2014/06/19 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
php获取随机数组列表的方法
2014/11/13 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
javascript一些不错的函数脚本代码
2008/09/10 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
获取中文字符串的实际长度代码
2014/06/05 Javascript
JavaScript中最简洁的编码html字符串的方法
2014/10/11 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
详谈$.data()的用法和作用
2017/02/13 Javascript
jquery实现tab键进行选择后enter键触发click行为
2017/03/29 jQuery
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
jQuery插件实现的日历功能示例【附源码下载】
2018/09/07 jQuery
JS实现json数组排序操作实例分析
2019/10/28 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
pow在python中的含义及用法
2019/07/11 Python
经济实惠的豪华背包和行李袋:Packs Project
2018/10/17 全球购物
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
建筑项目策划书
2014/01/13 职场文书
技术总监管理岗位职责
2014/03/09 职场文书
对祖国的寄语大全
2014/04/11 职场文书
2014年销售部工作总结
2014/12/01 职场文书
奖学金个人总结
2015/03/04 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书