$的三种用法
$其实就是一个函数，以后用$的时候 $(); 参数不同，功能就不同
1）参数是一个function, 入口函数
$(function(){ });
2）直接写dom元素，封装为jQuery对象
$(document).ready(function(){ });
3) 参数是一个字符串,用来找对象
$("div")
$("#btn")
$(".classname")
-
等着dom元素加载结束加载完再加载 两种入口函数：
**1) $(function(){ })
2) $(document).ready(function(){ }); -
注意：
只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。 -
dom对象与jQuery对象相互转换
( ′ d i v D o m ′ ) j Q u e r y 对 象 与 d o m 对 象 相 互 转 换 （ ('divDom') jQuery对象与dom对象相互转换（ (′divDom′)jQuery对象与dom对象相互转换（对dom对象包装后产生的对象是伪数组形式）
$(‘div’)[index]
$(‘div’).get(index); -
选择器
$(’#id’) ID
$(’.class’) 类
$(’*’) 通配符
$(‘div’) 标签
$(‘div,p,li’) 并集
$(‘li.current’) 交集
$(‘ul>li’) 子代选择器
$(‘ul li’) 后代选择器 -
隐士迭代
遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，
而不用我们再进行循环，简化我们的操作，方便我们调用。
$(‘div’).hide(); // 页面中所有的div全部隐藏，不用循环操作 -
jQuery 筛选选择器
:first :last :eq(index) 获取第一个，最后元素 第index个元素
:odd :even 奇数 偶数元素
:checked 选项框被选中的个数
$(“ul li:first”).css(“color”, “red”);
$(“ul li:eq(2)”).css(“color”, “blue”);
$(“ol li:odd”).css(“color”, “skyblue”);
$(“ol li:even”).css(“color”, “pink”); -
jQuery 筛选方法 所有jQuery方法都自带遍历
**parent() 最近一级
**parent(“祖先级的父级名”)
**children(selector) 最近一级 亲儿子
**find(selector) 所有后代
**siblings(‘li’) 除了当前元素其他的亲兄弟元素
**eq(index) 第index个元素（直接接变量）
nextAll([expr]) prevtAll([expr]) 当前元素之前或之后的所有同辈元素
hashClass(class) 检查元素是否有某个特定的类，如果有返回true
index() 得到元素的索引号 -
$(this) 当前元素
show() hide() 显示 隐藏 -
操作样式
1.参数只写属性名，则是返回属性值
var strColor = $(this).css(‘color’);- 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css(’‘color’’, ‘‘red’’);
以对象的形式修改样式
$(this).css({width:400,height:300});
3.添加类
$(“div”).addClass(“current”);
4.删除类
$(“div”).removeClass(“current”);
5.切换类
$(“div”).toggleClass(“current”); - 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
-
链式操作
$(this).addClass(‘current’).siblings().removeClass(‘current’); 添加的类不会影响原先的类 -
jQuery 效果
- hide/show/toggle([ speed ],[ easing ],[ fn ]);
参数可以省略，无参数直接显示
speed ：slow normal fast 1000(毫秒的数值)
easing ：swing linear
fn ：回调函数 动画结束 函数执行一次
2）滑入滑出动画，常见有三个方法：
slideDown / slideUp / slideToggle([ speed ],[ easing ],[ fn ]);后面的回调函数fn是指在进行动画之后的操作，例如某个元素划出动画（删除元素） slideUp只是上滑消失，但是并没有删除，需要通过fn进行删除操作 slideToggle 实现上滑和下滑3）事件切换
$(this).hover(function () { }, function () { } )
鼠标经过和离开的复合
如果只写一个 ，鼠标经过和离开都执行这个函数4）淡入淡出动画 （效率低，用定时器做的）
常见有四个方法：
fadeIn() / fadeOut() / fadeToggle() 三个参数 ([ speed ],[ easing ],[ fn ]);
fadeTo() ; 四个参数 ([ speed ],[ easing ],[ fn ],[ opcity ])
$(“div”).fadeIn(100)
修改透明度
fadeTo(1000,0.7);速度和透明度必须写5）自定义动画
animate( params, [ speed ] , [ easing ],[ fn ]);
params：想要更改的样式属性，以对象形式传递，必须写。
属性名不带引号，其他参数可以省略
$(“div”).animate({
top:100,
width:300,
opcity:0.8
},500) - hide/show/toggle([ speed ],[ easing ],[ fn ]);
-
动画排队
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。
1）停止动画：stop() 谁做动画 写在谁的前面，停止一个动画
2）清空所有的动画：stop(true ，false)
第一个参数：是否清除队列 第二个参数：是否跳转到最终效果
3）是否正在做动画：:animate
**13. 设置元素自带的属性
1）获取属性名：prop(“属性名”);
修改属性：prop(“属性名”，“修改的属性值”);
2）获取自定义属性名：attr(“属性名”);
修改属性：attr(“属性名”，“修改的属性值”);
3）prop() 除了普通属性操作，更适合操作表单属性：disabled / checked / selected 等。
4）data(“name”,“value”) 向被选元素附加数据 data(“name”) 取数据
同时可以读取HTML5中自定义属性 data-index 得到的是数字型
5）html() 拿到文本值和标签 获得元素的值
text() 只拿到内容 获得元素文本内容
val() 拿到表单的值 val(3) 添加参数，更改数值
6）toFixed(); 保留几个小数
*7）chang()；input文本值改变 checked，disable，selected 的值改变
-
jQuery 元素操作
1）遍历：
1> $(“div”).each() 做数据处理
( " d i v " ) . e a c h ( f u n c t i o n ( i n d e x , d o m E l e ) ) x x x ; ; i n d e x 是 每 个 元 素 的 索 引 号 d o m E l e 是 每 一 个 d o m 元 素 而 不 是 j Q u e r y 元 素 ， 用 的 时 候 转 换 成 ("div").each(function( index, domEle )){ xxx; }; index 是每个元素的索引号 domEle是每一个dom元素 而不是jQuery元素，用的时候转换成 ("div").each(function(index,domEle))xxx;;index是每个元素的索引号domEle是每一个dom元素而不是jQuery元素，用的时候转换成(Dom)
2> $.each() 做对象遍历
$.each(objext, function( index , domEle )) { xxx; }
index 遍历属性名, domEle 遍历属性值2）创建
$(" - ")
3）添加
$(“ul”).append(“内容”) 放到元素后面
$(“ul”).prepend(“内容”) 放到元素前面$(".text").before("内容") 放到兄弟元素前面 $("text").after("内容") 放到元素后面4）删除
$(“ul”).remove() 删除ul 自杀
$(“ul”).empty() 清空里面的内容 保护子节点
等价于 $(“ul”).html("") -
事件处理 on（）
elemengt.on(event,[selector],fn)
1.event:一个或多个用空格分隔的事件类型，如click或keydown
2.selector：元素子元素的选择器
3.fn: 回调函数，即绑定在元素身上的监听函数*1）同时绑定多个事件
elemengt.on({
moverenter : function () { },
click:function() { }
});
elemengt.on(“moverenter moverleaver”,function() { });*2）事件代理
给ul绑定事件 但是li触发 click不能给动态元素添加绑定 on可以给未来创建的元素绑定事件
$(“ul”).on(“click”, “li”, function() {
alert(11);
});*3）动态添加事件
$(“ol”).on(“click”, “li”, function() {
alert(11);
})
var li = $(“ - 我是后来创建的
- ”);
$(“ol”).append(li); -
解除事件
off() 解除所有事件，如果有参数，则解除某一个事件
$(“ol”).off() 解除ol上面的所有事件
$(“ol”).off(“click”）解除ol上面的click事件
$(“ol”).off(“click”, “li”）解除事件委托
one() 只执行一次 -
自动触发
1)元素.事件
$(".div").click()2)元素.trigger（“事件”）
$(".div").trigger(“click”)3)元素.triggerHandler（“事件”） 不会触发元素本来的默认事件
$(".div").triggerHandler(“click”) -
jQuery 事件对象
stopPropagation() 阻止冒泡
preventDefault() 阻止默认行为 return false -
jQuery 拷贝对象
$.extend( [ deep ],target, obj);
默认情况是false（浅拷贝），并且false是不能够显示的写出来的。如果想写，只能写true（深拷贝）
把obj拷贝给target 如果target中有相同的值 会被覆盖
deep ：【默认是false】如果是false 则是浅拷贝，只是将地址拷贝过去（缺点：如果更改拷贝的内同，原来的数据也会改变） true是深拷贝
6.解决 $ 与 jQuery 冲突的问题（多库共存）
var suibian = jQuery.noConflict();
-
jQuery 插件常用的网站：
- jQuery 插件库 http://www.jq22.com/
- jQuery 之家 http://www.htmleaf.com/
-
图片懒加载插件
懒加载只需引入html 和 js操作 即可，此插件不涉及css。
必须在最后方加入script vscode ctrl+h 替换 -
全屏滚动插件
全屏滚动插件介绍比较详细的网站为：http://www.dowebok.com/demo/2014/77/ -
数组对象转换成字符串
JSON.stringify(数组对象);
字符串转换成数组对象
JSON.parse(字符串); -
jQuery 尺寸
width()/height() 匹配元素的宽高
innerWidth()/innerHeight()包括padding
outerWidth()/outerHeight() 包括padding，border
outerWidth(true)/outerHeight(true) 包括padding，border，margin
1>如果参数为空，则返回对应的值
2>如果参数不为空,更改值
3>参数可以不必写单位 -
获取位置
offset()
获取设置距离文档的位置 跟父级没有关系
有两个属性top、left offset().top得到距离文档顶部的距离
可以设置元素的偏移量：offset({top:90,left:70})position()
获取距离带有定位父级文档的位置
如果没有带有定位的父级，则以文档为准
只能获取，不能设置
scrollTop() scrollLeft()
元素被卷去的距离
KaTeX parse error: Expected '}', got 'EOF' at end of input: …ion(){ alert((document).scrollTop())
})
页面滚动的效果，做电梯导航的时候用
只有元素才能做动画
var current =
(
.
f
l
o
o
r
.
w
)
.
e
q
(
(.floor .w).eq(
(.floor.w).eq((this).index).offset().top;
$(“html,body”).animate({ scrolltop:current })
112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
