爱站程序员基地1 介绍
1.1 简介
jQuery就是一个js库，封装很多函数
优点：代码量少，实现功能多；解决兼容问题；链式编程；开源免费，插件丰富。
1.2 顶级对象
jQuery或者$
1.3 与DOM之间的转化
jQuery——>DOM
<body><div id=\"box\"></div><script type=\"text/javascript\" src=\"jquery-1.12.2.js\"></script><script type=\"text/javascript\">var div=$(\"#box\");//jQuery对象var div2=$(\"#box\")[0];//DOM对象var div3=$(\"#box\").get(0);//DOM对象</script></body>
DOM——>jQuery
<body><div id=\"box\"></div><script type=\"text/javascript\" src=\"jquery-1.12.2.js\"></script><script type=\"text/javascript\">var div = document.getElementById(\"box\");//DOM对象var div2 = $(\"div\")//jQuery对象</script></body>
1.4 页面加载
js：window.load();——只能加载一个
jquery:
$(window).load()——页面数据加载完触发
$(document).ready();
jQuery();
$();
后面三个都是标签加载完就触发，速度快
2 选择器
<div id=\"box\" class=\"box\"><p></p><div class=\"inner\"></div></div>
2.1 基础
$(\”#box\”) $(\”.box\”) $(“p”) $(“div.inner”) $(“p,.inner”)
2.2 索引
:eq() :gt() :lt()
3 样式
<div id=\"box\" class=\"box\"><p></p><div class=\"inner\"></div></div>
3.1 方法
标签内容：html():innerHTML val():value text():innetText
索引：index() 查找：find()
样式：css(“属性”,“属性值”) css({“属性”:“属性值”,“属性”:“属性值”,“属性”:“属性值”})
3.2 类样式
添加：
$(\"p\").addClass(\"cls\")
$(\"p\").addClass(\"cls cls2\")
移除：
$(\"p\").removeClass(\"cls\")
切换：
$(\"p\").toggleClass(\"cls\")
判断：
$(\"p\").hasClass(\"cls\")
4 链式编程
4.1 概念
当一个对象调用完之后返回的是对象，则可以一直调用，从而形成的编码样式就是链式编程。
形式：对象.方法().方法().方法().方法().方法()
断链：当一个对象调用完之后返回的不是对象，则就出现断链。解决办法：在断链出加end()
4.2 兄弟元素
后一个元素：next() 之后所有元素：nextAll()
前一个元素：prev() 之前所有元素：prevAll()
所有兄弟元素：siblings()
5 动画
5.1 参数：字符串(“slow”,“fast”,“normal”)或者数字类型
隐藏：hidden() 显示：show()
滑入：slideUp() 滑出：slideDown() 切换：slideToggle()
淡入：fadeIn() 淡出：fadeOut() 切换：fadeToggle()
fadeTo(时间，透明度)
5.2
animate({键值对},时间,callback)
stop()停止动画
6 动态创建元素
6.1 创建与添加
<body><div id=\"box\"></div><script type=\"text/javascript\" src=\"jquery-1.12.2.js\"></script><script type=\"text/javascript\">//创建var p1 = $(\"<p>p1</p>\")var p2 = $(\"<p>p2</p>\")var p3 = $(\"<p>p3</p>\")var p4 = $(\"<p>p4</p>\")var p5 = $(\"<p>p5</p>\")var p6 = $(\"<p>p6</p>\")//添加$(\"#box\").append(p1);p2.appendTo($(\"#box\"));$(p2).prepend(p4);//插入p2内部的前面,是父子关系$(p2).after(p5);//插入p2之前，是兄弟关系$(p2).before(p6);//插入p2之后，是兄弟关系</script></body>
6.2 清空
清除内容：html(\”\”) empty()
移除自身：remove()
克隆:clone()
6.3 设置和获取
attr()用于自定义属性
设置：val(“内容”) attr(“属性”,“属性值”)
获取：val() attr(“属性”)
7 事件
7.1 绑定
①bind()两个参数
一个事件： $(“div”).bind(“事件名称”,callback)
多个事件： $(“div”).bind({“事件名称”:callback,“事件名称”:callback})
②delegate()三个参数
delegate(“绑定事件的元素”,“事件名称”,callback)
③on()三个或者两个参数
on(“事件名称”,callback)
on(“事件名称”,“绑定事件的元素”,callback)
7.2 解除
unbind() undelegate() off()
7.3 触发
触发浏览器默认事件(光标闪烁)：事件名称(); trigger(“事件名称”);
不触发浏览器默认事件：triggerHandler(“事件名称”);
7.4 多库共存
$:由对象变成变量，不可使用后，jquery要对$释放控制权
var news=$.noConfict(),以后使用就用news,变量名称自己取。
7.5 补充
arguments.length——>查看一个方法的参数个数
arguments[i]——>查看具体参数
遍历元素：each(index,element)
