HTML
emmet查询
html,css学习网址
HTML,css学习网址
Hyper Text Markup Language
超文本 标记 语言
html文件结构
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title></title>
</head>
<body>
</body>
</html>
行标签
|行标签| |
|--|--|
|strong |加粗 |
|em|斜体 |
|img|图片加载
|a|链接
```markup
<img src="3.jpg" alt="" width="120" height="200">
文字跳转
<a href="http://www.baidu.com" target="_blank">图片</a>
图片跳转
<a href="http://www.baidu.com"><img src="3.jpg" alt="" width="120" height="200"></a>
块标签 | 独占一行 |
---|---|
p | 段落 |
hr | 划线 |
br | 换行 |
h1-h6 | 标题 |
div |
有序列表ol,type控制排序样式
无序列表ul
<ol type="a">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
table表格
<table style="border-style: double" border="2" bgcolor="#00ffff" >
<th colspan="2">标题行</th>
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
</tr>
</table>
5行4列快捷键
table>tr5>td4
css
行内样式
<p style="color: cornflowerblue;font-size: 33px">
行外样式
<style>
/*
css标签内使用的注释
使用选择器来指定标签
*/
/* *代表所有标签 */
*{
font-size: 77px;
color: crimson;
}
p{
font-family: Consolas;
}
/*空格 后代选择器*/
div p{
color: chartreuse;
}
</style>
class 可以有多个名 用空格分开
<body>
<div class="test"></div>
<p class="test">1</p>
<p class="test uuu">2</p>
</body>
<style>
/*类选择器*/
.test{
color: blue;
}
.uuu{
color: coral;
}
/*条件同时满足*/
p.test{
background-color: greenyellow;
}
</style>
id选择器
<div id="ooo">oooooooo</div>
<style>
/*id选择器*/
#ooo{
background-color: darkmagenta;
}
</style>
精确度:
id>class>标签
a{
font-size: 30px;
}
/*不论中间隔几层都是后代*/
/*后代选择器*/
div a{
font-size:40px;
}
/*子代选择器*/
div>a{
background-color: chartreuse;
}
/*或者,*/
div,p{
background-color: black;
}
/*属性选择器*/
input[type="text"]{
background-color: crimson;
}
清除浮动
.father{
border:1px solid red;
/*父级标签包住浮动层的标签
浮动都是基于父标签的*/
overflow: hidden;
}
.div1{
width: 100px;
height: 100px;
background-color: coral;
float: left;
/**/
clear: left;
}
js
导入文件
<script src="test.js"></script>
数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组</title>
</head>
<body>
<script>
//声明数组
var arr=new Array();
arr[0]="sfsjf";
arr[1]=3333;
console.log(arr);
//查看数组的长度
console.log(arr.length);
var a1=["张三","李四","王五"];
console.log(a1[1]);
//遍历数组
for (var i=0;i<a1.length;i++){
console.log(a1[i]);
}
for (x in a1){
//x索引下标
console.log(x);
//属性元素
console.log(a1[x]);
}
//数组方法
//数组倒叙
var aq=a1.reverse();
console.log(aq);
//数组拼接
var s = a1.join(",,,,");
console.log(s);
//合并数组
var a3 = a1.concat(arr);
console.log(a3);
//返回最后一个元素并且删除
var p = a1.pop();
console.log(p);
//添加元素到数组的末尾并且返回新的长度
var l = a1.push("赵六");
console.log(l);
//1.
var b=[4,0,7,9,15,0,7,5,0,3,2];
var sum=0;
for (x in b){
sum+=b[x];
}
console.log("和为:"+sum);
var max=0;
for (x in b){
if (b[x]>max){
max=b[x];
}
}
console.log("最大值为:"+max);
var add=[];
for (x in b){
if (b[x]!=0){
add.push(b[x]);
}
}
console.log("不为0的数组:"+add);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组</title>
</head>
<body>
<script>
//声明数组
var arr=new Array();
arr[0]="sfsjf";
arr[1]=3333;
console.log(arr);
//查看数组的长度
console.log(arr.length);
var a1=["张三","李四","王五"];
console.log(a1[1]);
//遍历数组
for (var i=0;i<a1.length;i++){
console.log(a1[i]);
}
for (x in a1){
//x索引下标
console.log(x);
//属性元素
console.log(a1[x]);
}
//数组方法
//数组倒叙
var aq=a1.reverse();
console.log(aq);
//数组拼接
var s = a1.join(",,,,");
console.log(s);
//合并数组
var a3 = a1.concat(arr);
console.log(a3);
//返回最后一个元素并且删除
var p = a1.pop();
console.log(p);
//添加元素到数组的末尾并且返回新的长度
var l = a1.push("赵六");
console.log(l);
//1.
var b=[4,0,7,9,15,0,7,5,0,3,2];
var sum=0;
for (x in b){
sum+=b[x];
}
console.log("和为:"+sum);
var max=0;
for (x in b){
if (b[x]>max){
max=b[x];
}
}
console.log("最大值为:"+max);
var add=[];
for (x in b){
if (b[x]!=0){
add.push(b[x]);
}
}
console.log("不为0的数组:"+add);
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dom的使用</title>
</head>
<body>
<input type="text" id="idtext">
<input type="button" value="点我" onclick="f()">
<div id="div1">
</div>
<script>
function f() {
//点击按钮获取输入框中的内容
//1先获取标签对象
var e = document.getElementById("idtext");
//获取标签的value值
console.log(e.value);
e.value="bb";
var e1 = document.getElementById("div1");
e1.innerHTML=e.value+"aa";
e1.innerHTML="<p>"+e.value+"cc</p>";
}
</script>
</body>
</html>
函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
//函数声明
function f() {
console.log("f");
}
//函数调用
f();
//带两个参数的函数
function f1(a,b) {
console.log(a+b);
}
// 函数赋值给一个变量,函数相当于一个值
var a=function () {
console.log("a");
}
function f2(a, m) {
console.log("m");
}
//调用
f2(3,f());
//js没有方法重载,后声明的函数会覆盖先声明的函数
//带返回值的函数
function f3() {
return 3;
}
//以函数为准的作用域
</script>
//函数调用
<input type="button" onclick="f()">
<input type="button" onclick="f1(1,2)">
</body>
</html>
BOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM</title>
</head>
<body>
<input type="button" value="警告框" onclick="f()">
<input type="button" value="确认框" onclick="f1()">
<input type="button" value="消息框" onclick="f2()">
<input type="button" value="打开新窗口" onclick="openNewWindow()">
<input type="button" value="关闭" onclick="closeWindow()">
<script>
//BOM
//浏览器对象模型(Browser Object Model)
//可以操作浏览器相关功能
//DOM
//文档对象模型(Document Object Model)
//访问操作HTML页面的标签
function f() {
alert("测试警告框");
}
function f1() {
var result = confirm("确认框");
if (result) {
console.log("确认");
}else{
console.log("取消");
f1();
}
}
function f2() {
var s = prompt("请输入密码:","123123");
console.log(s)
if (s=null){
console.log("取消")
} else{
console.log("您输入的内容是"+s);
}
}
function openNewWindow() {
open("http://www.baidu.com","newWindow","width=400,height=400");
}
function closeWindow() {
close();
}
</script>
</body>
</html>
DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DOM</title>
</head>
<body>
<p>
DOM访问所有的HTML元素
对元素进行修改和删除
</p>
<p>
DOM树:DOM将HTML文档表达为树结构
节点(node)
</p>
<p>
节点:元素节点(标签),文本节点,属性节点
</p>
<p>
元素节点:HTML中的标签,标签的名字就是元素的名字
</p>
</body>
</html>
location
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="显示URL" onclick="f()">
<input type="button" value="跳转页面" onclick="f1()">
<input type="button" value="刷新页面" onclick="f2()">
<input type="button" value="替换页面" onclick="f3()">
<script>
function f() {
console.log(location);
}
function f1() {
location.href="BOM2.html";
}
function f2() {
//刷新页面
location.reload();
}
function f3() {
location.replace("http://www.baidu.com");
}
</script>
</body>
</html>
标签的增删改查
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="添加元素" onclick="addElement()">
<input type="button" value="插入元素" onclick="insertElement()">
<input type="button" value="删除元素" onclick="deleteElement()">
<ul id="ulist">
<li id="l1">1</li>
<li id="l2">2</li>
</ul>
<script>
function addElement() {
//在ul中添加li 添加一行
var l = document.createElement("li");
l.innerHTML="add something";
//把创建的标签加到合适的位置
//获得目标位置的父标签
var ul = document.getElementById("ulist");
ul.appendChild(l);
}
function insertElement() {
//添加一个新的li元素,插入到郑东问前面
var l = document.createElement("li");
l.innerHTML="insert something";
var e = document.getElementById("ulist");
var e1 = document.getElementById("l2");
//要插入的元素, 插入的位置
e.insertBefore(l,e1);
}
function deleteElement() {
var e = document.getElementById("l1");
e.remove();
}
</script>
</body>
</html>
标签属性的修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.demo{
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<input type="button" value="修改div" onclick="changeDiv()">
<input type="button" value="样式" onclick="changeCSS()">
<input type="button" value="删除样式" onclick="deleteCSS()">
<div id="div1">测试</div>
<script>
function deleteCSS() {
var div1 = document.getElementById("div1");
div1.classList.remove("demo");
}
function changeCSS() {
var div1 = document.getElementById("div1");
div1.classList.add("demo");
}
function changeDiv() {
//修改属性
var div1 = document.getElementById("div1");
//修改标签的内容
div1.innerHTML="修改后的内容";
//修改id
div1.id="div2";
console.log("修改测试内容");
//修改class
div1.className="test";
console.log("测试修改内容")
//在原有基础上添加新的class
div1.classList.add("test");
//修改name属性
div1.setAttribute("name","哦呵呵");
console.log("修改")
//获取属性值
var a = div1.getAttribute("name");
console.log(a);
//移除某个属性值
div1.removeAttribute("name");
//设置样式
div1.style.width="100px";
div1.style.backgroundColor="green";
}
</script>
</body>
</html>
获取元素节点的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<div id="div1">测试</div>
</div>
<div id="div2">
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<p>第四段</p>
<div class="btn">1</div>
<div class="btn">2</div>
<div class="btn">3</div>
<div class="btn">4</div>
</div>
<input type="radio" name="gender" value="0">男
<input type="radio" name="gender" value="0">女
<script>
//根据id设置标签
var e1 = document.getElementById("div1");
e1.innerHTML="修改文本";
//获取p标签
var ps = document.getElementsByTagName("p");
console.log(ps);
for (var i = 0; i < ps.length; i++) {
console.log(ps[i].innerHTML);
ps[i].innerHTML="第"+(i+1)+"段";
}
//按照class值获取标签
var e2 = document.getElementsByClassName("btn");
console.log(e2);
//按照name值获取标签
var e4 = document.getElementsByName("gender");
console.log(e4);
//获取标签的父标签
console.log(e1.parentNode);
//获取所有子标签
var ee = document.getElementById("div2");
console.log(ee.children);
var er = ee.getElementsByTagName("div");
console.log(er);
</script>
</body>
</html>
JQuery
选择器
//id选择器
$("#div1").css("color","red");
//元素选择器
$("div").css("background","brown");
//class选择器
$(".test").css("color","pink");
//div 下的p元素
$("div p").css("font-size","50px");
//属性选择器
$("input[type='button']").css("background","yellow");
//伪类选择器
$(".test:first").css("border","10px black solid");
过滤器
//div 下的子div
$("div .div3").css("border","black 10px solid");
//从上往下找find
$("div").find(".div4").css("border","pink 10px solid");
//从下往上找parent
$("#div3").parent(".div2").css("border","200px solid red");
操作
添加删除类
//添加两个类
$(".test").addClass("addStyle addStyle1");
//移除一个类
$(".test:first").removeClass("addStyle1");
//判断是否具有某个类
console.log($(".test:first").hasClass("addStyle1"))
var a=$("input[type='button']");
//隐藏
a.hide();
//显示
a.show();
//规定多长时间消失
a.fadeOut(500);
//淡入
a.fadeIn(1000);
a.slideUp(100);
a.slideDown(100);
添加删除类,实现文字闪烁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery基础知识</title>
<script src="js/jquery-3.2.1.min.js"></script>
<style>
#bar{
background-color: black;
width: 100px;
height: 50px;
padding: 45px;
font-family: sans-serif;
}
#bar.active{
color: red;
}
</style>
</head>
<body>
<div id="bar">点我算命</div>
<script>
var bar=$("#bar");
function toggle(){
if (bar.hasClass("active")){
bar.removeClass("active");
} else {
bar.addClass("active");
}
}
//间隔时间
setInterval(toggle,200);
</script>
</body>
</html>
DOM操作
//获取内容
$("#A").text();
$("#A").html();//可以显示标签
//修改内容
$("#A").text("NO");
$("#A").html("NO");//可以添加标签
//追加内容
$("#A").append('<input type="button" value="小儿子">');
$("#A").prepend('<input type="button" value="大儿子">');
表单元素input获取内容
var a=$("#a").val();
修改值
var a=$("#a").val("aaa");
事件
//on:当, 当点击(click)的时候,进行操作
$("#btn").on("click",function () {
if ($("#div2").is(":visible")) {
$("#div2").hide();
}else{
$("#div2").show();
}
});
//on:当, 当鼠标进入的时候,进行操作
$("#btn").on("mouseenter",function () {
$("#div2").css("background","red");
});
//on:当, 当鼠标移除的时候,进行操作
$("#btn").on("mouseleave",function () {
$("#div2").css("background","green");
});
属性操作
//修改属性attribute
$("#a").attr("id","aa");
添加删除表单元素练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发布</title>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div>
<input type="text" class="text">
<input type="button" value="发布" class="btn">
<table class="tab">
<tr>
<th>序号</th>
<th>内容</th>
<th>时间</th>
<th>操作</th>
</tr>
</table>
</div>
<script>
var number=1;
$(".btn").click(function () {
//获取输入内容
var text=$(".text").val();
var time=new Date();
//创建标签(一行四列)
var btn=$("<input type='button' value='删除'>");
var numTd=$("<td></td>").html(number);
var textTd=$("<td></td>").html(text);
var timeTd=$("<td></td>").html(time);
var optTd=$("<td></td>").append(btn);
var tr=$("<tr></tr>").append(numTd).append(textTd).append(timeTd).append(optTd).appendTo(".tab")
number++;
});
$(".tab").on('click',"input",function () {
$(this).parents("tr").remove();
});
</script>
</body>
</html>
ajax
$(".verify").click(function () {
$.ajax({
url:"http://47.104.87.243:8081/isexists",
type:"get",
data:{
username:$(".name1").val()
},
success:function (re) {
console.log(re);
$("div").html(re.msg);
}
});
});