JavaScript自学代码--(三)
- //通过 id 查找 HTML 元素
- var x = document.getElementById("demo");
- //通过标签名查找 HTML 元素
- //本例查找 id="main" 的元素,然后查找 id="main" 元素中的所有 <p> 元素:
- var x = document.getElementById("main");
- var y = x.getElementsByTagName("p");
- //修改HTML属性
- document.getElementById("demo").attributes = "New value";
- //本例改变了 <img> 元素的 src 属性:
- document.getElementById("image").src="landscape.jpg";
- //如需改变 HTML 元素的样式,请使用这个语法:
- document.getElementById("demo").style.property=new style
- document.getElementById("p2").style.color="blue";
- document.getElementById("p2").style.fontFamily="Arial";
- document.getElementById("p2").style.fontSize="larger";
- /*
- <button type="button"
- onclick="document.getElementById(\'id1\').style.color=\'red\'">
- 点我!</button>
- <h1 onclick="this.innerHTML=\'Ooops!\'">点击文本!</h1>
- <p onclick = "this.innerHTML=\'Fuck you!\'">Click</p>
- */
- function displayDate(){
- document.getElementById("demo").innerHTML = Date();
- }
- //<button onclick = displayDate()>display</button>
- document.getElementById("myBtn").onclick=function(){displayDate()};
- function checkCookies()
- {
- if (navigator.cookieEnabled==true)
- {
- alert("Cookies 可用")
- }
- else
- {
- alert("Cookies 不可用")
- }
- }
- //JavaScript HTML DOM EventListener
- //创建新的 HTML 元素
- //如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素
- function AddElement(){
- //这段代码创建新的<p> 元素:
- var para = document.createElement("p");
- //这段代码创建了一个文本节点:
- var node = document.createTextNode("This is a new Node.");
- //然后您必须向 <p> 元素追加这个文本节点:
- para.appendChild(node);
- //最后您必须向一个已有的元素追加这个新元素。
- //
- //这段代码找到一个已有的元素:
- var element = document.getElementById("DIV");
- //以下代码在已存在的元素后添加新元素:
- element.appendChild(para);
- }
- //删除已经有的新元素
- function DeleteElement(){
- var para = document.getElementById("Div");
- var child = document.getElementById("p1");
- para.removeChild(child);
- var para1 = docuemnt.getElementById("div1");
- var child1 = document.getElementById("p2");
- para1.removeChild(child1);
- }
- //JS 高级教程
- function ObjectDemo(){
- //求一个字符串的长度
- var message = "Hello World!";
- var L = message.length; //获取对象的产度
- // 将对象转换为大写
- var Upper = message.toUpperCase();
- // 这个例子创建了对象的一个新实例,并向其添加了四个属性:
- person = new Object();
- person.firstName = "yanlong";
- person.lastName = "Wu";
- person.age = 23;
- person.eyesColor = "Black";
- // 本例使用函数来构造对象:
- function person(firstName,lastName,age,eyecolor){
- this.firstName = firstName;
- this.lastName - lastName;
- this.age = age;
- this.eyesColor = eyecolor;
- //在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象(运行时)
- function ChangeName(fname,lname){
- this.lastName = lname;
- this.firstName = fname;
- }
- function ChangeAge(age){
- this.age = age;
- }
- function ChangeEyeColor(color){
- this.eyesColor = color;
- }
- }
- // 创建对象
- var myFather = new person("Jone","Doe",50,"Blue");
- var myMother = new person("Sally","Hello",50,"BLack");
- myFather.lastName;//访问名
- myFather.firstName;//访问姓
- }
- //JavaScript 是面向对象的语言,但 JavaScript 不使用类。
- //在 JavaScript 中,不会创建类,也不会通过类来创建对象(就像在其他面向对象的语言中那样)。
- //JavaScript 基于 prototype,而不是基于类的。
- function ForDemo(){
- var x ;
- var text = "";
- var person = {fName :"Jone",lName:"Doe",age:50};
- for (x in person){
- text += person[x];
- }
- document.getElementById("demo").innerHTML=text;
- }
- //JavaScript Number 对象
- //JavaScript采用IEEE754标准定义的64位浮点格式表示数字,它能表示最大值为±1.7976931348623157 x 10308,最小值为±5 x 10 -324
- //如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 0 和 "x",则解释为十六进制数。
- //默认情况下,JavaScript 数字为十进制显示。
- //但是你可以使用 toString() 方法 输出16进制、8进制、2进制。
- //当数字运算结果超过了JavaScript所能表示的数字上限(溢出),结果为一个特殊的无穷大(infinity)值,在
- // JavaScript中以Infinity表示。同样地,当负数的值超过了JavaScript所能表示的负数范围,结果为负无穷大
- // ,在JavaScript中以-Infinity表示。无穷大值的行为特性和我们所期望的是一致的:基于它们的加、减、乘和
- // 除运算结果还是无穷大(当然还保留它们的正负号)
- function Infinity(){
- var myNumber = 2;
- while(myNumber != Infinity){
- myNumber*=myNumber;
- }
- }
- //NaN - 非数字值
- //NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值,来指示其不是数字值。
- //你可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值。
- function testNaN(){
- var x = 1000/"ABCD";
- isNaN(x);
- //return true;
- var y = 100;
- isNaN(y);
- //return false
- }
- //数字可以是数字或者对象
- //数字可以私有数据进行初始化,就像 x = 123;
- //JavaScript 数字对象初始化数据, var y = new Number(123);
- function testNumber(){
- var x = 123;
- var y = new Number(123);
- typeof(x);//results Number
- typeof(y);//results Object
- b = (x === y); // is false because x is a number and y is an object.
- typeof(b);//return false
- }
- function IndexOf(){
- var str = "Hello world Welcome!";
- //字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置:
- var n = str.indexOf("Welcome");//return the Position of "Welcome"
- //如果没找到对应的字符函数返回-1
- //lastIndexOf() 方法在字符串末尾开始查找字符串出现的位置。
- var n1 = str.lastIndexOf("Welcome");
- //match()函数用来查找字符串中特定的字符,并且如果找到的话,则返回这个字符。
- document.write(str.match("world")+"<br>");
- document.write(str.match("World")+"<br>");
- document.write(str.match("world"));
- //replace() 方法在字符串中用某些字符替换另一些字符。
- var n2 = str.replace("Hello","Fuck");
- //字符串大小写转换使用函数 toUpperCase() / toLowerCase():
- var strUpper = str.toUpperCase();
- var strLower = str.toLowerCase();
- }
- //字符串使用strong>split()函数转为数组:
- function myFunction()
- {
- var str="a,b,c,d,e,f";
- var n=str.split(",");
- document.getElementById("demo").innerHTML=n;
- }
- function DateDemo(){
- new Date() // 当前日期和时间
- new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数
- new Date(dateString)
- new Date(year, month, day, hours, minutes, seconds, milliseconds)
- // 设置日期
- var myDate = new Date();
- myDate.setFullYear(2015,3,3);
- //在下面的例子中,我们将日期对象设置为 5 天后的日期
- myDate.setDate(myDate.getDate()+5);
- //注意: 如果增加天数会改变月份或者年份,那么日期对象会自动完成这种转换。
- }
- function CompareDate(){
- var x = new Date();
- x.setFullYear(20100,3,3);
- var today = new Date();
- if(x > today){
- alert("hehe");
- }
- else{
- alert("hah");
- }
- }
- //JavaScript Array(数组) 对象
- function TestArray(){
- var myArray = new Array();
- myArray[0] = "a";
- myArray[1] = "b";
- myArray[2] = "c";
- myArray[3] = "d";
- }
- Array.prototype.ucase = function()
- {
- for (i = 0;i<this.length;i++){
- this[i] = this[i].toUpperCase();
- }
- };
- //数组的基本操作函数
- //合并两个数组 - concat()
- //合并三个数组 - concat()
- //用数组的元素组成字符串 - join()
- //删除数组的最后一个元素 - pop()
- //数组的末尾添加新的元素 - push()
- //将一个数组中的元素的顺序反转排序 - reverse()
- //删除数组的第一个元素 - shift()
- //从一个数组中选择元素 - slice()
- //数组排序(按字母顺序升序)- sort()
- //数字排序(按数字顺序升序)- sort()
- //数字排序(按数字顺序降序)- sort()
- //在数组的第2位置添加一个元素 - splice()
- //转换数组到字符串 -toString()
- //在数组的开头添加新元素 - unshift()
- //JavaScript Boolean(布尔) 对象
- function MathDemo(){
- document.getElementById("n1").innerHTML = Math.round();
- document.getElementById("n1").innerHTML = Math.random();
- document.getElementById("n1").innerHTML = Math.max(1,5);
- document.getElementById("n1").innerHTML = Math.min(1,5);
- // Math函数的操作
- var x = Math.PI;
- var y = Math.sqrt(16);
- //JavaScript 提供 8 种可被 Math 对象访问的算数值
- //你可以参考如下Javascript常量使用方法:
- Math.E;
- Math.PI;
- Math.SQRT2;
- Math.SQRT1_2;
- Math.LN2;
- Math.LN10;
- Math.LOG2E;
- Math.LOG10E;
版权声明:本文为blogofwyl原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。