jQuery入门
1、jquery入口函数
$(function(){ ... //页面加载完的入口 }); $(document).ready(function(){ ... //页面加载完的入口 });
1．等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装。
2．相当于原生js 中的DOMContentLoaded。
3. 不同于原生js 中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码.
2、顶级对象$ (jQuery的别称)
3、jQuery对象和DOM对象
原生JS获取的对象为DOM对象，jQuery获取的对象为jQ对象
// 1. DOM 对象： 用原生js获取过来的对象就是DOM对象 var myDiv = document.querySelector('div'); // myDiv 是DOM对象 var mySpan = document.querySelector('span'); // mySpan 是DOM对象 // 2. jQuery对象： 用jquery方式获取过来的对象是jQuery对象。 本质：通过$把DOM元素进行了包装 $('div'); // $('div')是一个jQuery 对象 $('span'); // $('span')是一个jQuery 对象
两个之间可以转换：
1、DOM转jQ：$(DOM对象);
var myvideo = document.querySelector('video'); $(myvideo);
2、jQ转DOM：$('div')[index] / $('div').get(index) index为索引号
$('video')[0].play()
$('video').get(0).play()
4、jQ常用API
1、基础选择器 $('选择器')
2、层级选择器
3、样式设置：$('div').css('属性', '值');
原理：隐式迭代：遍历循环内部DOM元素（伪数组）的过程。就是不用像以前一样循环一个个设置
4、筛选选择器
5、筛选方法
多个父级，即爷爷，祖父等：parents(' 指定'); 括号内可加指定类名等指定父系
6、链式编程
$(this).find('a').css('display','block').siblings('li').find('a').css('display','none');
5、样式操作
1、css
如果只写属性不写值，则返回值
$('div').css('color'); //返回颜色
可以以对象的形式写多个样式
$("div").css({
width: 400,
height: 400,
backgroundColor: "red"
// 如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号
})
2、设置类样式
// 1. 添加类 addClass() $("div").click(function() { // $(this).addClass("current"); }); // 2. 删除类 removeClass() $("div").click(function() { $(this).removeClass("current"); }); // 3. 切换类 toggleClass() $("div").click(function() { $(this).toggleClass("current"); });
6、效果
显示隐藏：show(速度，线性效果，回调函数); hide(速度，线性效果，回调函数); toggle(速度，线性效果，回调函数);
滑动：slideDown(速度，线性效果，回调函数); slideUp(); slideToggle();
淡入淡出：fadeIn(速度，线性效果，回调函数); fadeOut(); fadeToggle(); fadeTo(速度，透明度，线性效果，回调函数); 速度，透明度必须写
自定义动画：animate()
事件切换：鼠标经过和离开的复合写法
hover([over]鼠标经过函数，out鼠标离开函数)
如果里面只写一个函数，那么鼠标经过和离开都会触发这个函数
停止动画排队
动画或者效果一旦触发就会执行，如果多次触发，就会造成动画或效果排队执行。
停止排队：stop(); 方法卸载动画的前面，停止上一次动画；不能写在后面，写在后面就是停止本次动画。
自定义动画
animate(params, [speed], [easing], [fn]) //动画只能是针对元素，不能针对文档
$("body, html").stop().animate({
scrollTop: 0
});
// $(document).stop().animate({
// scrollTop: 0
// }); 不能是文档而是 html和body元素做动画
params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。
$("button").click(function() {
$("div").animate({
left: 500,
top: 300,
opacity: .4,
width: 500
}, 500);
})
7、属性
设置或者获取元素固有属性：prop();
设置或者获取元素自定义属性：attr();
数据缓存，页面刷新数据将清除：data();
在checkbox中，jq提供 :check 选择器，返回一个包含已选中的个数的数组，可使用数组长度来判断是否全选
$('.s').change(function () {
if ($('.s:checked').length == $('.s').length
) { $('.all').prop('checked', true); }else{ $('.all').prop('checked', false); } });
8、内容
普通元素内容：html(); 标签也获取
文本内容：text();
表单内容：val();
9、元素操作
隐式迭代是对同一元素执行相同操作。若要给不同元素做不同操作，还是要用遍历的方式。each()
1、操作对象
$ ( "div" ) .each (function (index, domEle) { xxx; })
index是元素的索引号，domEle是每个DOM元素对象，所以要转换成jq对象
var colors = ['red','blue','green']; $('div').each(function(i,domEle){ $(domEle).css('backgroundColor',colors[i]); })
2、主要用于遍历数据、数组，处理数据
$.each(object , function (index, element) { xxx; })
$.each()可以遍历任何一个对象；index索引号，element遍历内容
$.each({ name: "andy", age: 18 }, function(i, ele) { console.log(i); // 输出的是 name age 属性名 console.log(ele); // 输出的是 andy 18 属性值 })
3、创建元素、添加元素
var li = $('<li></li>'); 1、内部添加 父子关系 $('ul').append(li); //放到匹配元素的最后面 $('ul').prepend(li); //放到匹配元素的最前面 2、外部添加 兄弟关系 var div = $("<div>后来的</div>"); $(".test").after(div); //.test后面添加 $(".test").before(div); //.test前面添加 3、删除元素 $("ul").remove(); 可以删除匹配的元素 自杀 $("ul").empty(); // 可以删除匹配的元素里面的子节点 不删除自身 $("ul").html(""); // 可以删除匹配的元素里面的子节点 孩子
10、尺寸、位置操作
尺寸：
位置：
offset(); 距离文档的偏移位置，与父级无关 offset({top:10, left:10}); 可以设置
position(); 距离带定位 父级的偏移位置，不可以设置
scrollTop() / scrollLeft()设置或者获取元素被卷去的头部或左侧
11、jQ事件
on：绑定
1、on可以绑定多个事件
$("div").on({ //一个on内可以写多个事件执行不同函数
mouseenter: function() {
$(this).css("background", "skyblue");
},
click: function() {
$(this).css("background", "purple");
}
});
2、on委派
事件委派：把原来加给子元素身上的事件绑定在父元素上，这就是事件委派给父元素。
$('ul').on('click', 'li', function(){ //click绑定在ul上，但是触发对象是li
alert(1);
})
3、给动态创建的元素创建绑定事件
var li = $('<li></li>') $('ul').append(li); $('ul').on('click', 'li', function(){ //ul是存在的 alert(1); })
off：解绑
1、off解绑事件
$("div").off(); // 这个是解除了div身上的所有事件
$("div").off("click"); // 这个是解除了div身上的点击事件
$("ul").off("click", "li"); //这是是解除了事件委托上的绑定
2、事件触发一次 one()
$("p").one("click", function() {
alert(11);
})
自动触发事件：trigger()
比如点击事件
$("div").on("click", function() {
alert(11);
});
// 1. 元素.事件()
$("div").click(); //会触发元素的默认行为
// 2. 元素.trigger("事件")
$("div").trigger("click"); //会触发元素的默认行为，比如表单focus后光标闪烁
$("input").trigger("focus");
// 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为，光标不闪烁
$("div").triggerHandler("click");
$("input").triggerHandler("focus");
事件对象：Event
就是function(e)内的event
和之前的e一样，e.stopPropagation(); e.preventDefault();
12、其他方法
1、拷贝对象：$.extend ( [deep], target, object1, [objectN]) 深浅拷贝（默认浅拷贝）、目标、拷贝对象（可写多个）
2、jq的多库共存：如果他库或者自定义函数也有$，jquery可以使用jQuery代替$；或者$.noConflict()代替 var xxx = $.noConflict(); 自定义jQ名；
3、jQ插件：瀑布流图片、图片懒加载、全屏滚动展示、bootstrap等等插件。
13、图片懒加载
页面滑到可视区域再显示图片，减小服务器压力
easyLazyload.js等插件
浙公网安备 33010602011771号