day16 js+dom

简介:

图标网站 http://fontawesome.io/icon

<i class="fa fa-sort" aria-hidden="true"></i>

3.21

函数

   匿名函数

   自执行函数  创建函数并自动执行

     (function(arg){  形参

                    console.log(arg);

               })(1) 实参

序列化  字符串变数

   JSON.stringify()  序列化  从一个对象解析出字符串

   JSON.parse()      反序化  字符串中解析出json对象

转义

- encodeURI( )                   URI中的转义字符

- decodeURI( )                   URl中未转义的字符

     将数据经过转义后,保存在cookie

val = eval(表达式)

时间

     var d = new  Date()

     d.getMinutes()

     d.setMinutes()     

作用域

作用域为可访问变量,对象,函数的集合。


JavaScript 变量生命周期在它声明时初始化。

局部变量在函数执行完毕后销毁。

全局变量在页面关闭后销毁。


  1. 以函数作为作用域

  2. 函数的作用域在函数未被调用之前,就已经创建

  3. 函数的作用域 存在 作用域链,并且也是在被调用之前创建。。先找自己的,自己没有找上一层,没有再找外层。

  4. 函数内的局部变量会提前声明,不进行赋值


 function func() {

     var xo = 'hequan';

     function inner() {

         console.log(xo);

     }

     return inner;

 }

var ret = func()

ret()

    hequan

 function func() {

     console.log(xo);

     var xo = "hequan";

     }

func()

     undefined

面向对象

function foo(n) {

    this.name=n;

    this.sayName = function () {

        console.log(this.name)

    }

}

var obj1 = new foo("hq")

obj1.name

obj1.sayName()

     原形:

function  Foo(n) {

    this.name = n;

}

Foo.prototype = {

    'sayName':function () {

        console.log(this.name)

    }

}

obj1 = new Foo('we');

obj1.sayName()

查找

     直接查找

     var obj = document.getElementById('I1')

     间接查找

     innerText    文本

     innerHtml    全内容

     obj.value   获取值

     样式操作

     .className  

     .classList.add  .remove

     .style.color 

     

     属性操作

     obj.setAttribute("属性","值")

     创建标签 并添加到HTML

           字符串

           insertAdjacentHTML("beforeEnd",obj)

           

           对象的方式

              document.createElement('div')

     提交表单

          document.geElementById('form').submit()

   

     其他

console.log                 输出框

alert                       弹出框

confirm                     确认框  返回true false

// URL和刷新

location.href               获取URL

location.href = "url"       重定向

location.reload()           重新加载

// 定时器

setInterval                 多次定时器

clearInterval               清除多次定时器

setTimeout                  单次定时器

clearTimeout                清除单次定时器

     事件

          onclick,onblur,onfocus

          

document.getElementById             根据ID获取一个标签

document.getElementsByName          根据name属性获取标签集合

document.getElementsByClassName     根据class属性获取标签集合

document.getElementsByTagName       根据标签名获取标签集合

绑定事件两种方式:

     直接绑定   onclick="xx()"

     先获取DOM对象,然后进行绑定

<div  id = 'test'><button type="button">Click Me!</button></div>

<script>

    var mydiv = document.getElementById('test')

    console.log(mydiv)

    mydiv.onclick = function () {

        console.log('asdw');

    }

</script>

this  当前触发事件的标签

第一种绑定方式

 onclick="Chang(this)"

function  Chang(self){

     //self 当前点击的标签

}

第二种绑定方式

<input   id='i1' type='button'>

document.getElementById('i1').onclick = function(){

     //this  代之当前点击的标签

}











本文转自 295631788 51CTO博客,原文链接:http://blog.51cto.com/hequan/1909384,如需转载请自行联系原作者
目录
相关文章
|
3月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
2月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
56 5
|
2月前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
3月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
93 4
|
4月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 节点列表
JavaScript HTML DOM 节点列表
26 5
|
4月前
|
JavaScript 前端开发 索引
JavaScript HTML DOM 集合(Collection)
JavaScript HTML DOM 集合(Collection)
44 4
|
3月前
|
JavaScript 前端开发 容器
js之dom学习
js之dom学习
57 0
|
3月前
|
JavaScript 前端开发 UED
【前端基础篇】JavaScript之DOM介绍2
【前端基础篇】JavaScript之DOM介绍
30 0
|
3月前
|
JavaScript 前端开发 搜索推荐
【前端基础篇】JavaScript之DOM介绍1
【前端基础篇】JavaScript之DOM介绍
44 0