JavaScript核心内容——webAPI、Bom、Dom学习记录

秀秀的奇妙旅行

已于 2022-07-02 20:30:00 修改

阅读量83

点赞数

分类专栏：前端学习记录文章标签： javascript html5 html

于 2021-10-08 17:41:47 首次发布

本文链接：https://blog.csdn.net/yunxiu988622/article/details/120649496

版权

前端学习记录专栏收录该内容

29 篇文章 4 订阅

订阅专栏

Bom\Dom介绍视频
 javaScript、jQuery、vue的区别

一天时间，大致过了一下主要内容，也只是过了一下，并没有记住，在项目里面用到以及背js面经的时候再来复盘吧
and 老师讲的很好，有时间可以仔细学一下，but我还有其他的一堆事情（烦）

一 web API

在这里插入图片描述

二 dom

操作dom

获取元素
操作元素

主要内容

1、获取页面元素

普通获取

在这里插入图片描述
根据id获取

根据标签项

or 根绝id选定了之后，再根据标签项输出

获取body和html元素

节点操作获取（querySelector）

2、操作元素

innerHTML 修改节点

在这里插入图片描述

// 获取<p>javascript</p>节点:
var js = document.querySelector('#test-js');

// 修改文本为JavaScript:
js.innerHTML = 'JavaScript';

// 修改CSS为: color: #ff0000, font-weight: bold
js.style = 'color:#ff0000;font-weight:bold';

createElement、appendChild创建节点

在这里插入图片描述

删除节点removeChild

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true

3、总过程——事件三要素（重点掌握）获取+处理

例子

鼠标事件

在这里插入图片描述

事件对象

在这里插入图片描述

三 Bom介绍

window对象的方法

在这里插入图片描述

if (confirm('重新加载当前页' + location.href + '?')) {
    location.reload();
} else {
    location.assign('/'); // 设置一个新的URL地址
}

在这里插入图片描述

三 jQuery

1、 javaScript、jQuery、vue的区别

javaScript、jQuery、vue的区别
在这里插入图片描述

1.javaScript获取标签元素：
	
	<script>
var h1 = document.getElementById("title")
var h2 = document.getElementsByTagName("h1");
h1.innerHTML='修改后的标题'
	</script>

2.jQuery修改网页中的元素内容：
	<body>
	<h1 id="title" class="title">我是标题</h1>
	<script>
	    $(function(){
	    	var h1 = $("#title")
	    	console.log(box.html())//获取元素中的内容
	    	$('.box').html('修改后的内容');//修改后的内容
	    })

	</script>
	</body>

3.Vue获取标签元素：
	var vm = new Vue({
    el:"#box1",
    data:{
        content:"标题"
    },
    methods:{
        dianji1:function () {
             this.content = "修改后的标题"
        }
    }
})

2、什么是jQuery

在这里插入图片描述

3、jquery具体用法

①选择器dom

在这里插入图片描述

②操作dom(改变删除增加)

在这里插入图片描述

③事件操作

/* HTML:
 *
 * <a id="test-link" href="#0">点我试试</a>
 *
 */

// 获取超链接的jQuery对象:
var a = $('#test-link');
//on方法用来绑定一个事件，我们需要传入事件名称和对应的处理函数
a.on('click', function () {
    alert('Hello!');
});

//另一种更简化的写法是直接调用click()方法：
a.click(function () {
    alert('Hello!');
})

在这里插入图片描述

④ AJAX

var jqxhr = $.ajax('/api/categories', {
    dataType: 'json'
});
//发送一个GET请求，并返回一个JSON格式的数据

//对常用的AJAX操作，jQuery提供了一些辅助方法。
//由于GET请求最常见，所以jQuery提供了get()方法
var jqxhr = $.get('/path/to/resource', {
    name: 'Bob Lee',
    check: 1
});
//post
var jqxhr = $.post('/path/to/resource', {
    name: 'Bob Lee',
    check: 1
});

在这里插入图片描述

四 bootstrap-UI框架

黑马pink老师移动WEB开发-Bootstrap案例
 bootstrap中文网

1、与element-ui的比较

bootstrap和elementui的区别是什么

在这里插入图片描述

他们都提供类似这样的组件：
在这里插入图片描述

在这里插入图片描述

2、栅格系统

在这里插入图片描述

布局容器container

在这里插入图片描述

列嵌套

列偏移

列排序

pull push

响应式工具

某片区域大屏下可见，缩小屏幕后被隐藏

五 npm

1、npm简介

npm（Node Package Manager）的通俗解释
 npm的通俗解释2
npm使用入门
在这里插入图片描述

在这里插入图片描述

2、npm使用

在这里插入图片描述

六 yarn

yarn和npm的比较

在这里插入图片描述

秀秀的奇妙旅行

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript核心内容——webAPI、Bom、Dom学习记录

Bom\Dom介绍视频一天时间，大致过了一下主要内容，也只是过了一下，并没有记住，在项目里面用到以及背js面经的时候再来复盘吧and 老师讲的很好，有时间可以仔细学一下，but我还有其他的一堆事情（烦）一 web API二 dom主要内容获取页面元素事件三要素（重点掌握）例子鼠标事件事件对象操作元素节点操作创建节点三 Bom介绍一 web API二 dom主要内容获取页面元素根据id获取根据标签项or 根绝id选定了之后，再根据标签项输出获
复制链接

扫一扫