- 使用 Spring Initializr 创建 Spring Boot 应用程序
- 在Spring Boot中配置Cassandra
- 在 Spring Boot 上配置 Tomcat 连接池
- 将Camel消息路由到嵌入WildFly的Artemis上
JS 分成三个大的部分:
WebAPI 就包含了 DOM + BOM.
DOM 全称为 Document Object Model
.
W3C 标准给我们提供了一系列的函数, 让我们可以操作:
一个页面的结构是一个树形结构, 称为 DOM 树.
document
表示.element
表示.node
表示.使用 querySelector
能够完全复用前面学过的 CSS 选择器知识, 达到更快捷更精准的方式获取到元素对象
语法格式:
let element = document.querySelector(selectirs);
selectors
填一个或者多个选择器使用示例:
<div class="one"> abc </div>
<div id="two"> def </div>
<div><input type="text"></div>
<script>
let one = document.querySelector('.one');
console.log(one);
let two = document.querySelector('#two');
console.log(two);
let three = document.querySelector('input');
console.log(three);
</script>
运行截图
如果您需要与指定选择器匹配的所有元素的列表,则应该使用 querySelectorAll()
使用示例:
<div class="one">123</div>
<div id="two">456</div>
<script>
let divs = document.querySelectorAll('div');
console.log(divs);
</script>
运行截图
Element.innerText
属性表示一个节点及其后代的“渲染”文本内容
**注:**不识别 html 标签. 是非标准的(IE发起的). 读取结果不保留html源码中的 换行和空格.
使用示例:
<div class="one">hello world</div>
<div class="two">hello world</div>
<script>
let div = document.querySelector('.two');
console.log(div);
div.innerText = '<span>world hello</span>';
</script>
运行截图:
通过 innerText
无法获取到 div
内部的 html
结构, 只能得到文本内容.
Element.innerHTML
属性设置或获取HTML语法表示的元素的后代
注意:
代码示例:
<div class="one">hello world</div>
<div class="two">hello world</div>
<script>
let div = document.querySelector('.two');
console.log(div);
div.innerHTML = '<span>world hello</span>';
</script>
运行截图:
innerHTML
不光能获取到页面的 html
结构, 同时也能修改结构. 并且获取到的内容保留的空格和换行
注: 通过 element.属性
来获取属性
代码示例:
<img src="male.png" title="男" alt="男">
<script>
let img = document.querySelector('img');
img.onclick = function() {
if(img.title.lastIndexOf("男") != -1){
img.src = 'female.png';
img.title = '女';
}else{
img.src = 'male.png';
img.title = '男';
}
}
</script>
运行结果:
<input type="button" value="播放">
<script>
let input = document.querySelector('input');
input.onclick = function() {
if(input.value == '播放'){
input.value = '暂停';
}else{
input.value = '播放';
}
}
</script>
运行截图:
<input type="text" value="0" id="one">
<input type="button" value="点击+1" id="add">
<script>
let one = document.querySelector('#one');
let add = document.querySelector('#add');
add.onclick = function() {
one.value++;
}
</script>
<h3>选择你喜欢玩的游戏</h3>
<input type="checkbox" class="game">王者荣耀<br/>
<input type="checkbox" class="game">和平精英<br/>
<input type="checkbox" class="game">开心消消乐<br/>
<input type="checkbox" class="game">我的世界<br/>
<input type="checkbox" class="all">全选
<script>
let games = document.querySelectorAll('.game');
let all = document.querySelector('.all');
all.onclick = function(){
for (let i = 0; i < games.length; i++) {
games[i].checked = all.checked;
}
}
for (let i = 0; i < games.length; i++) {
games[i].onclick = function() {
all.checked = allChecked();
}
}
function allChecked() {
for (let i = 0; i < games.length; i++) {
if(!games[i].checked){
return false;
}
}
return true;
}
</script>
运行截图
CSS 中指定给元素的属性, 都可以通过 JS 来修改
style 中的属性都是使用 驼峰命名 的方式和 CSS 属性对应的.
例如: font-size => fontSize
, background-color => backgroundColor
等
element.style.[属性名] = [属性值];
element.style.cssText = [属性名+属性值];
<div style="font-size: 20px;color:red">你好</div>
<script>
let div = document.querySelector('div');
div.onclick = function() {
let fontSize = parseInt(div.style.fontSize);
fontSize += 10;
div.style.fontSize = fontSize + "px";//注意有单位的要带上单位
}
</script>
运行截图:
element.className = [CSS 类名];
<style>
html,body{
height: 100%;
width: 100%;
}
div {
height: 100%;
width: 100%;
}
.black{
background-color:black;
color: gray;
}
.gray {
background-color: gray;
color: black;
}
</style>
<div class='black'>
你好!
</div>
<script>
let div = document.querySelector('div');
div.onclick = function() {
if(div.className.indexOf("black") != -1){
div.className = 'gray';
}else{
div.className = 'black';
}
}
</script>
运行截图:
分为两个步骤:
createElement
创建元素节点.createTextNode
创建文本节点createComment
创建注释节点createAttribute
创建属性节点appendChild
将节点插入到指定节点的最后一个孩子之后insertBefore
将节点插入到指定节点之前<div class="test">
</div>
<script>
let div = document.createElement('div');
div.id = 'mydiv';
div.className = 'one';
div.innerHTML = 'hehe';
let test = document.querySelector('.test');
test.appendChild(div);
</script>
运行截图:
<div class="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
<script>
let child = document.createElement('div');
child.innerHTML = '100';
let parent = document.querySelector('.parent');
// 本来有四个元素,0号元素没有,就插入一个元素
parent.insertBefore(child,parent.children[0]);
// 插入到2号元素前,1号元素是1不是child,2号元素是2.
parent.insertBefore(child,parent.children[2]);
</script>
运行结果:
使用 removeChild
删除子节点
oldChild = element.removeChild(child);
注: 如果 child 不是 element 的子节点,会抛异常
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
</div>
<script>
let parent = document.querySelector('.parent');
let childs = document.querySelectorAll('.child');
parent.removeChild(childs[1]);
</script>
运行结果:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猜数字</title>
</head>
<body>
<div class="parent">
<div><input type="button" value="重新开始一局新游戏" class="again"></div>
<div>
请输入要猜的数字: <input type="text" class="guessNum"> <input type="button" value="猜" class="press">
</div>
<div>
已经猜的次数: <span class="count">0</span>
</div>
<div>
结果: <span class="result"></span>
</div>
</div>
<script>
let guessNum = document.querySelector('.guessNum');
let press = document.querySelector('.press');
let count = document.querySelector('.count');
let result = document.querySelector('.result');
let countCount = 0;
let guessResult = Math.floor(Math.random()*100)+1;
press.onclick = function(){
countCount++;
count.innerHTML = countCount;
guessNumber = parseInt(guessNum.value);
if(guessNumber == guessResult){
result.innerHTML = '猜对了';
result.style = 'color : red';
}else if(guessNumber < guessResult){
result.innerHTML = '猜小了';
result.style = 'color : blue';
}else{
result.innerHTML = '猜大了';
result.style = 'color : orange';
}
}
let again = document.querySelector('.again');
again.onclick = function() {
guessResult = Math.floor(Math.random()*100)+1;
countCount = 0;
count.innerHTML = 0;
guessNum.value = '';
result.innerHTML ='';
}
</script>
</body>
</html>
运行截图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表白墙</title>
</head>
<body>
<div class="parent">
<div id="wall">表白墙</div>
<div id="remind">输入后点击提交,会将信息显示在表格中</div>
<div class="one"><span class="two">谁:</span><input type="text" class="text"></div>
<div class="one"><span class="two">对谁:</span><input type="text" class="text"></div>
<div class="one"><span class="two">说什么:</span><input type="text" class="text"></div>
<div class="one"><input type="button" value="提 交" class="press"></div>
</div>
<style>
/* 去除浏览器默认样式 */
* {
margin: 0;
padding: 0;
}
/* 设置总宽度 */
.parent {
width: 400px;
margin: 0 auto;
}
/* 涉资表白墙样式 */
#wall {
font-size: 30px;
font-weight: 700;
text-align: center;
margin: 5px;
}
/* 设置提示信息样式 */
#remind{
font-size:13px;
text-align: center;
color:gray;
margin: 5px;
}
/* 设置弹性布局 */
.one {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
}
/* 设置文字内容 */
.two {
width: 100px;
line-height: 40px;
}
/* 设置输入框 */
.one .text{
width: 200px;
height: 20px;
}
/* 提交按钮的设置 */
.one .press{
width: 304px;
height: 40px;
color:white;
background-color: orange;
border-radius: 5px;
border: none;
}
/* 设置鼠标点击的时候改变颜色 */
.one .press:active{
background-color: red;
}
/* 提交之和内容的设置 */
.elem {
text-align: center;
}
</style>
<script>
// 获取到输入框元素
let texts = document.querySelectorAll('.text');
// 获取到提交按钮元素
let press = document.querySelector('.press');
// 设置单击事件
press.onclick = function() {
let user1 = texts[0].value;
let user2 = texts[1].value;
let message = texts[2].value;
// 如果有一个为空,就提交不成功
if(user1=='' || user2=='' || message==''){
return;
}
// 这里都不为空,创建新的节点
let elem = document.createElement('div');
elem.className = 'elem';
elem.innerHTML = user1 + '对' + user2 + '说: ' +message;
// 插入新的节点
let parent = document.querySelector('.parent');
parent.appendChild(elem);
// 提交之后,将输入框置空.
for(let i = 0; i < 3; i++){
texts[i].value='';
}
}
</script>
</body>
</html>
运行截图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>待办事项</title>
</head>
<body>
<div class="parent">
<div class="one">
<input type="text" class="text"><input type="button" value="新建任务" class="submit">
</div>
<div class="two">
<div class="left">
<h3>未完成</h3>
</div>
<div class="right">
<h3>已完成</h3>
</div>
</div>
</div>
<style>
/* 去除浏览器默认样式 */
* {
margin: 0;
padding: 0;
}
/* 设置宽度 */
.parent {
width: 840px;
margin: 0 auto;
}
/* 设置输入框和新建的样式 */
.one {
height: 50px;
padding: 20px;
}
/* 设置输入框样式 */
.one .text{
height: 50px;
width: 600px;
}
/* 设置提交框样式 */
.one .submit {
background-color: orange;
color: white;
height: 50px;
width: 196px;
border: none;
}
/* 设置点击时的背景 */
.one .submit:active{
background-color: red;
}
/* 设置已完成和未完成的样式 */
.two{
width: 800px;
height: 800px;
display: flex;
margin: 0 auto;
}
/* 设置未完成和已完成字体样式 */
.two h3 {
height: 50px;
text-align: center;
line-height: 50px;
background-color: black;
color: white;
}
/* 设置未完成左边的样式 */
.left {
width: 50%;
height: 100%;
}
/* 设置已完成右边的样式 */
.right {
width: 50%;
height: 100%;
}
/* 新建任务的样式 */
.row {
height: 50px;
display: flex;
align-items: center;
}
/* 新建任务字体的样式 */
.row span {
width: 340px;
}
/* 新建任务的删除按钮样式 */
.row button{
width: 40px;
height: 40px;
}
</style>
<script>
// 首先获取新建按钮元素
let submit = document.querySelector('.submit');
// 设置鼠标单击事件
submit.onclick = function() {
// 获取输入框元素
let text = document.querySelector('.text');
// 判断输入框内容是否为空
if(text.value == '') return;
// 新建代办事项
let row = document.createElement('div');
row.className='row';
let checkBox = document.createElement('input');
checkBox.type='checkbox';
let thing = document.createElement('span');
thing.innerHTML = text.value;
let del = document.createElement('button');
del.innerHTML='删除';
row.appendChild(checkBox);
row.appendChild(thing);
row.appendChild(del);
// 获取左边元素
let left = document.querySelector('.left');
left.appendChild(row);
// 添加节点之后置空
text.value='';
// 设置选择框的鼠标单击事件
checkBox.onclick = function() {
// 如果被选择了就移动已完成
// 如果未完成就移动到未完成
if(checkBox.checked){
let target = document.querySelector('.right');
target.appendChild(row);
}else{
let target = document.q
uerySelector('.left');
target.appendChild(row);
}
}
// 设置删除按钮的鼠标单击事件
del.onclick = function() {
// 使用 parentNode 获取到父节点
let parent = row.parentNode;
// 删除该节点
parent.removeChild(row);
}
}
</script>
</body>
</html>
运行截图:
我想为我的 ABP 项目中的特定应用程序服务关闭自动 WebAPI 生成服务。 最佳答案 RemoteService 属性可用于将类标记为远程服务或禁用固有地实现 IRemoteService 接口(
我无法从 postman 访问 webapi 错误是下一个: 如您所见,没有授权。 valuescontroller.cs 是: namespace CVService.Controllers {
我无法从 postman 访问 webapi 错误是下一个: 如您所见,没有授权。 valuescontroller.cs 是: namespace CVService.Controllers {
我有以下 Controller ,它应该接受用户名和密码作为 POST 中的有效负载。如果我将其更改为 HttpGet 就可以了。 [RoutePrefix("api")] public class
使用以下路线: routes.MapHttpRoute( name: "Set", routeTemplate: "api/set/{id}",
我正在使用 AngularJS,我正在尝试将 json 从我的服务发送到 webAPI Controller 。当我通过发送时,我在 webApi 函数的参数中收到 null。 我的功能服务是: an
据我了解,如果我有一个 ASP.NET WebApi 方法,其签名如下所示...... public HttpResponseMessage PostCustomer(Customer custome
我遇到了一个解决方案问题,我使用 Visual Studio SPA 模板中的部分在具有 Oauth 身份验证的 WebApi 中拥有帐户 Controller 。 app.UseOAuthBea
我按照此处的说明将 webApi.HelpPage 区域和 View 添加到使用 structureMap 的现有项目中 - 但是在访问/Help url 时: StructureMap Except
我有一个 WebAPI。如何返回并打开网页。例如,我想打开 CNN.com 页面。 [HttpGet] public HttpResponseMessage Get()
我想知道是否有人可以澄清这一点。我发现用法令人困惑。 链接和视频都没有回答我的问题 我知道像这样的链接 asp.net core middleware vs filters 甚至还有关于它的视频 但是
运行以下最新版本(在撰写本文时): Visual Studio 2019 16.4.5 .NET 核心 SDK 3.1.102 x64 测试的浏览器: 谷歌浏览器 80.0.3987.122 火狐 7
想法是,将有一个外部实体 (SharePoint) 调用我的 WebAPI 并传入 PDF 文件以及有关该 PDF 文件的一些额外元数据信息。我被困在如何构造 Web API 方法的签名上。这是我到目
我有一个 WebApi 服务处理来自简单表单的上传,如下所示: 但是,我不知道如何使用 HttpClient API 模拟同一
嗨,我是 Angular 的新手,现在我从一个示例登录页面开始,该页面传递包含用户名和密码的 userEntity。userEntity 是一个对象/实体是 webapi。 问题:当我为登录按钮单击
我有一个 AngularJS + MVC + WebAPI,我正在尝试:- 使用标准(个人账户)进行MVC认证;- 使用相同的用户和密码进行基于 WebAPI 的身份验证。 问题,AngularJS
Web API 的版本存在一些混淆。看看这个 Web API at NuGet , Microsoft ASP.NET Web API 2.2 5.2.3 什么?这里是没有提到 2.2 的描述 我的猜
我正在开发一个 Web 应用程序,该应用程序将 Owin 托管用于 MVC 和 WebApi 2。 我最近将 Microsoft Mvc/WebApi 包从 5.2.2 版升级到 5.2.3 版,将
随着Web技术的发展,现在各种框架,前端的,后端的,数不胜数。全栈工程师的压力越来越大。 现在的前端的框架,既可以做各种Web,又可以做各种APP,前端框架更新换代越来越快,越来越多。 传统的模
1. WebAPI 背景知识 1.1 什么是 WebAPI JS 分成三个大的部分: ECMAScript: 基础语法部分 DOM API: 操作页面结构 BOM API: 操作浏览器 WebAPI
我是一名优秀的程序员,十分优秀!