初识
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 手指长按
文章来源: 博客园
- 还没有人评论，欢迎说说您的想法！
客服
