前端基础知识 -- 03

最新推荐文章于 2023-05-22 19:57:19 发布

蹦豆蹦

最新推荐文章于 2023-05-22 19:57:19 发布

阅读量114

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_42736065/article/details/100536032

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

支持面向对象语言
@什么是BOM ？什么是DOM？他们之间有什么关系？
DOM：Document Object Model（文档对象模型），用来获取或设置文档中标签的属性，例如获取或设置input表单的value值。就是把文档当做一个对象来看待。
BOM：Browser Object Model（浏览器对象模型），用来获取或设置浏览器的属性、行为。例如新建窗口、获取屏幕分辨率、浏览器版本号等。即把浏览器当做一个对象来看待。

在DOM中，文档中的各个组件可以通过object.attribute这种形式来访问。一个DOM会有一个根对象，这个对象通常是document。
BOM除了可以访问文档中的组件之外，还可以访问浏览器的组件，比如navigator（导航条）、history（历史记录）等。

@@@JS创建对象的方式有哪些？

直接创建方式：
对象初始化器方式：
工厂模式：
构造函数方式：
prototype原型方式：
混合的构造函数/原型方式：
动态原型方式：

/*直接创建对象的方式*/
//使用object创建一个对象的实例
var stu0 = new Object();
//给对象附加属性和行为的方法
stu0.stuName = "张三"; //不定义也可以直接使用
stu0.doStuding = function () {//类似于匿名方法
    console.info("直接创建对象：   I am studing...")
}
stu0.doStuding();


/*对象初始化器方式*/
var user = {
    name:"小红",
    age:21,
    getName:function () {
        return this.name;
    },
    display:function () {
      document.writeln("我是" +this.getName()+",今年"+this.age+"岁。")
    }
}
console.info("对象初始化方式： 我的名字" + user.getName() + ",年龄："+user.age);


/*构造函数方法示例*/
function Person(name , age) {
    this.name = name;
    this.age = age;
    this.speak =  speak;
}
function speak() {
    alert(this.name + " is " + this.age + " years old.");
}
var person1 = new Person("james" , 12);
var person2 = new Person("jack" , 18);

console.info("构造函数方法示例： "+ (person1.speak == person2.speak));


/*prototype原型方式*/
function Person1() {
    
}
Person1.prototype.name =  "李四";
Person1.prototype.age = 23;
Person1.prototype.tell = function () {
    document.writeln(this.name + " is " + this.age +" years old .<br/>");
}
var p1 = new Person1();
p1.tell();
var p2 = new Person1();
document.writeln("prototype原型方法：P1.tell() == p2.tell() is :"+ (p1.tell() == p2.tell())+"<br/>");


/*混合构造函数*/
function Student(name , age) {
    this.name = name;
    this.age = age;
}
Student.prototype.speak = function () {
    document.writeln(this.name + " is " + this.age + " years old. <br/>")
}
var stu1 = new Student("AA",22);
stu1.speak();
var stu2 = new Student("BB",21);
stu2.speak();
console.info("混合构造函数    stu1.speak()==stu2.speak() : " + (stu1.speak() == stu2.speak()))

结果：
在这里插入图片描述

@@js中的事件链以及冒泡机制，以及如何组织冒泡的发生？（项目中，前端框架中会涉及）

事件冒泡：事件促发的最深层元素首先接收事件。然后是他的父元素，一次向上，直到document对象最终接收到事件。document没有独立的视觉表现，它仍然是HTML元素的父元素并且时间能冒泡到document元素。

事件捕获：事件首先发生在DOM树的最高层对象（document)然后往最深层的元素传播。IE6中只有冒泡，没有捕获
事件委托：

jQuery
@什么是jQuery？都有哪些版本？每个版本都有什么特点？（各个版本的差异在浏览器兼容性上）
jQuery是一个优秀的JavaScript框架，轻量级js库。jQuery能够使用户的HTML页保持代码和HTML内容分离。
jQuery 1.0 – 2006.08
jQuery库的第一个稳定版本，已经具有对css选择符、事件处理和AJAX交互的稳健支持。
jQuery 1.1 – 2007.01
简化API，较少使用的方法被合并
jQuery 1.1.3 – 2007.07
jQuery选择符引擎执行速度显著提升。jQuery的性能达到Prototype、Mootools以及Dojo等同类JavaScript库的水平。
jQuery 1.2 – 2007.09
去掉了对XPath选择符的支持。
jQuery UI – 2007.09
这个新的插件套件作为曾经流行但已过世的Interface插件的替代项目二发布。
jQuery 1.2.6 – 2008.05
将Brandon Aaron开发流行的Dimension插件的功能移植到了核心库中。
jQuery 1.3 – 2009.01
使用全新的选择符引擎Sizzle，库的性能也因此有了极大提升。
jQuery 1.4
重写了大部分较早起的函数
jQuery 1.5
Ajax重写、延迟对象、jQuery.sub()、遍历性能提高、内部开发系统。
jQuery 1.7 – 2011.11
提升了事件委派时的性能有了大幅度的提升，尤其是IE7。更好地在IE6/7/8上支持HTML5；切换动画更加直观；匿名模块定义AWD等。
jQuery1.7.2 – 2012.03
jQuery2.0 Beta – 2013.03
jQuery 2.0 正式版 – 2013.04
jQuery1.9汉化版 – 2013.02

@@jQuery对象和DOM对象的异同点？以及之间的相互转换？
DOM对象：即我们用传统的方法（JavaScript）获得的对象，
jQuery对象：即用jQuery类库的选择器获得的对象。

ID选择器：$( '#id' )
name选择器：$( ' .name' )
var domObj = document.getElementById("id"); //DOM对象
var $obj = $("#id"); //jQuery对象;

区别：
使用document获取得到的对象为DOM对象，使用jQuery获取的对象为jQuery对象。
jQuery对象就是对DOM对象的包装，jQuery对象是jQuery对象独有的，而jQuery对象是可以使用jQuery对象的方法的，但是不能使用DOM对象的方法。
jquery对象转换成 dom对象
jquery提供了两种方法将一个jquery对象转换成一个dom对象，即[index]和get(index)。jquery对象是一个数组对象.

var $cr=$("#cr"); //jquery对象
var cr = $cr[0]; //dom对象 也可写成 var cr=$cr.get(0);
alert(cr.checked); //检测这个checkbox是否给选中

dom对象转换成jquery对象
对于一个dom对象，只需要用$()把dom对象包装起来，就可以获得一个jquery对象了，方法为$(dom对象);
复制代码代码如下:

var cr=document.getElementById("cr"); //dom对象
var $cr = $(cr); //转换成jquery对象

建议:如果获取的对象是 jquery对象，那么在变量前面加上$,这样方便容易识别出哪些是jquery对象,例如:
var $variable = jquery对象;
如果获取的是dom对象，则定义如下:
var variable = dom对象

@jQuery常用的选择器？DOM操作方法？ajax处理？事件处理？
jQuery常用选择器：https://www.haorooms.com/post/jquery_selecter_zj
基本选择器、组合/层次选择器、基本过滤选择器、内容过滤器、可视化选择器、属性过滤选择器、子元素过滤器、表单元素选择器。
DOM操作方法：https://www.haorooms.com/post/js_dom_api
节点查找、节点创建、节点修改、节点关系、元素属性、样式相关、获取相关高度。
前端框架：Bootstrap

Ajax教程：https://www.runoob.com/ajax/ajax-tutorial.html