一、jQuery
jQuery 是一个 JavaScript 的第三方库。本质上还是JavaScript代码,它只是对JavaScript语言进行包装处理,提供更好更方便快捷的DOM处理与开发中经常使用的功能,jQuery的理念“Write Less, Do More“,让你写更少的代码,完成更多的工作!引用jQuery脚本文件,方法一是引用jQuery在线脚本,方法二是引用本地jQuery脚本。
jQuery是一个类数组对象,而DOM对象就是一个单独的DOM元素。jQuery对象和DOM对象可以互相转换。DOM对象转换成jquery对象 var jqueryObj=$(DOM obj);
jQuery对象转换为DOM对象,因为jquery对象返回的是一个数组对象所以可以采用如下方式转换:var domObject = jqueryObj[0].
二、jQuery选择器
jQuery基本选择器有:id选择器、类选择器、标签选择器、属性选择器、组合选择器
1. id选择器
如果某个标签有id属性,那么利用jQuery查找
1 // 查找<div id="ID">: 2 var div = $(‘#ID’);
jQuery对象类似数组,它的每个元素都是一个引用了DOM节点的对象。如果id为ID的对象不存在,jQuery返回[],不会返回undefined或者null。
2. 类选择器
1 // <div class="red">...</div> 2 var a = $(‘.red‘); // 所有节点包含`class="red"`都将返回
通常很多节点有多个class,我们可以查找同时包含red和green的节点:
1 // <div class="red green">...</div> 2 var a = $(‘.red.green‘); // 注意没有空格!
3. 标签选择器
1 //<p>abcd</p> 2 var ps = $(‘p‘); // 返回所有<p>节点
4. 属性选择器
1 var ussername = $(‘[name=username]‘); 2 3 var password = $(‘[type=password]‘);
5. 组合选择器
组合查找就是把上述简单选择器组合起来使用。如果我们查找$(‘[name=email]‘),很可能把表单外的<div name="email">也找出来,但我们只希望查找<input>,就可以这么写:
1 // 不会找出<div name="email"> 2 var emailInput = $(‘input[name=email]‘);
也可以根据标签和类名组合查找:
var v = $(‘span .red‘);
6. 层级选择器
如果两个DOM元素具有层级关系,就可以用$(‘ancestor descendant‘)来选择,层级之间用空格隔开。例如:
$(‘#i1 a‘)
子选择器$(‘parent>child‘)类似层级选择器,但是限定了层级关系必须是父子关系,就是<child>节点必须是<parent>节点的直属子节点。
$(‘#i2>span‘)
7. 过滤选择器
| 选择器 | 说明 | 返回 | 
|---|---|---|
:first | 
匹配找到的第1个元素 | 单个元素 | 
:last | 
匹配找到的最后一个元素 | 单个元素 | 
:eq | 
匹配一个给定索引值的元素 | 单个元素 | 
:even | 
匹配所有索引值为偶数的元素 | 集合元素 | 
: odd | 
匹配所有索引值为奇数的元素 | 集合元素 | 
:gt(index) | 
匹配所有大于给定索引值的元素 | 集合元素 | 
:lt(index) | 
匹配所有小于给定索引值的元素 | 集合元素 | 
:not | 
去除所有与给定选择器匹配的元素 | 集合元素 | 
:animated | 
选取当前正在执行动画的所有元素 | 集合元素 | 
focus | 
选取当前正在获取焦点的元素 | 集合元素 | 
8. 表单选择器
| 选择器 | 说明 | 
|---|---|
:input | 
选取所有input textarea select button元素 | 
:text | 
选取所有单行文本框 | 
:password | 
选取所有密码框 | 
:radio | 
选取所有单选框 | 
:checkbox | 
选取所有多选框 | 
:submit | 
选取所有的提交按钮 | 
:image | 
选取所有的图像按钮 | 
:reset | 
选取所有的重置按钮 | 
:button | 
选取所有的按钮 | 
:file | 
选取所有的上传域 | 
:hidden | 
选取所有的不可见元素 | 
text()和html()方法分别获取节点的文本和原始HTML文本,无参数调用text()是获取文本,传入参数就变成设置文本,HTML也是类似操作。1 var port = $(tds[0]).text(); 2 var h = $(‘:input‘).html()
1  $(tag).text(‘+1‘);
2. 修改css
修改css使用jQuery的css()方法
1 $(tag).css(‘color‘,‘green‘); 2 $(tag).css(‘position‘,‘absolute‘); 3 $(tag).css(‘fontSize‘,fontSize + "px"); 4 $(tag).css(‘right‘,right + "px");
原文:http://www.cnblogs.com/iclq/p/6107229.html