JavaScript 【01】初探jQuery

函数库—— 特定种类的API.

1、封装函数 ——

写一个函数,重复封装函数,实现一个DOM API 没有提供的功能

    //html骨架
    
  • 选项1
  • 选项2
  • 选项3
  • 选项4
  • 选项5
//第一个函数 - 获取所有子元素节点的API window.Node2 = function(node){ return { getSiblings : function(){ var allChildren =node.parentNode.children //children是获取所有元素节点 var array = { //新建一个空为数组 length:0 } for(let i=0;i node.classList.add(value)) } } } var node2 = Node2(item3) node2.getSiblings() node2.addClass(['a','b','c'])

2、命名空间 ——

一个DOM下面的存放封装的函数的对象

    var dom = { }
    dom.getSiblings(node)
    dom.addClass(node{a:true;b:false})

上面代码块修改:node放到前面
* 方法一:扩展node接口,直接在node.prototype上面添加函数
* 方法二:新的接口,BetterNode ,具体实现方法看下面代码块

    //「无侵入方法」
    function Node2(node){
       return {
           element: node,
           getSiblings: function(){

           },
           addClass: function(){

           }
       }
   }
   let node =document.getElementById('x')
   let node2 = Node2(node)
   node2.getSiblings()
   node2.addClass()

函数x调用对象的两种方法

  • obj.x //点运算符
  • obj['x'] //方括号运算符
    指定this的分类:
  • 立即调用函数时用到了call属性,就叫做显示指定this
  • 立即调用函数时没有用到this,就叫做隐士指定this
    item3.getSiblings.call(item3) //这里的this就是item3
    item3.addClass.call(item3,['a','b','c']) //这里的this也是item3
    this就是对象,argumentsjiu

3、再把函数名字改成jQuery

jQuery本质上是创建一个构造函数,这个函数的参数可能是节点,然后返回一个方法对这个参数进行操作,从而创建DOM API 没有提供特定功能函数。

  window.jQuery = function(nodeOrSelector){
    let nodes = {}
    if(typeof nodeOrSelector === 'string'){
      let temp
      temp = document.querySelectorAll(nodeOrSelector)
      for(let i=0;i {
       for(let k=0;k li') 
node2.addClass(['blue'])
node2.text('qinglin')

4、总结

jQuery文档就是API文档;
window.就是jQuery()函数的简写

1、页面中引用jQuery的方法:只要求引用路径在前,代码块在后就可以,可以放到head或body中
                    //方法一:到官网,src指向jQuery.js或jQuery.min.js
                  
                  
                    //方法二:搜索cdnjs > jQuery,copy路径
                  
                  
2、官网提供的jQuery提供的下载地址区别:
      https://code.jquery.com/jquery-3.4.1.min.js //压缩富文本链接混淆版本(也叫压缩版),变量少,节省带宽和提高生产性能,用于生产环境的jQuery。
      https://code.jquery.com/jquery-3.4.1.js //未压缩富文本链接,未混淆版本,适合开发和调试使用
      https://code.jquery.com/jquery-3.4.1.min.map  //映射文件,在用户运行jQuery不需要映射文件,他只是改善了开发人员的调试器体验,就是调试用的文件。
3、jQuery获取页面中带有id选择器的节点
    $('#xxx')  或 jQuery('#xxx') //xxx就是idName 
4、





请写出 $('li') 的结构。

  • $('li') 是一个对象,


    JavaScript 【01】初探jQuery_第1张图片
    image.png
  • $('li')的原型:


    JavaScript 【01】初探jQuery_第2张图片
    image.png
  • 总结:$('li') 是一个对象,它的 key 有 length,它的原型(共享属性)为 jQuery.prototype,jQuery.prototype 的 key 有 addClass、removeClass、text、html 和 on 等。
5、【面试常见题目】

题目

                                      
var div = document.getElementById('x') var $div = $('#x')
  • 请说出 div 和 $div 之间的联系是:
    1. div一样
    2. div的第一项就是div
  • 请说出 div 和 $div 之间的区别是:
    1. div 的属性和方法有 childNodes firstChid nodeType 等
    2. $div 的 属性和方法有 addClass removeClass toggleClass 等

5、字写简版jQuery实例

     window.jQuery =  function(xx){
        var  nodes = {}                            //新建一个伪数组
       
       //分析接收到的节点或选择器
      if (typeof xx === 'string') {     
        let temp
        temp = document.querySelectorAll(xx)
        for (let i = 0; i < temp.length; i++) {
          nodes[i] = temp[i]
        }
        nodes.length = temp.length
      } else if (xx instanceof Node) {
        nodes = {                               //以哈希形式返回
          0: xx,
          length: 1
        }
      }

      nodes.addClass = function (classes) {
        classes.forEach((value) => {
          for (let k = 0; k < nodes.length; k++) {
            nodes[k].classList.add(value)
          }
        })
      }


      nodes.text = function (text) {
        if (text === undefined) {
          var texts = []
          for (let i = 0; i < nodes.length; i++) {
            texts.push(nodes[i].textContent)
          }
          return texts
        } else {
          for (let i = 0; i < nodes.length; i++) {
            nodes[i].textContent = text
          }
        }
      }


      return nodes
}
window.$ = jQuery
var $div = $('div')
$div.addClass('red') // 可将所有 div 的 class 添加一个 red
$div.setText('hi') // 可将所有 div 的 textContent 变为 hi

代码实现细节:

  1. 声明一个伪数组
  2. 判断传入的参数是节点还是字符串,若是字符串则用querySelectorAll()方法获取,若是节点则以哈希形式存储在声明的伪数组中
  3. 以闭包形式封装功能函数

jQuery优点:

  1. 兼容性好
  2. jQuery不止DOM操作,还有动画、AJAX等模块
  3. JQuery功能丰富
  4. jQuery使用了prototype

你可能感兴趣的:(JavaScript 【01】初探jQuery)