守得云开见月明 首页 关于

jQuery 学习笔记

2018-06-02 / Juexe / Web

简要介绍 jquery 的版本、和原生 Js 在实际开发中的区别;jQuery 核心函数和静态方法;属性控制的相关方法;事件相关方法;动画相关方法;节点操作相关等…

一、初识 jQuery

1. jQuery 的版本

jQuery 目前有三个版本号,主要区别是 1.x 版本兼容低版本 IE678 浏览器。

在开发时建议使用 uncompress 版本便于学习源码,而线上使用 compress 版本。

注:没有特殊需求使用经典的 1.x 版本即可。

2. jQuery 和原生 js 的加载模式区别

1)代码上的区别

// 原生 js
window.onload = function (ev) {
    // do sth.
}

// jQuery
$(document).ready(function(){
    // do sth.
});

2)加载顺序

  • onload 会等页面加载完成,并且图片加载完成,最后执行
  • ready 会等页面加载完成,就开始执行

### 3)函数覆盖

  • 原生多个 onload 会被最后一个覆盖
  • jQuery 多个 ready 可按顺序执行

3. jQuery 入口函数其他写法

// 第一种
$(document).ready(function(){
    // do sth.
});
// 第二种
jQuery(document).ready(function(){
    // do sth.
});
// 第三种(推荐!)
$(function(){
    // do sth.
});
// 第四种
jQuery(function(){
    // do sth.
});

4. jQuery 的冲突问题

关于 $ 的冲突,两种解决办法:

1. 释放 $ 符号
jQuery.noConflict();
jQuery(function(){
    // do sth.
});
2. 自定义符号
var jj = jQuery.noConflict();
jj(function(){
    // do sth.
});

二、jQuery 核心函数和工具方法

1. jQuery 的核心函数

核心函数名 $(), 等效于 jQuery()
核心函数可以接收 3 类参数

// 1. 函数参数
$(function(){}); // 立即执行该函数

// 2. 字符串参数,返回 jQuery 对象
$('.box'); // 包含找到的元素

$('<p>我是段落</p>'); // 包含创建的元素

// 3. DOM元素参数,返回 jQuery 对象
var dom = document.getElementById('id');
$(dom); // 包含该元素

2. jQuery 对象

jQuery 对象是一个伪数组;
伪数组有length属性,并包含0到length个对象。

3. 静态方法和实例方法

// 静态方法直接添加给类,实例方法添加给对象

// 1定义一个类
function AClass(){
    
}
// 2添加静态方法
AClass.staticShow = function(){
    alert("static show");
}
// 调用静态方法
AClass.staticShow();

// 3添加实例方法
AClass.prototype.instanceShow = function(){
    alert("instance show");
}
// 调用实例方法
var a = new AClass();
a.instaceShow();

4. 数组遍历

原生 Array.forEach() 无法遍历伪数组,也就是说 obj 对象没有forEach方法。

jQuery.each() 静态方法可以遍历伪数组。

var arr = [1,3,5,7]; // 数组
var obj = {0:1, 1:3, 2:5, 3:7, length:4} // 伪数组

arr.forEach(function(idx, val){
    console.log(idx, val);
});

$.each(obj, function(idx, val){
    console.log(idx, val);
});

同理 map 方法雷同,map()用于处理源数组并返回一个新的数组

5. 其他静态方法

String $.trim(String str); // 将str中的空格去除并返回

Bool $.isArray(Object obj); // 判断 obj 是否真数组,伪数组为假

Bool $.isFunction(Object obj) // 判断 obj 是否一个函数

//注意 $.isFunction(jQuery) 返回真,因为 jQuery 本质上是一个匿名函数
(function(window){
    // do sth.
}) (window);

$.holdReady(true); // 用以暂停 $(document).ready() 的执行,直到 $.holdReady(false) 为止。 

三、jQuery 属性相关方法

内容很多,查 jQuery 手册,部分常用内容如下:

  • 选择器。各种参数的运用(empty/has/parent等)
  • 属性。attr() 和 prop() 方法很相像,官方建议在操作具有true/false值的属性时使用 prop(),其他使用 attr(),如 cehcked/ selected/ disabled等
  • 类属性。addClass()、removeClass() 和 toggleClass() 的使用
  • 文本。html()即原生的innerHTML();text()即原生的innerText() ;val()用来操作input元素的value属性
  • 样式。css({width:"100px"})
  • 位置和属性。width()获取或设置元素宽度;offset()获取或设置元素相对窗口的位置;position()获取窗口相对父元素的位置
  • 滚动条。scrollTop()获取或设置滚动条偏移位。

四、jQuery 事件相关方法

1. 事件绑定和解绑,事件冒泡,自动触发

两种方式绑定事件。同时注册多个事件不会冲突。

事件有很多,查阅手册。

// 1 obj.eventName(fn); (推荐)
$('button').click(function(){
    // do sth.
    return false; // 阻止事件冒泡到父节点!!
});
// 2 obj.on(eventName, fn);
$('button').on('click',function(){
    // do sth.
    return false; // 阻止事件冒泡到父节点!!
});

事件解绑

$('button').off(); // 解绑所有事件
$('button').off('click'); // 解绑click事件
$('button').off('click', fn); // 解绑click事件的指定回调

事件自动触发

/*
  1. trigger() 会触发事件冒泡和默认行为
  2. triggerHandler() 不会触发事件冒泡和默认行为
*/
$('button').trigger('click');
$('button').triggerHandler('click');

自定义事件

$(button).on('myClick', function(){
    // do sth.
});
$(button).triggerHandler('myClick');

2. 事件委托

// 用这种方法,新增的li无法触发事件
$('ul>li').click(function(){
    // do sth.
});

// 用委托解决这个问题
$('ul').delegate('li', 'click', function(){
    console.log($(this).html());
});

五、jQuery 动效相关

建议在执行动画之前先执行 stop() 命令

  • show()/hide()/toggle()
  • slideUp()/slideDown()/slideToggle()
  • fadeIn()/fadeOut()/fadeToggle()
  • 动画队列 $(div).stop().slideUp().slideDown()
  • 自定义动画 animate()

六、jQuery 节点操作相关

1. 添加节点

  • 内部插入:append()和prepend()
  • 外部插入:after()和before()

2. 删除节点

  • 删除指定元素 remove()
  • 删除指定元素内容 empty()

3. 替换节点

  • 被替换元素.replaceWith(新元素)
  • 新元素.replaceAll(被替换元素)

4. 复制节点

clone(false) 浅复制,clone(true) 深复制

深复制会将关联事件一起复制

  • var n = $(node).clone(true)

七、jQuery 的原理

待续。。

原视频地址 https://edu.csdn.net/course/detail/8223

 

(完)

添加评论

Powered by Typecho and Theme by Juexe © 2018 Juexe