HTML
常用标签：
<font></font>：设置字体,字号,颜色；
<br/>：换行；
<center> </center>：居中对齐；
<h> </h>：设置标题级别，H1最大 h6最小；
<div></div>:块级标签，把文档分割为独立的、不同的部分；
<hr />：插入水平线；
<p> </p>：划分段落；
<ol > </ol>：创建有序编号列表；
<li> </li>：定义一个列表项；
<ul > </ul>：定义无序符号列表；
<img />：插入图片；
<table></table>：插入表格；
<tr></tr>：创建一行；
<td></td>：创建一列；
<th></th>：创建一列，元素居中，粗体；
<caption></caption>：设置表格的标题；
表单元素：
<form> </form>：收集用户输入信息,并提交给服务器；
<input type="text" />：创建文本框；
<input type="password" />：创建密码框；
<input type="radio" />：创建单选按钮；
<select > </select>：创建下拉列表框；
<option> </option>：创建列表项；
<input type="checkbox" />：创建复选框；
<textarea> </textarea>：创建文本区域；
<input type="hidden" />：创建隐藏控件；
<input type="submit"/>：创建提交按钮；
<input type="reset"/>：创建重置按钮；
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery-事件</title>
</head>
<body>
<form action="jquery-效果有关的函数.html">
<label>名字</label>
<input type="text" name="name">
<br />
<label>密码</label>
<input type="password" name="pwd">
<br />
<input type="submit" value="提交">
</form>
<hr />
<table border="1px" cellpadding="5" cellspacing="0">
<tr><th>名字</th><th>性别</th><th>年龄</th></tr>
<tr><td>alice</td><td>女</td><td class="last">20</td></tr>
<tr><td>tom</td><td>男</td><td class="last">19</td></tr>
<tr><td>jack</td><td>男</td><td class="last">21</td></tr>
</table>
<script src="../js/jquery.js"></script>
<script>
//1.jquery提供了bind（绑定）函数，用于给对象绑定一个事件
// --- blur失去焦点， --- focus 获取焦点
// --- bind（事件名称，事件触发执行的函数）
$("input:text").bind("blur",function(){
alert("触发了失去焦点事件");
})
//2.接触绑定
// --- unbind:接触绑定
$("input:text").unbind("blur");
//3.阻止默认的submit事件
$("input:submit").bind("click",function(){
console.log("-------点击事件发生了---------");
console.log(event.target);//js对象
console.log($(event.target));
return false;
})
//练习：动态修改表格年龄
let tds = $("table .last");
tds.click(function(){
let td = $(this);
let oldText = td.text();
var input = $("<input></input>")
input.attr("type","text");
input.attr("value",oldText);
input.width(td.width());
td.html(input);
input.click(function(){
return false;
})
// input.focus();//自动获取焦点
input.select();//全选
input.blur(function(){
td.html($(this).val())
})
})
</script>
</body>
</html><a > </a>：超级链接,网页跳转
CSS
选择器:
标签选择器 （元素选择器） 是 指用 HTML 标签名称 作为选择器，按标签名称分类，为页面中某一类标签指定
统一的 CSS 样式。
语法：
标签名 {
属性 1: 属性值 1;
属性 2: 属性值 2;
属性 3: 属性值 3;
...
}
类名选择器（直接使用元素类名）
id选择器（直接使用元素id）
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css的基本选择器</title>
<style>
li{
background-color: green;
list-style: none;
margin: 3px;
}
.group{
color: red;
}
#first{
font-size: 30px;
}
</style>
</head>
<body>
<ul>
<li class="group" id="first">九龙坡</li>
<li>渝中</li>
<li>渝北</li>
<li>江北</li>
<li class="group">沙坪坝</li>
</ul>
</body>
</html>定位：
相关属性：
marging-top：外上边距
margin-right：外右边距
margin-bottom：外下边距
margin-left：外左边距
margin：同时设置上右下左四个外边距 (顺时针)
padding-top：内上边距
padding-right：内右边距
padding- bottom：内下边距
padding-left：内左边距
padding：同时设置上右下左四个内边距
border-top：设置上边线的粗细,颜色,线型
border-right：设置右边线的粗细,颜色,线型
border-bottom：设置下边线的粗细,颜色,线型
border- left：设置左边线的粗细,颜色,线型
border：同时设置四个边线的粗细,颜色,线型
border-width：只设置4个边线的宽度(粗细)
border-color：只设置4个边框的边框颜色
border-style：只设置4个边框的边框线型
绝对定位：position:absolute;
相对定位：position:relative;
浮动定位：
float:设置浮动定位
clear:清除浮动定位的影响
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动练习</title>
<style>
.box{
width: 1400px;
margin: 0 auto;
overflow: hidden;
background-color: #808080;
padding: 8px;
}
.outer{
float: left;
width: 330px;
height: 400px;
background-color: #00FFFF;
margin: 20px;
}
.inner{
margin: 13px;
height: 180px;
background-color: #ADFF2F;
}
</style>
</head>
<body bgcolor="lightgrey">
<div class="box">
<div class="outer"></div>
<div class="outer"></div>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
</div>
</div>
</body>
</html>CSS常用属性：
font-size：字体大小；
color：字体颜色；
font-weight：设置文字粗体；
font-style：设置字体斜体；
font：设置字体所有属性（必须按顺序设置）；
text-decoration：设置文本下划线格式；
text-align：元素中的内容水平方向对齐方式；
line-height：设置行高；
vertical-align：元素中的内容垂直方向的对齐；
text-indent：段落首行缩进；
text-transform：控制英文字母大小写；
width：设置元素的宽度；
heigth：设置元素的高度；
background-color：设置背景颜色；
background-image：设置背景图片；
background-repeat：设置背景图像重复方式；
background-size：设置背景图像的大小；
background-position：设置背景图片的出现位置；
background：设置所有背景属性；
display：设置元素是否可见；
overflow：设置内容超出父区域时如何处理；
list-style-type：设置列表符号类型；
list-style-image：用图片作为编号；
opacity：设置元素的透明度；
cursor：设置鼠标到达元素上的鼠标形状；
border-radius：设置圆角矩形；
JavaScript
常用方法：
getElementById("标签的id属性")：根据标签的id获取标签对象；
getElementsByTagName("标签名")：根据标签名获取包含全部标签的数组；
getElementsByName("name属性值")：根据标签的name的属性值获取所有标签对象数组；
createElement("标签关键字")：根据标签关键字创建标签对象；
appendChild(node)：把参数对象添加到父标签内；
removeChild(node)：为父标签对象删除一个子标签对象；
getAttributeNode("属性名")：根据属性名获取属性对象；
setAttribute("属性名","属性值")：为标签对象添加一个新的属性或改变它现有属性的值；
innerHTML：用来获取或修改标签对象中的文本内容；
parentNode：返回子标签的父标签对象；
firstChild：用来获取父标签的第一子标签对象；
lastChild：返回父标签的最后一个子标签对象；
childNodes：返回父标签所有子节点对象；
nextSibling：返回当前标签对象的下一个兄弟节点；
previousSibling：返回当前标签对象的上一个兄弟节点；
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js-表单输入内容校验</title>
<style>
span{
color: red;
}
</style>
</head>
<body>
<label>用户名</label>
<input type="text" name="uname" onfocus="clearNameMsg(this)" onblur="validName(this)"/>
<span id="unameMsg"></span><br />
<input type="submit" id="submit" value="提交"/>
</body>
<script>
function clearNameMsg(obj){
let span = document.getElementById('unameMsg');
obj.value = "";
span.innerText = "";
}
function validName(obj){
let str = obj.value;
let reg = /^.{5,}$/;
let span = document.getElementById('unameMsg');
if(reg.test(str.trim())){
span.innerText="√";
return true;
}else{
span.innerText="用户名长度必须大于等于5";
return false;
}
}
document.getElementById('submit').onclick = function(){
let ipt = document.getElementsByName("uname")[0];
if(validName(ipt)){
return true;
}
return false;
}
</script>
</html>事件关键字：
onclick：鼠标单击时触发。
onload：页面全部内容被加载后立即触发，该事件源是body。
onmouseover：鼠标进入区域时触发。
onmouseout：鼠标退出区域时触发。
onmousemove：鼠标在某区域移动时触发。
onchange：内容改变时触发。
onsubmit：表单提交数据时触发。
onblur：控件失去焦点时触发。
onfocus：控件获取焦点时触发。
Jquery
选择器：
id选择器：$("#id属性值")
类选择器：$(".class属性的值")
标签选择器：$("标签名")
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery选择器</title>
</head>
<body>
<div id="d1">
<h1>jquery选择器</h1>
<p>
1.id,class,标签-基本选择器
</p>
<p>
2.层次选择器
</p>
<p class="impt">
3.过滤选择器
</p>
<p class="impt">
4.表单选择器
</p>
<p>5.其他选择器</p>
<input value="100" id="ipt1" class="impt"/>
<ul id="box">
<li>1</li>
<li>1</li>
<li>1
<ul>
<li>2</li>
<li>2</li>
<li>2</li>
</ul>
</li>
</ul>
<h4>h4标签</h4>
<h4>h4标签</h4>
<h4>h4标签</h4>
</div>
<span style="display: inline-block;width: 20px;height: 20px;
position: absolute;border-radius: 50%;background-color: #008000;"></span>
<!-- 导入js文件的script标签的内部，不能嵌套其他的js代码，如果嵌套了其他内容，导入的js文件无效 -->
<script src="../js/jquery.js"></script>
<script>
//jquery的选择器函数：$(选择器),选择器可以支持任意css的选择器
$("#d1")//id选择器
$(".impt")//class选择器
$("h1")//标签选择器
$("p.impt").css("background","green");//分类选择器
$("h1,p").css("color","red")//分组选择器
console.log($("*".length));//页面上所有的元素
$("#box>li").css("border","3px solid blue")//找所有的孩子
$("#box li").css("color","yellow")//找所有子孙
$("#box+h4").css("color","pink")//离自己最近的弟弟
$("#box~h4").css("color","aqua")//符合条件的自己的弟弟们
//功能
//1.获取d1中的html，text
// --- jquery中的方法,无参表示获取，有参表示设置
// --- text(),无参表示获取，有参表示设置
// --- html(),无参表示获取，有参表示设置
// --- css(样式名)，css(样式名，样式值)
// --- attr(样式名)，attr(样式名，样式值)
// console.log($("#d1").html());
// console.log($("#d1").text());
// $("#d1").html("<p>修改了内容</p>");
// $("#d1").text("<p>修改了内容</p>");
console.log($("#ipt1").val());
$("#ipt1").val("hello");
console.log($("#d1").width());
$("#d1").width("500px");
console.log($("#d1").attr("id"));
$("#d1").attr("id","d3");
//
</script>
</body>
</html>常用事件方法名：
click() ：当鼠标单击时触发
blur() ：当标签失去焦点时触发
change()： 当标签内容发生改变时触发
dblclick()： 当鼠标双击击时触发
focus()： 当标签获得焦点时触发
keydown() ：当键盘被按下时触发
keyup()： 当键盘被释放时触发
keypress() ：按下并释放时触发
mousedown()：鼠标按下
mouseup()： 鼠标释放时触发
mousemove()： 鼠标移动
mouseout()： 鼠标退出区域
mouseover()： 鼠标进入区域
resize()： 当窗口改变大小时触发
submit()： 表单提交
操作html标签的属性：attr(“属性值”,”修改值”)；removeAttr(“属性值”)；val()；
操作标签内容：html()；text()；
操作标签的css属性：css()；addClass()；removeClass()；
获取标签对象的相关方法：
$("p").eq(n):获取第n+1个标签为p的元素
$("p").parent():获取p的父亲
$("p").next():获取p的下一个兄弟
$("p").prev():获取p的上一个兄弟
扫一扫
440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
