jQuery学习笔记（一）

jQuery学习笔记

Query是一个javascript的框架，是对javascript的一种封装。
通过JQuery可以非常方便的操作html的元素 。
之前在项目中用到了一些jQuery的前端知识，几乎是用到了哪个知识点就去单独看一下这个知识点，这次对所以的知识进行整体学习。

方法 VAL () HTML() TEXT() 以及HTML和TEXT的区别

val():通过JQuery对象的val()方法获取值，相当于 document.getElementById("input1").value;
html(): 获取元素内容,如果有子元素，保留标签;
text():获取元素内容,如果有子元素，不包含标签。

对CSS样式的操作

addClass	增加class	
removeClass	删除class	
toggleClass	切换class	
css	css函数

前三个方法就是在监听后选择是否使用设置好的css样式，而css函数则是在监听后在其中设置css样式：通过css函数 直接设置样式：css(property,value)如果需要设置多个样式：css({p1:v1,p2:v2})

注：参数是 {} 包含的属性值对。
属性值对之间用 逗号，分割
属性值之间用 冒号 ：分割
属性和值都需要用引号 “

选择器

$("tagName")	元素	
$("id")	id	
$("className")	类	
$("selector1 selector2")	层级
:first
:last	最先最后	
:odd
:even	奇偶	
:hidden
:visible	可见性
[attribute] 			属性	
[attribute=value]
[attribute!=value]
[attribute^=value] （以value开头的属性）
[attribute$=value] （以value结尾的属性）
[attribute*=value] （包含value的属性）
表单对象选择器 指的是选中form下会出现的输入元素：
:input 会选择所有的输入元素，不仅仅是input标签开始的那些，还包括textarea,select和button
:button 会选择type=button的input元素和button元素
:radio 会选择单选框
:checkbox会选择复选框
:text会选择文本框，但是不会选择文本域
:submit会选择提交按钮
:image会选择图片型提交按钮
:reset会选择重置按钮

:enabled:enabled会选择可用的输入元素 注：输入元素的默认状态都是可用
:disabled:disabled会选择不可用的输入元素 
:checked:checked会选择被选中的单选框和复选框 注： checked在部分浏览器上(火狐,chrome)也可以选中selected的option 
:selected:selected会选择被选中的option元素
this	在监听函数中使用 $(this)，即表示触发该事件的组件

筛选器

筛选器指的是在已经通过选择器选中了元素后，在此基础上进一步选择。

first() 第1个元素
last() 最后一个元素
eq(num) 第num个元素
注: num基0
parent() 选取最近的一个父元素 
parents() 选取所有的祖先元素
children(): 筛选出儿子元素 (紧挨着的子元素) 
find(selector): 筛选出后代元素 
siblings(): 同级(同胞)元素

对属性操作 以及PROP和ATTR的区别

通过attr()获取一个元素的属性
通过attr(attr,value)修改属性
通过removeAttr(attr)删除属性
与prop一样attr也可以用来获取与设置元素的属性。
区别在于，对于自定义属性和选中属性的处理。
选中属性指的是 checked,selected 这2种属性
1. 对于自定义属性 attr能够获取，prop不能获取
2. 对于选中属性
attr 只能获取初始值， 无论是否变化
prop 能够访问变化后的值，并且以true|false的布尔型返回。
所以在访问表单对象属性的时候，应该采用prop而非attr

常见效果

显示 隐藏 切换 分别通过show(), hide(),toggle()实现
也可以加上毫秒数，表示延时操作,比如show(2000)
向上滑动 向下滑动 滑动切换 分别通过slideUp(), slideDown(),slideToggle()实现 
也可以加上毫秒数，表示延时操作，比如slideUp(2000)
淡入 淡出 淡入淡出切换 指定淡入程度 分别通过fadeIn(), fadeOut(),fadeToggle() fadeTo()实现
也可以加上毫秒数，表示延时操作，比如fadeIn(2000)
fadeTo跟的参数是0-1之间的小数。 0表示不淡入，1表示全部淡入
通过animate 可以实现更为丰富的动画效果 
animate()第一个参数为css样式 
animate()第二个参数为延时毫秒 
注： 默认情况下，html中的元素都是固定，并且无法改变的位置的。 为了使用animate()自定义动画效果，需要通过css把元素的position设置为relative、absolute或者fixed。