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,如需转载请自行联系原作者
目录
相关文章
|
1月前
|
JavaScript 前端开发
JavaScript操作DOM元素
JavaScript操作DOM元素
12 1
|
1月前
|
JavaScript 前端开发
如何使用 JavaScript 操作 DOM?
如何使用 JavaScript 操作 DOM?
13 0
|
17天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查,通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
|
1月前
|
JavaScript 前端开发 算法
js开发:请解释什么是虚拟DOM(virtual DOM),以及它在React中的应用。
虚拟DOM是React等前端框架的关键技术,它以轻量级JavaScript对象树形式抽象表示实际DOM。当状态改变,React不直接操作DOM,而是先构建新虚拟DOM树。通过高效diff算法比较新旧树,找到最小变更集,仅更新必要部分,提高DOM操作效率,降低性能损耗。虚拟DOM的抽象特性还支持跨平台应用,如React Native。总之,虚拟DOM优化了状态变化时的DOM更新,提升性能和用户体验。
23 0
|
3天前
|
JavaScript 前端开发 UED
深入解析JavaScript原生操作DOM技术
【4月更文挑战第22天】本文深入探讨JavaScript原生DOM操作技术,包括使用`getElement*`方法和CSS选择器获取元素,借助`createElement`与`appendChild`动态创建及插入元素,修改元素内容、属性和样式,以及删除元素。通过掌握这些技术,开发者能实现页面动态交互,但应注意避免过度操作DOM以优化性能和用户体验。
|
10天前
|
存储 JavaScript 前端开发
JavaScript DOM 操作:解释一下 cookie、sessionStorage 和 localStorage 的区别。
Cookie是服务器发送至客户端的文本信息,会随每个请求发送回服务器,适合控制会话状态但可能暴露隐私。SessionStorage仅在当前会话中存储数据,关闭浏览器后清除,适合临时存储如登录状态。LocalStorage则持久保存数据,即使关闭浏览器也不会清除,适用于存储长期设置。三种方式各有侧重,应按需求选择。
15 0
|
10天前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下浏览器的同源策略。
**同源策略**是浏览器安全基石,它阻止脚本跨不同协议、域名或端口访问资源,防止恶意行为。例如,HTTP页面无法直接用JS获取HTTPS页面内容。**CORS**允许跨域请求,但需服务器配合设置,通过`document.domain`属性可配置,但仍受限于服务器配置。
14 4
|
21天前
|
JavaScript
理解DOM树的加载过程(js的问题)
理解DOM树的加载过程(js的问题)
10 0
|
23天前
|
JavaScript 前端开发
深入了解 JavaScript 中的 DOM 和 BOM
深入了解 JavaScript 中的 DOM 和 BOM
18 4
|
30天前
|
JavaScript 前端开发 算法
深入探讨前端框架Vue.js中的虚拟DOM机制
本文将深入探讨前端框架Vue.js中的虚拟DOM机制,分析其原理、优势以及在实际开发中的应用场景,帮助读者更好地理解Vue.js框架的核心特性。