jQuery是什么？
［1］ jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多 javascript高手加入其team。
［2］ jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE!
［3］ 它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
［4］ jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
［5］ jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择
什么是jQuery对象？
jQuery 对象就是通过jQuery包装DOM对象后产生的对象。jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQuery 里的方法: $(“#test”).html();、
例：
$("#test").html()
意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法
这段代码等同于用DOM实现代码： document.getElementById(" test ").innerHTML;
虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错
约定：如果获取的是 jQuery 对象, 那么要在变量前面加上$.
var $variable = jQuery 对象
var variable = DOM 对象
$variable[0]：jquery对象转为dom对象
$("#msg").html(); $("#msg")[0].innerHTML
jquery的基础语法：$(selector).action()
查找元素（选择器和筛选器）
基本选择器：
- ID选择器 $("#id的值")
- 类选择器（class） $(".class的值")
- 标签选择器(html标签) $("标签的名字")
- 所有标签 $("*")
- 组合选择器 $("xx,xxx")
层级选择器
- 从一个标签的子子孙孙去找 $("父亲 子子孙孙")
- 从一个标签的儿子里面找 $("父亲>儿子标签")
- 找紧挨着的标签 $("标签+下面紧挨着的那个标签")
- 找后面所有同级的 $("翔哥~女人")
jQuery对象：
- 用jQuery选择器查出来的就是jQuery对象
- jQuery对象，他就可以使用jQuery方法，不能使用DOM的方法
- DOM对象和jQuery对象转换：
- $(".c1")[0] --> DOM对象
- $(DOM对象)
- 筛选器
- 写在引号里面的
$(" :first")
$(" :not('')")
$(" :even")
$(" :odd")
$(" :eq")
$(" :gt")
$(" :last")
$(" :focus")
内容
$(":contains")
$(" :empty")
$(" :has('')")
$(" :parent") ***** 区别于$("").parent()
可见性
$(" :hidden)
$(" :visible")
属性
input[name] --> 有name属性的input
input[type='password'] --> 类型是password的input标签
表单
:input
:password
:checkbox
:radio
:submit
:button
:image
:file
表单对象属性
:enable
:disable
:checked
:selected
- 写在信号外面当方法用的
过滤
$("").first()
$("").parent()
$("").eq()
.hasClass()
查找
.children()
.find()
.next()
.nextAll()
.nextUntil()
.parent()
.parents()
.parentsUntil()
.prev()
.prevAll()
.prevUntil()
.siblings()
表单属性选择器
:enabled
:disabled
:checked
:selected
操作元素（属性，css，文档处理）
事件
绑定
//语法: 标签对象.事件(函数)
eg: $("p").click(function(){})
委派
$("").on(eve,[selector],[data],fn) // 在选择元素上绑定一个或多个事件的事件处理函数。
切换
hover事件：
一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
over:鼠标移到元素上要触发的函数
out:鼠标移出元素要触发的函数
1. 属性操作
属性
如果你的选择器选出了多个对象，那么默认只会返回第一个的属性
attr(name|pro|key,val|fn)
- 一个参数 获取属性的值
- 两个参数 设置属性的值
- 点击加载图片
removeAttr(name)
- 删除属性的值
prop(n|p|k,v|f) 属性的返回值是布尔类型
removeProp(name)
- 删除属性的值
- 例子
全选、反选、取消的例子
- 循环
each
- $.each(数组/对象, function(i, v){})
- $("div").each(function(){})
伏笔
- 登录校验的作业
CSS 类
addClass(class|fn) addClass("has-error")
removeClass([class|fn])
toggleClass(class|fn[,sw]) 切换，有就去掉，没有就加上
灯泡的例子
HTML代码/文本/值
没有参数就是获取对应的值
有参数就是设置对应的值
html([val|fn])
加 html标签
.html("<span>老师，我好饿。</span>")
text([val|fn])
加文本
.text("老师，我好饿。")
val([val|fn|arr])
- input
- 获取的是输入的内容
- checkbox
- 获取的是value值
- select
- 单选 就是获取值
- 多选 得到的是一个数组，设置的时候也要是数组
.css
.css()
-- .css("color") 获取值
-- .css("color","#ff0000") 设置值
.css({"color":"#cccccc","border":"1px"}) 设置多个
.css(["color","boder"]) 获取多个
.offset
--获取相对位置
比较的对象是 html
.position
--获取相对已经定位的父标签的位置
--比较的是做过定位的那个标签
scrolltop([val])
--返回顶部
尺寸
height([val|fn])
--袁术的高度
width([val|fn])
innerHeight()
--带pading的高度
innerWidth()
outerHeight([soptions])
在inner的基础上再加boder
outerWidth([options])
内部插入（加粗）
append(content|fn) --> 往后加
appendTo(content)
A.append(B) -> 把B添加到A的后面
A.appendTo(B) -> 把A添加到B的后面
prepend(content|fn) --> 往前加
prependTo(content)
A.prepend(B) -> 把B添加到A的前面
A.prependTo(B) -> 把A添加到B的前面
外部插入（加粗）
after(content|fn) --> 往后加
insertAfter(content)
A.after(B) --> 把B添加到A的后面
A.insertAfter(B) --> 把A添加到B的后面
before(content|fn) --> 往前加
insertBefore(content)
A.before(B) --> 把B添加到A的前面
A.insertBefore(B) --> 把A添加到B的前面
包裹
wrap(html|ele|fn)
A.wrap(B) --> B包A
unwrap()
- 不要加参数
wrapAll(html|ele)
wrapInner(html|ele|fn)
替换
replaceWith(content|fn)
A.replaceWith(B) --> B替换A
replaceAll(selector)
A.replaceAll(B) --> A替换B
删除
empty()
- 清空 内部清空
remove([expr])
- 删除 整体都删除
detach([expr])
- 剪切 多保存在变量中，方便再次使用
复制
clone([Even[,deepEven]])
4. 动画
基本
show([s,[e],[fn]])
hide([s,[e],[fn]])
toggle([s],[e],[fn])
滑动
slideDown([s],[e],[fn])
slideUp([s,[e],[fn]])
slideToggle([s],[e],[fn])
淡入淡出
fadeIn([s],[e],[fn])
fadeOut([s],[e],[fn])
fadeTo([[s],o,[e],[fn]])
- 淡出到0.66透明度
fadeToggle([s,[e],[fn]])
- .fadeToggle(3000, function () {
alert("真没用3");
});
自定义
animate(p,[s],[e],[fn])1.8*
- css属性值都可以设置
- 女朋友变小（漏气）
5. 事件处理
之前绑定事件的方式：
1. onclick=clickMe(); function clickMe() {}
2. ele.onclick = function(){}
3. ele.addEventListener("click", function(){})
jQuery绑定事件的方式：
1. $(ele).on("click", function(){})
2. $("tbody").delegate(".btn-warning", "click", function(){})
3. $("tbody").on("click",".btn-warning",function(){}) 我们要用的事件委派
补充：
each循环
$("p").css("color","red")
是将css操作加到所有的标签上，内部维持一个循环；但如果对于选中标签进行不同处理，这时就需要对所有标签数组进行循环遍历啦
jquery支持两种循环方式：
一 $ .each(obj,fn)
li=[10,20,30,40];
dic={name:"yuan",sex:"male"};
$.each(li,function(i,x){
console.log(i,x)
});
二 $("").each(fn)
$("tr").each(function(){
console.log($(this).html())
})
其中,$(this)代指当前循环标签。
文档节点处理
//创建一个标签对象
$("<p>")
//内部插入
$("").append(content|fn) ----->$("p").append("<b>Hello</b>");
$("").appendTo(content) ----->$("p").appendTo("div");
$("").prepend(content|fn) ----->$("p").prepend("<b>Hello</b>");
$("").prependTo(content) ----->$("p").prependTo("#foo");
//外部插入
$("").after(content|fn) ----->$("p").after("<b>Hello</b>");
$("").before(content|fn) ----->$("p").before("<b>Hello</b>");
$("").insertAfter(content) ----->$("p").insertAfter("#foo");
$("").insertBefore(content) ----->$("p").insertBefore("#foo");
//替换
$("").replaceWith(content|fn) ----->$("p").replaceWith("<b>Paragraph. </b>");
//删除
$("").empty()
$("").remove([expr])
//复制
$("").clone([Even[,deepEven]])