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对象常用的方法见下链接:

http://bbs.csdn.net/topics/330087139

原文地址:https://www.cnblogs.com/mjsh/p/3267439.html