前端——js库-jQuery
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 = $("p1
")
var p2 = $("p2
")
var p3 = $("p3
")
var p4 = $("p4
")
var p5 = $("p5
")
var p6 = $("p6
")
//添加
$("#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)