JavaScript自学代码--(三)

blogofwyl 2021-09-01 原文
  1. //通过 id 查找 HTML 元素
  2. var x = document.getElementById("demo");
  3. //通过标签名查找 HTML 元素
  4. //本例查找 id="main" 的元素,然后查找 id="main" 元素中的所有 <p> 元素:
  5. var x = document.getElementById("main");
  6. var y = x.getElementsByTagName("p");
  7. //修改HTML属性
  8. document.getElementById("demo").attributes = "New value";
  9. //本例改变了 <img> 元素的 src 属性:
  10. document.getElementById("image").src="landscape.jpg";
  11. //如需改变 HTML 元素的样式,请使用这个语法:
  12. document.getElementById("demo").style.property=new style
  13. document.getElementById("p2").style.color="blue";
  14. document.getElementById("p2").style.fontFamily="Arial";
  15. document.getElementById("p2").style.fontSize="larger";
  16. /*
  17. <button type="button"
  18. onclick="document.getElementById(\'id1\').style.color=\'red\'">
  19. 点我!</button>
  20. <h1 onclick="this.innerHTML=\'Ooops!\'">点击文本!</h1>
  21. <p onclick = "this.innerHTML=\'Fuck you!\'">Click</p>
  22. */
  23.  
  24. function displayDate(){
  25. document.getElementById("demo").innerHTML = Date();
  26. }
  27. //<button onclick = displayDate()>display</button>
  28. document.getElementById("myBtn").onclick=function(){displayDate()};
  29. function checkCookies()
  30. {
  31. if (navigator.cookieEnabled==true)
  32. {
  33. alert("Cookies 可用")
  34. }
  35. else
  36. {
  37. alert("Cookies 不可用")
  38. }
  39. }
  40. //JavaScript HTML DOM EventListener
  41. //创建新的 HTML 元素
  42. //如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素
  43.  
  44. function AddElement(){
  45. //这段代码创建新的<p> 元素:
  46. var para = document.createElement("p");
  47. //这段代码创建了一个文本节点:
  48. var node = document.createTextNode("This is a new Node.");
  49. //然后您必须向 <p> 元素追加这个文本节点:
  50. para.appendChild(node);
  51. //最后您必须向一个已有的元素追加这个新元素。
  52. //
  53. //这段代码找到一个已有的元素:
  54. var element = document.getElementById("DIV");
  55. //以下代码在已存在的元素后添加新元素:
  56. element.appendChild(para);
  57. }
  58. //删除已经有的新元素
  59. function DeleteElement(){
  60. var para = document.getElementById("Div");
  61. var child = document.getElementById("p1");
  62. para.removeChild(child);
  63. var para1 = docuemnt.getElementById("div1");
  64. var child1 = document.getElementById("p2");
  65. para1.removeChild(child1);
  66. }
  67. //JS 高级教程
  68.  
  69. function ObjectDemo(){
  70. //求一个字符串的长度
  71. var message = "Hello World!";
  72. var L = message.length; //获取对象的产度
  73.  
  74. // 将对象转换为大写
  75. var Upper = message.toUpperCase();
  76. // 这个例子创建了对象的一个新实例,并向其添加了四个属性:
  77. person = new Object();
  78. person.firstName = "yanlong";
  79. person.lastName = "Wu";
  80. person.age = 23;
  81. person.eyesColor = "Black";
  82. // 本例使用函数来构造对象:
  83. function person(firstName,lastName,age,eyecolor){
  84. this.firstName = firstName;
  85. this.lastName - lastName;
  86. this.age = age;
  87. this.eyesColor = eyecolor;
  88. //在JavaScript中,this通常指向的是我们正在执行的函数本身,或者是指向该函数所属的对象(运行时)
  89.  
  90. function ChangeName(fname,lname){
  91. this.lastName = lname;
  92. this.firstName = fname;
  93. }
  94. function ChangeAge(age){
  95. this.age = age;
  96. }
  97. function ChangeEyeColor(color){
  98. this.eyesColor = color;
  99. }
  100. }
  101. // 创建对象
  102. var myFather = new person("Jone","Doe",50,"Blue");
  103. var myMother = new person("Sally","Hello",50,"BLack");
  104. myFather.lastName;//访问名
  105. myFather.firstName;//访问姓
  106. }
  107. //JavaScript 是面向对象的语言,但 JavaScript 不使用类。
  108. //在 JavaScript 中,不会创建类,也不会通过类来创建对象(就像在其他面向对象的语言中那样)。
  109. //JavaScript 基于 prototype,而不是基于类的。
  110.  
  111. function ForDemo(){
  112. var x ;
  113. var text = "";
  114. var person = {fName :"Jone",lName:"Doe",age:50};
  115. for (x in person){
  116. text += person[x];
  117. }
  118. document.getElementById("demo").innerHTML=text;
  119. }
  120. //JavaScript Number 对象
  121. //JavaScript采用IEEE754标准定义的64位浮点格式表示数字,它能表示最大值为±1.7976931348623157 x 10308,最小值为±5 x 10 -324
  122. //如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 0 和 "x",则解释为十六进制数。
  123. //默认情况下,JavaScript 数字为十进制显示。
  124. //但是你可以使用 toString() 方法 输出16进制、8进制、2进制。
  125.  
  126. //当数字运算结果超过了JavaScript所能表示的数字上限(溢出),结果为一个特殊的无穷大(infinity)值,在
  127. // JavaScript中以Infinity表示。同样地,当负数的值超过了JavaScript所能表示的负数范围,结果为负无穷大
  128. // ,在JavaScript中以-Infinity表示。无穷大值的行为特性和我们所期望的是一致的:基于它们的加、减、乘和
  129. // 除运算结果还是无穷大(当然还保留它们的正负号)
  130.  
  131. function Infinity(){
  132. var myNumber = 2;
  133. while(myNumber != Infinity){
  134. myNumber*=myNumber;
  135. }
  136. }
  137. //NaN - 非数字值
  138. //NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值,来指示其不是数字值。
  139. //你可以使用 isNaN() 全局函数来判断一个值是否是 NaN 值。
  140.  
  141. function testNaN(){
  142. var x = 1000/"ABCD";
  143. isNaN(x);
  144. //return true;
  145. var y = 100;
  146. isNaN(y);
  147. //return false
  148. }
  149. //数字可以是数字或者对象
  150. //数字可以私有数据进行初始化,就像 x = 123;
  151. //JavaScript 数字对象初始化数据, var y = new Number(123);
  152. function testNumber(){
  153. var x = 123;
  154. var y = new Number(123);
  155. typeof(x);//results Number
  156. typeof(y);//results Object
  157. b = (x === y); // is false because x is a number and y is an object.
  158. typeof(b);//return false
  159. }
  160. function IndexOf(){
  161. var str = "Hello world Welcome!";
  162. //字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置:
  163. var n = str.indexOf("Welcome");//return the Position of "Welcome"
  164. //如果没找到对应的字符函数返回-1
  165. //lastIndexOf() 方法在字符串末尾开始查找字符串出现的位置。
  166. var n1 = str.lastIndexOf("Welcome");
  167. //match()函数用来查找字符串中特定的字符,并且如果找到的话,则返回这个字符。
  168. document.write(str.match("world")+"<br>");
  169. document.write(str.match("World")+"<br>");
  170. document.write(str.match("world"));
  171. //replace() 方法在字符串中用某些字符替换另一些字符。
  172. var n2 = str.replace("Hello","Fuck");
  173. //字符串大小写转换使用函数 toUpperCase() / toLowerCase():
  174. var strUpper = str.toUpperCase();
  175. var strLower = str.toLowerCase();
  176. }
  177. //字符串使用strong>split()函数转为数组:
  178. function myFunction()
  179. {
  180. var str="a,b,c,d,e,f";
  181. var n=str.split(",");
  182. document.getElementById("demo").innerHTML=n;
  183. }
  184. function DateDemo(){
  185. new Date() // 当前日期和时间
  186. new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数
  187. new Date(dateString)
  188. new Date(year, month, day, hours, minutes, seconds, milliseconds)
  189. // 设置日期
  190. var myDate = new Date();
  191. myDate.setFullYear(2015,3,3);
  192. //在下面的例子中,我们将日期对象设置为 5 天后的日期
  193. myDate.setDate(myDate.getDate()+5);
  194. //注意: 如果增加天数会改变月份或者年份,那么日期对象会自动完成这种转换。
  195. }
  196. function CompareDate(){
  197. var x = new Date();
  198. x.setFullYear(20100,3,3);
  199. var today = new Date();
  200. if(x > today){
  201. alert("hehe");
  202. }
  203. else{
  204. alert("hah");
  205. }
  206. }
  207. //JavaScript Array(数组) 对象
  208. function TestArray(){
  209. var myArray = new Array();
  210. myArray[0] = "a";
  211. myArray[1] = "b";
  212. myArray[2] = "c";
  213. myArray[3] = "d";
  214. }
  215. Array.prototype.ucase = function()
  216. {
  217. for (i = 0;i<this.length;i++){
  218. this[i] = this[i].toUpperCase();
  219. }
  220. };
  221. //数组的基本操作函数
  222. //合并两个数组 - concat()
  223. //合并三个数组 - concat()
  224. //用数组的元素组成字符串 - join()
  225. //删除数组的最后一个元素 - pop()
  226. //数组的末尾添加新的元素 - push()
  227. //将一个数组中的元素的顺序反转排序 - reverse()
  228. //删除数组的第一个元素 - shift()
  229. //从一个数组中选择元素 - slice()
  230. //数组排序(按字母顺序升序)- sort()
  231. //数字排序(按数字顺序升序)- sort()
  232. //数字排序(按数字顺序降序)- sort()
  233. //在数组的第2位置添加一个元素 - splice()
  234. //转换数组到字符串 -toString()
  235. //在数组的开头添加新元素 - unshift()
  236.  
  237. //JavaScript Boolean(布尔) 对象
  238.  
  239. function MathDemo(){
  240. document.getElementById("n1").innerHTML = Math.round();
  241. document.getElementById("n1").innerHTML = Math.random();
  242. document.getElementById("n1").innerHTML = Math.max(1,5);
  243. document.getElementById("n1").innerHTML = Math.min(1,5);
  244. // Math函数的操作
  245. var x = Math.PI;
  246. var y = Math.sqrt(16);
  247. //JavaScript 提供 8 种可被 Math 对象访问的算数值
  248. //你可以参考如下Javascript常量使用方法:
  249. Math.E;
  250. Math.PI;
  251. Math.SQRT2;
  252. Math.SQRT1_2;
  253. Math.LN2;
  254. Math.LN10;
  255. Math.LOG2E;
  256. Math.LOG10E;

 

发表于
2015-03-03 14:51 
复制乔布斯 
阅读(267
评论(0
编辑 
收藏 
举报

 

版权声明:本文为blogofwyl原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/blogofwyl/p/4310943.html

JavaScript自学代码--(三)的更多相关文章

  1. Oracle客户端PL_SQL的安装 – 复制乔布斯

    Oracle客户端PL_SQL的安装 Oracle数据库的操作大多还是在客户端完成的,因此在众多的客户端软件中 […]...

  2. Oracle数据库的下载和安装 – 复制乔布斯

    Oracle数据库的下载和安装 那天分享一下Oracle的下载和安装的过程,有需要的朋友可以借鉴参考一下。如有 […]...

  3. 股票知识学习1 – 复制乔布斯

    股票知识学习1 股票的定义: 股票是股份证书的简称,是股份公司为筹集资金而发行给股东作为持股凭证并借以取得股息 […]...

  4. 股票知识学习1 – 复制乔布斯

    股票知识学习1 股票的定义: 股票是股份证书的简称,是股份公司为筹集资金而发行给股东作为持股凭证并借以取得股息 […]...

随机推荐

  1. 超好用的UnixLinux 命令技巧 大神为你详细解读

    1、删除一个大文件 我在生产服务器上有一个很大的200GB的日志文件需要删除。我的rm和ls命令已经崩溃,我担 […]...

  2. H3C 聚合链路负载分担原理

     ...

  3. 从“约瑟夫问题”谈起

    从“约瑟夫问题”谈起       约瑟夫问题是一个出现在计算机科学和数学中的问题。在计算机编程的算法中,类似问 […]...

  4. 双系统Ubuntu 无 启用wifi选项

    安装好双系统进入ubuntu(14.04)后发现只能用有线连接,不能用wifi.网络连接里无启用wifi选项。 […]...

  5. 外网SSH访问内网LINUX服务器

    转载 http://www.nat123.com/Pages_8_602.jsp 环境描述:LINUX服务器部 […]...

  6. SQL Server2012高可用之事物复制(发布订阅)测试

      (一)测试目的 目前公司使用的SQL SERVER 2012高可用环境为主备模式,其中主库可执行读写操作, […]...

  7. SimpleMarkdown – 一款简单的Markdown编辑器

    源码地址: https://github.com/zhuangZhou/SimpleMarkdown 预览地址 […]...

  8. UE4 Slate控件之TreeView 使用例子(一)

    TreeView例子 先从Contruct中往子Slot添加Widget,先声明指向STreeView的指针, […]...