首先我们来看这样一道题

<div id='foo' class='aa bb cc'></div>写出如何判断此div中是否含有aa(注:aa成立,aaa不成立)

首先,我们一定是取出class里面的这个字符串,然后我们想办法判断出这个字符串里面是否存在aa,并且只有aa。

我给大家提供了三种方法,第一种利用getAttribute方法,第二种利用getElementByClassName,第三种就是正则匹配了。

代码如下:

        /*
***用getAttribute方法实现
*/
var oFoo = document.getElementById('foo');
var str = oFoo.getAttribute('class');
var arr = str.split(' ');
for(var i=;i<arr.length;i++){
if(arr[i]=='aa'){
alert('yes');
break;
}else if(i==arr.length-&&arr[i]!='aa'){
alert('no');
}
}
        /*
***用getElementByClassName实现
*/
var oEle = document.getElementsByClassName('aa');
console.log(oEle[]);
if(oEle[]!=undefined){
alert('yes');
}else{
alert(' no');
}
         /*
**正则匹配
*/
var str = document.getElementById('foo').getAttribute('class');
console.log(str);
var re = /(\sa{}\s)|(^a{}\s)|(\sa{}$)/g;
alert(re.test(str));

正则这一定要注意了,这里有一个小坑就是可能会有人这么用:

var re = /a{}/g;

这么用的问题就是的确是只匹配2个a,但是三个a其实也是成立的,因为整个字符串中三个a也是满足两个a的条件。而且我们需要满足存在aa条件就必须要有存在空格的情况。所以三种开情况必须都要考虑全面(正则的坑还是蛮多的,主要的坑不是语法,而是我们的逻辑)。

下面我们来看第二道比较坑的题目(关于js连等复制的指针指向问题)

题目是这样子的:

var a = {x:1};
var b=a;
a.c = a = {x:2};

a.c的值是多少?

首先看到了肯定是a指向{x:1}

然后b指向{x:1},之后a又指向{x:2}

然后a中添加属性c为{x:2}

那么a的值就变成了{x:2,c:{x:2}}

所以结果应该是:{x:2}

其实这个逻辑是错误的,我们忽略了b指针的赋值,所以往下所有的结果都是错误的

我们来看下面代码

    var a = {x:};
var b=a;
a.c = a = {x:};
console.log(a.c);//undefined
console.log(b);//{x:1,c:{x:2}}
console.log(a);//{x:2}

没错a.c的运行结果是undefined,没错就是你看到的,其实在最后一步的时候

1.先执行的是把a的指针指向了{x:1}

2.然后把b的指针指向了a指针的指向,也就是{x:1}

3.然后在把a的指针指向{x:2},这个时候b的指针是{x:1}

4.所以连等中a.c中的a其实并不是上面指针指向啊a,因为连等操作还没有做完,所以a的指针指向的是{x:1},然后给{x:1}添加c属性赋值为{x:2}

所以现在的结果就是b--->{x:1,c:{x:2}}   a--->{x:2}

相信你看到这里就明白了,你在输出的a中是没有c属性的,所以a.c的值为undefined

如果到这里你真的明白了,那么在js底层数据指针的问题,我想你就应该算是了解透彻了!

下面我们来看一下最后一道题:

    var x=;
o={
x:,
getVal:function(){
alert(x);
var x = ;
(function(){
alert(this.x++);
})();
       alert(++this.x);
}
};
o.getVal();

请问三次alert分别是输出什么?

首先我们看第一个alert,这个alert输出的一定是一个undefined,因为alert后面有一句var x,这个就相当于是定义了局部的变量,然后我们的x就相当于预定义了一个

var x = undefined;所以输出的一定是undefined;

然后第二个alert因为在一个闭包里面,所以里面的this指向的是window,所以x就是1,因为后运行的++,所以是先alert出1之后,x的值就变成了2;

关于第三个this,指向的一定是调用它方法的那个对象也就是o,this.x指向的也就是o.x,因为前置++,所以alert出来的结果是11。

这样子看来,this是不是很好辨认呢?

    var x=;
o={
x:,
getVal:function(){
alert(x);//undefined
var x = ;
(function(){
alert(this.x++);//
})();
alert(++this.x);//
}
};
o.getVal();

js基础篇(dom操作,字符串,this等)的更多相关文章

  1. 【2017-03-28】JS基础、DOM操作

    一.JS基础 1.javascript功能 ⑴进行数据运算 ⑵控制浏览器功能 ⑶控制元素的属性.样式.内容 2.javascript位置和格式 可以放在html页的任意位置,也可以创建一个以js结尾的 ...

  2. jquer 基础篇 dom操作

    DOM操作: 1.新增元素:创建元素:$("HTML")返回的创建成功的新元素新增子元素:元素.append(obj) 在匹配元素的里面新增一个子元素 追加方式 新元素作为最后一个 ...

  3. 【JS基础】DOM操作

    appendChild() //向节点添加最后一个子节点 createElement() //创建元素节点 createTextNode() //创建文本节点,字符串值

  4. js基础总结01 --操作DOM

    1.选择对象 通过id来选择绑定一个dom节点 :document.getElementById('p1'): 通过类名来绑定一个类数组的对象集合,:document.getElementsByCla ...

  5. 前端面试题目汇总摘录(JS 基础篇)

    JS 基础 JavaScript 的 typeof 返回那些数据类型 object number function boolean undefined string typeof null; // o ...

  6. JS基础篇--sort()方法的用法,参数以及排序原理

    JS基础篇--sort()方法的用法,参数以及排序原理   sort() 方法用于对数组的元素进行排序,并返回数组.默认排序顺序是根据字符串Unicode码点.语法:arrayObject.sort( ...

  7. python基础篇(文件操作)

    Python基础篇(文件操作) 一.初始文件操作 使用python来读写文件是非常简单的操作. 我们使用open()函数来打开一个文件, 获取到文件句柄. 然后通过文件句柄就可以进行各种各样的操作了. ...

  8. js中的DOM操作汇总

    一.DOM创建 DOM节点(Node)通常对应于一个标签,一个文本,或者一个HTML属性.DOM节点有一个nodeType属性用来表示当前元素的类型,它是一个整数: Element,元素 Attrib ...

  9. GSAP JS基础教程--TweenLite操作元素的相关属性

    今天来学习用TweenLite操作元素的各种属性,以Div为例,其他元素的操作也是一样的,只是可能一些元素有它们的特殊属性,就可能不同罢了.   代码里用详细注释,我就不再重复啦,大家看代码就可以啦! ...

随机推荐

  1. 20145311王亦徐《JAVA程序设计》课程总结

    20145311王亦徐<JAVA程序设计>课程总结 每周读书笔记链接汇总 第一周读书笔记 第二周读书笔记 第三周读书笔记 第四周读书笔记 第五周读书笔记 第六周读书笔记 第七周读书笔记 第 ...

  2. 20145326实验四 Android开发基础

    20145326实验四 Android开发基础 一.实验内容及步骤 安装 JDK 并配置 JDK 环境变量 找到之前path变量中的jdk文件所在位置并复制. 并用复制的变量名新建一个 JAVA_HO ...

  3. 【max_result_window大小】 Result window is too large的问题

    方法一: 如果需要搜索分页,可以通过from size组合来进行.from表示从第几行开始,size表示查询多少条文档.from默认为0,size默认为10, 如果搜索size大于10000,需要设置 ...

  4. ZOJ 2314 Reactor Cooling(无源汇上下界网络流)

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2314 题意: 给出每条边流量的上下界,问是否存在可行流,如果存在则输出. ...

  5. spring boot2 基于百度云apiface实现人脸检测与认证2

    接上一篇,上篇只实现了人脸的认证,接下来实现人脸的检测. 原理介绍: 把摄像头抓拍的图像上传到服务器,服务器把图像上传到百度云,百度云返回识别出的人脸的数量和位置,前端根据服务端的返回,在图像中画出人 ...

  6. Eclipse插件Fat Jar

    1.安装 1)Eclipse在线更新方法 Help > Install New Software > Add, name:Fat Jar location:http://kurucz-gr ...

  7. 在 R 中使用 Python 字符串函数

    sprintf( )函数很强大,但并非适用于所有应用场景.例如,如果一些部分在模板中多次出现,那么就需要多次写一样的参数.这通常会使得代码冗长而且难以修改:sprintf("%s, %d y ...

  8. 用Python操作Named pipe命名管道,实用做法——os.read 或 os.write

    https://blog.csdn.net/mayao11/article/details/50618598

  9. 1003: [ZJOI2006]物流运输 最短路+dp

    https://www.lydsy.com/JudgeOnline/problem.php?id=1003 数据范围很小,怎么瞎搞都行,n方dp,然后跑出最短路暴力转移,需要注意的是不能使用的可能有多 ...

  10. java中可以让程序暂停几秒执行的代码

    //n为毫秒数 try { Thread.sleep ( n ) ; } catch (InterruptedException ie){} try { TimeUnit.SECONDS.sleep( ...