miaov-关于this

  • getElementsByTagName(动态方法) 与 getElementById(静态方法) 的区别

  1、ID前面只能跟document,不能跟其他元素,比如:document.getElementById(‘list‘)
      TagName前面可以跟其他元素也可以跟document,比如:oUl.getElementsByTagName(‘li‘)
    2、ID只能找到一个元素
       TagName找到一堆元素的集合,因此在用的时候必须要加上:[]
    3、ID如果不存在,用getElementById查找,就找不到
       TagName如果不存在,在后面动态添加了,再用getElementsByTagName查找,这时就可以找到。

  • document.body、document.title
  document.title = 123;
    document.body.innerHTML = ‘abc‘;
  • for循环

例子一:
    for (var i=0;i<aLi.length;i++) {}

    每执行一次for循环,需要去计算一下aLi.length,因此出于性能方面的考虑,将代码更改成如下:
    var len = aLi.length
    for (var i=0;i<len;i++) {}

    例子二:
    为body添加3000个按钮
    for (var i=0;i<3000;i++) {
        document.body.innerHTML += ‘<input type="button" value="按钮" />‘
    }

    每执行一次,需要去计算document.body.innerHTML的内容,找到后往里添加一个按钮,
    出于性能方面的考虑,先用一字符串存起来,最后再添加到document.body.innerHTML中,修改如下:

    var str = ‘‘;
    for (var i=0;i<3000;i++) {
        str += ‘<input type="button" value="按钮" />‘
    }

    document.body.innerHTML = str;

    例子三:
    for(var i=0;i<100;i++) {}
    for(var i=0;i<200;i++) {}
    并列的话,var变量赋值可以是同名

    for(var i=0;i<10;i++) {
        for (var j=0;j<10;j++) {}
    }
    嵌套的话,var变量赋值不能相同

  • cssText 行间样式

   oDiv.style.width = ‘200px‘;
    oDiv.style.height = ‘200px‘;

    oDiv.style.cssText =‘width:200px;height:200px;‘

    都是表示行间的样式,cssText是覆盖原先的行间样式。

  • this:指的是调用当前方法(函数)的那个对象

  1、alert(this) = window.alert(this)    this=>window
    2、function(){} = window.function() {}
    3、
        function fn1() {
            this
        }
        fn1();      this=>window
    4、
       oDiv.onclick = fn1;    this=>oDiv
    5、
       oDiv.onclick = function() {
            this          this=>oDiv
        }
    6、 oDiv.onclick = function() {
        fn1();        fn1()里的this=>window
        }
    7、<div onclick=‘ this ‘></div>   this=>div
    8、<div onclick=‘ fn1() ‘></div>   fn1()里的this=>window

    总结:
        1、直接调用函数,比如:fn1() ,this=>window
        2、谁调用this就是指谁

本文为转载抄袭,如有侵权请联系撤销!!
时间: 2024-10-01 08:07:41

miaov-关于this的相关文章

【Miaov】JS2-for应用

for应用 获取元素的第一种方法根据id名称获取 document.getElemensById("") 获取元素的第二种方法根据标签获取 document.getElementsByTagName("")------动态方法,返回元素的集合类似于数组, 获取元素的第三种方法页面只有一个元素的可以直接跟元素获取document.body.innerHTML="abc"document.title=123 以id元素获取方法,前面只能跟docume

数据结构Set和Map

一.数据结构 Set 集合的基本概念:集合是由一组无序且唯一(即不能重复)的项组成的.这个数据结构使用了与有限集合相同的数学概念,应用在计算机的数据结构中.  特点:key 和 value 相同,没有重复的 value.ES6 提供了数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. 1. 如何创建一个 Set const s = new Set([1, 2, 3]); 2.属性 console.log(s.size); // 3 3.Set 类的方法 --set.add(v

jquery13 attr() prop() val() addClass()等 : 对元素属性的操作

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script src="jquery-2.0.3.js"></script> <script> jQu

2.精通前端系列技术之JavaScript模块化开发

在使用seajs模块化开发之前,直接在页面引用js会容易出现冲突及依赖相关的问题,具体问题如下 问题1:多人开发脚本的时候容易产生冲突(比如全局参数冲突,方法名冲突),可以使用命名空间降低冲突,不能完全避免冲突 // JavaScript Document /*var a = 10; function tab(){} function drag(){} function dialog(){}*/ var miaov = {}; //名字比较长 , 只能降低冲突,不能完全避免 miaov.a =

HTML5结合百度地图API创建地图应用

具体的百度地图API的使用方法查看百度地图API里的DEMO <style> #div1{ width:400px; height:400px; border:1px #000 solid;} </style> <script src="http://api.map.baidu.com/api?v=1.3"></script> <script> window.onload = function(){ var oInput =

JavaScript基础课程笔记

JS入门基础_热身课程 写JS的步骤 希望把某个元素移除的实现 获取元素 事件 如何添加事件 函数 测试 变量 JS的属性操作 HTML属性操作 属性读写操作的注意事项 []中括号的使用 条件判断 数组 for应用 cssText文本格式化与属性操作 按钮点击之后,不再重复功能的思路 this指向及this应用 自定义属性.索引值 自定义属性的读写操作 自定义属性应用 获取自身递增数字及匹配数组内容 添加索引值.匹配数组.HTML元素 数据类型.类型转换 数据类型 JS数据类型转换 JS方法:N

前端网站资源精编!!

不要吝啬你的赞美喜欢就点个赞 目录: 1-------- 走进前端2-------- jQuery3-------- CSS4-------- Angularjs5-------- ES66-------- React7-------- 移动端API8-------- avalon9-------- Requriejs10-------- vue11-------- Seajs12-------- Less,sass13-------- Markdown14-------- D315------

每天一个JS 小demo之韩雪冬轮播图。主要知识点:html,css布局,对于数组和对象的理解和运用

1 @charset "utf-8"; 2 /* CSS Document */ 3 4 * { padding: 0; margin: 0; } 5 li { list-style: none; } 6 img { border: none; } 7 body { background: #ececec; padding-top: 50px; } 8 9 #automatic { width: 970px; height: 344px; position: relative; mar

jQuery07源码 (3803 , 4299) attr() prop() val() addClass()等 : 对元素属性的操作

var nodeHook, boolHook, rclass = /[\t\r\n\f]/g, rreturn = /\r/g, rfocusable = /^(?:input|select|textarea|button)$/i; jQuery.fn.extend({ attr: function( name, value ) { //遍历this //arguments.length > 1,jQuery.attr(this[i],name,value),返回this //arguments

随机图片滚动(随机数+变化函数),可运行

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>随机图片滚动</title> <!--可成功执行,布局有点混乱...懒得改了.需要一个js文件,在上一文章中有--> <style type="text/css"> *{ padding:0; margin: 0;