笔记
HTML主要是学习各种标签
CSS在页面里添加一些图片使内容跟丰富JS和JQ主要学习一些方法事件使页面动起来。
font 字体标签属性有size color face 它们分别可以改变 字的大小 颜色 和字体
<h>标题 字号从小到大 h1>h2>h3>h4>h5<h6<h7
<br>换行
<p>段落
表格
<table>
<tr>
<td colspan=""rowspan=""></td>
</tr>
</table>
?
单元格的合并：
只要找准跨行还是跨列
图片
<imgsrc="图片的地址：目前相对路径的写法，总是要找相对的位置 ./ 代表当前的路径 ../ 回到上一层的路径 "/>
超链接
<ahref="要跳转的一个地址"target="打开的方式：_self _blank">链接</a>
CSS
part 1使用div和css完成网页制作
我们之前使用表格的布局制作网页,但是表格制作有缺陷,所以我们需要使用这种方式.
div能更灵活的布局网站div HTML的块标签
<div></div>:默认每个div占一行
<span></span> : 默认在同一行css : 层叠样式表
*用于美化HTML
*知道CSS的语法
? 包含两个部分 一个是选择器,一个是声明
属性 值属性 值
h1 {color:bule; font-size:14px; }
选择器 声明 声明CSS引入的方式(3种)
行内样式:
直接在HTML的元素上(<body>里)使用style属性设置CSS(局限性:只能针对一个元素设置)
页面内的样式:
通常在<head>标签中
外部样式:
新建一个CSS文件. 如何从CSS文件引入到HTML文件 使用<link>关键字
<link href="css文件的地址 "rel = "stylesheef"(可以不写) type="text/css"/>
?
就近原则:
CSS的选择器
元素选择器
div{
border:1px solid blue;
width:40px;
height:45px;
}ID选择器
<style>
#id的名称{
参数
}
</style>类选择器:
一次选择多个一类的元素
.divclass{
?
}一些说明
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
//元素选择器
div{
color: red;//div里内容的颜色
border: 2px solid blue; //设置div的边框的大小和颜色
font-size: 95px;//设置字体的大小
width: 300px; //边框的宽度
height: 150px;//边框的高度
}
//ID选择器
#h01{//固定格式: #id的名称
color: darkturquoise;
height: 200px;
border: solid black;
}
//类选择器
.divclass{ // .class的名字
color: green;
border: 5px solid red;
}
</style>
</head>
<body>
<div>001</div>
<div id="h01">002</div>
<div class="divclass">003</div> // class=的内容不用加 .
<div class="divclass">004</div>
<div class="divclass">005</div>
</body>
</html>CSS的浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
使用float属性
left
right
none
inherit
clear{
clear : both;
}
?
通过浮动和清除可以控制一行出现几个商品CSS的其他选择器
属性选择器
<style>
?
input[type = "text"]{
?
}
?
</style>后代选择器
div span{} 查找的是所有的div中所有的span元素 ,不区分子父类层级子元素选择器
div > span{}CSS的样式
背景,文本,字体,链接等 查看W3 School
part2---CSS的盒子模型及定位
使用div和css布局注册页面
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
CSS padding 属性定义元素边框与元素内容之间的空白区域。
CSS padding 属性
CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值，但不允许使用负值。
例如，如果您希望所有 h1 元素的各边都有 10 像素的内边距，只需要这样：
h1 {padding: 10px;}您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：
h1 {padding: 10px 0.25em 2ex 20%;}
单边内边距属性
也通过使用下面四个单独的属性，分别设置上、右、下、左内边距：
padding-top
padding-right
padding-bottom
定位 position ,left,right
? position:
? absolute 滚动
? fixed 不滚动
显示和隐藏:
display:
? block:显示
? mone:隐藏
? inline:在一行显示
JavaScript
JS概述:运行在浏览器端的一个脚本语言.
ECMAScript: JS的基本的语法
BOM:浏览器对象模型
DOM: 文本对象模型
JS的用途:使页面更加丰富,可以动起来
JS的基本语法
1.区分大小写
2.弱变量类型的语言
? 定义所有的变量都用 var
? var=1; var="abc";
3.每行结尾的;分号可有可无
4.注释,变量的命名和java一样（字母 数字 下划线 美刀符）
JS的数据类型
1.原始类型
undefined 未定义类型
boolean布尔类型
number 数字类型
string 字符 或字符串
null object如果变量是一种引用类型或者null类型2.引用类型
对象类型，对象的默认值是null
JS中的运算符
与JAVA基本一致,只有一个
?
=== 全等 类型和值都一样的情况下才为trueJS的一些语句
与java中的一致,
for（var = 1 ； i<10 ; i++ ）{}
for (var i in list){} 从list里面 取元素JS的输出语句
document.getElementBYId("id") 通过ID获取元素
JS的通常的开发步骤:
JS通常由一个事件触发
触发一个函数,定义一个函数.
获得操作对象的控制权
修改要操作的对象的属性值
?
定义函数:
function 函数名称(){
//函数体
}
?
匿名函数
window.onload = function()
{}
?
常用事件
onsubmit
onload 页面加载
onclick 单击
ondblclick 双击
onmouseover 鼠标指到这儿
onmouseout鼠标离开
?JS的引入方式
一种:页面内直接编写JS代码,
<script>
</script>
第二种：在.JS文件写，在HTML中引入JS中 <head>调用
JS校验
<form action="" method="post"
funtion checkForm(){
}
JS完成图片滚播
HTML中的window对象的
setInterval 按照周期，每几个多少毫秒执行某个表达式 执行无数次
setTimeout 按照毫秒数执行一个表达式 执行一次
清除：
clearInterval();
clearTimeout();
匿名函数：
window.onload = function（）{}
JS中的BOM对象 （Browser对象）
1.window
alert（） 警告框，弹出对话框 不用加window。
SetInterval（）
SetTimeout（）
clearSetInterval（）
ClearSetTimeout（）
confirm() 弹出一个确认窗口 一般用于设置删除数据的时候
prompt（） 弹出一个输入的窗口
open（）；打开一个新的窗口Navigator 对象
包含的都是有关浏览器的信息
appName 返回浏览器的信息
Screen ： 用来获得屏幕的信息 window.screen.
history.go(-1)/history.back
location.href="";
//alert
//排除法
JS的输出
document.getElementById("").innerHTML="HTML的代码"
onfocus 获得焦点
onblour 失去焦点
onsubmit 提交的时候
ECMAscript:语法:
记住与java语法不一样的地方：
? 弱变量类型的语言：var
? === ： 全等 类型和值都相等才为ture；
BOM：浏览器对象模型
window：
? setInterval/clearInterval
? setTimeout/clearTimeout
? alert(): 一般调试用
? confirm（） ：确认框
? prompt（）：可输入的对话框
? open（） :打开一个小窗口
history：
? history.go(-1) / history.back()
location
? location.href="" :可以用作页面的跳转
DOM
JS的事件总结(记)
onchange:下拉列表事件
ondblclick:双击事件
onload
onclick
onsumbit
onfocus:
onblur:
?
键盘操作事件
onkeypress:
onkeydown:
onkeyup: 按下抬起的那一刻
?
鼠标操作事件
onmousemove:鼠标移动
onmouseout:鼠标离开
onmouseover: 鼠标放上去
onmousedown:
onmouseup:
?JS获得表格的行数
*获得表格的控制权
? *var tab1 = document.getElementById("tab1")
? *var len = tab1.rows.length;
<script>
//所有表格改变颜色
/*function changeColor(){
var tab1 = document.getElementById("tab1");
var len = tab1.rows.length;
for(var i = 0 ;i < len; i++){
if(i%2 == 0){
tab1.rows.style.backgroundColor="red";
}else{
tab1.rows.style.backgroundColor="green";
}
}
}*/
//除表头外其余表格改变颜色
/*function changeColor(){
var tab1 = document.getElementById("tab1");
var len = tab1.tBodies[0].rows.length;
for (var i =0 ; i<len ; i++) {
if (i%2 == 0) {
tab1.tBodies[0].rows.style.backgroundColor = "blue";
}else{
tab1.tBodies[0].rows.style.backgroundColor = "gold";
}
}
}*/
//全选 全不选
function seletAll() {
var selectall = document.getElementById("selectAll");
var otherbox = document.getElementsByName("otherselect");
?
if(selectall.checked == true) {
for(var i = 0; i < otherbox.length; i++) {
otherbox.checked = true;
}
} else {
for(var i = 0; i < otherbox.length; i++) {
otherbox.checked = false;
}
?
}
}
</script>
JS中的DOM对象
DOM的概述
什么是DOM(文档对象模型)
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。
我们写的html文件都是一个文档document
head body 标签 都是 Element对象
标签里面写的东西 都是Text对象,
HTML DOM 对象参考手册
?
对象 描述
Document 代表整个 HTML 文档，可被用来访问页面中的所有元素
Anchor 代表 <a> 元素
Area 代表图像映射中的 <area> 元素
Base 代表 <base> 元素
Body 代表 <body> 元素
Button 代表 <button> 元素
Event 代表某个事件的状态
Form 代表 <form> 元素
Frame 代表 <frame> 元素
Frameset 代表 <frameset> 元素
Iframe 代表 <iframe> 元素
Image 代表 <img> 元素
Input button 代表 HTML 表单中的一个按钮
Input checkbox 代表 HTML 表单中的复选框
Input file 代表 HTML 表单中的文件上传
Input hidden 代表 HTML 表单中的隐藏域
Input password 代表 HTML 表单中的密码域
Input radio 代表 HTML 表单中的单选按钮
Input reset 代表 HTML 表单中的重置按钮
Input submit 代表 HTML 表单中的确认按钮
Input text 代表 HTML 表单中的文本输入域（文本框）
Link 代表 <link> 元素
Meta 代表 <meta> 元素
Object 代表 <Object> 元素
Option 代表 <option> 元素
Select 代表 HTML 表单中的选择列表
Style 代表单独的样式声明
Table 代表 <table> 元素
TableData 代表 <td> 元素
TableRow 代表 <tr> 元素
Textarea 代表 <textarea> 元素
?Document的常见的操作
获取元素
getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合
?
创建元素
document.createElement() 创建元素
document.createTextNode() 创建文本
添加节点:
element.appendChild() 在最后添加一个节点
element.insertBefore() 在某个元素之前插入
删除元素
element.removeChild() 删除元素
[使用JS完成省市联动的效果]
创建数组
1.new array();
new array(size);
new array(element0 , element1 , element..........);
2.var arrs=[1,2,3,4];
下拉列表的改变的事件 onchange
JS的内置对象:
String
number
Date
getTime();返回1970.1.1至今的毫秒数
http://www.baidu.com?time=newdate().getTime()
JS的全局函数
parseInt() ;
parseInt("111");
parseFloat();
解码
decodeURI()
decodeURIComponet()
编码
encodeURI()
encodeURIComponent()
eval函数:
将一段内容当成是JS的代码来执行
var s = "alert('aaaaa')"
eval(s);
JSON 数据:
JQuary总结
JQ的方法只能由JQ的对象调用
核心的函数:$()
? 括号里面可以写
? 1.选择器
? 2.原生的JS对象
? 3.数组
选择器
1.id选择器
$("#id")2.类选择器
$(".class")3.元素选择器
$("div")
4.后代选择器
空格 $("form input")
5.属性选择器
$("input[属性名称=属性值]");
根据某个元素中某种属性的值来匹配元素
$("div[id=d1]");
如此id=d1的div就会被选中
6.表单选择器
:checked 单选
:selected 下拉列表
效果函数
基本的显示隐藏 show() hide()
向上下滑动 : slideup() / slidedown()
淡入淡出 : fideIn() fideOut()
JQ改变页面样式的两类方式
1.通过css()
? 使用再样式代码比较少的情况下
2.通过 addClass()/removeClass()/toggleClass()
? 适用于 样式事先定义好的情况下
Jq操作元素属性
attr()/porp()
1.
$("#id").prop("src") 获取属性值
$("#id").prop("src","12") 修改属性值
$("#id").prop({"src":"123","":""}) 一次性修改多个
html()/text()/val()
$("#id").html()获取元素里的html代码
$("#id").html("<span>dadad</span>") 用括号里的内容覆盖原有内容 可以再里面写HTMl标签
?
$("#id").text() 获取元素里的文本
$("#id").text("<span>dadad</span>")
?
$("#id").val();获取元素里的value属性值jq的文档操作
事件
跟JS的事件是一致的 ,只不过去掉ON
$("#id").click(function(){});
$("#id").on("click"function(){});
$("#id").bind("click"function(){});
|
|
收藏
淘帖
踩
