前端开发小寄巧 – drinkflower's blog

上一篇提到使用selenium直接执行js是最方便的,本篇会提到一些简单的js应用

html基本结构

基本框架如下

<!DOCTYPE html>
<html>
<head>

</head>
<body>

</body>
</html>

其中,head部分可以引入外部的js,css文件,在这里引入那么就相当于外部js或者css文件里面的内容就写在这里
除此之外,head还可以添加style标签写css,供给body部分调用,比如这个例子中使用style写了个three的样式,在body部分中的div写了class=three,即可调用这段css

<!DOCTYPE html>
<html>
<head>
<style>
        .three{
  font-size: 20px;
  color:#000000;
  text-shadow:0px 1px 0px #c0c0c0,
     0px 2px 0px #b0b0b0,
     0px 3px 0px #a0a0a0,
     0px 4px 0px #909090,
     0
    }
    table{
            text-align:right;
            display:inline-block;
    }
    </style>
</head>
<body>
<div class="three">
<div>
<script>
localStorage.setItem('data', "喵");
window.open("2.html", "_blank");
</script>
</body>
</html>

同样的,如果只是引入了外部的css,也可以之间在下面调用
body部分就不能引入外部的js或者css文件了,不过可以添加并显示其他构架页面的元素,这些标签也可以单独写style,如果和class冲突了,优先级是style>内部css>外部css
body部分可以执行js,但是script标签不是什么标签都可以插入,比如可以插入div标签

<div>
<script>

</script>
</div>

但是不饿像这样插入\标签

<a>
<script>

</script>
</a>

html之间传参

后端互相传参数倒是很方便,但是两个页面之间,或者说js之间互相传参显得比较奇怪,下面可以实现html之间的传参
1.html写入

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
localStorage.setItem('data', "喵");
window.open("2.html", "_blank");
</script>
</body>
</html>

2.html写入

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
const data = localStorage.getItem("data");
alert(data);
</script>
</body>
</html>

(没有弹出来可能是浏览器阻止了,允许一下就行)

js操作页面元素

这里用常见的按钮点击,js改dom来举例
首先需要定位元素,可以使用document.getElement系列的函数

var btn = document.getElementById("b1");

为按钮添加onclick事件,添加其他的属性语法类似

btn.onclick=function(){
alert('喵');
}

js改dom有很多技巧,比如给元素设置visibility属性为不可见,然后通过定位元素,改visibility属性即可实现显示
或者提前写标签占位,然后通过innerhtml插入html代码

<tbody id="showfilebody">

var showfilebody=document.getElementById('showfilebody');
var tdstr='';

tdstr+='<td style="text-align: center;">'+"喵"+'</td>';
tdstr+='<td style="text-align: center;">'+"呜"+'</td>';
tdstr+='<td style="text-align: center;">'+"咪"+'</td>';

showfilebody.innerHTML=tdstr;

前后端交互实现

第一次前端后端一起写,刚开始没有搞清楚这俩的职责边界.前端的局限性较大,也就负责到调用后端的api,后端将数据处理封装到api就行了
前端请求后端的api可以使用ajax或者xhr(还有fetch和axios),这俩都能发送请求并且获取返回值.xhr是内置的一个可以发送http请求的对象,ajax等另外仨都是基于xhr封装的.
使用ajax需要引入jquary库

<script>https://s3.pstatp.com/cdn/expire-1-M/jquery/3.2.1/jquery.min.js</script>

这样就能轻松创建一个请求

$.ajax({
    url:"http://blog.drinkflower.asia",
    dataType:'json',
    type:'get',
    success:function(data){

        alert(data);

    },
    error :function(arg1){
        alert(arg1);
    }
})

或者使用原生的xhr

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://blog.drinkflower.asia', true); // 替换成你的后端API的URL
xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status >= 200 && xhr.status < 400) {

      alert('ok');
    } else {

      alert('ko');
    }
}
};
xhr.send();