jquery的学习
供自己查阅,嫌低级的勿喷!
1.body加载完后执行
$(document).ready(function(){
alert("helloworld");
});
2.将DOM对象转换成jquery对象
var pElement=document.getElementsByTagName("p")[0];
var pElemenjQuery=$(pElement);
将jquery对象转换成DOM对象
var pElementjQuery=$("#p1");
//第一种方式
var pElement=pElementjQuery[0];
//第二种方式
var pElement=pElementjQuery.get(0);
3.基本选择器
选择器 | 描述 | 返回 | 示例 |
#id | 根据指定的id匹配一个元素 | 单个元素 | $("#test")选取id为test的元素 |
.class | 根据指定的类名匹配元素 | 集合元素 | $(".test")选取所有class为test的元素 |
element | 根据指定的元素名匹配元素 | 集合元素 | $("p")选取所有的<p>元素 |
* | 匹配所有元素 | 集合元素 | $("*")选取所有的元素 |
selector1,selector2,.....,selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 集合元素 | $("div,span,p.myclass")选取所有的div和span和拥有class是myclass的p标签所有的元素 |
4.层次选择器
选择器 | 描述 | 返回 | 示例 |
$("ancestor descendant") | 选取ancestor元素里所有descendant(后代)元素 | 集合元素 | $("div span")获取<div>里所有的<span>元素 |
$("parent > child") | 选取parent元素下所有的child(子)元素 | 集合元素 | $("div > span")获取<div>下子元素是<span>的元素 |
$("prev + next") | 选取紧接在prev元素后的next元素 | 集合元素 | $(".one + div")获取class是one的元素下一个<div>元素 |
$("prev ~ siblings") | 选取prev元素后所有的siblings元素 | 集合元素 | $("#one ~ div")获取id是one的元素后面所有的div元素 |
其实$(".one + div")就等于$(".one").next("div"), $("#one ~ div")等于$("#one").nextAll("div")。上面两种都是只能获取后面的元素,而$("#one").siblings("div")则能获取id为one的元素前后的兄弟元素(同辈元素)。
5.过滤选择器
选择器 | 描述 | 返回 | 示例 |
:first | 选取第一个元素 | 单个元素 | $("div:first")选取所有div元素中第一个元素 |
:last | 选取最后一个元素 | 单个元素 | $("div:last")选取所有div元素中最后一个元素 |
:not(selector) | 去除所有与selector匹配的元素 | 集合元素 | $("input:not(.myclass)")选取class不是myclass的input元素 |
:even | 选取索引是偶数的所有元素,索引从0开始 | 集合元素 | $("input:even")选取索引是偶数的input元素 |
:odd | 选取索引是奇数的所有元素,索引从0开始 | 集合元素 | $("input:odd")选取索引是奇数的input元素 |
:eq(index) | 选取索引等于index的元素,索引从0开始 | 单个元素 | $("input:eq(1)")选取索引是1的input元素 |
:gt(index) | 选取索引大于index的元素,索引从0开始 | 集合元素 | |
:lt(index) | 选取索引小于index的元素,索引从0开始 | 集合元素 | |
:contains(text) | 选取含有文本内容为text的元素 | 集合元素 | $("div:contains('我')")选取含有文本内容'我'的div元素 |
:empty | 选取不包含子元素或者文本内容的空元素 | 集合元素 | |
:has(selector) | 选取含有selector匹配元素的元素 | 集合元素 | $("div:has('p')")选取含有<p>元素的div元素 |
:parent | 选取含有子元素或者文本的元素 | 集合元素 | $("div:parent")选取含有子元素或者文本内容的div元素 |
:hidden | 选取所有不可见的元素 | 集合元素 | |
:visible | 选项所有可见的元素 | 集合元素 | |
[attribute] | 选取拥有此属性的元素 | 集合元素 | $("div[id]")选取拥有id属性的div元素 |
[attribute=value] | 选取属性值为value的元素 | 集合元素 | $("div[title=test]")选取属性title等于test的div元素 |
[attribute!=value] | 选取属性值不等于value的元素 | 集合元素 | |
[attribute^=value] | 选取属性值以value开始的元素 | 集合元素 | |
[attribute$=value] | 选取属性值以value结束的元素 | 集合元素 | |
[attribute*=value] | 选取属性值含有value的元素 | 集合元素 | |
[selector1][selector2]...[selectorN] | 用属性选择器合并成一个复合选择器 | 集合元素 | |
:nth-child(index/even/odd/equation) | 选取每个父元素下面第index个子元素或者奇偶元素(索引从1开始) | 集合元素 | 为每一个父元素匹配子元素 |
:first-child | 选取每个父元素下面第一个元素 | 集合元素 | 为每一个父元素匹配子元素,$("ul li:first-child")选取每一个ul中第一个li元素 |
:last-child | 选取每个父元素下面最后一个元素 | 集合元素 | |
:only-child | 如果某个元素是他父元素中唯一一个子元素,那么将被匹配 | 集合元素 | $("ul li:only-child")在ul中选取是唯一一个子元素的li元素 |
:enabled | 选取所有可用元素 | 集合元素 | $("div:enabled")选取div下所有可用的元素 |
:disabled | 选取所有不可用元素 | 集合元素 | |
:checked | 选取所有被选中的元素(单选框、复选框) | 集合元素 | $("input:checked")选取所有被选中的input元素 |
:selected | 选取所有被选中的选项元素(下拉框) | 集合元素 | $("select:selected")获取所有被选中的选项元素 |
6.表单选择器
选择器 | 描述 | 返回 | 示例 |
:input | 选取所有input、textarea、select、button元素 | 集合元素 | $(":input") |
:text | 获取所有单行文本框 | 集合元素 | $(":text") |
:password | 获取所有密码框 | 集合元素 | $(":password") |
:radio | 获取所有单选框 | 集合元素 | $(":radio") |
:checkbox | 获取所有多选框 | 集合元素 | |
:submit | 获取所有提交按钮 | 集合元素 | |
:image | 获取所有图像按钮 | 集合元素 | |
:reset | 获取所有重置按钮 | 集合元素 | |
:button | 获取所有的按钮 | 集合元素 | |
:file | 获取所有的上传域 | 集合元素 | |
:hidden | 获取所有不可见元素 | 集合元素 |
注意$("#myfrom: input")和$("#myform input")的区别:前一个获取myform元素下面所有的input、textarea、select、button元素,而后面的只能获取myform下所有的input元素。
jquery对象常用的方法见下链接: