JQuery是一个javascript的框架，是对javascript的一种封装。
通过JQuery可以非常方便的操作html的元素
要使用Jquery需要导入一个第三方的javascript库 jquery.min.js
<script src="jquery.min.js"></script>常见方法 VAL () HTML() TEXT() 以及HTML和TEXT的区别
| 关键字 | 简介 |
|---|---|
| val | 取值，相当于 document.getElementById("input1").value; |
| html | 获取元素内容,如果有子元素，保留标签 |
| text | 获取元素内容,如果有子元素，不包含子元素标签 |
对CSS样式的操作
| 关键字 | 简介 |
|---|---|
| addClass | 增加class |
| removeClass | 删除class |
| toggleClass | 切换class |
| css | css函数 |
如：
<script src="jquery.min.js"></script>
<script>
$(function(){
$("#b1").click(function(){
$("#d").addClass("pink");
});
});
</script>
<button id="b1">增加背景色</button>
<br>
<br>
<style>
.pink{
background-color:pink;
}
</style>
<div id="d">
Hello JQuery
</div>删除和切换和上面这个添加的写法差不多，要注意的是，添加的类样式需要在style里面写好，才能添加成功。
通过css函数 直接设置样式，如果只设置单一的样式，就：
css(property,value)， 第一个参数的样式属性，第二参数是值。
如果需要设置多个样式：
css({p1:v1,p2:v2})
参数是 {} 包含的属性值对。
属性值对之间用 逗号，分割
属性值之间用 冒号 ：分割
属性和值都需要用引号 “
选择器
query有多达数十种选择器，和css的选择器挺类似的。
| 关键字 | 简介 |
|---|---|
| $("tagName") | 元素 |
| $("id") | id |
| $("className") | 类 |
| $("selector1 selector2") | 层级 |
| :first :last |
最先最后 |
| :odd :even |
奇偶 |
| :hidden :visible |
可见性 |
| [attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] |
属性 |
| :input :button :radio :checkbox :text :file :submit :image :reset |
表单对象 |
| :enabled :disabled :checked :selected |
表单对象属性 |
| this | 当前元素 |
最先最后
$(selector:first) 满足选择器条件的第一个元素
$(selector:last) 满足选择器条件的最后一个元素
奇偶
$(selector:odd) 满足选择器条件的奇数元素
$(selector:even) 满足选择器条件的偶数元素 比如之前的斑马线练习就用这个就好了。
可见性
$(selector:hidden) 满足选择器条件的不可见的元素
$(selector:visible) 满足选择器条件的可见的元素
注； div:visible 和div :visible(有空格)是不同的意思
div:visible 表示选中可见的div
div :visible(有空格) 表示选中div下可见的元素，有空格就是层级选择
属性
通过属性来选择，还有筛选功能
$(selector[attribute]) 满足选择器条件的有某属性的元素
$(selector[attribute=value]) 满足选择器条件的属性等于value的元素
$(selector[attribute!=value]) 满足选择器条件的属性不等于value的元素
$(selector[attribute^=value]) 满足选择器条件的属性以value开头的元素
$(selector[attribute$=value]) 满足选择器条件的属性以value结尾的元素
$(selector[attribute*=value]) 满足选择器条件的属性包含value的元素
表单对象
表单对象选择器 指的是选中form下会出现的输入元素
:input 会选择所有的输入元素，不仅仅是input标签开始的那些，还包括textarea,select和button
:button 会选择type=button的input元素和button元素
:radio 会选择单选框
:checkbox会选择复选框
:text会选择文本框，但是不会选择文本域
:submit会选择提交按钮
:image会选择图片型提交按钮
:reset会选择重置按钮
表单对象属性
:enabled会选择可用的输入元素 注：输入元素的默认状态都是可用
:disabled会选择不可用的输入元素
:checked会选择被选中的单选框和复选框 注： checked在部分浏览器上(火狐,chrome)也可以选中selected的option
:selected会选择被选中的option元素
当前元素
在监听函数中使用 $(this)，即表示触发该事件的组件。
筛选器
| 关键字 | 简介 |
|---|---|
| first() last() eq(num) |
第一个 最后一个 第几个 |
| parent() parents() |
父 祖先 |
| children() find() |
儿子 后代 |
| siblings() | 同级 |
如图，这样用的，选择器选好之后，再调用筛选器的函数，进一步的选择。
$("#b1").click(function(){
$("div").first().toggleClass("pink");
});对属性操作 以及PROP和ATTR的区别
| 关键字 | 简介 |
|---|---|
| attr | 获取 |
| attr(属性,值) | 修改 |
| removeAttr | 删除 |
| prop与attr | prop与attr的区别 |
通过attr(属性) 获取一个元素的属性
通过attr(属性,要修改的值) 修改属性
通过removeAttr(属性)删除属性
prop与attr的区别
与prop一样attr也可以用来获取与设置元素的属性。
区别在于，对于自定义属性和选中属性的处理。
选中属性指的是 checked,selected 这2种属性
1. 对于自定义属性 attr能够获取，prop不能获取
2. 对于选中属性
attr 只能获取初始值， 无论是否变化
prop 能够访问变化后的值，并且以true|false的布尔型返回。
所以在访问表单对象属性的时候，应该采用prop而非attr
常见效果演示
| 关键字 | 简介 |
|---|---|
| show hide toggle |
显示 隐藏 切换 |
| slideUp slideDown slideToggle |
向上滑动 向下滑动 滑动切换 |
| fadeIn fadeOut fadeToggle fadeTo |
淡入 淡出 淡入淡出切换 指定淡入程度 |
| animate | 自定义动画效果 |
| callback | 回调函数 |
显示 隐藏 切换 分别通过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。
效果一般需要一定的时间，并且这个时间可长可短，所以就无法精确的确定该效果何时结束。
好在，效果方法都提供对回调函数callback()的支持。
只需要在调用效果方法的最后一个参数传入一个function，当效果结束的时候，就会自动调用该function了。
学习网站
