jQuery 笔记
初识
console.log($ == jquery);// true jquery就是$ 等价的
页面加载
$(document).ready(function(){});//相当于原生window.onload（domcontentloaded）
比onload先执行
$(function(){})//简写
只需要文档结构加载完毕后执行,onload是文档和资源媒体加载完成。
dom节点对象转换
jq的dom节点与原生dom节点互转
// jq转原生
console.log($(this));// 返回jq对象
// init数组对象 通过下标获取到的就是原生的dom
console.log($('#box')[0]);
console.log($('#box').get(0));
$('#box').get(0).innerhtml = '哈哈';
让出$的使用权限
jquery.noconflict();
console.log($); // undefind
// 闭包 将jquery传到闭包中的$ 在闭包函数中又可以使用$来进行jq的操作
;(function($){
$(function(){
console.log($('#box'));
})
})(jquery)
// 给$起个名字
var jq = jquery.noconflict(true);
console.log(jq('#box'));
选择器
基本选择器
$('#box')//id选择
$('.aa')//类名选择
$('li')//标签选择
层级选择器
$('ul li') //后代li
$('ul>li') // 子代的li
$('#li1+li')//#li1的下一个兄弟li
$('#li1~li')//#li1的所有的弟弟li
基本过滤选择器
$('li:first')// 获取第一个元素
$('li:last')// 获取最后一个元素
$('li:not(#li1)')// 排除
$('li:odd')// 选择索引奇数---显示的偶数行
$('li:even')// 选择索引偶数---显示奇数行
$('li:eq(3)')//等于索引
$('li:gt(3)')//大于索引
$('li:lt(3)')//小于索引
// 选取索引为n的li
// $('li:eq(' + n + ')')
$('li').eq(n)
属性过滤选择器
$('li[name]')// 带有name属性的li
$('li[name=lucy]')// name属性值为lucy的li
$('li[name!=joy]')// name属性不为joy的li
$('li[name*=o]')// name属性值包含o的li
$('li[name^=j]')// name属性的值以j开头的
$('li[name$=y]')// name属性的值以y结尾的
表单选择器
$('input')//标签input
$(':input')//不论标签名 只要是表单元素 都选取
$(':text')
$(':password')
$(':radio')
$(':checkbox')
$(':file')
$(':submit')
$(':button')
dom
dom节点遍历
遍历节点
$('ul').children()// ul下的所有子节点
$('ul').children('p')// ul下的p子节点
$('ul').find('p')// ul下的所有后代p
$('#box').next()// box的下一个兄弟
$('#box').nextall()// box的下边的所有兄弟
$('#box').prev()// box 上一个
$('#box').prevall()//上边所有的兄弟
// box的所有的兄弟节点（之前的和之后的全算）
$('#box').siblings()
$('#box').siblings('p')
遍历父节点
$('#box').parent()//真正的父节点
$('#box').parents()//所有的祖先节点
$('#box').parents('div')//所有祖先中的div
遍历节点 - 过滤
$('#box').find('li')// find 获取后代元素
$('li').filter('.aa')// filter 过滤找到满足条件的元素
$('li').not('.aa')// not 排除满足条件的元素 选择其他元素
属性操作
$('#box').attr('title')//获取
$('#box').attr('title','xixi');// 设置
// 批量设置
$('#box').attr({
title: 'heihei',
sex : 'female'
})
$('#box').removeattr('sex');// 删除属性
属性值为true和false的属性操作
$(':checkbox').attr('checked');// 获取 --> checked
$(':checkbox').prop('checked');// 获取 --> true
$(':checkbox').prop('checked', true);// 设置
class操作
$('#box').addclass('red');//添加类red
$('#box').removeclass('red');// 删除red
判断该元素box上是否有red
$('#box').hasclass('red') // boolean
$('#box').is('.red')// boolean
切换类名 toggleclass
$('#box').toggleclass('red');
css操作
// 获取样式
$('#box').css('width')
// 设置
$('#box').css('background','red');
// 批量设置
$('#div1').css({
width:'200px',
fontsize:'18px'//font-size 去-变驼峰
})
html 文本与值的操作
innerhtml ---> html()
innertext ---> text()
表单value ---> val()
$('#s1').html() // 获取 识别标签
$('#s1').text() // 获取 只识别文本
// 设置
$('#box').html('<i>过年好！</i>');// 会识别标签
$('#box').text('<i>过年好！</i>');// 不会识别
// 表单的value
$(':text').val()
$(':text').val('ddddd');
node操作
创建元素
$('<li></li>')
添加节点
在元素尾部添加
新元素.appendto(目标元素)
$('<li>国庆节</li>').appendto($('#list'));
目标.append(新元素)
在元素头部添加
新元素.prependto(目标元素)
目标.prepend(新元素)
$('#list').prepend($('<li>元旦节</li>'))
在目标元素之前插入
新元素.insertbrfore(目标元素)
$('<li>情人节</li>').insertbefore($('#list li').eq(2));
目标元素.before(新元素)
在目标元素之后插入
新元素.insertafter(目标元素)
目标元素.after(新元素)
$('#list li').eq(3).after($('<li>妇女节</li>'));
删除节点
remove(): 将节点删除，返回被删除的节点，不会保留节点上的事件
detach(): 将节点删除，返回被删除的节点，会保留节点上的事件
empty(): 全部清空
克隆节点
clone（） 复制节点及内容，但不保留节点上的事件
clone（true）复制节点及内容，保留节点上的事件
替换节点
新节点.replaceall(要被替换的节点)
要被替换的节点.replacewith(新节点)
$('#list li').eq(2).replacewith($('<li>女神节</li>'));
数据串联
serialize()
<input type="text" name = 'a' value = '1'/>
<input type="text" name = 'b' value = '2'/>
<input type="text" name = 'c' value = '3'/>
$("input").serialize()// a=1&b=2&c=3
$("input").serializearray()// [{{name: "a", value: "1"}}, {…}, {…}]
add 和 slice
$("div").add("span").add("ul li").css("backgroundcolor", 'red')
// 等同于
$("div,span,ul li").css("backgroundcolor", 'red')// 与add一样
$("ul li").slice(1, 4).css("backgroundcolor", 'red');// 获取从1到4的 li元素
bom
元素的宽高
原生的元素的宽高分别那几种如何获取
内容宽高----width height
可视宽高--- clientwidth/clientheight
占位宽高---offsetwidth/offsetheight
$("#div1").css("width")//"100px" 字符串
jq的元素宽高操作
内容宽高 width() height() 方法
可视宽高 innerwidth（） innerheight（）
占位宽高 outerwidth() outerheight()
整个宽高 outerwidth（true） outerheight（true）
jq获取可视区及文档的宽高
可视区宽高 $(window).width()/.height()
文档的宽高 $(document).width()/height()
元素的位置
$('#sub').offset() 返回一个对象 到文档的 left和top值
$('#sub').position() 返回一个对象 到有定位属性的父级元素的 left和top值
滚动条卷走的宽高操作
$(document).scrolltop() // 不传参获取，传参设置
事件
event对象
jq中的事件对象 不需要兼容了 直接传参ev就可以了
ev.clientx/ev.clienty 事件触发的位置到浏览器可视区的上左边的距离
ev.currenttarget：当前事件触发的元素
ev.delgatetarget：当前事件绑定的元素
ev.offsetx/ev.offsety: 事件触发的位置到元素的上左边的距离
ev.originalevent: 元素事件对象
ev.pagex/ev.pagey:事件触发的位置到文档的上左边的距离
ev.screenx/ev.screeny:事件触发的位置到屏幕的上左边的距离
ev.which 类似于 keycode 可以获取鼠标的键值 左键是1 右键是3 滚轮是2
阻止默认事件 ev.preventdefault()
阻止冒泡 ev.stoppropagation()
阻止默认事件+冒泡 return false
事件绑定 on()
// 基本事件
$('#box').on('click',function(){})
// 一次绑定多个事件对应一个处理函数
$('#box').on('click mouseenter mouseleave',function(){})
// 绑定多个事件对应多个处理函数 对象形式
$('#box').on({
'click': function(){},
'dblclick':function(){}
})
// 自定义事件
$('#box').on('hahaha',function(){})
// trigger 触发事件
$('#box').trigger('hahaha');
// 事件委托
$('#list').on('click','li',function(ev){
console.log($(ev.target).html());
})
// 事件的取消绑定
$('button:eq(0)').on('click', function(){
console.log(1111);
})
$('button:eq(1)').on('click',function(){
$('button:eq(0)').off();
//$('button:eq(0)').off('mouseenter');
// 传参取消事件类型
})
// 一个事件上绑定多个函数执行---事件的命名空间
$('button:eq(0)').on({
'click.a':function(){
console.log(111);
},
'click.b':function(){
console.log(222);
}
})
$('button:eq(1)').on('click',function(){
$('button:eq(0)').off('click.a');
})
// 只执行一次的事件
$('button').eq(0).one('click',function(){
console.log('一次就够了');
})
// 模拟执行一次事件
$('button').eq(0).on('click',function(){
console.log('一次就够了');
$(this).off();
})
合成事件
mouseenter 和mouseleave
$('#box').hover(function(){
// 鼠标移入执行函数
},function(){
// 鼠标移出执行函数
})
$ 下常用的方法
// 可以遍历数组，对象，jq元素
$.each(obj, function(key, value){
console.log(key + ':' + value);
})
还可以$('选择器').each()//遍历元素 工具级别
var newarr = $.map(arr,function(item){
return item * item * item;
})有返回值
$.type() 输出当前数据类型 typeof
$.trim() 删除字符串前后的空格
$.inarray() indexof()
$.proxy() 功能类似于bind $.proxy()
$.noconflict() 给$起个别名
$.parsejson() json.parse()
$.makearray() 将伪数组转成数组。 array.from()
动画
基本动画
显示隐藏
show（
duration动画执行时间-毫秒，
easing运动效果（只有两种 swing慢快慢，linear匀速，
complate运动执行完成后的回调）
）
隐藏hide（）
显示隐藏的切换toggle（）
$('#box').show(1000,function(){
alert('执行完毕');
})
淡入淡出
淡入fadein（） 淡出 fadeout（） 透明度变化到 fadeto（） 淡入淡出切换 fadetoggle（）
$('button').eq(0).on('click', function(){
$('#box').fadein(1000);
})
$('button').eq(2).on('click', function(){
$('#box').fadeto(1000, .5);
})
下拉显示
下拉显示slidedown（） 上拉隐藏 slideup（） 切换 slidetoggle（）
$('button').eq(2).on('click', function(){
$('#box').slidetoggle(1000);
})
animate
animate({属性1：目标值1，属性2：目标值2.。。}, duration动画持续时间，easing动画效果，
callback回调)
// 累加
$('button').click(function(){
$('#box').animate({width:'+=50'},200)
})
// 链式运动
$('button').click(function(){
$('#box').animate({width:500},1000)
.animate({height:300},500)
.animate({opacity:.5},500)
})
动画队列
queue(function(next){})
将其他的操作加入到动画队列中 按顺序来完成
$('#box').animate({width:500},1000)
.queue(function(next){
$(this).css({background:'blue'});
next();//继续执行后续的动画队列中的操作
})
.animate({height:300},500);
判断是否处于动画状态
$(元素).is(':animated') :有动画在执行 返回true 没有返回false
$('#box').hover(function(){
if(!$(this).is(':animated')){
$(this).animate({height:300},400);
}
}, function(){
$(this).animate({height:50},400);
})
延迟动画
$('#box').animate({width:500},1000)
.delay(2000)
.animate({height:300},500);
停止动画
stop（clearqueue清除动画队列， gotoend达到动画最终状态）停止动画
finish（）完成动画---所有动画队列的效果达到最终状态（2.x以上版本支持）
// stop停止动画的几种组合
$('button').eq(1).click(function(){
// 参数皆为false 不清除动画队列 不达到最终状态
$('#box').stop(false, false); // 默认
// 参数皆为true 清除动画队列 达到最终状态
$('#box').stop(true, true);
// true false 清除动画队列 不达到最终状态
$('#box').stop(true, false);
// false true 不清除动画队列 达到最终状态
$('#box').stop(false, true);
})
// finish
$('button').eq(2).click(function(){
$('#box').finish();
})
ajax
$.ajax({
url,
cache,//在get下是否启用缓存
type,// get/post
data,// 上传数据
timeout,//相应超时时间
datatype,//预期返回的数据类型默认 text
success, // 成功回调
error,
conplate})
跨域
datatype 设置为jsonp
$.ajax({
url:'https://www.baidu.com/sugrec',//?prod=pc&wd=aa&cb=fn
type:'get',
data:{prod:'pc',wd:'cc'},
datatype:'jsonp',
success:function(res){
console.log(res);
}
})
load方法
将url传入以后，将下载到数据直接填充到被选中元素的innerhtml中
$("div").load("2.txt #p1", function(data, statustext, xhr){
data 下载到的数据
statustext 下载的状态 success
xhr ajax对象
})
cookie
获取
$.cookie(name)
设置
$.cookie(name, value) 设置name和value
$.cookie(name, value {
raw: true //value不进行编码
//默认false value要进行编码的
})
删除
$.cookie(name, null); 删除cookie
实例
$.cookie("变种人", "x教授", {
expires: 7,
raw: true
})
jquery 插件
;(function($){
// 类级别插件 ---> 将方法拷贝到jq的原型下
$.extend({
'trimleft' : function(str){
return str.replace(/^\s+/,'');
}
})
// 对象级别插件 拷贝到$.fn的原型下
$.fn.extend({
'changebg' : function(select,color){
this.children(select).css({background:color});
return this;
}
})
})(jquery)
var str = ' aaa ';
console.log($.trimleft(str));
$('ul').changebg(':odd','pink');
zepto
基本使用 和jq完全一样但是用到的模块要单独引入
$(function(){
$('#box').on('tap', function(){
console.log('手指点击');
})
})
zepto和jq的区别
隐藏的元素的获取宽高
jq可以获取隐藏元素的width（）/height（）
zepto中获取隐藏元素的width（）/height（）都为0
$('#box').width();// 隐藏的元素在zepto中获取宽高为0
offset()的区别
jq中返回一个对象 包含 元素到文档上左边的距离
zepto中返回一个对象 包含 元素到文档上左边的距离和元素的宽高
$('#sub').offset();//元素到文档的上左边的距离
$('#sub').offset();//zepto中元素到文档的上左边的距离 和 元素的宽高
元素的宽高的获取区别
jq获取元素的宽 有4种方法
zepto中只有一个width（）和height（）方法 获取的是占位宽
$('#box').width();//占位宽 内容宽 + padding + border
innerwidth();//没有
outerwidth();//没有
outerwidth(true);//没有
touch模块
tap 所有的触碰
singletap 手指单击
doubletap 手指双击
swipe swipeleft swipedown swiperight swipeup 手指滑动
longtap 手指长按