前端学习03
1. JavaScript
```html
Title
1.1 代码位置
JS代码的存在形式：
-
当前HTML中。
-
在其他js文件中，导入使用。
1.2 注释
-
HTML的注释
-
CSS的注释，
style代码块/* 注释内容 */ -
JavaScript的注释，
script代码块// 注释内容 /* 注释内容 */
1.3 变量
-
Python，编程语言。
name = "xx" print(name) -
JavaScript，编程语言。
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <script type="text/javascript"> var name = "xx"; console.log(name); script> body> html>
1.4 字符串类型
// 声明
var name = "xx";
var name = String("xx");
// 常见功能
var name = "中国联通";
var v1 = name.length;
var v2 = name[0]; // name.charAt(3)
var v3 = name.trim();
var v4 = name.substring(0,2); // 前取后不取
案例：跑马灯
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<span id="txt">欢迎中国联通领导高倩莅临指导span>
<script type="text/javascript">
function show() {
// 1.去HTML中找到某个标签并获取他的内容（DOM）
var tag = document.getElementById("txt");
var dataString = tag.innerText;
// 2.动态起来，把文本中的第一个字符放在字符串的最后面。
var firstChar = dataString[0];
var otherString = dataString.substring(1, dataString.length);
var newText = otherString + firstChar;
// 3.在HTML标签中更新内容
tag.innerText = newText;
}
// JavaScript中的定时器，如：每1s执行一次show函数。
setInterval(show, 1000);
script>
body>
html>
1.5 数组
// 定义
var v1 = [11,22,33,44];
var v2 = Array([11,22,33,44]);
// 操作
var v1 = [11,22,33,44];
v1[1]
v1[0] = "xx";
v1.push("联通"); // 尾部追加 [11,22,33,44,"联通"]
v1.unshift("联通"); // 尾部追加 ["联通", 11,22,33,44]
v1.splice(索引位置,0,元素);
v1.splice(1,0,"中国"); // 尾部追加 [11,"中国",22,33,44]
v1.pop() //尾部删除
v1.shift() //头部删除
v1.splice(索引位置,1)
v1.splice(2,1); // 索引为2的元素删除 [11,22,44];
var v1 = [11,22,33,44];
for(var idx in v1){
// idx=0/1/2/3/ data=v1[idx]
}
var v1 = [11,22,33,44];
for(var i=0; i<v1.length; i++){
// i=0/1/2/3 data=v1[idx]
}
注意：break和continue
案例：动态数据
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<ul id="city">
ul>
<script type="text/javascript">
// 发送网络请求，获取数据
var cityList = ["北京","上海","深圳"];
for(var idx in cityList){
var text = cityList[idx];
// 创建
var tag = document.createElement("li");
// 在li标签中写入内容
tag.innerText = text;
// 添加到id=city那个标签的里面。DOM
var parentTag = document.getElementById("city");
parentTag.appendChild(tag);
}
script>
body>
html>
1.6 对象（字典）
info = {
"name":"xx",
"age":18
}
info = {
name:"xx",
age:18
}
info.age
info.name = "xx"
info["age"]
info["name"] = "xx"
delete info["age"]
info = {
name:"xx",
age:18
}
for(var key in info){
// key=name/age data=info[key]
}
案例：动态表格
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<table border="1">
<thead>
<tr>
<th>IDth>
<th>姓名th>
<th>年龄th>
tr>
thead>
<tbody id="body">
tbody>
table>
<script type="text/javascript">
var info = {id: 1, name: "xx", age: 19};
var tr = document.createElement("tr");
for (var key in info) {
var text = info[key];
var td = document.createElement('td');
td.innerText = text;
tr.appendChild(td);
}
var bodyTag = document.getElementById("body");
bodyTag.appendChild(tr);
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<table border="1">
<thead>
<tr>
<th>IDth>
<th>姓名th>
<th>年龄th>
tr>
thead>
<tbody id="body">
tbody>
table>
<script type="text/javascript">
// 网络请求获取，写入到页面上。
var dataList = [
{id: 1, name: "xx1", age: 19},
{id: 2, name: "xx2", age: 19},
{id: 3, name: "xx3", age: 19},
{id: 4, name: "xx4", age: 19},
{id: 5, name: "xx5", age: 19},
];
for (var idx in dataList) {
var info = dataList[idx];
var tr = document.createElement("tr");
for (var key in info) {
var text = info[key];
var td = document.createElement('td');
td.innerText = text;
tr.appendChild(td);
}
var bodyTag = document.getElementById("body");
bodyTag.appendChild(tr);
}
script>
body>
html>
1.7 条件语句
if ( 条件 ) {
}else{
}
if (1==1){
}else{
}
if ( 条件 ){
}else if ( 条件 ){
}else if ( 条件 ){
}else{
}
1.8 函数
def func():
函数的内容...
func()
function func(){
...
}
func()
2.DOM
DOM，就是一个模块，模块可以对HTML页面中的标签进行操作。
// 根据ID获取标签
var tag = document.getElementById("xx");
// 获取标签中的文本
tag.innerText
// 修改标签中的文本
tag.innerText = "哈哈哈哈哈";
// 创建标签 哈哈哈哈哈
var tag = document.createElement("div");
// 标签写内容
tag.innerText = "哈哈哈哈哈";
<ul id="city">
<li>北京li>
ul>
<script type="text/javascript">
var tag = document.getElementById("city");
// 北京
var newTag = document.createElement("li");
newTag.innerText = "北京";
tag.appendChild(newTag);
script>
2.1 事件的绑定
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<input type="button" value="点击添加" onclick="addCityInfo()">
<ul id="city">
ul>
<script type="text/javascript">
function addCityInfo() {
var newTag = document.createElement("li");
newTag.innerText = "联通";
var parentTag = document.getElementById("city");
parentTag.appendChild(newTag);
}
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<input type="text" placeholder="请输入内容" id="txtUser"/>
<input type="button" value="点击添加" onclick="addCityInfo()">
<ul id="city">
ul>
<script type="text/javascript">
function addCityInfo() {
// 1.找到输入标签
var txtTag = document.getElementById("txtUser");
// 2.获取input框中用户输入的内容
var newString = txtTag.value;
// 判断用户输入是否为空，只有不为空才能继续。
if (newString.length > 0) {
// 3.创建标签 中间的文本信息就是用户输入的内容
var newTag = document.createElement("li");
newTag.innerText = newString;
// 4.标签添加到ul中
var parentTag = document.getElementById("city");
parentTag.appendChild(newTag);
// 3.将input框内容清空
txtTag.value = "";
}else{
alert("输入不能为空");
}
}
script>
body>
html>
注意：DOM中还有很多操作。
DOM可以实现很多功能，但是比较繁琐。
页面上的效果：jQuery来实现 / vue.js / react.js
3. jQuery
jQuery是一个JavaScript第三方模块（第三方类库）。
- 基于jQuery，自己开发一个功能。
- 现成的工具 依赖jQuery，例如：BootStrap动态效果。
3.1 快速上手
-
下载jQuery
https://jquery.com/ -
应用jQuery
-
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> head> <body> <h1 id="txt">中国联通h1> <script src="static/jquery-3.6.0.min.js">script> <script type="text/javascript"> // 利用jQuery中的功能实现某些效果 $("#txt").text("广西移动"); script> body> html>
3.2 寻找标签（直接寻找）
-
ID选择器
<h1 id="txt">中国联通h1> <h1>中国联通h1> <h1>中国联通h1>$("#txt") -
样式选择器
<h1 class="c1">中国联通1h1> <h1 class="c1">中国联通2h1> <h1 class="c2">中国联通3h1>$(".c1") -
标签选择器
<h1 class="c1">中国联通1h1> <div class="c1">中国联通2h1> <h1 class="c2">中国联通3h1>$("h1") -
层级选择器
<h1 class="c1">中国联通1h1> <h1 class="c1"> <div class="c2"> <span>span> <a>a> div> h1> <h1 class="c2">中国联通3h1>$(".c1 .c2 a") -
多选择器
<h1 class="c1">中国联通1h1> <h1 class="c1"> <div class="c3"> <span>span> <a>a> div> h1> <h1 class="c2">中国联通3h1> <ul> <li>xxli> <li>xxli> ul>$("#c3,#c2,li") -
属性选择器
<input type='text' name="n1" /> <input type='text' name="n1" /> <input type='text' name="n2" />$("input[name='n1']")
3.3 间接寻找
-
找到兄弟
<div> <div>北京div> <div id='c1'>上海div> <div>深圳div> <div>广州div> div>$("#c1").prev() // 上一个 $("#c1") $("#c1").next() // 下一个 $("#c1").next().next() // 下一个、下一个 $("#c1").siblings() // 所有的系统 -
找父子
<div> <div> <div>北京div> <div id='c1'> <div>青浦区div> <div class="p10">宝山区div> <div>浦东新区div> div> <div>深圳div> <div>广州div> div> <div> <div>陕西div> <div>山西div> <div>河北div> <div>河南div> div> div>$("#c1").parent() // 父亲 $("#c1").parent().parent() // 父亲、父亲 $("#c1").children() // 所有的儿子 $("#c1").children(".p10") // 所有的儿子中寻找class=p10 $("#c1").find(".p10") // 去所有子孙中寻找class=p10 $("#c1").find("div") // 去所有子孙中寻找class=p10
案例：菜单的切换
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.menus{
width: 200px;
height: 800px;
border: 1px solid red;
}
.menus .header{
background-color: gold;
padding: 10px 5px;
border-bottom: 1px dotted #dddddd;
}
.menus .content a{
display: block;
padding: 5px 5px;
border-bottom: 1px dotted #dddddd;
}
.hide{
display: none;
}
style>
head>
<body>
<div class="menus">
<div class="item">
<div class="header" onclick="clickMe(this);">上海div>
<div class="content hide">
<a>宝山区a>
<a>青浦区a>
<a>浦东新区a>
<a>普陀区a>
div>
div>
<div class="item">
<div class="header" onclick="clickMe(this);">北京div>
<div class="content hide">
<a>海淀区a>
<a>朝阳区a>
<a>大兴区a>
<a>昌平区a>
div>
div>
div>
<script src="static/jquery-3.6.0.min.js">script>
<script>
function clickMe(self) {
// $(self) -> 表示当前点击的那个标签。
// $(self).next() 下一个标签
// $(self).next().removeClass("hide"); 删除样式
$(self).next().removeClass("hide");
}
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.menus{
width: 200px;
height: 800px;
border: 1px solid red;
}
.menus .header{
background-color: gold;
padding: 10px 5px;
border-bottom: 1px dotted #dddddd;
cursor: pointer;
}
.menus .content a{
display: block;
padding: 5px 5px;
border-bottom: 1px dotted #dddddd;
}
.hide{
display: none;
}
style>
head>
<body>
<div class="menus">
<div class="item">
<div class="header" onclick="clickMe(this);">上海div>
<div class="content hide">
<a>宝山区a>
<a>青浦区a>
<a>浦东新区a>
<a>普陀区a>
div>
div>
<div class="item">
<div class="header" onclick="clickMe(this);">北京div>
<div class="content hide">
<a>海淀区a>
<a>朝阳区a>
<a>大兴区a>
<a>昌平区a>
div>
div>
div>
<script src="static/jquery-3.6.0.min.js">script>
<script>
function clickMe(self) {
var hasHide = $(self).next().hasClass("hide");
if(hasHide){
$(self).next().removeClass("hide");
}else{
$(self).next().addClass("hide");
}
}
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style>
.menus {
width: 200px;
height: 800px;
border: 1px solid red;
}
.menus .header {
background-color: gold;
padding: 10px 5px;
border-bottom: 1px dotted #dddddd;
cursor: pointer;
}
.menus .content a {
display: block;
padding: 5px 5px;
border-bottom: 1px dotted #dddddd;
}
.hide {
display: none;
}
style>
head>
<body>
<div class="menus">
<div class="item">
<div class="header" onclick="clickMe(this);">上海div>
<div class="content">
<a>宝山区a>
<a>青浦区a>
<a>浦东新区a>
<a>普陀区a>
div>
div>
<div class="item">
<div class="header" onclick="clickMe(this);">北京div>
<div class="content hide">
<a>海淀区a>
<a>朝阳区a>
<a>大兴区a>
<a>昌平区a>
div>
div>
<div class="item">
<div class="header" onclick="clickMe(this);">上海2div>
<div class="content hide">
<a>宝山区a>
<a>青浦区a>
<a>浦东新区a>
<a>普陀区a>
div>
div>
<div class="item">
<div class="header" onclick="clickMe(this);">北京2div>
<div class="content hide">
<a>海淀区a>
<a>朝阳区a>
<a>大兴区a>
<a>昌平区a>
div>
div>
div>
<script src="static/jquery-3.6.0.min.js">script>
<script>
function clickMe(self) {
// 让自己下面的功能展示出来
$(self).next().removeClass("hide");
// 找父亲，父亲的所有兄弟，再去每个兄弟的子孙中寻找 class=content，添加hide样式
$(self).parent().siblings().find(".content").addClass("hide");
}
script>
body>
html>
3.4 操作样式
- addClass
- removeClass
- hasClass
3.5 值的操作
<div id='c1'>内容div>
$("#c1").text() // 获取文本内容
$("#c1").text("休息") // 设置文本内容
<input type='text' id='c2' />
$("#c2").val() // 获取用户输入的值
$("#c2").val("哈哈哈") // 设置值
案例：动态创建数据
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<input type="text" id="txtUser" placeholder="用户名">
<input type="text" id="txtEmail" placeholder="邮箱">
<input type="button" value="提交" onclick="getInfo()"/>
<ul id="view">
ul>
<script src="static/jquery-3.6.0.min.js">script>
<script>
function getInfo() {
// 1.获取用户输入的用户名和密码
var username = $("#txtUser").val();
var email = $("#txtEmail").val();
var dataString = username + " - " + email;
// 2.创建li标签，在li的内部写入内容。 $("")
var newLi = $("" ).text(dataString);
// 3.把新创建的li标签添加到ul里面。
$("#view").append(newLi);
}
script>
body>
html>
3.6 事件
<input type="button" value="提交" onclick="getInfo()"/>
<script>
function getInfo() {
}
script>
<ul>
<li>百度li>
<li>谷歌li>
<li>搜狗li>
ul>
<script>
$("li").click(function(){
// 点击li标签时，自动执行这个函数；
// $(this) 当前你点击的是那个标签。
});
script>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<ul>
<li>百度li>
<li>谷歌li>
<li>搜狗li>
ul>
<script src="static/jquery-3.6.0.min.js">script>
<script>
$("li").click(function () {
var text = $(this).text();
console.log(text);
});
script>
body>
html>
在jQuery中可以删除某个标签。
<div id='c1'>内容div>
$("#c1").remove();
案例：删除元素
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<ul>
<li>百度li>
<li>谷歌li>
<li>搜狗li>
ul>
<script src="static/jquery-3.6.0.min.js">script>
<script>
$("li").click(function () {
$(this).remove();
});
script>
body>
html>
当页面框架加载完成之后执行代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<ul>
<li>百度li>
<li>谷歌li>
<li>搜狗li>
ul>
<script src="static/jquery-3.6.0.min.js">script>
<script>
$(function () {
// 当页面的框架加载完成之后，自动就执行。
$("li").click(function () {
$(this).remove();
});
});
script>
body>
html>
案例：表格操作
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<table border="1">
<thead>
<tr>
<th>IDth>
<th>姓名th>
<th>操作th>
tr>
thead>
<tbody>
<tr>
<td>1td>
<td>武沛齐td>
<td>
<input type="button" value="删除" class="delete"/>
td>
tr>
<tr>
<td>1td>
<td>武沛齐td>
<td>
<input type="button" value="删除" class="delete"/>
td>
tr>
<tr>
<td>1td>
<td>武沛齐td>
<td>
<input type="button" value="删除" class="delete"/>
td>
tr>
<tr>
<td>1td>
<td>武沛齐td>
<td>
<input type="button" value="删除" class="delete"/>
td>
tr>
tbody>
table>
<script src="static/jquery-3.6.0.min.js">script>
<script>
$(function () {
//找到所有class=delete的标签，绑定事件
$(".delete").click(function () {
// 删除当前行的数据
$(this).parent().parent().remove();
});
})
script>
body>
html>
4. 前端整合
- HTML
- CSS
- JavaScript、jQuery
- BootStrap（动态效果依赖jQuery）。
案例：添加数据页面
人员信息录入功能，需要提供用户信息：
用户名、年龄、薪资、部门、入职时间（*）
对于时间的选择：不能输入；选择；（插件） datetimepicker
- 下载插件
- 应用插件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
<link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="static/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css">
head>
<body>
<div class="container">
<form class="form-horizontal" style="margin-top: 20px">
<div class="row clearfix">
<div class="col-xs-6">
<div class="form-group">
<label class="col-sm-2 control-label">姓名label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="姓名">
div>
div>
div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-sm-2 control-label">年龄label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="年龄">
div>
div>
div>
div>
<div class="row clearfix">
<div class="col-xs-6">
<div class="form-group">
<label class="col-sm-2 control-label">薪资label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="薪资">
div>
div>
div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-sm-2 control-label">部门label>
<div class="col-sm-10">
<select class="form-control">
<option>IT部门option>
<option>销售部门option>
<option>运营部option>
select>
div>
div>
div>
div>
<div class="row clearfix">
<div class="col-xs-6">
<div class="form-group">
<label class="col-sm-2 control-label">入职日期label>
<div class="col-sm-10">
<input type="text" id="dt" class="form-control" placeholder="入职日期">
div>
div>
div>
div>
<div class="row clearfix">
<div class="col-xs-6">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">提 交button>
div>
div>
div>
div>
form>
div>
<script src="static/js/jquery-3.6.0.min.js">script>
<script src="static/plugins/bootstrap-3.4.1/js/bootstrap.js">script>
<script src="static/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js">script>
<script src="static/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js">script>
<script>
$(function () {
$('#dt').datepicker({
format: 'yyyy-mm-dd',
startDate: '0',
language: "zh-CN",
autoclose: true
});
})
script>
body>
html>