前端 html 基础 jQuery css

最新推荐文章于 2024-05-07 23:11:20 发布

夏小泡泡#

最新推荐文章于 2024-05-07 23:11:20 发布

阅读量887

点赞数

分类专栏： # web 开发开发所有文章标签： jquery javascript html 1024程序员节

本文链接：https://blog.csdn.net/weixin_43319452/article/details/120754555

版权

所有同时被 3 个专栏收录

17 篇文章 0 订阅

订阅专栏

开发

9 篇文章 0 订阅

订阅专栏

web 开发

5 篇文章 0 订阅

订阅专栏

前端开发 html 基础

填充模板
常用标签
js
css

填充模板

<html>
<body>

</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>

</script>
<style type="text/css">

</style>

常用标签

参考文章：html常用标签的取值和赋值操作

显示标签（p,span,label）

p：指定渲染HTML的容器
span：普通文本的一种容器
label标签主要用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点
span html js

<html>
<body>
<span id="aa" class="textview" ></span>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
   $("#aa").html("开开心心");//赋值操作
	console.log("span标签里面的值是："+$("#aa").html());//取值的方法
</script>

在这里插入图片描述
检测文本框变化

<html>
<body>
<input type="text" class="input_inner" placeholder="请输入内容" id="context1">

</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
  $("#context1").change(function(){
    $(this).css("background-color","#FFFFCC");
    console.log("aaa")
  });
</script>

弹窗
弹出对话框背景遮盖

<html>
<body>
<div>
<div id="popDiv" class="popdiv">
        <table class="layui-table" lay-skin="line" id="datas">
        <tr>
          <th class="textview">子服务名称</th>
          <th class="textview">版本</th>
        </tr>
        <tr id="template" style="width:100px;height:10px;overflow-y:none;">
          <td id="subproname"></td>
          <td id="subprover"></td> 
        </tr>
      </table>
      <button class="button" id="prosubmsgclose">关闭</button>
</div>

<div id="bg" class="bg"
        style="display: none; background-color: #ccc; width: 100%; position: absolute; height: 100%; opacity: 0.5; z-index: 1;"></div>
</div>
<p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>
<button class="button" id="submitbtnindex1">资源预算</button>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
  	var data_list = [{
      "subproname": "app-6666",
      "subprover": "1.0.0"
    },
    {
      "subproname": "CS-TEST2",
      "subprover": "1.0.0"
    }];
    var flag=0;
    $("#submitbtnindex1").click(function () {
    	$("#bg").css("display","block"); 
        $("#popDiv").css("display","block");
        if (flag == 0 ){
            $.each(data_list, function (i, n) {
              flag=1;
              var row = $("#template").clone();
              row.find("#subproname").text(n.subproname);
              row.find("#subprover").text(n.subprover);
              row.appendTo("#datas");//添加到模板的容器中
          });
        }
    });
    $("#prosubmsgclose").click(function(){
    	console.log("aaa")
		$("#bg").css("display","none"); 
        $("#popDiv").css("display","none"); 
  	});
</script>
<style type="text/css">
.popbg{
	display: none; 
    background-color: #ccc; 
    width: 100%; 
    position: absolute; 
    height: 100%; 
    opacity: 0.5; 
    z-index: 1;
}
.popdiv{
    z-index: 99; 
    display: none; 
    position: absolute; 
    margin-top: 20%; 
    margin-left: 40%; 
    background-color: #FFF; 
    padding: 20px;
    border: 1px #dddddd solid;
    border-radius: 4px;
}
</style>

参考文章：HTML 里怎么隐藏标签
 html 极简遮罩层(自定义弹窗)
需求：点击表格某一行，弹窗显示详细信息
html中的遮罩弹出框动态效果代码,JavaScript实现的弹出遮罩层特效经典示例【基于jQuery

显示标签的样式

.textview {
    background-color: #fff;
    color: #606266;
    font-size: 14px;
    font-weight: 500;
    height: 37px;
    line-height: 30px;
    outline: none;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100px;
    margin: 10px 0px 10px 10px
}

参考文章：HTML中Div、span、label标签的区别

列表标签（下拉框，table）

table：表格
tr：表格中的一行，table row的缩写
td：表格中的一列
参考文章：html的tr和td标签
下拉框 html js css

<!DOCTYPE HTML>
<html>
<body>
  <select class="input_inner" id="prokindselectindex1">
    <option value="0">--请选择--</option>
    <option value="1">测试</option>
    <option value="2">体验</option>
    <option value="3">正式</option>
  </select>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
      $("#prokindselectindex1").change(function () {
      var selectText = $("#prokindselectindex1").find("option:selected").text();
     console.log("当前选择的是类型:"+selectText);
     //获取下拉框选中项的value属性值
     var prokind_1 = $("#prokindselectindex1").val();
     console.log("当前选择的是类型:"+prokind_1);
    });
</script>

下拉框支持变量输入

<!DOCTYPE HTML>
<html>
<body>
  <select class="input_inner" id="prokindselectindex1">
    <option value="0">--请选择--</option>
  </select>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var dataList = [{
        "key": "app7777",
        "value": "v1.3.0",
		},{
        "key": "app6666",
        "value": "v1.3.1",
		}];
for(var i = 0;i <dataList.length; i++){
    var $select=$("#prokindselectindex1");
    var selecti='<option value="'+dataList[i].key+'">'+dataList[i].value+'</option>'
    console.log(selecti)
    $select.append(selecti);
}
      $("#prokindselectindex1").change(function () {
      var selectText = $("#prokindselectindex1").find("option:selected").text();
     console.log("当前选择的是类型:"+selectText);
     //获取下拉框选中项的value属性值
     var prokind_1 = $("#prokindselectindex1").val();
     console.log("当前选择的是类型:"+prokind_1);
});
</script>

清空下拉框选项

$("#prokindselectindex1").find("option").remove();
var $select=$("#prokindselectindex1");
var selecti='<option value="0">--产品版本--</option>'
console.log(selecti)
$select.append(selecti);

参考文章：select下拉框取值与清空数据
js给表格赋值

<!DOCTYPE html>
<html>
<body>
<table class="layui-table" lay-skin="line" id="datas">
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <tr>
    <th>昵称</th>
    <th>加入时间</th>
    <th>签名</th>
  </tr>
  <tr id="template">
    <td id="id"></td>
    <td id="url"></td>
    <td id="title"></td>
  </tr>
</table>
</body>
</html>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
  var data = [{
      "id": 1,
      "url": "http://www.jqcool.net",
      "switch": 1,
      "order": 1,
      "pid": 0,
      "title": "Online Program knowledge share and study platform"
    }];
  $.each(data, function (i, n) {
    var row = $("#template").clone();
    row.find("#id").text(n.id);
    row.find("#url").text(n.url);
    row.find("#title").text(n.title);
    row.appendTo("#datas");//添加到模板的容器中
  });
</script>

在这里插入图片描述
参考文章：jquery 动态给table赋值
 js给table赋值

树形表格:
参考文章：HTML使用treeTable实现树形表格
加锁避免重复渲染

<html>

<body>
<div>
<div id="popDiv" class="popdiv">
        <table class="layui-table" lay-skin="line" id="datas">
        <tr>
          <th class="textview">子服务名称</th>
          <th class="textview">版本</th>
        </tr>
        <tr id="template" style="width:100px;height:10px;overflow-y:none;">
          <td id="subproname"></td>
          <td id="subprover"></td> 
        </tr>
      </table>
      <button class="button" id="prosubmsgclose">关闭</button>
</div>

<div id="bg" class="bg"
        style="display: none; background-color: #ccc; width: 100%; position: absolute; height: 100%; opacity: 0.5; z-index: 1;"></div>
</div>


<p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。</p>
<button class="button" id="submitbtnindex1">资源预算</button>

</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
  	var data_list = [{
      "subproname": "CS-TEST1",
      "subprover": "1.0.0"
    },
    {
      "subproname": "CS-TEST2",
      "subprover": "1.0.0"
    }];
    var flag=0;
    $("#submitbtnindex1").click(function () {
    	$("#bg").css("display","block"); 
        $("#popDiv").css("display","block");
        if (flag == 0 ){
            $.each(data_list, function (i, n) {
              flag=1;
              var row = $("#template").clone();
              row.find("#subproname").text(n.subproname);
              row.find("#subprover").text(n.subprover);
              row.appendTo("#datas");//添加到模板的容器中
          });
        }
    });
    $("#prosubmsgclose").click(function(){
    	console.log("aaa")
		$("#bg").css("display","none"); 
        $("#popDiv").css("display","none"); 
  	});
</script>
<style type="text/css">
.popbg{
	display: none; 
    background-color: #ccc; 
    width: 100%; 
    position: absolute; 
    height: 100%; 
    opacity: 0.5; 
    z-index: 1;
}
.popdiv{
    z-index: 99; 
    display: none; 
    position: absolute; 
    margin-top: 20%; 
    margin-left: 40%; 
    background-color: #FFF; 
    padding: 20px;
    border: 1px #dddddd solid;
    border-radius: 4px;
}
.tagview{
 background-color: #ecf5ff;
 line-height: 30px;
 font-size: 12px;
 color: #409eff;
 border-radius: 4px;
 box-sizing: border-box;
 white-space: nowrap;
}
.button {
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    text-align: center;
    box-sizing: border-box;
    font-weight: 500;
    padding: 7px 20px;
    font-size: 14px;
    border-radius: 4px;
    margin: 10px 0px 10px 10px
}
.textview {
    background-color: #fff;
    color: #606266;
    font-size: 14px;
    font-weight: 500;
    height: 37px;
    line-height: 30px;
    outline: none;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100px;
    margin: 10px 10px 10px 0px
}
.button:focus, .button:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
}
</style>

获取表格内容

<html>
<body>
   <table id="border_distance">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年级</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td id="name">姓名1</td>
                <td id="grade">年级1</td>
                <td><input id="age" value="1"/></td>
            </tr>
            <tr>
                <td id="name">姓名2</td>
                <td id="grade">年级2</td>
                <td><input id="age" value="2"/></td>
            </tr>
            <tr>
                <td id="name">姓名3</td>
                <td id="grade">年级3</td>
                <td><input id="age" value="3"/></td>
            </tr>
        </tbody>
    </table>
<button class="button" id="submitbtnindex1">资源预算</button>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $("#submitbtnindex1").click(function () {
    var tableHtml = $(document).find("#border_distance tbody tr");
    var data = getTableData(tableHtml);
    console.log('表格的内容为：' + JSON.stringify(data));
    
       //实际中把处理好的数据传到后台处理，如下：
      /*
        field.id = 1;
        field.users = data;
        $.ajax({
            url: '/index/.../...',
            type: 'POST',
            data: field,
            success: function(res) {
                //相关操作
            },
            error: function(res) {
                //异常提示
            }
        });
        */
    });
    
    function getTableData(tableHtml) {
        let result = [];
        if (tableHtml) {
            let length = tableHtml.length;
            for(let i = 0; i < length; i++) {   //追加数据
                let trData = {}; // 每行的数据

                //注意text()和val()的区别
                let name = $(tableHtml).eq(i).find("#name").text();
                let grade = $(tableHtml).eq(i).find("#grade").text();
                let age = $(tableHtml).eq(i).find("#age").val();

                //如果不存在给默认值（视情况而定）
                name = (name == undefined) ? '' : name;
                grade = (grade == undefined) ? '' : grade;
                age = (age == undefined) ? 0 : age;

                //数据赋值
                trData.name = name;
                trData.grade = grade;
                trData.age = age;

                result.push(trData);    //数据追加
            }
        }
        return result;
    }
</script>

参考文章：jquery、js获取table,遍历输出tr中各个td的内容
 Jquery获取表格tr对象，并循环获取表格内容

点击table中的某一个td,获得这个tr的所有数据

<!DOCTYPE html>
<html>
<body>
<table class="layui-table" lay-skin="line" id="datas">
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <tr>
    <th>昵称</th>
    <th>加入时间</th>
    <th>签名</th>
  </tr>
  <tr id="template">
    <td id="id"></td>
    <td id="url"></td>
    <td  id="title">
     <button class="button"  id="submitbtnindex1" onclick=getData(this) style="display: none;"></button>
    </td>
  </tr>
</table>
</body>
</html>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
  var data = [{
      "id": 1,
      "url": "http://www.jqcool.net",
      "switch": 1,
      "order": 1,
      "pid": 0,
      "title": "Online Program knowledge share and study platform"
    }];
  $.each(data, function (i, n) {
    var row = $("#template").clone();
    row.find("#id").text(n.id);
    row.find("#url").text(n.url);
    row.find("#title").find("#submitbtnindex1").text(n.title);
    row.find("#title").find("#submitbtnindex1").css("display","block");
    row.appendTo("#datas");//添加到模板的容器中
  });
  
    function getData(element){
      console.log("aaa"); 
      var id = element.closest('tr').children[1].innerHTML
      console.log("id-->",id);
    }
</script>

参考文章：如何选中表格中点击按钮同行的其他元素,并对内容进行更改(修改文字或添加按钮)
点击table中的某一个td,获得这个tr的所有数据

表格支持滚动条
表格(滚动条)

<div style="width:100px;height:100px;overflow-x:scroll;">
<table >
   <thead>
  <tr>
    <th>Header
      1</th>
    <th>Header
      2</th>
    <th>Header
      3</th>
   </tr></thead>
   <tr>
      <td>添加滚动条</td>
      <td>添加滚动条</td>
      <td>添加滚动条</td>
    </tr>
  </table>
</div>

表格滑动

.table tbody {
    display:block;
    height:20px;
    overflow-y:scroll;
    overflow-x:hidden; // pc网页需要加上
    -webkit-overflow-scrolling: touch; // 为了滚动顺畅 
}

参考文章：
Table加滚动条
 HTML中的table加滚动条+样式+固定表头
 弹窗内容居中显示
表样式

.protablecss{
    border: 1px #dddddd solid;
    border-radius: 4px;
	position: relative;
    box-sizing: border-box;
    flex: 1;
    width: 90%;
    background-color: #fff;
    color: #606266;
    padding: 10px 10px 15px 10px   
}
.protablecssth  {
    font-size: 14px;
    font-weight: 400;
	position: relative;
    box-sizing: border-box;
    flex: 1;
    background-color: #fff;
    color: #606266;
    padding: 15px 0px 15px 0px
    border: 1px #dddddd solid;
}
.protableclasstd  {
	font-size: 14px;
    font-weight: 400;
	position: relative;
    box-sizing: border-box;
    flex: 1;
	background-color:#fff;
	color: #92959b;
	padding: 7px 0px 7px 0px;
	border-bottom: 1px #dddddd solid;
	text-align:center;
}

输入标签（按钮,text,文本框,选择框，radio)

button html js

<html>
<body>
<button class="button" id="submitbtnindex1">资源预算</button>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $("#submitbtnindex1").click(function () {
      alert("提交成功！")
    });
</script>
<style type="text/css">

</style>

button样式

.button {
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    text-align: center;
    box-sizing: border-box;
    font-weight: 500;
    padding: 7px 20px;
    font-size: 14px;
    border-radius: 4px;
    margin: 10px 0px 10px 10px
}
.button:focus, .button:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
}

text html js(获取text值，赋值) css

<html>
<body>
<input type="text" class="input_inner" placeholder="请输入内容" id="context1">
<input type="text" class="input_inner" placeholder="获取值" id="context2">
<button id="btn">确定</button>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
 $("#btn").click(function () {
 	  $("#context2").val("我给你赋值")
      var value = $("#context1").val()
      console.log(value);
});
</script>

输入标签样式（适用于输入框，下拉框）

.input_inner {
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    height: 37px;
    line-height: 30px;
    outline: none;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 150px;
    margin: 10px 0px 10px 10px
}

textera html js

<html>
<body>
  <textarea rows="5" cols="40" style="resize:none" class="input_textera" placeholder="输入IP列表" id="instanceslist_index2"></textarea>
  <button class="button" id="submitbtnindex1">确定</button>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $("#submitbtnindex1").click(function () {
      	instanceslist_2 = $("#instanceslist_index2").val().trim()
		console.log(instanceslist_2);
    });
</script>

文本框样式

.input_textera {
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    outline: none;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    margin: 0px 10px 10px 0px;
}

选择框 html js 获取选择的值

<html>
<body>
<input type='checkbox' class='checkbox' id='cb'/>
<button class="button" id="submitbtnindex1">资源预算</button>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $("#submitbtnindex1").click(function () {
        //获取是否选中
        $("#cb").css("background-color","#409eff");
        $("#cb").css("border-color","#409eff");
        var isCheckedA = $('#cb').prop('checked');
        console.log("cb是否选中："+isCheckedA);
    });
</script>

选择框样式

.checkbox{
    display: inline-block;
    position: relative;
    border: 1px solid #dcdfe6;
    border-radius: 2px;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    background-color: #fff;
    z-index: 1;
}

radio html js 获取选择的值

<html>
<body>
  <input type="radio" class="radio" name="rd" id="rd1" value="1">在线部署
  <input type="radio" class="radio" name="rd" id="rd2" value="2">离线部署
  <input type="radio" class="radio" name="rd" id="rd3" value="3">升级部署
  <button class="button" id="submitbtnindex1">确定</button>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $("#submitbtnindex1").click(function () {
      	deployway_2=$('input:radio:checked').val()
		console.log(deployway_2);
    });
</script>

参考文章：jquery 获取checkbox,radio,select被选中的值

标签页

标签页
参考文章：html实现标签页功能初级
 基于jQuery实现的标签页进阶
 jquery+css实现Tab栏切换的代码实例
 html css js 实现Tab标签页示例代码

js

javascript基础：HTML-JavaScript基础（非常详细）

js基础

全局变量

<html>
<body>
<span id="aa" class="textview" ></span>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
var aa=7777
   $("#aa").html("开开心心");//赋值操作
    var aa=8888
    console.log("aaaaa-->",aa);
	console.log("span标签里面的值是："+$("#aa").html());//取值的方法
</script>

字符串处理
参考文章：JS 正则表达式获取匹配内容
母字符串获取子字符串

var email="1.1.1(编号:3)";
email.match(/.+编号:(\d+)/);
console.log(RegExp.$1);

拼接

var aaa="aaa"
console.log(aaa+5)

含引用变量的拼接

var value = $("#context1").val()
var aa="111"
var cc=value+"-"+aa

去除转义符
参考文章：js 字符串单个替换和全局替换
 js 去除josn字符串中的全部转义字符
输出换行
参考文章：js里输出换行

参考文章：JS字符串拼接/连接（3种方式）
如何让JS变量和字符串拼接后，是变量而不是字符串
循环

for(var i = 0;i <prolist_1.length; i++){
    console.log(prolist_1[i])
}

判断

if (instanceslist != "" && procertifi != 0){
}

弹出对话框
参考文章：js弹出对话框的三种方式

js 设置 css

<html>
<body>
<span id="prodepfail_index3" class="bottom">失败</span>
<span id="prodepsucc_index3" class="bottom">成功</span>
<button class="button" id="submitbtnindex1">执行</button>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
	$("#submitbtnindex1").click(function () {
	  $("#prodepfail_index3").text("xxxx");
      $("#prodepfail_index3").css("background-color","#fef0f0");
      $("#prodepfail_index3").css("border-color","#fde2e2");
      $("#prodepfail_index3").css("color","#f56c6c");
      
      $("#prodepsucc_index3").css("background-color","#f0f9eb");
      $("#prodepsucc_index3").css("border-color","#e1f3d8");
      $("#prodepsucc_index3").css("color","#67c23a");
    });
</script>
<style type="text/css">
.bottom{
 background-color: #ecf5ff;
 display: inline-block;
 height: 32px;
 padding: 0 10px;
 line-height: 30px;
 font-size: 12px;
 color: #409eff;
 border: 1px solid #d9ecff;
 border-radius: 4px;
 box-sizing: border-box;
 white-space: nowrap;
} 
</style>

在这里插入图片描述
未点击点击经过的状态

<html>
<body>
<a href="https://www.baidu.com" id="baidu" target="_blank">百度一下，就看广告</a>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
 //修改a标签href的值
 $("#baidu").attr("href","https://www.csdn.net/");
 //修改a标签文本的值
 $("#baidu").text("csdn学技术吧");
 //none(去掉下划线),underline(下划线),blink(闪烁),overline(上划线),line-through(贯穿线)
 $("#baidu").css("text-decoration","none");
</script>
<style type = "text/css">      
a {font-size:16px}   //设置字体大小
a:link {color: blue; text-decoration:none;} //链接未访问：蓝色、无下划线   
a:active:{color: red; } //链接激活：红色   
a:visited {color:purple;text-decoration:none;} //链接已访问：紫色、无下划线   
a:hover {color: red; text-decoration:underline;} //链接鼠标覆盖时：红色、下划线     
</style>

设置标签显示的value

<html>
<body>
<button id="submitbtnindex1">确定</button>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
 $("#submitbtnindex1").click(function () {
      $("#submitbtnindex1").text("取消");
   });
</script>

测试平台：https://www.w3school.com.cn/tiy/t.asp?f=eg_html_poem

监听事件

<!DOCTYPE html>
<html>
<body>
<table onclick=get1(this) class="layui-table" lay-skin="line" id="datas">
  <colgroup>
    <col width="150">
    <col width="200">
    <col>
  </colgroup>
  <tr>
    <th>昵称</th>
    <th>加入时间</th>
    <th>签名</th>
  </tr>
  <tr id="template">
    <td id="id"></td>
    <td id="url"></td>
    <td  id="title">
     <button class="button"  id="submitbtnindex1" onclick=getData(this)></button>
    </td>
  </tr>
</table>
</body>
</html>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
  var data = [{
      "id": 1,
      "url": "http://www.jqcool.net",
      "switch": 1,
      "order": 1,
      "pid": 0,
      "title": "Online Program knowledge share and study platform"
    }];
  $.each(data, function (i, n) {
    var row = $("#template").clone();
    row.find("#id").text(n.id);
    row.find("#url").text(n.url);
    row.find("#title").find("#submitbtnindex1").text(n.title);
    row.appendTo("#datas");//添加到模板的容器中
  });
  
    function getData(element){
      console.log("bbb"); 
      var id = element.closest('tr').children[1].innerHTML
    console.log("id-->",id);
    }
    function get1(element){
      console.log("aaa"); 
    }
</script>

调用api

get与post请求

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="button1">get请求</button>
<button id="button2">post请求</button>
</body>
</html>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
var getprourl="http://xx/product/getVersByName?productName=";
var proname="xiangqi";
$("#button1").click(function(){
	$.ajax({
	   type: "GET",  
	   url: getprourl+proname,
	   success: function (res) {  
	        proList_1=res.data.proList
	        console.log(proList_1)
	    },
	    error: function() { 
	        alert("请求失败");
	    }
	});
});
$("#button2").click(function(){
	$.ajax({
		type: "POST",
		url: getprourl+proname,
		data:{
			'private_token': token,
		},
		dataType: 'json',
		success: function (data,status) {
			console.log(data)
			alert("成功！");
		},
		error: function() { 
			alert("请求失败");
		}
	});
});
</script>

https://www.w3school.com.cn/jquery/ajax_get.asp
https://www.w3school.com.cn/jquery/ajax_post.asp
https://www.w3school.com.cn/tiy/t.asp?f=jquery_ajax_post
参考文章：html+jQuery 使用api接口
 jQuery请求后台接口
 用Jquery的POST数据之后获取返回值的问题
 jQuery方式实现ajax接口调用

调自己的server端后端接口

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button id="button1">get请求</button>
<button id="button2">post请求</button>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
$("#button1").click(function(){
	$.get("/devopsdw",   
	function(data,status){
	    console.log(data)
	    alert("数据：" + data + "\n状态：" + status);
	});
});
$("#button2").click(function(){
	$.post("/resclect",
	{
	    password:password_2,
	    hosts:hosts_2,
	},
	function(data,status){
	    console.log(data)
	    alert("数据：" + data + "\n状态：" + status);
	});
});
</script>

js数据赋值给元素
js给列表赋值
jquery 动态给table赋值
 js给table赋值

css

常用css

.长宽布局{
align=“center”
width: 90%;
height: 90%;
margin: 40px 40px 0px 40px;//上右下左
padding: 10px 20px 10px 20px;
}
.边沿{
border: 1px #dddddd solid;
border-top: 1px #dddddd solid;
border-left: 1px #dddddd solid;
border-right: 1px #dddddd solid;
text-decoration: none; #下划线
border-radius: 4px; #圆弧
}
.颜色{
background: #ffffff; #背景色
color: #409eff; #前景色
border-color: #c6e2ff; #边沿颜色
}

文字左对齐

<div align="left">
    <button id="buttonlog">get请求</button>
    <span id="logview">文字左对齐</span>
</div>

参考文章：总体居中,但文字左对齐的html代码

未选中选中点击样式

<html>
<body>
<div class="mastertabhost" align="left" style="margin-left: 16px">
	<a href="#page1" class="selected">本地资源校验</a>
	<a href="#page2">部署信息报告</a>
	<a href="#page3">资源预计算</a>
</div>
</body>
</html>
<style type = "text/css">    
/*未选中*/  
.mastertabhost a {
	text-decoration: none;
	background: #f7f7f7;
	color: rgb(40 44 52);
	border-top: #dddddd 1px solid;
	border-left: #dddddd 1px solid;
	border-right: #dddddd 1px solid;
    padding: 10px 20px 10px 20px;   
}
/*选中*/  
.mastertabhost a:hover {
	background: #409eff;
	color: #ffffff;
}
/*点击*/
.mastertabhost a.selected {
	background: #ffffff;
	color: #409eff;
} 
</style>

在这里插入图片描述

布局

margin:外边距
padding：内边距
margin
如果规定一个值，比如 div {margin: 50px} - 所有的外边距都是 50 px
如果规定四个值，比如 div {margin: 50px 10px 20px 30px} - 上外边距是 50 px，右外边距是 10 px，下外边距是 20 px，左外边距是 30 px。
参考文章：HTML DOM margin 属性
padding
padding-top
padding-left
padding-right
padding-bottom
布局
相对布局绝对布局 margin padding

<html>
  <head>
  </head>
  <body>
    <div class="main">main content</div>
    <div class="footer">footer</div>
  </body>
</html>
<style type="text/css">
  html{height:100%;}
  .main{padding-bottom:100px;margin:10px;background-color: #bdb76b;}/* main的padding-bottom值要等于或大于footer的height值 */
  .footer{position:absolute;bottom:20px;left:20px;width:100%;height:100px;background-color: #ffc0cb;}
</style>

在这里插入图片描述

demo

<html>
<body>
<div align="center" style="border:2px solid black">
	<p>本地资源校验</p>
	<div align="left" style="margin-left: 16px;margin-bottom: 16px">
		<label>部署产品：</label>
		<input type="text" id="text" name="depproname" placeholder="  请输入产品名称">
	</div>  
  	<table border="1" width="95%" align="center" style="margin-bottom: 16px">
	    <tr>
	        <th>产品名称</th>
	        <th>版本信息</th>
	        <th>发布类型</th>
	    </tr>
	    <tr>
	        <td align="center">app6666</td>
	        <td align="center">
	        	<form>
	              <select style="height: 100%;width: 100%">
	                <option value="v1.55.0">v1.55.0</option>
	                <option value="v1.55.1">v1.55.1</option>
	                <option value="v1.55.2" selected="selected">v1.55.2</option>
	              </select>
	        	</form>
	        </td>
	        <td align="center">
	        	<form>
	              <select style="height: 100%;width: 100%">
	                <option value="cishi">测试</option>
	                <option value="tiyan"selected="selected">体验</option>
	                <option value="waiwang">外网</option>
	              </select>
	        	</form>
	        </td>
	    </tr>
	</table>
	<div align="center" style="margin-bottom: 16px">
		<input type="submit" value="确定" style="margin-right: 32px">
		<input type="submit" value="取消">
	</div>
</div>
</body>
</html>

在这里插入图片描述

夏小泡泡#

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
前端 html 基础 jQuery css

javascript基础：HTML-JavaScript基础（非常详细）js数据赋值给元素js给列表赋值jquery 动态给table赋值js给table赋值js的数据赋值返回给后端：用jQuery获取表单的值
复制链接

扫一扫