前端基础 - jquery快速入门

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 = ${(}^{\prime }div:eq(0{)}^{\prime });//第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 的优化方法

1. 优先使用 id 选择器,因为 id 选择器是最快的,如果涉及到子元素选择,也建议从最近的 id 开始选择,比如:$(“#div1input”),这样就可以快速从 id 为 div1 的盒子内部查找 input
2. 在 class 前面使用 tag 标签,jquery 中第二快的选择器是标签选择器,我们可以使用 tagname 来限制类选择器的范围,如:$(“input.on”)
3. 将 jquery 对象缓存起来,因为每一次$(div)都会 new 一个新的对象
4. 尽量减少或压缩 dom 操作的次数,特别注意是 for 循环的内部
5. 合理使用冒泡,没有必要为每个元素都绑定事件,只需要向父元素绑定事件然后使用 e.target 去捕捉触发的子元素即可
6. jquery 使用的是$(document).ready, 它可以实现在页面渲染时,其他元素还没下载完成就立即执行,如果你发现页面一 直是载入中的状态,很有可能是$(document).ready 函数引起的,我们可以通过将 jquery函数绑定到$(window).load事件的方法 来减少页面载入时 cpu 使用率,他会在所有 html 被下载后才执行
7. 给选择器一个上下文,jquery 中的选择器有第二个参数,可以限制选择器在 dom中的搜索范围如:$(“div”,“#context”)
8. 尽量不要使用 live()方法,live()可以给动态添加的 dom元素添加事件,但他会重新去使用选择器获取所有满足条件的 元素然后重新绑定,因此最好是自己手动给新添加的元素绑定事件