jQuery学习笔记——$()工厂函数找你所找
2010-01-31 14:26
477 查看
接触Web开发有段时间了,现在网络早已步入2.0时代,最早的那种如同报纸一样死板的纯静态页面已不能满足现在人们的需要。人们需要的不是和一个死的,没有动感的页面。他们需要的是能给他们带来动感的页面,或者说的直白点,就是有动态效果的页面。说到给页面添加动态效果,首先必然会想到javascript。但它可恼的兼容性问题让我吃足了苦头,开始转而使用jQuery。
jQuery就起根本仍然是javascript。但它为我这种新手缓解了js的浏览器兼容性问题。并且作为一个js库,它的体积的小巧让我着迷。Write less,Do more是它一直坚持的口号。还有一个优点就是当所选取的对象不存在,它不会报错。下面进入正题,首先是下载一个jquery的包,目前的版本是1.3.2。把它放入我们的项目,并在页面head中添加对其的引用
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
然后再下面我们就可以开始编写jQuery代码了。
和原生js一样,想要操作具体的一些元素,首先需要找到它或者它们。原生js中最常用的getElementById(),而jQuery为我们提供了$()工厂函数取代前者。工厂函数$()中可以用多种选择器来定位我们所需要的元素们,主要包括了css选择器、属性选择器、自定义选择器等(xpath选择器在1.2版本更新时已经被弃用)。
一、css选择器。
$('.content')//获取所有class为content的元素
$('#content')//获取所有id为content的元素
$('table a')//获取table元素中所有超连接元素
上述的写法和我们编写css很相似,可以说是基本一样,通过css这样的定义所要选取的元素,形式灵活,也是xpath选择器被弃用的主要原因。
二、属性选择器。
一般同css选择器结合使用。
$("div[id=content'']")//获取所有div中有id属性的,并且id为content的div元素。
有了上面的范例很容易能写出a标签中href为xxxx的a元素。
三、过滤选择器。
jQuery为了方便一些操作,定义了一些过滤选择器帮助我们更快定位到我们想要的元素。
例如:odd和even奇偶数选择器
$('div:odd')//获取div中索引为奇数的div 注:由于行的索引从0开始,所以第一个奇数行是正式页面中的第2行。
$('div:even')//获取dic中索引为偶数的div
这样我们可以很容易的作出交错行的特效。
与此相近还有first(所有选取的元素中第一个元素)、last(最后一个)、only-child(没有兄弟节点的)、nth-child(n)(第n个子节点)等。
单个的选择器所能达到的效果往往不尽如人意,组合使用才是王道。
还有一点需要注意的是$()寻找出来的不完全和getElementById()一样。因为$()寻找出来的是一个jQuery对象,类似一个数组,即使里面元素只有一个,也不能直接给它使用DOM的方法和属性,需要用get(index)或者[index]的方法转换成DOM对象才行。
方法一、var div = $('div').get(0);//所有div中第一个div的DOM对象
方法二、var divs = $('div');
var div = divs[0];
以上是我学习jQuery的一些学习笔记,如有问题还望各位大家不吝指教。
jQuery就起根本仍然是javascript。但它为我这种新手缓解了js的浏览器兼容性问题。并且作为一个js库,它的体积的小巧让我着迷。Write less,Do more是它一直坚持的口号。还有一个优点就是当所选取的对象不存在,它不会报错。下面进入正题,首先是下载一个jquery的包,目前的版本是1.3.2。把它放入我们的项目,并在页面head中添加对其的引用
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
然后再下面我们就可以开始编写jQuery代码了。
和原生js一样,想要操作具体的一些元素,首先需要找到它或者它们。原生js中最常用的getElementById(),而jQuery为我们提供了$()工厂函数取代前者。工厂函数$()中可以用多种选择器来定位我们所需要的元素们,主要包括了css选择器、属性选择器、自定义选择器等(xpath选择器在1.2版本更新时已经被弃用)。
一、css选择器。
$('.content')//获取所有class为content的元素
$('#content')//获取所有id为content的元素
$('table a')//获取table元素中所有超连接元素
上述的写法和我们编写css很相似,可以说是基本一样,通过css这样的定义所要选取的元素,形式灵活,也是xpath选择器被弃用的主要原因。
二、属性选择器。
一般同css选择器结合使用。
$("div[id=content'']")//获取所有div中有id属性的,并且id为content的div元素。
有了上面的范例很容易能写出a标签中href为xxxx的a元素。
三、过滤选择器。
jQuery为了方便一些操作,定义了一些过滤选择器帮助我们更快定位到我们想要的元素。
例如:odd和even奇偶数选择器
$('div:odd')//获取div中索引为奇数的div 注:由于行的索引从0开始,所以第一个奇数行是正式页面中的第2行。
$('div:even')//获取dic中索引为偶数的div
这样我们可以很容易的作出交错行的特效。
与此相近还有first(所有选取的元素中第一个元素)、last(最后一个)、only-child(没有兄弟节点的)、nth-child(n)(第n个子节点)等。
单个的选择器所能达到的效果往往不尽如人意,组合使用才是王道。
还有一点需要注意的是$()寻找出来的不完全和getElementById()一样。因为$()寻找出来的是一个jQuery对象,类似一个数组,即使里面元素只有一个,也不能直接给它使用DOM的方法和属性,需要用get(index)或者[index]的方法转换成DOM对象才行。
方法一、var div = $('div').get(0);//所有div中第一个div的DOM对象
方法二、var divs = $('div');
var div = divs[0];
以上是我学习jQuery的一些学习笔记,如有问题还望各位大家不吝指教。
相关文章推荐
- jQuery学习笔记八:遍历函数集合
- jQuery源代码学习笔记_工具函数_noop/error/now/trim
- jQuery 学习笔记(函数调用机制)
- 前端学习笔记-jquery-13-其他选择/过滤函数方法
- jQuery学习笔记——$.grep()工具函数
- 学习笔记:基于jquery的tab切换函数
- 学习笔记:jquery1.9版本后废弃的函数和方法
- jQuery学习笔记之十四------工具函数
- JQuery学习笔记(一) 核心函数
- jQuery基础学习笔记第一讲之函数触发
- jquery源码学习笔记二:jQuery工厂
- jQuery学习笔记之jQuery构建函数的7种方法
- jquery源码学习笔记三:jQuery工厂剖析
- jquery源码学习笔记:自执行匿名函数剖析
- jQuery学习笔记(3)-操作jQuery包装集的函数
- jquery源码学习笔记三:jQuery工厂剖析
- jQuery学习笔记之jQuery构建函数的7种方法
- 20151212jquery学习笔记--工具函数
- 机器人概率定位学习笔记第三篇_使用python建立机器人运动函数(move fuction)
- JavaScript 学习笔记 五 函数