HTML,CSS,JS,DOM,jQuery
HTML
超链接访问顺序
a:link-->a:visited-->a:hover-->a:active.（有顺序）
link:表示从未访问过的链接的样式
visited：表示已经访问过的链接样式
hover：表示当鼠标放在上面的链接样式
active：表示点击链接时的样式
HTML选择器
1.标记选择器：形如：
<style type="text/css">
h1{
color: red;
font-size: 15px;
}
</style>
2.类别选择器，形如：
<style type="text/css">
.red{
color: red;
}
</style>
<p class="red">用了类别选择器</p>
3.ID选择器,形如：
<style type="text/css">
#red{
color: red;
}
</style>
<p id="red">用了ID选择器</p>
总结：#：ID，‘.’：class
复合选择器
1
<style>
p.special{
color:red
}
</style>
<p class="special">只有p标签中 class 是special时，该标签起作用</p>
2.并集选择器
<style>
h1,h2,h3{
color:red
}
*{
color:red
}
</style>
<h1>代表了h1, h2, h3都有公共的样式，红色, *带表的是这个页面整体字体颜色是红色</h1>
3.后代选择器
<style>
p span{
color:red
}
</style>
<p>
<span>p的后带只要有span，则字体都显示红色</span>
</p>
<p>
<a href="http://www.baidu.com"><span>这里的字体也是红色的</span></a>
</p>
4.子选择器：
<style>
p>span{
color:red
}
</style>
<p>
<span>这有这中类型才显示样式</span>
</p>
<p>
<a href="http://www.baidu.com"><span>这里的样式不显示</span></a>
</p>
盒子模型
margin属性 |
| margin | 解释 |
|---|---|
| margin:20px | (外边距) 上、下、左、右各20px |
| margin: 20px 40px | (外边距)上、下20px；左、右40px |
| margin: 20px 40px 60px | 上20px；左、右40px；下60px |
| margin: 20px 40px 60px 80px | 上20px；右40px；下60px；左80px |
overflow属性
当盒子里面的内容超过盒子范围，可以使用overflow来设置。
| 属性值 | 描述 |
|---|---|
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容 |
垂直方向盒子叠加问题
标准文档流中，两个盒子，分别有上下外边距，竖直方向的margin不叠加，只取较大的值作为margin(水平方向的margin是可以叠加的)。
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin叠加</title>
<style>
*{
padding: 0;
margin: 0;
}
.a{
width: 100px;
height: 100px;
border:1px solid;
background-color: teal;
margin-bottom: 10px;
}
.b{
width: 100px;
height: 100px;
border:1px solid;
background-color: red;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>
</html>
上下两个盒子的距离不是30px；而是20px
div独占一行
盒子居中
margin:0px auto;第一个参数任意，第二个参数浏览器会自动解析，并让盒子水平居中显示，即margin-left和margin-right的数值一样。
文档流定位
block
独占一行，元素的`height`，`width`，`margin`,`padding`都可以设置
常见的有：<div>,<ol>,<ul>,<p>,<h1>...<h6>,<table>,<form>
可以将元素显示为block的样式：
display:block;
inline
- 不独占一行.
width,height,不可设置,
但是margin的左右修改可以生效，上下修改无效
padding的左右修改可以生效（范围变大了，对周围元素没有影响），上下修改无效width就是它包含的文字或者图片宽度，不可改变- 常见的
inline元素：<span>,<a> - 可以将元素显示为
inline的样式：display:inline;
inline-block
- 不独占一行
- 元素的
height，width，margin,padding都可设置 - 常见的有
<img> - 可以将元素显示为
inline-block的样式：
display:inline-block;
总结：元素可以进行类型转换:使用display属性
inline元素间隙问题：给父级设置：font-size:0即可
CSS
CSS书写顺序
位置属性(position, top, right, z-index, display, float等)
大小(width, height, padding, margin)
文字系列(font, line-height, letter-spacing, color- text-align等)
背景(background, border等)
其他(animation, transition等)
JS
== 和 === 的区别
等于： == 等于是简单的做字面值的比较
全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型
如
<script type="text/javascript">
var a = "2";
var b = 2;
alert(a == b); //true
alert(a === b); //false
</script>
JS的特殊值: undifined,NAN...
① undefined：js中变量未赋值则显示undefined
② null：空值
③ NAN:(not a number)非数字类型
④ Javascript中所有变量都可以当作boolean类型处理
其中0,null,undefined,NaN,""(空串)当作false处理
如
<script type="text/javascript">
var a = null;
if (a)
alert("null是true")
else
alert("null是false") //结果输出这句
var b = NaN;
if (b)
alert("NaN是true")
else
alert("NaN是false") //结果输出这句
</script>
&&和||的特殊情况
- &&且运算有两种特殊情况
第一种：当表达式全为真的时候。返回最后一个表达式的值。
第二种：当表达式中，有一个为假的时候，返回第一个为假的表达式的值 - ||或运算有两种特殊情况
第一种：当表达式全为假时，返回最后一个表达式的值
第二种：只要有一个表达式为真。就会返回第一个为真的表达式的值
如
<script type="text/javascript">
var a = "abc"; //所有类型变量都可当作boolean处理
var b = true;
var c = false;
var d = null;
alert(a && b);//true
alert(b && a);//abc
alert(a && c && d);//false
alert(c || d);//null
alert(d || c);//false
alert(a || b || d);//abc
</script>
数组
<script type="text/javascript">
var a = [];//空数组
alert(a.length)//0
a[0] = 3; //java中数组长度为0 则a[0]会报下标异常，js中不会
a[2] = "abc";
for (var i=0; i<a.length; i++){
alert(a[i]);//结果a[0]=3;a[1]=undefined;a[2]=abc
}
</script>
函数
<script type="text/javascript">
/*
方式一
*/
//无参函数
function hello(){
alert("你好");
}
hello(); //调用
//有参函数,且带返回值
function sum(a,b){
return a + b;
}
alert(sum(3,5));
/*
方式二
*/
var fun = function (a,b){
return a + b;
}
alert("方式二："+fun(3,8));
</script>
隐藏参数
<script type="text/javascript">
function fun(){
alert(arguments.length); //结果是2,就是传入的a,b
}
<!--调用-->
fun('a','b');
</script>
自定义对象
<script type="text/javascript">
var obj = { //定义一个对象
name: 'marry', //属性值
age: 18,
fun1: function (){ //定义一个方法
alert("我是方法1");
},
fun2: function (){
alert("我是方法2");
}
};
//调用
obj.fun2();
</script>
js常用事件onload,onclick,onblur...
onload的静态注册
<script type="text/javascript">
function onloadFun() {
alert("静态注册");
}
</script>
<body onload="onloadFun();">
</body>
onload的动态注册
<script type="text/javascript">
window.onload = function (){
alert("动态注册");
}
</script>
<body>
</body>
onclick的静态动态操作
<script type="text/javascript">
//静态注册
btn1 = function(){
alert("点击了按钮1");
};
//动态注册
window.onload = function (){
//1.获取标签对象
let btn2 = document.getElementById("btn2");
// alert(btn2); //结果：[object HTMLButtonElement]
//2.通过标签对象.事件名 = function(){};
btn2.onclick = function (){
alert("点击了按钮2");
}
};
</script>
<body>
<button onclick="btn1();">按钮1</button>
<button id="btn2">按钮2</button>
</body>
onblur函数
<script type="text/javascript">
//静态注册
let blurFun = function (){
alert("用户名框失去焦点")
}
//动态注册
window.onload = function (){
//1.获取标签对象
let pwd = document.getElementById("pwd");
//2.标签对象.函数名 = function(){};
pwd.onblur = function (){
alert("密码框失去焦点")
}
}
</script>
<body>
用户名：<input type="text" onblur="blurFun()"><br>
密码：<input id="pwd" type="password">
</body>
DOM
如：
- getElementsByName的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//全选
function checkAll(){
//1.根据name获取dom对象，getElementsByName返回的是一个集合
let hobby = document.getElementsByName("hobby");
// alert(hobby[0]); //集合中每个元素都是一个对象 【[object HTMLInputElement]】
//2.让其全选
for (let i=0;i<hobby.length;i++)
//checked:可读可写，既可以读取，也可以赋值
hobby[i].checked = true;
}
//全不选
function checkNo(){
let hobby = document.getElementsByName("hobby");
for (let i=0;i<hobby.length;i++)
hobby[i].checked = false;
}
//反选
function checkReverse(){
let hobby = document.getElementsByName("hobby");
for (let i=0;i<hobby.length;i++){
hobby[i].checked = !hobby[i].checked;
}
}
</script>
</head>
<body>
爱好：
<input type="checkbox" name="hobby" value="aa">aa
<input type="checkbox" name="hobby" value="bb">bb
<input type="checkbox" name="hobby" value="cc">cc
<br>
<button onclick="checkAll();">全选</button>
<button onclick="checkNo();">全不选</button>
<button onclick="checkReverse();">反选</button>
</body>
</html>
jQuery
- 可以通过cdn引入jQuery
如：
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
alert($); //测试用
</script>
- 也可以下载jquery（略），自行引入
如
<script src="根据下载的jquery引入">
jquery-html(),val(),text()用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
我是div。<span>我是div中的span</span>
</div>
<input id="input">
<button id="btn">点我</button><br>
单选
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女<br>
多选
<input type="checkbox" name="intrest" value="1">a
<input type="checkbox" name="intrest" value="2">b
<input type="checkbox" name="intrest" value="3">c<br>
下拉框
<select id="select">
<option value="1">a</option>
<option value="2">b</option>
</select>
<!--引入jQuery-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
// html(): 获取和设置起始标签和结束标签之间的内容，带HTML
// text(): 获取和设置起始标签和结束标签之间的纯文本，不带HTML样式
// val(): 获取和设置表单项中value属性值之间的纯文本，不带HTML样式
//val可以设置单选，复选，下拉框选中值
// 以上三个方法 不传参值是获取值，传参是赋值操作
$(function (){ //页面初试化
alert($('div').html()); //结果：我是div。<span>我是div中的span</span>
alert($('div').text()); //结果：我是div。我是div中的span
//设置选中值
$(':radio').val(['1'])； //让value=1的选中
$(':checkbox').val(['1','2']) //让value=1，2的选中
$('#select').val(['2']) //让value=2的选中
});
$('#btn').click(function (){
alert($('#input').val()); //在框里输入abc。结果弹出abc
});
</script>
</body>
</html>
