首先我们来看这样一道题

<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. Android实践项目汇报

    Android实践项目:推箱子 推箱子是一款来自日本的古老游戏,其设计目的是训练人的逻辑思维能力.游戏场景一般是设定在空间狭小的仓库中,要求把箱子摆放到指定位置.这就要求玩家巧妙的运用有限的空间和通道 ...

  2. java 中 Cannot make a static reference to the non-static 解决方法

    今天敲代码的时候遇到了这个问题,大体这个问题可以简化成这样: public class Test1 { public String get() { return "123"; } ...

  3. Java回顾之多线程

    在这篇文章里,我们关注多线程.多线程是一个复杂的话题,包含了很多内容,这篇文章主要关注线程的基本属性.如何创建线程.线程的状态切换以及线程通信,我们把线程同步的话题留到下一篇文章中. 线程是操作系统运 ...

  4. 计算机网络七层协议模型 “开放系统互联参考模型”,即著名的OSI/RM模型(Open System Interconnection/Reference Model)

    计算机网络七层协议模型 作者:Ryan    时间:2013年10月7日 一.物理层(Physical Layer) OSI模型的最低层或第一层,规定了激活.维持.关闭通信端点之间的机械特性.电气特性 ...

  5. UVA-673 Parentheses Balance(栈)

    题目大意:给一个括号串,看是否匹配. 题目分析:一开始用区间DP写的,超时了... 注意:空串合法. 代码如下: # include<iostream> # include<cstd ...

  6. ASP.NET Page 指令

    一些重要的Page指令 虽然Page公开了很多属性,让我们可以在运行时调整它的状态与行为,但是,还有些重要的参数却是以“指令”方式提供的,需要在设计时就指定.下面是我整理的一些我认为 比较重要并且经常 ...

  7. python批量给云主机配置安全组

    python批量给云主机配置安全组 用公有云的思路去思考去实现一个安全稳定.可伸缩和经济的业务构架,云运维是有别与传统运维的,比如说了解公有云的都知道安全组的概念,安全组跟防火墙功能很相似,那我的机器 ...

  8. POJ 3279 Filptile dfs

    题目链接:http://poj.org/problem?id=3279 大意:给出一块n*m的棋盘.里面放满了棋子.有1和0两种状态.给出初始状态,翻动的时候会把当前位置和当前位置的上下左右共五个位置 ...

  9. CF 483B. Friends and Presents 数学 (二分) 难度:1

    B. Friends and Presents time limit per test 1 second memory limit per test 256 megabytes input stand ...

  10. RabbitMQ三种Exchange模式

    RabbitMQ中,所有生产者提交的消息都由Exchange来接受,然后Exchange按照特定的策略转发到Queue进行存储 RabbitMQ提供了四种Exchange:fanout,direct, ...