JS学习笔记基础部分

整理了下之前JS的学习笔记,基础部分的知识。
1.className
设置标签的css类的时候不能直接使用class,而是className。

2.设置元素属性的方法
一种是使用 .
一种是使用中括号,使用变量设置css属性值的时候,不能直接写成div1.style.name,应该写成div1.style[name],name是个变量,例如:div1.style[‘name’],div1.style.height,div1.style.width,变量不用加引号,加引号就是字符串了,例如:div1.style[‘width’]是不对的。

3.arguments不定参,参数的个数不固定,是个数组,通过循环操作数组中的参数。
写到参数里的函数调用不需要写括号,例如:function show(){} btn.onclick=show;

4.js中的style只能操作行间样式,不能操作非行间样式。
js中使用currentStyle来获取非行间样式,比如获取<head>标签中的css样式。
currentStyle只支持IE浏览器,getComputedStyle支持火狐、谷歌、IE9以上浏览器,不同的浏览器内核使用不同的属性。
alert(getComputedStyle(oDiv,false).width); 有两个参数,其中oDiv就是要获取样式的那个元素,第二个参数随便填。
if(undefined)返回的是true?

5.isNaN(参数) 函数用于检查其参数是否是非数字值。
typeof(参数) 函数用于返回其参数是什么数据类型。js中一般数据类型有number、string、boolean、function、object、undefined。

6.css中有复合样式(例如:background、border),单一样式(width、height、position)。取背景颜色的时候用backgroundColor。

7.数组
var arr1 = [1,2,3,4,5];
var arr2 = new Array(,6,7,8,9,0);
数组中的length既可以获取,又可以设置。(例如1:arr1.length=3;),(例如2:快速清空数组的方法,arr1.length=0;)。
数组使用原则:数组中应该只存一种类型的变量。
数组的操作1:
尾部添加:arr.push(4); 往数组的尾部添加一个元素。
尾部删除:arr.pop(); 删除数组的尾部的一个元素。
头部添加:arr.unshift(6); 往数组的头部添加一个元素。
头部删除:arr.shift(); 删除数组的第一个元素。
往数组的中间删除元素: arr.splice(2,3); //删除 splice(起点,长度);
往数组的中间插入元素: arr.splice(2,0,’a,’b’,’c’); //插入 splice(起点,长度,元素……);
替换操作:arr.splice(2,2,’a’,’b’);
splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。该方法会改变原始数组。
splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。
提取数组中的元素或者字符串:
array.slice(start, end)
slice() 方法可从已有的数组中返回选定的元素。
slice()方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。slice() 方法不会改变原始数组。
splice() 方法与 slice() 方法的作用是不同的,splice() 方法会直接对数组进行修改。
数组的操作2:
数组拼接:arr1.concat(arr2); 结果是:1,2,3,4,5,6,7,8,9,0 或者arr2.concat(arr1);换下位置
concat(数组2) 连接两个数组
将数组拼接成字符串:var str = arr1.join(‘-’); 结果是:1-2-3-4-5
join(分隔符) 用分隔符,组合数组元素,生成字符串
将字符串分割成数组:var arr3 = str.split(‘-’); 结果是:[1,2,3,4,5];
将数组中的元素排序:arr.sort() 当数组中都是字符串的时候按照首字母进行排序,当数组中都是数字的时候(再不转换类型的情况下,也是先按照字符串排序)
arr.sort([函数]) 比如:arr.sort(function (n1,n2){return n1-n2;})

8.定时器的作用
开启定时器
setInterval 间隔型
setInterval(函数,时间); 多长时间执行一次函数,时间参数为毫秒。例如:setInterval(show, 1000);
setTimeout 延时型
停止定时器
clearInterval
clearTimeout
获取系统时间
var oDate = new Date();
获取时:oDate.getHours();
获取分:oDate.getMinutes();
获取秒:oDate.getSeconds();
字符串和数字相加返回字符串
str.charAt(字符串中的索引),返回字符串中某个下标对应的字符。兼容各个版本浏览器。
获取年:getFullYear();
获取月:getMonth()+1; (注意:获取的月份比实际的月份少1,所以在使用的时候需要加个1)。
获取日:getDate();
获取星期几:getDay(); (注意:星期是从0开始的,0,1,2,3,4,5,6,代表星期日开始,到星期六)。
可以定义一个变量timer用来保存定时器,不用的时候清除掉即可。

9.元素的边距
offsetLeft/offsetTop,元素的左边距,上边距 (返回元素的水平偏移位置 / 返回元素的垂直偏移位置)
offsetWidth/offsetHeight,返回元素的宽度 / 返回元素的高度。
相对定位:relative
如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。
注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
绝对定位:absolute
绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
对于定位的主要问题是要记住每种定位的意义。所以,现在让我们复习一下学过的知识吧:相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块。
注释:根据用户代理的不同,最初的包含块可能是画布或 HTML 元素。
提示:因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

10.DOM基础
元素.childNodes.length (适用于IE6-8)。
通过判断节点类型来对元素进行操作。
元素.childNodes[i].nodeType是节点的类型。
nodeType==1 ——》 元素节点,元素就是标签。
nodeType==3 ——》 文本节点,文本就是普通的前后没有标签包含的文本。
另外一个好用的是 元素.children.length,都兼容。
parentNode元素的父节点。
offsetParent根据元素样式的不同,效果不同,比如当前元素的位置依赖于某个元素的位置。
首尾子节点:
firstChild、lastChild用于获取首尾子节点,只兼容IE6-8。
firstElementChild、lastElementChild用于获取首尾子节点,只兼容高版本浏览器。
解决兼容性的方法是先判断节点是否存在,例如:if(oUl.firstElementChild){//高版本浏览器}else{//IE6-8}
兄弟节点:
nextSibling、previousSibling,用于获取前后子节点,只兼容IE6-8。
nextElementSibling、previousElementSibling用于获取前后子节点,只兼容高版本浏览器。
操作元素的属性:
获取元素属性:getAttribute(名称)
设置元素属性:setAttribute(名称,值)
删除元素属性:removeAttribute(名称)
使用className进行选择元素
var aEle=oParent.getElementsByTagName(‘*’);使用通配符获取某个元素下包含的所有的元素。

11.DOM操作应用
创建DOM元素
document.createElement(标签名) 创建一个节点。
父级.appendChild(节点) 追加一个节点。
例如:在ul中插入li,父级.appendChild(子节点)
插入DOM元素
insertBefore(节点,原有节点) 在已有元素前插入元素
例如:倒序插入li,父级.insertBefore(子节点,在谁之前)。
删除DOM元素
removeChild(节点) 删除一个节点
例如:删除li,父级.removeChild(子节点)
元素.innerHTML给元素添加内容
元素.innerText给元素添加内容,严格注意大小写。
文档碎片
文档碎片可以提高DOM操作性能(理论上),比如在:IE6、IE7浏览器上提升性能效果好。
var oFrag=document.createDocumentFragment();
相当于往袋子里装东西,装完东西把袋子再提袋子。

12.DOM操作高级应用
oTable.getElementsByTagName(‘tbody’)[0].getElementsByTagName(’tr’)[1].getElementsByTagName(‘td’)[1].innerHTML
上边的语句相当于oTable.tBodies[0].rows[1].cells[1].innerHTML
oUl.appendChild(oLi)是先把元素从原有父级上删除,再添加到新的父级里。
oTable.search(arr[j] != -1);说明搜索到了,若等于-1则说明没有搜索到对应的字符串。
字符串做比较的时候,可以通过把两个字符串同时转换为大写或者小写,就可以实现比较时忽略大小写。
sText.split(‘ ’)用于把字符串以某个字符分割成数组。
元素集合类型的数组不是真正的数组,只能使用length,方括号方法,不能使用sort方法。
定义和用法
sort() 方法用于对数组的元素进行排序。
语法
arrayObject.sort(sortby)
sortby可选。规定排序顺序。必须是函数。
返回值
对数组的引用。请注意,数组在原数组上进行排序,不生成副本。
说明
如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。
如果想按照其他标准进行排序,就需要提供比较函数,该函数要比较两个值,然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b,其返回值如下:
1)若 a 小于 b,在排序后的数组中 a 应该出现在 b 之前,则返回一个小于 0 的值。
2)若 a 等于 b,则返回 0。
3)若 a 大于 b,则返回一个大于 0 的值。
function sortNumber(a, b)
{
//正序排序,从小到大
return a - b;
//倒序排序,从大到小
return b - a;
}

  1. 字符串去重
    function quchong2(str){
    var newStr="";
    for(var i=0;i<str.length;i++){
    if(newStr.indexOf(str[i])==-1){
    newStr+=str[i];
    }
    }
    return newStr;
    }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,294评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,493评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,790评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,595评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,718评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,906评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,053评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,797评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,250评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,570评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,711评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,388评论 4 332
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,018评论 3 316
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,796评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,023评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,461评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,595评论 2 350

推荐阅读更多精彩内容