CSS样式 JS逻辑 BOM DOM 节点

最新推荐文章于 2024-04-03 04:45:07 发布

Java1029384756

最新推荐文章于 2024-04-03 04:45:07 发布

阅读量441

点赞数

本文链接：https://blog.csdn.net/Java1029384756/article/details/52801153

版权

CSS样式

<html>

</html>

<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="来，换个色！" ο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"/>


</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>