jquery基础知识与常见案例
一、基础知识
1.js类库
对原生js常见的方法和对象进行了封装,方便开发.
2.jquery和html的整合
script标签的src属性导入即可（jquery是单独的js文件）
3.获取jquery对象
$("选择器") jQuery("选择器")
4.dom对象和jquery对象之间的转换
（1）dom->jquery
$(dom对象)
（2）jquery->dom
方式1:jquery对象[index]
方式2:jquery对象.get(index)
5.jquery中的选择器
（1）基本选择器 ★
$("#id值") $(".class值") $("标签名")
获取多个选择器 用逗号隔开：$("#id值,.class值")
（2）层次选择器 ★
a b:a的所有b后代
a>b:a的所有b孩子
a+b:a的下一个兄弟(大弟弟)
a~b:a的所有弟弟
（3）基本过滤选择器 ★
:frist 第一个
:last 最后一个
:odd 索引奇数
:even 索引偶数
:eq(index) 指定索引
:gt(index) >
:lt(index) <
（4）内容过滤
:has("选择器"):包含指定选择器的元素
（5）可见性过滤
:visible
:hidden 在页面不展示元素 一般指input type="hidden" 和样式中display:none
（6）表单过滤
:input 所有的表单子标签 input select textarea button
input input子标签
（7）属性选择器 ★
[属性名]
[属性名="值"]
（8）表单对象属性过滤选择器
:enabled 可用的
:disabled 不可用
:checked 选中的(针对于单选框和复选框的)
:selected 选中的(针对于下拉选) ★
6.派发事件
（1）js
dom对象.οnclick=function(){....}
（2）jquery
jquery对象.事件(function(){.....});
例如：$("选择器").click(function(){...});
掌握事件:focus，blur，submit，change，click
7.页面载入
（1）js 在一个页面中只能使用一次
window.οnlοad=function(){}
（2）jquery 在一个页面中可以使用多次
方式1:$(function(){...})
方式2:$(document).ready(function(){});
8.jquery中效果（了解）
（1）隐藏或展示
show(毫秒数) hide(毫秒数) toggle(毫秒数)//切换
（2）滑入或滑出
slideDown(毫秒数):向下滑入
slideUp(毫秒数) :向上滑出
（3）淡入或淡出
fadeIn(毫秒数) :淡入
fadeOut(毫秒数):淡出
9.属性和css操作
（1）对属性的操作
attr():设置或者获取元素的属性(1.6版本之前)
方式1:获取：attr("属性名称")
方式2:设置一个属性：attr("属性名称","值");
方式3:设置多个属性 json
attr({
"属性1":"值1",
"属性2":"值2"
})
removeAttr("属性名称"):移除指定属性
prop():和attr用法一致(1.6版本之后)
addClass("class名称"); 相当于 attr("class","指定的样式值");
removeClass("class名称");
（2）对css的操作:操作元素的style属性
css():获取或者设置css样式
方式1:获取：css("属性名")
方式2:设置一个属性：css("属性名","值")
方式3:设置多个属性
css({
"属性1":"值1",
"属性2":"值2"
});
（3）获取元素的尺寸:
width()
height()
10.遍历数组
方式1:数组.each(function(){});
即：jquery对象.each(function(){});
方式2:$.each(数组,function(){});
即：$.each(jquery对象,function(){});
11.val-html-text操作
（1）设置或者获取value属性
jquery对象.val():获取
jquery对象.val("..."):设置
（2）设置或者获取标签体的内容
html()
text()
xxx():获取标签体的内容
xxx("..."):设置标签体的内容
设置的区别:
html:会把字符串解析
text:只作为普通的字符串
获取的区别:
html:获取html源码
text:只是获取页面展示的内容
附：创建一个元素: $("<标签></标签>")
12.文档处理
（1）内部插入 (2组方法 任意掌握一组)
方法一：
a.append(c) :将c插入到a的内部(标签体)后面
a.prepend(c):将c插入到a的内部的前面
方法二：
a.appendTo(c) :将a插入到c的内部(标签体)后面
a.prependTo(c):将a插入到c的内部的前面
（2）外部插入 (2组方法 任意掌握一组)
方法一：
a.after(c):将c放到a的后面
a.before(c):将c放到a的前面
方法二：
a.insertAfter(c):将a放到c的后面
a.insertBefore(c):将a放到c的前面
（3）删除
empty() 清空元素
remove() 删除元素
13.在jquery中创建元素
$("<标签名>").prop(属性).html(内容)
二、常见案例
1.案例一-定时弹出广告
（1）需求:打开页面后4秒,展示广告,2秒之后,该广告隐藏.再停2秒,继续展示
（2）技术分析:定时器，jquery,页面加载，派发事件，选择器
（3）思路:确定事件->编写函数（获取元素，操作元素）
（4）步骤分析:
a.页面加载成功之后$(function(){...}) 开始一个定时器 setTimeout();
b.编写展示广告方法
获取div,然后调用效果方法
设置另一个定时器 隐藏
c.编写隐藏广告的方法
获取div,然后调用效果方法
2.案例二-隔行换色
（1）需求:一个表格,隔一行换一个色
（2）技术分析:jquery,css，属性
（3）思路:确定事件->编写函数（获取元素，操作元素）
（4）步骤分析:
a.页面加载成功
b.获取所有的奇数行 添加一个css
c.获取所有的偶数行 添加一个css
3.案例三:全选或者全不选
（1）需求:将内容中复选框的选中状态和最上面的复选框状态保持一致
（2）技术分析:prop
（3）思路:确定事件->编写函数（获取元素，操作元素）
（4）步骤分析:
a.确定事件 复选框的单击事件
b.函数中
获取该复选框的选中状态 attr(获取不了checked属性)|prop
获取所有的复选框修改他们的状态
4.案例四-左右选中
（1）需求:将左边选中的内容移到右边
（2）技术分析:表单对象属性过滤选择器
（3）思路:确定事件->编写函数（获取元素，操作元素）
（4）步骤分析:
a.确定事件 单击事件
b.编写函数:
移动一个:
右边的下拉选追加一个 左边的选中的第一个
移动多个:
左边选中的 追加到右边的下拉选中
移动全部:
将左边的所有option追加到右边的下拉选中
5.案例五-省市联动
（1）需求:选中省的时候,动态的查询当前省下的所有市,然后展示在市的下拉选中
（2）技术分析:遍历数组
（3）思路:确定事件->编写函数（获取元素，操作元素）
（4）步骤分析:
a.确定事件 省份的下拉选变化的时候 change
b.编写函数
获取当前省份的value值
通过数组获取该省下的所有市 返回值:数组
遍历数组,拼装成option元素 追加到市下拉选即可
注:每次改变的时候初始化市的值.
