jQuery

coolke
123 阅读2分钟

介绍

jQuery是目前使用最广泛的javascript函数库。其基本设计思想和主要用法，就是"选择某个网页元素，然后对其进行某种操作"。

  • window.jQuery() 是我们提供的全局函数
    • jQuery(选择器) 用于获取对应的元素，但它却不返回这些元素
    • 相反，它返回一个对象，称为 jQuery 构造出来的对象，这个对象可以操作对应的元素
  • jQuery 是构造函数
    • jQuery 函数确实构造出了一个对象
    • jQuery 不需要写 new jQuery() 就能构造一个对象，是一个不需要加 new 的构造函数，不是常规意义上的构造函数
  • jQuery 对象代指 jQuery 函数构造出来的对象，不是说 「jQuery 这个对象」
    • 比如：
    • Object 是个函数；Object 对象表示 Object 构造出的对象
    • Array 是个函数；Array 对象/数组对象表示 Array 构造出来的对象
    • Function 是个函数；Function 对象/函数对象表示 Function 构造出来的对象

jquery封装：

代码链接：(coolkechang/-jQuery: 效果链接 (github.com))

jQuery命名风格

jQuery 对象前面加上 $

比如：

const $div2 = window.jquery('.test')

为什么会有特别的命名？

举个例子我们要获取一个div

const div1 = document.querySelector('.test')

const div2 = $('.test')

上述两个 div 不一样，

  • 第一个获取到第一个类名为test的div
  • 第二个获取到操作类名为 test 的 div 对应的 api

如何判断一个 div 是 DOM 对象还是 jQuery 对象？

  • DOM 对象只能使用 DOM 的 api （querySelector / appendChild / ...）
  • jQuery 对象只能使用 jQuery 的 api （find / each / ...）

给一个约定：jQuery 对象前面加上 $ ，这样命名可以清楚判断。

jQuery 的 api

增

$('<div><span>1</span></div>')      创建 div
.appendTo(document.body)            插入到 body 中

删

$div.remove()
$div.empty()

改

$div.text(?)                    读写文本内容
$div.html(?)                    读写 HTML 内容
$div.attr('title', ?)           读写属性
$div.css({color: 'red'})        读写 style
$div.addClass('blue')
$div.on('click', fn) 
$div.off('click', fn)

div 大部分时候对应了多个 div 元素；要默认 div 是一个数组，每个操作都要遍历

查

$('#xxx')                     返回值并不是元素，而是一个 api 对象
$('#xxx').find('.red')        查找 #xxx 里的 .red 元素
$('#xxx').parent()            获取爸爸
$('#xxx').children()          获取儿子
$('#xxx').siblings()          获取兄弟
$('#xxx').index()             获取排行老几（从0开始）
$('#xxx').next()              获取弟弟
$('#xxx').prev()              获取哥哥
$('.red').each(fn)            遍历并对每个元素执行 fn

jquery的设计模式

链式风格

jquery可以进行链式操作，如下：

jQuery('.test1').find('.child').addClass('red')；

（找到test1元素并在其子元素child上添加'red'类）

jQuery还提供 end 方法，使得结果集可以后退一步：

jQuery('.test1').find('.child').addClass('red').end().addClass('yellow')；

（找到test1元素并在其子元素child上添加'red'类；返回test1元素并为其添加'yellow'类）

getter, setter设计模式

jQuery的设计思想其中之一是可以使用同一个函数，来完成取值（getter）和赋值（setter）。到底是取值还是赋值，由函数的参数决定，这也是函数的重载。

$('h1').html();          html()没有参数，表示取出h1的值

$('h1').html('Hello');   html()有参数Hello，表示对h1进行赋值

运用函数重载

  • 运用函数重载，一个函数可以同时处理多种不同的参数；
$('.red')
$('<div><span>哈哈哈哈<span></div>')
$(元素数组)
  • 通过函数重载，写不同的if else判断情况
window.jQuery = function(selectorOrArrayOrTemplate){
  let elements
  if(typeof selectorOrArrayOrTemplate === 'string'){
    if(selectorOrArrayOrTemplate.trim().indexOf('<') === 0){
      // 传进来的字符串是HTML标签，例如$('<div><span>哈哈哈哈<span></div>')，
      // 所以我们需要创建对应的HTML标签，然后返回
      elements=[createElement(selectorOrArrayOrTemplate)]
    }else{
      // 查找 div 例如 $('.red')
      elements = document.querySelectorAll(selectorOrArrayOrTemplate)
    }
  }else if(selectorOrArrayOrTemplate instanceof Array){
    // 传进来的是节点数组，那么就赋值给elements, 开始下面的处理
    elements = selectorOrArrayOrTemplate
  }

  function createElement(string){
    const container = document.createElement("template");
    container.innerHTML = string.trim();
    return container.content.firstChild;
  }
  
  // api可以操作elements, this就是api, api就是this
  let api = {
    addClass(className){},
    find(selector){},
    each(){}  
  }
  
  return api

实现jQuery

  • 补全下面jQuery代码，使得$('#test').find('.child').addClass('red')这句话成功执行

HTML

<div id=test>
  <div class=child>1</div>
  <div class=child>2</div>
  <div class=child>3</div>
</div>

JS

window.jQuery = function(请补全){
  请补全
  return {
    addClass(){
        请补全
    },
    find(){
        请补全
    }
  }
}

window.$ = window.jQuery

$('#test').find('.child').addClass('red') // 请确保这句话成功执行

答案链接

参考资料：

  1. 饥人谷前端课程
  2. 阮一峰《jQuery设计思想》
avatar
文章
阅读
粉丝