CSS样式
<html>
<meta charset="utf-8"/>
<head>
<!-- 外联样式表-->
<!-- <link rel="stylesheet" type="text/css" href="FirstCSS.css"/>-->
<!-- 嵌入样式表-->
<style type="text/css">
/*
p{
color:darkgreen;
}
*/
/* .pb{background-color: palegreen;color: royalblue}*/
/* #q{background-color: red}*/
/* 包含选择器*/
p {
color: red;
font-weight: bold;
}
/*
div span{
color: aqua;
}
*/
*{
color: bisque;
}
/* 伪类伪元素选择器*/
a:link{
color:black;text-decoration: none;font-size: 80;
}/*未访问的连接*/
a:visited{
color: black;
}/*已访问的连接*/
a:hover{
color:red;
}/*鼠标在连接上*/
a:active{
color: bisque;
}/*激活连接*/
/* 多个选择器*/
#q,.pb,p,span,a{
/* color:rgb(212,23,25);*/
/* color: rgb(20%,40%,80%);*/
/*
color:#000000;
color: #ffffff;
color: #ff33ee;
*/
color: aquamarine;
font-weight: bold;
font-family: '楷体';
}
#l9{
font-size: 90px;
font-variant:small-caps;
vertical-align: middle;
}
#l91{
font-size: 90px;
background-image: url(gameImg/d101.png);
background-position: center;
background-size: 100px;
}
</style>
<!-- 内联样式表-->
<p style="color:red;font-size:1in">内联</p><!-- 单个字最小像素12,设置小于12还是一样 -->
</head>
<body>
<div>
<span>hongse</span>
<span>真的是红色</span>
<p>绿色</p>
<p class="pb">P标签</p>
<input name="a" value="o" type="text" class="pb"/>
<textarea class="pb" name="t" value="q" cols="16" rows="9">会不会变色?</textarea>
<h1 class="pb">肯定会变色</h1>
<p id="q">肯定会变色</p>
<a href="www.baidu.com">百度</a>
<label id="l9">hsa<img src="gameImg/d603.png" />ihf</label>
<label id="l91">Hhsaihf</label>
</div>
</body>
</html>
JS
<html>
<meta charset="utf-8"/>
<head>
<script type="text/javascript">
var count = 1;
function clickBtn(){
// var obj = new Object();
// obj.myname = "test";
// alert(obj.myname);
var arr = new Array();
arr.push("string1");
arr.push("string2");
arr.push("string3");
arr.push("string4");
// alert(arr.length);
var arr1 = new Array("str1","str2","str3");
// alert(arr1[1]);
var arr2 = new Array(2);
arr2[2] = 4;
// alert(arr2.length);
var newArr = [1,true,null,"test1"];
// alert(newArr[3]);
//日期
var myDate = new Date();
// alert(myDate.getYear() + "/" + myDate.getMonth() + "/"+ myDate.getDate());
// var str = "alert";
// var str2 = "('Hello!');";
// eval(str + str2);
// eval("var m_x = 30; m_x+=60;");
// alert(m_x);
var m_x1 = new Number(10);
var m_y = eval("1+3+5+7+" + m_x1);
// alert(m_y);
// alert(m_x1 instanceof Number);
// testFuc();
// testFuc_number(10,20,30);
// alert(testFuc_return_number(1,3,5));
alert(arrayMathFuc([1,2,3,4,5,7]));
alert(count);
sortArray([1,2,3,4,5,7]);
}
function sortArray(arr){
for(var i = 0; i < arr.length; i++){
for(var j = i + 1; j < arr.length; j++){
if(arr[j] > arr[i]){
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
}
}
}
function arrayMathFuc(arr){
var sums = arr[0];
for(var i = 1; i < arr.length; i++){
sums *= arr[i];
}
return sums;
}
//无参
function testFuc(){
alert("普通方法");
}
//有参
function testFuc_number(num1,num2,num3){
alert(num1 + num2 + num3);
}
//有返回值
function testFuc_return_number(num1,num2,num3){
return num1 + num2 + num3;
}
</script>
</head>
<body>
<input type="button" value="clickMe" οnclick="clickBtn()"/>
</body>
</html>
DOM和BOM
<html>
<meta charset="utf-8"/>
<head>
<style type="text/css">
#p_m{
color:dodgerblue;
font-size: 30px;
font-weight: bold;
}
</style>
<style type="text/css">
#p_m{
color:firebrick;
font-size: 50px;
}
table{
font-style: italic;
}
#myDiv{
background-color: firebrick;
width: 200px;
height: 200px;
border: 5px double black;
}
</style>
<script type="text/javascript">
function clickMoveFuc(){
// moveBy(100,80);
// moveTo(200,100);
// resizeBy(-50,-50);
// resizeTo(300,300);
// alert("alert");
// window.alert("window.alert");
// alert(window.confirm("请问是否确认抄代码?"));
// alert("您输入的用户名是:" + window.prompt("这里是标题","请输入用户名"));
// forms : 表单集合
// images : 图片集合
// links : 超链接集合
// alert(document.forms[0].action);
// document.links;
// document.images;
// alert(document.forms["myForm"].method);
// alert(document.links["m_jd"].href);
// host : URL中的主机名称
// port : 端口
// protocol : 协议
// search : URL中问号后面的部份
// alert(location);
// alert("主机: " + location.host);
// alert("端口: " + location.port);
// alert("协议: " + location.protocol);
// alert("键值对: " + location.search);
location.href = "http://www.jd.com";
// location.replace("hello.html");
// location.reload(true);
alert("当前页面个数: " + history.length);
}
function clickBack(){
// history.go(-1);
history.back();
}
function clickGo(){
// history.go(1);
history.forward();
}
//获取元素
function clickGetElement(){
var select_element = document.getElementById("mySelect");
// alert(mySelect);
// var list = document.getElementsByName("myP");
// alert(list.length);
// var list1 = document.getElementsByTagName("p");
// alert(list1.length);
var p_m = document.getElementById("p_m");
// alert(p_m.style.color);
// p_m.style.color = "green";
// p_m.style.color = "yellow";
// p_m.style.fontSize = "50px";
// p_m.style.fontWeight = "bold";
//styleSheets:所有样式表的集合
// alert(document.styleSheets[1].cssRules[0].style.color);
// document.styleSheets[1].cssRules[0].style.color = "fuchsia"; //获取样式表css
// alert(document.styleSheets[1].cssRules[0].style.item(1)); //获取指定索引的css属性名
// document.styleSheets[1].cssRules[0].style.removeProperty("font-size"); //删除指定样式
// document.styleSheets[1].cssRules[0].style.removeProperty("color"); //删除指定样式
// document.styleSheets[1].rules //IE是rules 其他浏览器为cssRules
}
function clickDivChangeColor(){
//Math.floor(Math.random()*256); 地板函数
//方法1
// document.styleSheets[1].cssRules[2].style.backgroundColor =
// "rgb(" + parseInt(Math.random()*256) + "," + parseInt(Math.random()*256) + "," + parseInt(Math.random()*256) + ")";
//方法2
// document.getElementById("myDiv").style.backgroundColor =
// "rgb(" + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + "," + Math.floor(Math.random()*256) + ")";
var mypwdinput = document.getElementById("my_pwd");
alert(mypwdinput.value);
}
</script>
</head>
<form id="myForm" action="http://www.baidu.com" method="post">
</form>
<!--
<input type="button" value="move" οnclick="clickMoveFuc()"/>
<input type="button" value="后退" οnclick="clickBack()"/>
<input type="button" value="前进" οnclick="clickGo()"/>
-->
<input type="button" value="来,换个色!" οnclick="clickGetElement()"/>
<select id="mySelect">
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
<p id="p_m" name="myP">字段1</p>
<p name="myP">字段2</p>
<p name="myP">字段3</p>
<p name="myP">字段4</p>
<p>字段5</p>
<div id="myDiv"></div>
<input type="button" value="div变色" οnclick="clickDivChangeColor()"/>
<input id="my_pwd" type="password"/>
<!--
<a href="http://www.163.com">网易</a>
<a href="http://taobao.com">淘宝</a>
<a id="m_jd" href="http://jd.com">京东</a>
-->
</html>
节点
<html>
<meta charset="utf-8"/>
<head>
<style type="text/css">
.myClass{
color:aqua;
}
.newClass{
color: firebrick;
}
</style>
<script type="text/javascript">
function clickBtn(){
var myP = document.getElementById("myP");
// alert(myP.childNodes[0]);
// alert("nodeName:" + myP.firstChild.nodeName +
// " nodeType:" + myP.firstChild.nodeType +
// " nodeValue:" + myP.firstChild.nodeValue);
// alert("nodeName:" + myP.nodeName +
// " nodeType:" + myP.nodeType +
// " nodeValue:" + myP.nodeValue);
myP.firstChild.nodeValue = "新勒字段";
// alert(myP.hasChildNodes());
// alert(myP.attributes[0].nodeName + " value: " + myP.attributes[0].nodeValue);
// alert(myP.attributes[2].nodeValue);
var img = document.createElement("img"); //创建一个元素
// document.createAttribute("src");
img.src = "image/logo.png"; //设置属性
// document.getElementsByTagName("body")[0].appendChild(img);
var mySelect = document.createElement("select"); //元素
mySelect.id = "mySelect";
var mOption1 = document.createElement("option"); //一个选项
var textNode = document.createTextNode("JAVA"); //文本节点
mOption1.appendChild(textNode);
mySelect.appendChild(mOption1);
var mOption2 = document.createElement("option");
mOption2.appendChild(document.createTextNode("PHP"));
mySelect.appendChild(mOption2);
// document.getElementById("myDiv").appendChild(mySelect);
// myP.className = "newClass";
// alert(myP.getAttribute("name")); //getAttribute(xx) == .xx;
// myP.setAttribute("name","my_newP"); //setAttribute(xx,xx) == .xx = yy;
myP.removeAttribute("class"); //删除某个属性
var m_div = document.getElementById("myDiv");
// m_div.removeChild(m_div.childNodes[1]); //删除节点
// m_div.childNodes[1];
// m_div.replaceChild(mySelect,document.getElementById("myLabel")); //替换节点
// var clone_select = mySelect.cloneNode(true); //克隆节点,参数为是否克隆子节点,所有属性都会克隆,所以要第一时间修改他的ID
// alert(clone_select.id);
// m_div.appendChild(clone_select);
//innertHTML innerText
alert(m_div.innerHTML);
alert(m_div.innerText);
// myP.firstChild.nodeValue = "xx";
myP.innerHTML = "inner的新字段";
m_div.innerHTML = m_div.innerHTML + "<a href='http://www.baidu.com'>我是超链接</a>";
m_div.innerHTML += "<textarea>我是新加的文本域</textarea>";
var newSelect = document.createElement("select");
var newOption = document.createElement("option");
newOption.innerHTML = "北京";
newSelect.appendChild(newOption);
m_div.appendChild(newSelect);
}
</script>
</head>
<body>
<p id="myP" name="newP" class="myClass">我是字段</p>
<div id="myDiv">
<label id="myLabel">我是标签</label>
</div>
<input type="button" value="点我" οnclick="clickBtn()"/>
</body>
</html>