1、this指向
this 执行调用该函数的那个对象,构造函数中的 this 指向构造函数的实例,在 jQuery 的事件处理函数内部,需要写成 $(this)
const $div = $('div');
$div.on('click', function () {
$(this).css('width', '+=10px');
});
2、关系查找
- 父级 .parent() 祖先级 .parents()
- 子级 .children() : $li03.children(‘p’)); //子级中的p元素
- 兄级 .siblings(): $li03.siblings(‘.li04’));同级中的li04元素
- 查找第几个 .eq(索引值):元素选择 const $div0 = ( ′ d i v : e q ( 0 ) ′ ) ; / / 第 1 个元素 c o n s o l e . l o g ( ('div:eq(0)'); //第1个元素 console.log( (′div:eq(0)′);//第1个元素console.log(div0);$li.eq(-1))//最后一个元素
- 后代 .find()
3、类名操作
- 添加类 .addClass(): $div.addClass(‘five six’);
- 移除类 .removeClass():$div.removeClass(‘two three’);
- 切换类 .toggleClass():$div.toggleClass(‘aaaaaa’);
- 是否有类 .hasClass():$div.hasClass(‘one’);
//排他
const $input = $('input');
$input.on('click', function () {
$(this).addClass('active').siblings().removeClass('active');
});
// 开关思想切换类
$rboxBtn.on('click', function () {
$(this).parent().toggleClass('active');
});
4、显示隐藏切换
.show()显示可传入毫秒值产生动画效果JQ对象,可以链式编程
.hide()隐藏同上同上
.toggle()切换同上同上
slideDown 向下/ slideUp向上 / slideToggle切换上下
fadeIn 显示/ fadeOut 隐藏/ fadeToggle显示切换 只能让透明度变成0或1, 最终还会显示或隐藏
fadeTo 只能用于设置透明度,可以设置成任意0~1之间透明度数值
fadeTo(毫秒值时间, 透明度)
stop()停止动画
delay动画延时写在动画的前面
$div.eq(0).delay(200).animate({
width: 1000
});
5、animate动画
.animate(params,[speed],[easing],[fn])四个参数
params 要做动画效果的属性集合(对象)
speed 速度,传入时间,控制动画的快慢
easing 动画运动特点,如匀速运动 'linear'
fn 动画回调函数,动画结束后自动执行
div {
width: 100px;
height: 100px;
}
$input.on('click', function () {
$div.animate({
width: 300,
height: 300,
});
});
$div.eq(3).animate({
width: 1000
}, 5000, 'linear', function () {
alert('动画结束了');
});
6、节点处理
- 子节点后添加 .append()
- 子节点前添加 .prepend()
- 同级节点后添加 .after()
- 同级节点前添加 .before()
- 删除节点.remove()
- 只清空节点内容.empty()
- 替换节点 .replaceWith()
- 克隆节点 .clone() 传入 布尔值 true 或 false
// 需求:点击 span 替换成 input
$span.on('click', function () {
$(this).replaceWith(`<input type="text" value="${ $(this).text() }" />`)
});
//克隆
$a.on('click', function () {
const $newLi = $(this).parent().clone(true);
$('ol').append($newLi);
});
7、封装JQ插件
(function ($) {
// 获取或设置本地存储
$.storage = function (key, value) {
// 功能1:获取功能,如果 value 为 undefined 就是获取
if (value === undefined) {
return JSON.parse(localStorage.getItem(key)) || [];
} else {
// 功能2:设置功能,传递两个参数就是设置本地存储
localStorage.setItem(key, JSON.stringify(value));
}
}
// 删除一条或清空本地存储
$.removeStorage = function (key) {
// 如果是字符串,根据键名称删除一条
if (typeof key === 'string') {
localStorage.removeItem(key);
} else if (key === true) {
// 如果是 布尔值 true ,清空全部
localStorage.clear();
}
}
// 添加实例方法:$.fn.方法名 = function(){ }
// 调用实例方法:$('选择器').方法名()
// 实例方法,这类方法主要是用于操作 DOM 元素的
$.fn.bgc = function (color) {
if (typeof color === 'string') {
// console.log(this, color);
// 内部的 this 指向调用该方法的 JQ 实例对象
return this.css('backgroundColor', color); // 设置返回JQ对象,链式编程
} else if (color === undefined) {
return this.css('backgroundColor'); // 获取返回颜色
}
}
})(jQuery);
8、jquery.extend 与 jquery.fn.extend 的区别
当两者都有两个以上的参数时,效果是一样的,既把出第一个外的所有参数对象遍历到第一个参数内部. 当只有一个参数时,jquery.extend 是将参数添加在 jquery 的构造函数对象中,而 jquery.fn.extend 是将参数添加在 jquery.prototype 中.
9、针对 jQuery 的优化方法
- 优先使用 id 选择器,因为 id 选择器是最快的,如果涉及到子元素选择,也建议从最近的 id 开始选择,比如:$(“#div1input”),这样就可以快速从 id 为 div1 的盒子内部查找 input
- 在 class 前面使用 tag 标签,jquery 中第二快的选择器是标签选择器,我们可以使用 tagname 来限制类选择器的范围,如:$(“input.on”)
- 将 jquery 对象缓存起来,因为每一次$(div)都会 new 一个新的对象
- 尽量减少或压缩 dom 操作的次数,特别注意是 for 循环的内部
- 合理使用冒泡,没有必要为每个元素都绑定事件,只需要向父元素绑定事件然后使用 e.target 去捕捉触发的子元素即可
- jquery 使用的是
$(document).ready
, 它可以实现在页面渲染时,其他元素还没下载完成就立即执行,如果你发现页面一 直是载入中的状态,很有可能是$(document).ready
函数引起的,我们可以通过将 jquery函数绑定到$(window).load
事件的方法 来减少页面载入时 cpu 使用率,他会在所有 html 被下载后才执行 - 给选择器一个上下文,jquery 中的选择器有第二个参数,可以限制选择器在 dom中的搜索范围如:$(“div”,“#context”)
- 尽量不要使用 live()方法,live()可以给动态添加的 dom元素添加事件,但他会重新去使用选择器获取所有满足条件的 元素然后重新绑定,因此最好是自己手动给新添加的元素绑定事件