JQuery学习笔记

简介

定义：

　　JQuery是一个快速、简洁的JavaScript框架，倡导写更少代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

特点：

　　具有独特的链式语法和短小清晰的多功能接口；

　　具有高效灵活的css选择器，并且可对CSS选择器进行扩展；

　　具有便捷的插件扩展机制和丰富的插件；

选择器

1、基本选择器

$("#myELement")    选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素 
$("div")           选择所有的div标签元素，返回div元素数组 
$(".myClass")      选择使用myClass类的css的所有元素 
$("*")             选择文档中的所有的元素，可以运用多种的选择方式进行联合选择：例如$("#myELement,div,.myclass")

2、层叠选择器

$("form input")         选择所有的form元素中的input元素 
$("parent > child")    只查找下一级所有-儿子 
$("prev + next")       查找同级相邻的一个
￥(prev ~ siblings)     查找同级下面所有

3、过滤选择器

$("tr:last")                      选择所有tr元素的最后一个 
$("input:not(:checked) + span")   过滤掉：checked的选择器的所有的input元素 
$("tr:even")                      选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始） 

$("tr:odd")               选择所有的tr元素的第1，3，5... ...个元素 
$("td:eq(2)")             选择所有的td元素中序号为2的那个td元素 
$("td:gt(4)")             选择td元素中序号大于4的所有td元素 
$("td:ll(4)")             选择td元素中序号小于4的所有的td元素 
$(":header") 
$("div:animated") 


##############内容过滤选择器##############
$("div:contains('John')") 选择所有div中含有John文本的元素 
$("td:empty")          选择所有的为空（也不包括文本节点）的td元素的数组 
$("div:has(p)")           选择所有含有p标签的div元素 
$("td:parent")            选择所有的以td为父节点的元素数组 


##############可视化过滤选择器##############
$("div:hidden")           选择所有的被hidden的div元素 
$("div:visible")          选择所有的可视化的div元素 


##############属性过滤选择器 ##############
$("div[id]")                     选择所有含有id属性的div元素 
$("input[name='newsletter']")    选择所有的name属性等于'newsletter'的input元素 
$("input[name!='newsletter']")   选择所有的name属性不等于'newsletter'的input元素 
$("input[name^='news']")         选择所有的name属性以'news'开头的input元素 
$("input[name$='news']")         选择所有的name属性以'news'结尾的input元素 
$("input[name*='man']")          选择所有的name属性包含'news'的input元素 
$("input[id][name$='man']")      可以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且那么属性以man结尾的元素 
 

##############子元素过滤选择器##############
$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)") 
$("div span:first-child")          返回所有的div元素的第一个子节点的数组 
$("div span:last-child")           返回所有的div元素的最后一个节点的数组 
$("div button:only-child")         返回所有的div中只有唯一一个子节点的所有子节点的数组

4、表单元素选择器

$(":input")              选择所有的表单输入元素，包括input, textarea, select 和 button 
$(":text")               选择所有的text input元素 
$(":password")           选择所有的password input元素 
$(":radio")              选择所有的radio input元素 
$(":checkbox")           选择所有的checkbox input元素 
$(":submit")             选择所有的submit input元素 
$(":image")              选择所有的image input元素 
$(":reset")              选择所有的reset input元素 
$(":button")             选择所有的button input元素 
$(":file")               选择所有的file input元素 
$(":hidden")             选择所有类型为hidden的input元素或表单的隐藏域 

5、表单元素过滤选择器：

$(":enabled")               选择所有的可操作的表单元素 
$(":disabled")              选择所有的不可操作的表单元素 
$(":checked")               选择所有的被checked的表单元素 
$("select option:selected") 选择所有的select 的子元素中被selected的元素 

筛选器

$("div").children()      //div中的每个子元素,第一层
$("div").find("span")    //div中的包含的所有span元素,子子孙孙

$("p").next()       　　　//紧邻p元素后的一个同辈元素
$("p").nextAll()         //p元素之后所有的同辈元素
$("#test").nextUntil("#test2")    //id为"#test"元素之后到id为'#test2'之间所有的同辈元素,掐头去尾

$("p").prev()            //紧邻p元素前的一个同辈元素
$("p").prevAll()         //p元素之前所有的同辈元素
$("#test").prevUntil("#test2")    //id为"#test"元素之前到id为'#test2'之间所有的同辈元素,掐头去尾

$("p").parent()          //每个p元素的父元素
$("p").parents()         //每个p元素的所有祖先元素,body,html
$("#test").parentsUntil("#test2")    //id为"#test"元素到id为'#test2'之间所有的父级元素,掐头去尾

$("div").siblings()      //所有的同辈元素,不包括自己

属性

$('p').html();    　　　　　　　　　　 //返回p元素的html内容
$("p").html("Hello <b>nick</b>!");  //设置p元素的html内容
$('p').text();    　　　　　　　　　　 //返回p元素的文本内容
$("p").text("nick");    　　　　　　　//设置p元素的文本内容
$("input").val();    　　　　　　　　 //获取文本框中的值
$("input").val("nick");     　　　　 //设置文本框中的内容

Class操作

addClass       为每个匹配的元素添加指定的类名
removeClass    从所有匹配的元素中删除全部或者指定的类
toggleClass    如果存在就删除、不存在就添加

例如：

<div>
    <span>111</span>
</div>

$('span').addClass('c1')


<div>
    <span class="c1">111</span>
</div>

$('span').removeClass('c1')


$('span').toggleClass('c1')

属性

1.attr（设置或返回自定义属性值）

2.removeAttr（删除自定义属性）

3.prop（专门用于checkbox，radio）

4.removeProp（用来删除由.prop()方法设置的属性集）

jQuery CSS

1.CSS（获取和设置匹配元素的样式属性）

$('span').css('color')     -->获取

$('span').css('color','black')    -->设置

$('span').css({'color':'#dddddd','background':'blue'})    -->设置多个

2.位置

$('p').offset()     //元素在当前视口的相对偏移,Object {top: 122, left: 260}
$('p').offset().top
$('p').offset().left
$("p").position()   //元素相对父元素的偏移,对可见元素有效，Object {top: 117, left: 250}

$(window).scrollTop()    //获取滚轮滑的高度
$(window).scrollLeft()   //获取滚轮滑的宽度
$(window).scrollTop('100')    //设置滚轮滑的高度为100

 事件

$("p").click();    　　//单击事件
$("p").dblclick();    //双击事件
$("input[type=text]").focus()  //元素获得焦点时,触发 focus 事件
$("input[type=text]").blur()   //元素失去焦点时,触发 blur事件
$("button").mousedown()//当按下鼠标时触发事件
$("button").mouseup()  //元素上放松鼠标按钮时触发事件
$("p").mousemove()     //当鼠标指针在指定的元素中移动时触发事件
$("p").mouseover()     //当鼠标指针位于元素上方时触发事件
$("p").mouseout()    　//当鼠标指针从元素上移开时触发事件
$(window).keydown()    //当键盘或按钮被按下时触发事件
$(window).keypress()   //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
$("input").keyup()     //当按钮被松开时触发事件
$(window).scroll()     //当用户滚动时触发事件
$(window).resize()     //当调整浏览器窗口的大小时触发事件
$("input[type='text']").change()    //当元素的值发生改变时触发事件
$("input").select()    //当input 元素中的文本被选择时触发事件
$("form").submit()     //当提交表单时触发事件
$(window).unload()     //用户离开页面时