【JQuery】知识点总结
JQuery
基础介绍
介绍: jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器,这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单
理念: 写得少 做得多 write less, do more
百度下载地址:
cdn: https://www.bootcdn.cn/jquery/
官网: https://jquery.com/
使用版本:
jquery.js: 未压缩版本 学习
jquery.min.js: 压缩版本 工作
引入方式:
\1. 引入本地文件: 常用
\2. 引入cdn文件: 不常用
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> <script src="js/jquery.js"></script>
最新版本:
3.5.1
2XX 3XX都不是兼容IE678
1XX 兼容IE678
主要操作
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
- 隐式迭代
$与JQuery的关系
- $与jQuery是同一个东西
console.log(jQuery)
console.log(window.jQuery)
console.log(window.$)
console.log($)
console.log(window.jQuery == $) // true
等待页面加载
window.onload
- 必须等待网页全部加载完毕(包括图片资源等), 然后再执行包裹代码
- 只能执行一次, 如果执行第二次,那么第一次的执行会被覆盖
$(document).ready()
- 只需要等待网页中的DOM结构加载完毕, 就能执行包裹的代码
- 可以执行多次,第N次不会被上一次所覆盖
- 简写方案: $(function(){})
// 1. 原生等待页面及资源加载
window.onload = function(){console.log(1);
}
window.onload = function(){console.log(2);
} // 2// 2. jquery 等待页面加载
// 2.1 $(document).ready(function(){})
$(document).ready(function(){console.log(3);
});
// 2.2 $().ready(函数);
$().ready(function(){console.log(4);
});
// 2.3 $(function(){});
$(function(){console.log(5);
}); // 3 4 5
JS 与JQuery互转
1.JS转成JQuery : $(js对象)
window.onload = function () {// js原生方法获取元素var li = document.getElementsByTagName('li')console.log(li) // HTML Collection// js转成jq对象 $(js对象)console.log($(li)) // jQuery.fn.init(10)console.log($(li[0])) // jQuery.fn.init(10)
}
2.JQuery转成JS对象
- jq对象[下标]
- jq对象.get(下标)
$(function () {var li = $('li')console.log(li) // jQuery.fn.init(10)// jQuery对象转成js对象console.log(li[0]) // <li>0001</li>console.log(li.get(0)) // jq.get(下标) })
JQuery选择器
基本选择器
console.log($('li')); // 标签选择器
console.log($('.a')); // 类名选择器
console.log($('#five')); // id名选择器
console.log($('.a,#five')); // 基本选择器
层级选择器
后代选择器 : 父 子
直接子元素 父 > 子
下一个兄弟 兄弟 + 下一个标签
后面所有的兄弟 兄弟 ~ 标签
// jq元素.css('属性名', '属性值')
// jq除非语法错误 否则不报错
// js对象用了jq方法 某些必传参数写错了
console.log($('ul li').css('background', 'red'));
console.log($('ul > li').css('background', 'yellow'));
console.log($('.box + div').css('background', 'blue'));
console.log($('.box ~ div').css('background-color', 'green'));
基本过滤选择器
$('ul li:first').css('background', 'red'); // 第一个元素
$('ul li:last').css('background', 'red'); // 最后一个元素
$('ul li:not(.box)').css('background', 'green'); // 类名不为box的li的元素
$('ul li:even').css('background', 'red'); // 索引为偶数的li的元素
$('ul li:odd').css('background', 'blue'); // 索引为奇数的li的元素
$('ul li:eq(5)').css('background', 'yellow'); // 获取索引为5的元素
$('ul li:lt(5)').css('background', 'pink'); // 索引小于5的元素
$('ul li:gt(5)').css('background', 'skyblue'); // 索引大于5的元素
内容过滤选择器
$('li:contains(6)').css('background', 'red'); // 文本中包含某个文字的
$('li:has(span)').css('background', 'blue'); // 标签中有span
$('li:parent').css('background', 'orange'); // li中有内容 文字 标签
$('li:empty').css('background', 'blue'); // li中为空的
可见性过滤选择器
不可见情况
- input type=“hidden”
- display:none
console.log($('li:visible'));
console.log($('li:hidden'));
console.log($('body *:hidden'));
console.log($('body *:visible'));
属性过滤选择器
$('li[tag]').css('background', 'red'); // 获取有tag属性的li$('li[tag=123]').css('background', 'green'); // tag属性值为123的li$('li[tag!=123]').css('background', 'blue'); // tag属性值不为123的li$('li[title^=a]').css('background', 'yellow'); // title属性以a为开头$('li[title$=a]').css('background', 'orange'); // title属性以a为结尾$('li[title*=a]').css('background', 'skyblue'); // title中有a这个字符的
子元素过滤选择器
$('ul li:nth-child(1)').css('background', 'red'); // nth-child选中第几个
$('ul :nth-child(1)').css('background', 'blue'); // nth-child选中第几个
$('ul :nth-child(even)').css('background', 'pink'); // nth-child选中偶数
$('ul :nth-child(odd)').css('background', 'orange'); // nth-child选中奇数
$('ul :nth-child(3n+1)').css('background', 'blue'); // 表达式 1 4 7 $('ul :first-child').css('background', 'purple');// 第一个
$('ul :last-child').css('background', 'purple');// 最后一个
表单属性过滤选择器
console.log($('input:enabled')); // 获取可用的输入框
console.log($('input:disabled')); // 获取不可用的输入框console.log($(':checkbox:checked')); // 获取选中的复选框
console.log($(':radio:checked')); // 获取选中的单选框console.log($('select :selected')); // 获取选中的下拉列表的项
表单元素过滤选择器
console.log($(':input')); // 获取所有的表单
console.log($(':text')); // 获取所有的输入框
console.log($(':radio')); // 单选按钮
console.log($(':checkbox')); // 复选按钮
console.log($(':button')); // 按钮
console.log($(':reset')); // 重置按钮
console.log($(':submit')); // 重置按钮
console.log($(':image')); // 上传图片
console.log($(':file')); // 上传文件
节点遍历
子节点
// 1. 子节点
console.log($('ul').children());
console.log($('ul').children('li'));
console.log($('ul').children('li:odd'));// 2. 上一个兄弟节点
$('.box').prev().css('background', 'red'); // 获取上一个
$('.box').prevAll().css('background', 'blue'); // 获取前面所有的
$('.box').prevAll('a').css('background', 'black'); // 获取前面所有的// 3. 下一个兄弟节点
$('.box').next().css('background', 'orange'); // 获取下一个
$('.box').nextAll().css('background', 'green'); // 获取下面所有的// 4. 获取所有的兄弟节点
$('.box').siblings().css('background', 'pink'); // 获取所有的兄弟节点
父节点
console.log($('.box').parent()); // 直接父节点
console.log($('.box').parents()); // 获取所有的父节点
console.log($('.box').parents('ul')); // 可以接收选择器作为接收条件
过滤节点
- find | filter | not
$('ul').find('.box').css('background', 'pink'); //找到ul后 再去找ul中类名为box的元素
$('li').filter('.box').css('background', 'orange'); //找到li 在li中过滤出有类名.box的元素$('li').not('.box').css('background', 'blue'); //找到li 在li中过滤出没有类名.box的元素
取赋值
取赋值一体化: 即取值, 设置值使用同一个方法
取值: 只获取符合选择器条件的第一个元素的值
赋值: 遍历赋值(隐式迭代)
attr
jq对象.attr(‘属性名’) 获取
jq对象.attr(‘属性名’, ‘属性值’) 设置 只适用于单个属性的设置
jq对象.attr({
‘属性名’: 属性值,
‘属性名1’: 属性值1,
}); 适合批量设置多个属性
既可以操作固有属性 也可以操作自定义属性
jq对象.removeAttr(‘属性名’);
console.log($('.box').attr('class'));
console.log($('.box').attr('id'));
console.log($('.box').attr('tag'));$('.box').attr('id', 'a45678');
$('.box').attr('tag', 'weekDay');$('li').attr({'name': 'isLi','age': 20
});$('li').attr('name', '');
$('li').removeAttr('name');
prop
语法跟attr完全一致 使用有限制
\1. 只添加属性名就起作用的时候(固有属性)
\2. 属性值只有true、false checked disabled selected
jq对象.prop(‘属性名’) 获取
jq对象.prop(‘属性名’, ‘属性值’) 设置 只适用于单个属性的设置
jq对象.prop({
‘属性名’: 属性值,
‘属性名1’: 属性值1,
}); 适合批量设置多个属性
可以操作固有属性
jq对象.removeProp(‘属性名’);
console.log($(':checkbox'));
console.log($(':checkbox').prop('checked'));
$(':checkbox').prop('checked', true);
$(':checkbox').prop({'name': 'check','value': '复选框','tag': '123','checked': true
});
console.log($(':checkbox').removeProp('checked'));
链式调用
链式调用原理: jq方法在被调用之后, 将当前方法操作的对象或者操作以后的对象返回回来
操作类名
addClass
添加类名 jq对象.addClass(‘类名1 类名2’)
// $('div').addClass('active');
// $('div').addClass('active bg');
// console.log($('div').addClass('active').addClass('bg'));
removeClass
移除类名: jq对象.removeClass(‘类名 类名1’)
// $('div').removeClass('active bg');
toggleClass
添加移除类名 jq对象.toggleClass(‘类名’)
有类名的话 就移除 如果没有类名 就添加类名
$('div').toggleClass('active');
hasClass
是否具有某个类名: jq对象.hasClass(‘类名’)
有 返回true 如果没有 返回false
console.log($('div').hasClass('active'));
is
是否具有某个选择器或状态: jq对象.is(’.类名’) ()里面写的是选择器
有 返回true 如果没有 返回false
console.log($('div').is('.active'));
操作样式
jq对象.css(‘属性名’) 获取对应的值
jq对象.css(‘属性名’, ‘属性值’) 设置 只设置单个样式属性
jq对象.css({ ‘属性名’: 属性值,‘属性名1’: 属性值1 }) 设置
注意:
属性名: 可以加引号 也可以不加 如果不加的话 - 需要转成驼峰命名法 如果加引号 不需要转驼峰 建议加引号
属性值:
带单位 ‘30px’
数值 300 默认添加px
表达式 ‘+=40’ -= *= /=
console.log($('div').css('width'));
console.log($('div').css('width', 300));
console.log($('div').css({'width': 500,'height': '300px','font-size': '+=20'
}));
$('button').click(function(){$('div').css({'font-size': '+=10',});
})
操作内容
text
text(): 类似于innerText
\1. 取值: jq对象.text(); 获取到所有符合条件的元素的内容
\2. 设置: jq对象.text(‘内容’); 后面的会覆盖前面的 遍历设置
console.log($('div').text());
html
html(): 类似于innerHTML
\1. 取值: jq对象.html(); 获取符合条件的元素的第一个的内容
\2. 设置: jq对象.html(‘内容’); 后面的会覆盖前面的 遍历设置
可以识别标签
console.log($('div').html());
console.log($('div').html('<i>这是我写的新内容</i>'));
$('p').text('<i>这是我写的新内容</i>');
val
val(): 类似于value
\1. 取值: jq对象.val(); 获取符合条件的元素的第一个的内容
\2. 设置: jq对象.val(‘内容’); 后面的会覆盖前面的 遍历设置
console.log($('input').val());
$(':text').val('新内容');console.log($(':radio:checked').val());$(':radio').val(['男']); // value上的值
console.log($(':checkbox').val());$(':checkbox').val(['LOL', 'CS']);
console.log($('#city').val());$('#city').val('nj');
console.log($('#mul').val());
console.log($('#mul').val(['bj', 'nj']));
BOM
三大宽高
宽: width height
可视宽高: clientWidth clientHeight
占位宽高: offsetWidth offsetHeight
滚去的高度: scrollTop
console.log($('div').width(), $('div').height()); // 宽 高 内容
console.log($('div').innerWidth(), $('div').innerHeight()); // 可视宽 可视高
// content + padding
console.log($('div').outerWidth(), $('div').outerHeight()); // 占位宽、高
//content + padding + border
// 有一个参数 布尔值: true--content + padding + border +margin false/不传---content + padding + border
console.log($('div').outerWidth(true), $('div').outerHeight(true));// 取赋值一体化
// jq对象.width(数值)
$('div').width(500);
// jq对象.innerWidth(数值) padding不会改变 变得是具体的内容宽高
$('div').innerWidth(500); // content + padding = 500
// jq对象.outerWidth(数值, 是否包含margin) true--表示包含 false/不传--表示不包含
$('div').outerWidth(500); // content + padding + border = 500
$('div').outerWidth(500, true); // content + padding + border + margin = 500
元素位置
当前元素距离具有定位属性父元素的距离
console.log($('div').offset());
console.log($('div').offset().top);
滚动高度
$(window).scroll(function(){console.log($(this).scrollTop())console.log($(this).scrollLeft())
});
DOM
创建节点
$(‘html片段’)
var li = $('<li>这是一个新标签</i>');
console.log(li);
追加节点
// 1. 追加到父节点的末尾$('ul').append(li); // 父节点.append(子节点)
li.appendTo('ul'); // 子节点.appendTo('父节点选择器')
// 如果是一次性批量的往父元素中添加
li.appendTo('ul:eq(0)');
li.appendTo('ul:eq(1)');
// 分开步骤追加同一个节点到不同的父节点中 会发生物理位移// 2.追加到父节点的开头
// prepend
// prependTo
$('ul').prepend(li); // 父节点.prepend(子节点)
li.prependTo('ul'); // 子节点.prependTo(父节点)//3. 追加某个参考元素之前
// before insertBefore
$('.box').before(li); // 参考节点.before(新节点)
li.insertBefore('.box'); // 新节点.insetBefore('选择器')// 4. 追加到某个参考元素之后
// after insetAfter
$('.box').after(li); // 参考节点.after(新节点)
li.insertAfter('.box'); // 新节点.insertAfter('选择器')
删除节点
detach: 删除当前元素, 返回被删除的元素, 可以保留之前元素的行为
remove: 删除当前元素, 返回被删除的元素, 不能保留之前元素的行为
empty: 清空当前元素(删除当前元素的所有子元素)
$('ul li').click(function(){$(this).css('background', 'red');
});// :eq(0) jq对象.eq(下标) 得到的都是jq对象
$('button:eq(0)').click(function(){var li = $('ul li').eq(0).detach();console.log(li);setTimeout(function(){$('ul').append(li);}, 2000);
});$('button:eq(1)').click(function(){var li = $('ul li').eq(0).remove();console.log(li);setTimeout(function(){$('ul').append(li);}, 2000);
});$('button:eq(2)').click(function(){$('ul').empty();
});
克隆节点
jq对象.clone(布尔值) 返回克隆的节点 页面不存在 需要追加到页面中才能看到
不传/false 表示不克隆行为 true 表示克隆行为
$('ul li').click(function(){console.log(this);
});// jq对象.clone(布尔值) 返回克隆的节点 页面不存在 需要追加到页面中才能看到
// 不传/false 表示不克隆行为 true 表示克隆行为
$('button').click(function(){// var li = $('ul li').eq(0).clone();var li = $('ul li').eq(0).clone(true);$('ul').append(li);
});
替换节点
replaceAll: 新节点.replaceAll(‘选择器’)
replaceWith: $(‘参考节点’).replaceWith(新节点)
var li = $('<p>这是非法嵌套</p>');
// $('li').replaceWith(li);
li.replaceAll('li');
包裹节点
// 链式调用原理: jq方法操作的对象或者是操作以后的对象返回回来
// 1. jq对象.wrap('标签') jq对象的外面包裹一层标签
$('span').wrap('<div></div>');// 2. jq对象.wrapInner('标签'); jq对象的里面包裹一层标签
$('span').wrapInner('<i>12345</i>');// 3. jq对象.wrapAll('标签') jq对象包裹在一个标签中
var b = $('span').wrapAll('<p></p>');// 4. jq对象.unwrap(); jq对象删除以及父节点 删到body截止
var a = $('span').unwrap().unwrap().unwrap().unwrap();
console.log(a, b);
事件对象
/* 事件对象: 事件处理函数的第一个参数
*/
$('div').click(function(ev){console.log(ev); // jQuery.Eventconsole.log(ev.originalEvent); // 原生事件对象console.log(ev.type); // 事件类型console.log(ev.target); // 触发源console.log(ev.delegateTarget); // 事件的绑定对象console.log(ev.which); // 与keyCode基本一致,比keyCode强大 保留鼠标的左中右 123console.log(ev.screenX, ev.screenY); // 鼠标距离屏幕左上角console.log(ev.pageX, ev.pageY); // 鼠标距离页面左上角console.log(ev.offsetX, ev.offsetY); // 鼠标距离div的左上角的距离console.log(ev.ctrlKey, ev.shiftKey, ev.altKey); // 事件触发的时候 对应的键是否被按下console.log(ev.clientX, ev.clientY); // 鼠标相对于屏幕左上角可视区域的距离// 阻止冒泡ev.stopPropagation();// 阻止默认行为ev.preventDefault();// 阻止冒泡 + 阻止默认事件return false;// 一般写在函数的最后
});
$(document).contextmenu(function(){// return false;
});
事件绑定
on
给同一个元素绑定同一事件不同的事件处理函数
function a(){console.log(1); } function b(ev){console.log(ev.type); } // 1. jq对象.on('事件类型', 事件处理函数) $('div').on('click', a); $('div').on('click', b);
给同一元素的不同事件添加同一处理函数
jq对象.on(‘事件类型 事件类型1 事件类型2’, 事件处理函数)
$('div').on('click dblclick mouseenter mouseleave contextmenu', b);
给同一个元素的不同事件添加对应的事件处理函数
jq对象.on({ 属性名: 函数}) 属性名—事件类型
$('div').on({'click': b,'mouseenter': a,'mouseleave': function(){console.log(2);},// 'click': a // 如果属性名相同 后面的覆盖前面的 });
绑定自定义事件
自定义事件
$('div').on('abc', function(){console.log('哈哈哈哈哈'); }); // 手动触发: jq对象.trigger(自定义事件类型) setTimeout(function(){$('div').trigger('abc'); // 手动触发自定义事件 }, 3000);
实现事件委托 元素可以发生在未来
事件委托: jq对象.on(事件类型, 选择器, 事件处理函数)
$('div').on('click', 'p', function(){console.log($(this).text()); }); $('div').append('<p>12345</p>');
命名空间
/* jq对象.on();jquery1.7版本以上 delegate bind live
*/
function a(){console.log(1);
}
function b(ev){console.log(ev.type);
}$('div').on('click.a', function(){console.log(2);
});$('div').on('mouseover.a', function(){console.log(4);
});
off
事件取消: jq对象.off(事件类型, 处理函数的名字);
事件处理函数的名字可写可不写
/* jq对象.on();jquery1.7版本以上 delegate bind live
*/
function a(){console.log(1);
}
function b(ev){console.log(ev.type);
}$('div').on('click.a', function(){console.log(2);
});$('div').on('mouseover.a', function(){console.log(4);
});$('div').on('click', a);
$('div').on('click', b);/* 事件取消: jq对象.off(事件类型, 处理函数的名字);事件处理函数的名字可写可不写
*/
$('div').off('click', a);
$('div').off('click.a');
$('div').off('click');
$('div').on('click', function (){console.log(333);
});// 无法取消事件
// $('div').off('click', function(){// console.log(333);
// });
$('div').off('click');
one
one: on用法完全一致
区别: one一次性事件
$('div').one('click', function(){console.log(1);
});// 用on模拟one事件
$('div').on('click', function(){console.log(1);// 解绑事件$(this).off('click');
});
合成事件
语法: jq对象.hover();
参数是一个函数:滑入滑出事件都触发这个函数
参数是两个函数: 滑入函数 和 滑出函数
$('div').hover(function(ev){console.log(ev.type);
});$('div').hover(function(ev){$(this).html('这是enter');$(this).css('background', 'blue');
}, function(){$(this).html('这是leave');$(this).css('background', 'green');
});
遍历
$.each
$.each(数据, 函数)
函数有两个形参 第一个形参是索引/属性名 第二个形参具体的值
// 1. 遍历集合
$.each($('li'), function(i, v){// console.log(i, v);$(v).css('background', 'red');console.log(this); // 当前的元素console.log(this == v);
});// 2. 遍历数组
var arr = ['a', 'b', 'c', 'd', 'e'];
$.each(arr, function(i, v){console.log(i, v);console.log(this); // 当前的值console.log(v == this);
});// 3. 遍历对象
var obj = {name: '彭于晏',height: 188,age: 18
};
$.each(obj, function(k, v){console.log(k, v);
});
$().each
$().each(函数)
函数有两个形参 第一个形参是索引 第二个形参具体的值
不能遍历对象
// 1. 遍历集合
$('li').each(function (i, v) {// console.log(i, v);console.log(this);
});// 2. 数组
var arr = ['a', '1', 2, 3, 4, 5];
$(arr).each(function(i,v){console.log(i, v);
});
extend
浅拷贝
浅拷贝: 只比较属性名,如果属性名重复,用后面的覆盖前面的
返回拼接数据以后的dest
工具: $.extend(dest, src, src);
var obj = {name: '张艺兴',height: 198,age: 33
};var obj1 = {age: 18,tip: '挣钱'
}// 工具: $.extend(dest, src, src); // 浅拷贝: 只比较属性名,如果属性名重复,用后面的覆盖前面的
// 返回拼接数据以后的dest
var objnew = $.extend(obj, obj1);
console.log(obj);
console.log(objnew);
console.log(objnew == obj);// 会改变dest里数据 可以使用以下方法
$.extend({}, src, src1...)
var objnew1 = $.extend({}, obj, obj1);
console.log(objnew1);
console.log(obj);
深拷贝
深拷贝: $.extend(true, dest, src, src)
原理: 将$.extend的第一个参数设置成true的时候就是深拷贝。
过程: 先看属性名是否重复,不重复就把属性名和属性值拷贝进来,如果属性名重复, 有一个属性值不是对象的时候,就用后面的覆盖前面的,如果都是对象,就会对比子属性, 重复上述过程.
var a = {name: 1,age:{n: 30,l: 18},height: 188,xl: 8
};var b = {name: 2,age: {n: 31,look: 19}
}var o = $.extend(true, {}, a, b);
console.log(o);
动画
show、hide、toggle
show
show: 不传参 没有动画效果
传参 有动画效果
show(speed, easing, fn); w + h + o
speed: 速度 毫秒数 fast slow
easing: 运动曲线 linear swing
fn: 回调函数
$('button').eq(0).click(function(){// $('div').eq(0).show(2000);// $('div').eq(0).show('slow');$('div').eq(0).show(5000, 'linear', function(){console.log(1);});$('div').eq(1).show(5000, 'swing', function(){console.log(2);}); });
hide
hide: 不传参 没有动画效果
传参 有动画效果
hide(speed, easing, fn); w + h + o
speed: 速度 毫秒数 fast slow
easing: 运动曲线 linear swing
fn: 回调函数
$('button').eq(1).click(function(){$('div').eq(0).hide(5000, 'linear', function(){console.log(1);});$('div').eq(1).hide(5000, 'swing', function(){console.log(2);}); });
toggle
toggle有就隐藏 没有就显示
toggle: 不传参 没有动画效果
传参 有动画效果
toggle(speed, easing, fn); w + h + o
speed: 速度 毫秒数 fast slow
easing: 运动曲线 linear swing
fn: 回调函数
$('button').eq(2).click(function(){$('div').eq(0).toggle(5000, 'linear', function(){console.log(1);});$('div').eq(1).toggle(5000, 'swing', function(){console.log(2);}); });
slide
slide: 改变元素的高
slideDown: 显示
slideUp: 收起
slideToggle: 有就收起 没有就展开
slideDown
slideDown: 不传参 有动画效果
传参 有动画效果
slideDown(speed, easing, fn);
speed: 速度 毫秒数 fast slow
easing: 运动曲线 linear swing
fn: 回调函数
$('button').eq(0).click(function(){$('div').eq(0).slideDown(5000, 'linear');$('div').eq(1).slideDown(5000, 'swing'); });
slideUp
slideUp: 不传参 有动画效果
传参 有动画效果
slideUp(speed, easing, fn);
speed: 速度 毫秒数 fast slow
easing: 运动曲线 linear swing
fn: 回调函数
$('button').eq(1).click(function(){$('div').eq(0).slideUp(5000, 'linear');$('div').eq(1).slideUp(5000, 'swing'); });
slideToggle
slideToggle: 不传参 有动画效果
传参 有动画效果
slideToggle(speed, easing, fn);
speed: 速度 毫秒数 fast slow
easing: 运动曲线 linear swing
fn: 回调函数
$('button').eq(2).click(function(){$('div').eq(0).slideToggle(5000, 'linear');$('div').eq(1).slideToggle(5000, 'swing'); });
fade
fade: 改变元素的透明度
fadeIn: 进入
fadeOut: 隐藏
fadeToggle: 有就隐藏没有就显示
fadeTo: 变道某个透明度
fadeIn
fade(speed, easing, fn)
没有参数的时候 也有动画
$('button').eq(0).click(function(){$('div').eq(0).fadeIn(5000, 'linear');$('div').eq(1).fadeIn(5000, 'swing'); });
fadeOut
$('button').eq(1).click(function(){$('div').eq(0).fadeOut(5000, 'linear');$('div').eq(1).fadeOut(5000, 'swing'); });
fadeToggle
$('button').eq(2).click(function(){$('div').eq(0).fadeToggle(5000, 'linear');$('div').eq(1).fadeToggle(5000, 'swing'); });
fadeTo
fadeTo(speed, to 透明度, easing, fn)
$('button').eq(3).click(function(){$('div').eq(0).fadeTo(5000, .5, 'linear');$('div').eq(1).fadeTo(5000, .5, 'swing'); });
animate
第一种
第一种: jq对象.animate(动画参数, speed, easing, fn);
动画参数: 对象 {‘属性’: 属性值, ‘属性’: 属性值}
属性值: 数字 带单位字符 表达式 show、hide、toggle
speed: 运动速度 毫秒数 默认值 400ms
easing: 运动曲线 linear swing
fn: 回调函数
$('button').eq(0).click(function(){$('div').animate({// 'left': '+=100',// 'left': '400px','width': 'hide','top': 400}, 2000, 'swing', function(){console.log(1);});
});
第二种
animate(动画参数, 动画配置属性)
动画配置属性可选: {}
duration: 运动时长 ms
easing: 运动方式 linear swing
step: 每一步动画触发的回调函数
complete: 动画执行结束以后的回调函数
queue: 是否队列 如果设置false 无论动画写在什么位置 在第一时间触发
$('button').eq(1).click(function () {$('div').animate({'width': 400,'height': 400}, {'duration': 2000,'easing': 'linear','step': function () { console.log(1) },'complete': function () { console.log('完成') },'queue': true}).animate({'top': '400px','left': 400}, {'duration': 2000,'queue': false});
});
停止动画
stop
.stop(clearQueue, gotoEnd)
clearQueue: 是否清除后续队列 true–表示清除 false—不清除
gotoEnd: 是否到达结束值 true—直接到结束值 false—保留在当前值
$('button').eq(1).click(function(){// $('div').stop();// $('div').stop(true); // 表示要清除后续队列 // $('div').stop(true, true); // 表示要清除后续队列 到达目标值// $('div').stop(false, true); // 表示不清除后续队列 到达目标值
});
finish
.finish() 结束所有动画 并且到目标值
$('button').eq(1).click(function(){$('div').finish();
});
延迟动画
.delay(时间) 时间ms
$('button').eq(0).click(function(){$('div').animate({width: 1000,height: 1000}, 10000).delay(5000).animate({left: 1000,top: 1000}, 10000);
});
queue
问题: css不是动画 不会进入动画的队列 不会等待前面的动画执行结束以后在执行
css在动画开始的一瞬间就执行完成
手动加入队列: jq对象.queue(function(){ // 要执行的效果 })
手动以后的问题: queue后面所有的动画都不在执行
$('div').slideUp(1000).slideDown(1000)// .css('background', 'yellow').queue(function(next){$(this).css('background', 'yellow');// next是一个函数 next();}).slideUp(1000).slideDown(1000);
.queue可以理解成不听话的, 帮助其他的效果和代码的插入, 后续的动画不满意此操作, 需要将后续的动画由专一的函数进行服务
AJAX
优点:
\1. 用户等待时间短
\2. 交互
\3. 对服务器的压力比较小
\4. 带宽要求不好
缺点:
\1. 对ajax对于搜索引擎支持
\2. 破坏前进、后退按钮
ajax:
底层: $.ajax
高级: $.get $.post
$.ajax
$.ajax({
url: 请求地址, 必传项
type: 请求方式, get post
data: 传输的数据 a=1&b=2 对象
success: 成功的回调函数, 200 304 有形参, 这个形参就是返回回来的数据
error: 错误的回调函数 有形参 返回创建的ajax对象
complete: 请求完成以后的回调函数 有形参 返回创建的ajax对象
timeout: 超时时间 毫秒ms
datatype: 设置请求返回的期望数据的类型 text html script json … jsonp(不是期望数据类型,一个标志)
cache: 是否使用缓存(当页面地址已经请求过并且存下来数据)
});
$.ajax({url: './banner.json',// url: './banner1.json',type: 'get',// data: 'a=1&b=2'data: {a: 22, b: 333},success: function(res){console.log(res);},error: function(err){console.log('错误报错', err);},complete: function(com){console.log('请求完成', com);},// timeout: 1// dataType: 'text'dataType: 'json'
});
$.get
语法: $.get(url, [data], [callback])
$.get('./banner.json', 'a=1',function(res){console.log(res);
});
$.post
语法: $.post(url, [data], [callback])
$.post('./banner.json', 'a=1',function(res){console.log(res);
});
get和post的区别
get参数通过url传递,post放在request body中。
get请求在url中传递的参数是有长度限制的,而post没有。
get比post更不安全,因为参数直接暴露在url中,所以不能用来传递敏感信息。
get请求只能进行url编码,而post支持多种编码方式
get请求会浏览器主动cache,请求参数会被完整保留在浏览历史记录里,而 post 中的参数不会被保留
GET产生一个TCP数据包;POST产生两个TCP数据包
jsonp
错误: 跨域问题
Access to XMLHttpRequest at ‘https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1’ from origin ‘http://127.0.0.1:5500’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
错误来源: 由于浏览器对js的同源策略的限制
同源策略: 同一个域名同一个端口同一种协议
非同源:
不同协议
同一个地址,不同的端口
不同的地址
jsonp: json with padding
var url = 'https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1';
$.ajax({url: url,success: function(res){console.log(res);},error: function(err){console.log(err);},dataType: 'jsonp', // 告知jq 用jsonp的方式进行数据请求
});
注意事项: jsonp只支持get请求 不支持post请求
原理:
动态的往页面中添加script标签, 将src设置成要访问的地址
var url = 'https://p.3.cn/prices/mgets?skuIds=J_5089253&type=1&callback=a';// 点击按钮的时候 发送数据请求
$('button').click(function(){var sr = $('<script src="' + url + '"><\/script>');$('body').append(sr);
});
【JQuery】知识点总结相关推荐
- jQuery知识点笔记-常用方法
jQuery知识点范围:常用方法 核心:写得少做的多,解决浏览器的兼容性问题: DOM对象和jQuery的区别: 将jQuery转化为DOM的两种方法: $(document).ready的作用是等( ...
- 前端入门jquery知识点
每日一句: 当你成功了,怎么说都是对的,因为大家看见你台上的风光.头顶的光环.当你没成功的时候,怎么解释都是错的,因为人们相信眼见为实. 所以,请埋头苦干吧,别把时间浪费在解释上,没有委屈就没有成长, ...
- Javascript与Jquery知识点
js简介 1 用途:制作页面交互效果 如 轮播图的切换.Tab栏切换.地图.表单验证等 2 历史背景 全称 javascript 与Java语言没关系 javascr ...
- 【jQuery】jQuery知识点梳理(持续更新)
jQuery是什么: 由图标可知: j:JavaScript query:查询 所以可以分析得jQuery是一个JavaScript库,而且主要用来查询. 注意,下面的一行小字,write less ...
- 锋利的jquery 知识点总结
由于看的是锋利的jQuery(第二版)部分内容可能没更新, 推荐看jquery API中文文档 第一个jquery程序 // 网页中所有DOM结构绘制完成后就执行, 可能DOM元素关联的东西并没有加载 ...
- JQuery知识点汇总
attribute: $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test ...
- jQuery知识点今日总结
empty()方法从被选元素移除所有内容,包括所有文本和子节点. remove() 方法移除被选元素,包括所有文本和子节点. clone() 方法生成被选元素的副本,包含子节点.文本和属性 一个参数: ...
- JQuery知识点整理
本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助 ...
- jQuery知识点大全
纯手打... 要知道,jquery是一个类数组对象,它本身也是javascript,它是对javascript进行了封装. 1.<script src="js/jquery.min.j ...
- JavaScript/Ajax/JQuery知识点(BOM/DOM/ScriptEngine/JS引擎),JSCore
捋顺JavaScript底层知识,重点讲解如原型.作用域.执行上下文.变量对象.this.闭包.按值传递.call.apply.bind.new.继承等难点概念?? JS中的继承?JS的原型模式, ...
最新文章
- 每日一皮:学会说话很重要...
- linux软中断优先级,Linux中软中断机制分析
- Django——restframework(serializers序列化工具)
- kali-linux虚拟机与主机共享文件
- spring mvc学习(4):第一个spring mvc项目
- LeetCode 765. 情侣牵手(贪心)
- SQL工作笔记-达梦存储过程及时间触发器实现自动生成数据
- Javascript实现导出word - jquery jquery.wordexport.js 实现导出word
- python中的私有方法_Python: 内置私有方法
- 最近任务 react文章列表
- 提高 Mac OS X 速度的 52 个方法
- crm系统是什么很棒ec实力_哪个CRM系统好
- freenom域名申请教程
- Android webView 无法加载微信公众号图片
- 安卓动态调试七种武器之离别钩 – Hooking(上)
- va_buffersharing example
- HBGGP的工程建立过程
- android 取消蓝牙配对框 实现自动配对,Android 取消蓝牙配对框实现自动配对功能...
- 第五章. 可视化数据分析图表—常用图表的绘制2—直方图,饼形图
- echarts的常用案例