前端基础 - 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 = ( ′ 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显示切换 只能让透明度变成01, 最终还会显示或隐藏
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元素添加事件,但他会重新去使用选择器获取所有满足条件的 元素然后重新绑定,因此最好是自己手动给新添加的元素绑定事件
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值