jQuery笔记

html- $

方式一

console.log($(".box1"));

方式二

$(function(){ })

方式三

$(document.querySelector(".box1")).click(function(){ })

手写部分$

 

 

• css

方式一

let res = $("div").css("background");

console.log(res);

方式二

let res =  $("div").css("width",200);

方式三

let res =  $("div").css({"width":"200px","height":"200px"});

JS

• 定义函数返还JQ对象
• ready方法和原生节点处理
• 选择器器封装
• 封装JQ的eq方法：

  eq(index) {
      return new Jq(this[index], this);
  }

• 封装JQ的click方法

   click(fn) {
      for (let i = 0; i < this.length; i++) {
           this[i].addEventListener("click", fn, false);
      }
  }

• jQ中的链式操作
• 封装JQ的css方法
• cssHooks扩展功能

简述domready和onload事件的区别

DocumentContentLoaded在DOM树加载完之后立刻触发，DOM树加载完成之后，继续加载图片等外部文件，加载完成之后，onload事件触发。

jQuery的入口函数

$顶级对象

• $是jQuery的别称   可以用jQuery代替$
• $是jQuery的顶级对象 相当于JS的 Window
• $('div')是jQuery对象（伪数组）  和 Dom对象不同
• 
• jQuery对象只能使用jQuery方法，DOM对象只能使用原生的 JavaScirpt属性和方法

 jQuery对象转换成Dom对象

• 有些jQuery未封装，无法使用原生方法，此时需要转换
• chrome浏览器 video加上muted属性，设置为无声
• 两种方式转换   [ index ] ,    get( index )

jQuery选择器

 

层级选择器

 隐式迭代 

对Dom元素内部进行遍历循环for（伪数组存储）的过程

循环遍历并实现同样的属性

 筛选选择器

筛选方法

 

 

 排他思想

 链式编程

 JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续_哔哩哔哩_bilibili

console.log()会在浏览器控制台打印出信息

console.dir()可以显示一个对象的所有属性和方法（非标准）