开发中遇到的问题及基础知识点

于 2018-04-03 18:43:00 发布
阅读量157 收藏
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/u/3719399/blog/1789467
版权

js对节点的操作，添加，删除，获得父节点，子节点，兄弟节点

[javascript]

1.<pre name="code" class="javascript">var chils= s.childNodes; //得到s的全部子节点   

 

2.var par=s.parentNode; //得到s的父节点   

 

3.var ns=s.nextSbiling; //获得s的下一个兄弟节点   

  

4.var ps=s.previousSbiling; //得到s的上一个兄弟节点   

  

5.var fc=s.firstChild; //获得s的第一个子节点   

  

7.var lc=s.lastChile; //获得s的最后一个子节点  

[javascript] 

1.访问节点  

  1. document.getElementById(id);  
  2. 返回对拥有指定id的第一个对象进行访问    
  3. document.getElementsByName(name);  
  4. 返回带有指定名称的节点集合  
  5. 注意:Elements  
  6. document.getElementsByTagName(tagname);  
  7. 返回带有指定标签名的对象集合  
  8. 注意：Elements    
  9. document.getElementsByClassName(classname);  
  10. 返回带有指定class名称的对象集合  
  11. 注意：Elements  

 

2.生成节点  

  1. document.createElement(eName);  
  2. 创建一个节点  

 

  1. document.createAttribute(attrName);  
  2. 对某个节点创建属性  

 

  1. document.createTextNode(text);  
  2. 创建文本节点  

 

  

3.添加节点  

  1. document.insertBefore(newNode,referenceChild);  
  2. 在某个节点前插入节点    
  3. document.insertBefore(newNode,referenceChild.nextSibling）
  4. 在某个节点的下一个节点之前插入新节点，即：在某个节点之后插入新节点。注：neborNode.previousSibling :获取已知节点的相邻的上一个节点  
  5. JS(JavaScript)插入节点的方法appendChild与insertBefore及他们的区别。
  6. parentNode.appendChild(newNode);  
  7. 给某个节点添加子节点  

 

4.复制节点  

  1. cloneNode(true | false);  
  2. 复制某个节点  
  3. 参数：是否复制原节点的所有属性  

 

 

5.删除节点  

  1. parentNode.removeChild(node)  
  2. 删除某个节点的子节点  
  3. node是要删除的节点  
  4. 注意：IE会忽略节点间生成的空白文本节点(例如，换行符号)，而Mozilla不会这样做。在删除指定节点的时候不会出错，但是如果要删除最后一个子结点或者是第一个子结点的时候，就会出现问题。这时候，就需要用一个函数来判断首个子结点的节点类型。  
  5. 元素节点的节点类型是 1，因此如果首个子节点不是一个元素节点，它就会移至下一个节点，然后继续检查此节点是否为元素节点。整个过程会一直持续到首个元素子节点被找到为止。通过这个方法，我们就可以在 Internet Explorer 和 Mozilla 得到正确的方法。（详情参考复习- js中typeof与instanceof的用法）

 

  6.修改文本节点  

  1. appendData(data);  
  2. 将data加到文本节点后面    
  3. deleteData(start,length);  
  4. 将从start处删除length个字符    
  5. insertData(start,data)  
  6. 在start处插入字符,start的开始值是0;    
  7. replaceData(start,length,data)  
  8. 在start处用data替换length个字符   
  9. splitData(offset)  
  10. 在offset处分割文本节点   
  11. substringData(start,length)  
  12. 从start处提取length个字符  

7.属性操作  

  1. getAttribute(name)  
  2. 通过属性名称获取某个节点属性的值 
  3. html代码
<input type="text" id="txtMsg" myAttr="abc" />  
js代码
1 通过attributes属性或getAttribute(name)方法获取自定义属性值

var myAttr = document.getElementById("txtMsg").attributes["myAttr"].value;   //通过attributes属性  
var myAttr = document.getElementById("txtMsg").getAttribute("myAttr");       //使用getAttribute方法  

2 使用setAttribute(name, value)方法设置属性值

document.getElementById("txtMsg").setAttribute("myAttr", "newValue");

3 使用removeAttribute(name)方法删除属性

document.getElementById("txtMsg").removeAttribute("myAttr");
  4. setAttribute(name,value);  
  5. 修改某个节点属性的值    
  6. removeAttribute(name)  
  7. 删除某个属性  

8.查找节点  

  1. parentObj.firstChild  
  2. 如果节点为已知节点的第一个子节点就可以使用这个方法。此方法可以递归进行使用  
  3. parentObj.firstChild.firstChild.....  
  4. parentObj.lastChild  
  5. 获得一个节点的最后一个节点，与firstChild一样也可以进行递归使用  
  6. parentObj.lastChild.lastChild.....    
  7. parentObj.childNodes  
  8. 获得节点的所有子节点，然后通过循环和索引找到目标节点  

 

11.javascript 变量类型

a.typeof 判断变量类型

//typeof 两种用法
var name ="lyl";
console.log(typeof name); //string 
console.log(typeof(name)); //string

b.undefined

var address;
console.log(address) //undefined

c.null 如果定义的变量准备将来用于保存对象，那么最好将改变量初始化为null而不是其他值

null和undefined的区别

typeof null        // object (因为一些以前的原因而不是'null')
typeof undefined   // "undefined"
null === undefined // false
null  == undefined // true
null === null // true
null == null // true
!null //true

12.数值转化

var x = "1",name_01="mary";
console.log(typeof x); // string

x = Number(x);
console.log(typeof x); // number

name_01=Number('name_01');
console.log(typeof name_01);//NaN

var topValue ='28px';
console.log(topValue - 10); //NaN  原因28px为字符串

topValue =  parseInt("28px")
console.log(topValue) //28  长用到

var parseValue = "12.34px";
console.log(parseFloat(parseValue)) //12.34
console.log(parseInt(parseValue))   //12

var parseValue2 = "12.34.23px";
console.log(parseFloat(parseValue2)) //12.34

var e = parseInt('0123')
console.log(e) //123 自动去掉0

var o = parseInt('0123xy')
console.log(o) //123


//数值转化为string
var toStringNum = 100;
console.log(typeof toStringNum.toString()) //string
console.log(typeof string(toStringNum)) //string

//数值转化为boolean

//数字转化为 布尔类型 除0以外都为true
var toBooleanNum = 1；
var toBooleanNum2 = 123；
var toBooleanNum3 = 0；
console.log(Boolean( toBooleanNum)) //true
console.log(Boolean( toBooleanNum2)) //true
console.log(Boolean( toBooleanNum3)) //false

//字符串转化为 布尔类型 除" "以外都为true
var toBooleanString = " "；
var toBooleanString2 = "hello"

console.log(Boolean( toBooleanString)) //false
console.log(Boolean( toBooleanString2)) //true

//null undefind 布尔转化都为 false

var toBooleanStringNull = null;
var toBooleanStringUndefind = undefind;

console.log(Boolean( toBooleanStringNull)) //false
console.log(Boolean( toBooleanStringUndefind)) //false

注意：1,提取整点数用parseInt（）方法，提取浮点数用parseFloat（）方法。

2,parseFloat:从第一个字符开始解析每一个字符，直到遇见一个无效的浮点数，也就是说：parseFloat除了第一个小数点有效以外，后面的小数点都可以忽略。

3，parseInt（）必须是以数字开头的字符串，才能提取出数值来，否则则返回NaN非数值。

4，parseInt后面如果出现两个参数，如parseInt（‘0xf’，16）（也可以写成parseInt（‘0xf’）），意思是把‘0xf’转化为16进制是多少

5，字符串必须放在引号内，把别的类型转化为字符串有string（）函数，和toString（）这两个方法，如果说不知道这个变量是什么类型的前提下，那尽量用toString这个方法。

6，false或true本身就是字符串

13.递增和递减

++a 先返回递增之后的a值   a++先返回a的原值

var num1 = 10,num2=5,num3=num1++ - num2,x1=20,x2=30,x3=—x1+x2—;
console.log(num1);  //11
Console.log(num3); //16
Console.log(x1); //19
Console.log(x2); //29
Console.log(x3) //19+30 =39

14.其他操作符

var x ='3';
var y = 3;
console.log(x == y) //true
console.log(x === y) //fasle



var soce = 55;
Var result =  some >= 60 ? ‘及格’ ： ‘不及格’
Console.log(result) //不及格

15.用javascript获取屏幕高度和宽度等信息

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

16.js获取数组最大值和最小值的方法：

（min/max/Math.min.apply/Math.max.apply）

Math.min.apply(null,arr)，固定写法，遍历数组中的最小值，直到把整个数组的每个元素比较完为止；

方法一：

//最小值
Array.prototype.min = function() {
var min = this[0];
var len = this.length;
for (var i = 1; i < len; i++){ 
if (this[i] < min){ 
min = this[i]; 
} 
} 
return min;
}
//最大值
Array.prototype.max = function() { 
var max = this[0];
var len = this.length; 
for (var i = 1; i < len; i++){ 
if (this[i] > max) { 
max = this[i]; 
} 
} 
return max;
}

 

如果你是引入类库进行开发，害怕类库也实现了同名的原型方法，可以在生成函数之前进行重名判断：

if (typeof Array.prototype['max'] == 'undefined') { 
Array.prototype.max = function() { 
... ...
}
}

方法二：

用Math.max和Math.min方法可以迅速得到结果。apply能让一个方法指定调用对象与传入参数，并且传入参数是以数组形式组织的。恰恰现在有一个方法叫Math.max，调用对象为Math，与多个参数

Array.max = function( array ){ 
return Math.max.apply( Math, array );
};

Array.min = function( array ){ 
return Math.min.apply( Math, array );
};

但是，John Resig是把它们做成Math对象的静态方法，不能使用大神最爱用的链式调用了。但这方法还能更精简一些，不要忘记，Math对象也是一个对象，我们用对象的字面量来写，又可以省几个比特了。

Array.prototype.max = function(){ 
return Math.max.apply({},this) 
} 
Array.prototype.min = function(){ 
return Math.min.apply({},this) 
} 
[1,2,3].max()// => 3 
[1,2,3].min()// => 1

17.apply用法

利用Apply的参数数组化来提高

a)从 Math.max() 函数说起，  Math.max后面可以接任意个参数，最后返回所有参数中的最大值。

比如  
alert(Math.max(5,8))   //8
alert(Math.max(5,7,9,3,1,6))   //9

但是在很多情况下，我们需要找出数组中最大的元素。
var arr=[5,7,9,1]
alert(Math.max(arr))    //   这样却是不行的。一定要这样写

function getMax(arr){
    var arrLen=arr.length;
    for(var i=0,ret=arr[0];i<arrLen;i++){
        ret=Math.max(ret,arr[i]);        
    }
    return ret;
}
这样写麻烦而且低效。如果用 apply呢，看代码：
function getMax2(arr){
    return Math.max.apply(null,arr)
}
两段代码达到了同样的目的，但是getMax2却优雅，高效，简洁得多。

 

b)再比如数组的push方法。
var arr1=[1,3,4];
var arr2=[3,4,5];
如果我们要把 arr2展开，然后一个一个追加到 arr1中去，最后让  arr1=[1,3,4,3,4,5]
arr1.push(arr2)  显然是不行的。 因为这样做会得到  [1,3,4, [3,4,5] ]

我们只能用一个循环去一个一个的push   (当然也可以用 arr1.concat(arr2) 但是concat方法并不改变 arr1本身)
var arrLen=arr2.length
for(var i=0;i<arrLen;i++){
    arr1.push(arr2[i])
}

自从有了 Apply    ,事情就变得如此简单

Array.prototype.push.apply(arr1,arr2)

 

18.循环（for for...in  do  do...while）

for (语句 1; 语句 2; 语句 3)
  {
  被执行的代码块
  }

语句 1 在循环（代码块）开始前执行

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行

实例

for (var i=0; i<5; i++)
  {
  x=x + "The number is " + i + "<br>";
  }

 

for in

JavaScript for/in 语句循环遍历函数对象或者数组的属性：

实例

var person={fname:"John",lname:"Doe",age:25};

for (x in person)
  {
  txt=txt + person[x];
  }

x在遍历函数对象时，相当于函数对象的key值；

x在遍历数组时，相当于数组的索引index。

 

while

While 循环会在指定条件为真时循环执行代码块。

while (条件)
  {
  需要执行的代码
  }

实例

本例中的循环将继续运行，只要变量 i 小于 5：

while (i<5)
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }

 

do while

do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。

do
  {
  需要执行的代码
  }
while (条件);

实例

下面的例子使用 do/while 循环。该循环至少会执行一次，即使条件是 false，隐藏代码块会在条件被测试前执行（一般不用）：

do
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }
while (i<5);

 

Javascript遍历map集合以及map对象

遍历map对象

  var map = [{  
             key : "百度",  
             value : "李彦宏"  },
            {
             key : "阿里巴巴",  
             value : "马云"  },
        ];  

for (var key in map) {  
            console.log(map[key]);  
        }
//输出结果
//Object {key : "百度", value : "李彦宏"}
//Object {key : "阿里巴巴", value : "马云"}

map():

//将所有的数组元素转换为大写：

var strings = ["hello", "Array", "WORLD"];
function makeUpperCase(v)
{
    return v.toUpperCase();
}
var uppers = strings.map(makeUpperCase);
// uppers is now ["HELLO", "ARRAY", "WORLD"]
// strings is unchanged
//结果：["hello", "Array", "WORLD"].map(makeUpperCase) ： HELLO, ARRAY, WORLD

 

19，js内置对象

1）创建一个数组

var colors = new Array(3) //直接规定数组的长度为3
var nums = new Array(1,3,6,9) //直接命名数组中具体元素项
console.log(nums);

var cols =['red','yellow','green']; //声明数组，通过【】中括号把具体元素写入中括号的方式来声明数组

var infos = [6,'marry',true,{email:'marry@sohu.com'}]; //数组里面不仅可以是纯数字，也可以是其他的，数组里面//可以放不同的元素

数组元素的读写

读取和设置值时，使用方括号【】并提取相应的索引

说明：索引是从0开始的正整数

var cols = ['red','yellow','green']; //把数组中的yellow取出来
console.log(cols[1]); //读取cols这个数组中索引为1的值yellow在数组中的索引是1，数组索引从0开始

//给colors设置值
var colors = new Array(3); //直接给数组规定长度
//通过中括号给空数组colors设置值
colors[0]= '#f00';
colors[1]= '#0f0';
colors[2]='#00f';

console.log(colors);

通过new Array（）创建出一个空的数组时，可以通过中括号加索引的方式去给这个空数组赋值；

当我们通过方括号[]这种形式声明了一个数组时，也可以通过方括号索引的形式来读取出数组中对应索引的值。取不到的情况下，返回undefined。

2）数组长度

语法：array.length

功能：获取数组array的长度

返回值：number

说明：1，通过设置length可以从数组的末尾移除项或向数组中添加新项

var arr = ['a','b','c','d'];
console.log(arr.length); //4

//通过设置arr长度，来删除数组中的元素
var arr = ['a','b','c','d'];
arr.length=3; //通过设置数组长度，来删除项
console.log(arr) //现打印数组结果为['a','b','c']

2，把一个值放在超出当前数组大小的位置上时，会重新计算数组长度值，长度值等于最后一项索引加1

var arr = ['a','b','c','d'];

arr[99]='z'; //通过设置arr第100项的值为z，来改变原有数组的长度（这个是添加的方式来改变的）
console.log(arr.length); //100


//数组遍历
for(var i=0;i<arr.length;i++){
   console.log(i); //获取数组的索引
   console.log(arr[i]);  //获取数组中对应索引的元素
}

 

3）数组方法（push（） unshift()  pop()  shift()）

push() 语法：

arrayObject.push(newele1,newele2,newele3,...neweleX)

功能：把它的参数顺序添加到arrayObject的尾部

返回值：把指定的值添加到数组后的新长度

var colors = new Array('red','green');
//给colors添加元素
colors.push('blue','yellow','blank');
console.log(colors); //添加完后，新数组为['red','green','blue','yellow','blank']

 

unshift()语法：

arrayObject.unshift(newele1,newele2...neweleX)

功能：把它的参数顺序添加到arrayObject的开头

返回值：把指定的值添加到数组后的新长度。

//unshift

var nums=[2,7,8,6];
nums.unshift(99,66); //新数组为[99,66,2,7,8,6]

var size = nums.unshift(99,66);
console.log(nums); //新数组为[99,66,2,7,8,6]

console.log(size); //新数组长度为5

 

pop（）语法：

arrayObject.pop()

功能：删除arrayObject的最后一个元素

返回值：被删除的那个元素

//pop
var nums = [2,7,8,6];
var n=nums.pop();
console.log(n); //数组的最后一项是元素6，元素6被删除了

 

shift（）语法：

arrayObject.shift（）

功能：删除arrayObject中的第一个元素

返回值：被删除的那个元素

//shift
var colors = new Array('red','green','blue','yellow','blank');
var m = colors.shift();
console.log(m); //‘red’，数组的第一项是字符串‘red’，字符传‘red’被删除
console.log(color); //删除第一项后新数组为['green','blue','yellow','blank']

 

4)数组方法（join和sort）

join（）语法（常用）：

arrayObject.join（separator）

功能：用于把数组中的所有元素放入一个字符串

返回值：字符串。

//join
var nums = ['2','3','4'];
//console.log(nums.join());
var str = nums.join(); //当join（）方法，括号里面没有值的时候，默认以都好隔开
console.log(str); //2,3,4
console.log(typeof str); //string

var words=['border','left','color'];
var wordsStr=words.join(); //返回字符串 border，left，color
var str2 = words.join(""); //返回字符串borderleftcolor
//把数组转化为字符串‘border-left-color’
var str1 = words.join('-'); //返回字符串border-left-color

 

reverse（）语法：

stringObject.reverse()

功能：用于颠倒数组中元素的顺序（把数组中原有的元素排列顺序倒过来排序）

返回值：数组。

//reverse
var nums=[2,4,5];

nums.reverse(); //颠倒数组顺序
console.log(nums); //颠倒后的数组[5，4，2]


var strs=['a','b','c','d']
//返回dcba这个这个字符串
console.log(str.reverse()); //颠倒数组后['d','c','b','a']
var newStr=str.reverse().join(""); //join()方法，括号里面不妨任何参数时，字符串会默认用逗号隔开；括号里面放“”引号空字符串，得到结果才为dcba
console.log(newStr);  //颠倒数组后再转化为字符串，最后得到dcba这个字符串

注意：join（）方法括号里面放分隔符，不放任何参数时，字符串会默认用逗号隔开；

 

排序方法sort（）语法：

arrayObject.sort(sortby)

功能：用于对数组的元素进行排序

返回值：数组。

说明：

1，即使数组中的每一项都是数值，sort（）方法比较的也是字符串。

2，sort（）方法可以接收一个比较函数作为参数

//sort

var arr =[9,23,15,88,12];
arr.sort(funstion(a,b){return b-a}); //插入一个匿名函数，让其降序排列
console.log(arr); //[88,23,15,12,9]

arr.sort(function(a,b){return a-b}); //插入匿名函数，让其升序排列
console.log(arr); //[9,12,15,23,88]

 

5）数组方法（concat和slice）

concat（）语法：

arrayObject.concat(arrayX,arrayX...arrayX)

功能：

用于连接两个或多个数组（也就是说：可以把几个数组连接到一起，放到一个新数组中，共同组成一个新数组）。

返回值：数组。

//concat

var arr1 = ['a','b','c'];
    arr2 = ['d','e',1,3];
    arr3;
//把arr1和arr2连接到一起，用arr3来承接
arr3 = arr1.concat(arr2);
console.log(arr3) //['a','b','c','d','e',1,3]

或者

//把arr1，arr2和括号里面到李一个数组连接到一起，用arr3来承接
arr3 = arr1.concat(arr2,['m',99,18]);
console.log(arr3) //['a','b','c','d','e',1,3,'m',99,18]

 

slice（）语法：

arrayObject.slice(start,end) (从哪里开始截取，到结束到地方结束)

功能：

从已有到数组中返回选定的元素

参数：

start（必需）规定从何处开始选取，如是负数，从数组尾部开始算起

end（可选）规定从何从结束选取，是数组片断结束处的数组下标

说明：

1，如没指定end，切分的数组包含从start到数组结束的所有元素。

2，如slice（）方法的参数中有一个负数，则用数组长度加上该数来确定相应的位置。

3，截取从start和end（不包含该元素）的元素，即从start和end-1的元素。

//slice(start,end)end下标
var colors = ['red','green','blue','yellow','orange'];
//截取green和blue
//var newColors = colors.slice(1,2); //['green']
var newColors = colors.slice(1,3);  //['green','blue']
console.log(newColors);   

//截取blue和yellow
var newColors2 = colors.slice(2,4);
console.log(newColors2);  

/*说明：1，start和end指的是数组中的索引值
2，截取从start和end（不包含该元素）的元素，即从start和end-1的元素*/


var newColors3 = colors.slice(-1,5); //如果start是负数，那么就用数组长度加start，就为开始截取的数组的起始位置
console.log(newColors3);  //['yellow']


//完成以下代码段，实现b数组对a数组的拷贝，方法越多越好
var a=[1,'yes',3],
    b;

//1,数组遍历，push
//b=[]
b=new Array();
for(var i = 0;i<a.length; i++){ //最笨的方法
  b.push[a[i]];
}
console.log(b);

//2,concat() concat()方法连接的是两个数组
b=[].concat(a) //效率最高，最简单的方法 （[].concat(a) 空数组与a数组连接到一起，最后放到b数组里面）
console.log(b);

//3,slice()
var b=[];
b=a.slice(1);

注意⚠️：

1，start和end指的是数组中的索引值；

2，截取从start和end（不包含该元素）的元素，即从start和end-1的元素。

3,  截取字符串原理和截取数组一样。

 

6）数组方法（splice）

删除

语法：arrayObject.splice(index,count)

功能：删除从index处开始的零个或多个元素

返回值：含有被删除元素的数组。

说明：

count是要删除的项目数量，如果设置为0，则不会删除项目。如果不设置，则删除从index开始的所有值。

//splice 删除

var arr = ['a','b','c','d','e','f'];
//被删除元素所组成的数组
var delArr = arr.splice(2,2); //第一个2表示：从索引为2的元素开始，第二个2表示：删除两个元素
console.log(arr);  //现数组为['a','b','e','f']
console.log(delArr); //被删除项组成的数组为['c','d']


var delArr = arr.splice(2); //不设置count时，就会从index的起始位置，删除后面所有的元素；现数组为['a','b']

var delArr = arr.splice(2,0); //设置count为0的时候，又表示不删除任何元素；现数组还为['a','b','c','d','e','f']

 

插入

语法：arrayObject.splice(index,0，item1，... itemX)

功能：在指定位置插入值

参数：index：起始位置

0：要删除的项数

item1，... itemX：要插入的项

返回值：插入项过后的新数组

//splice插入
var arr = ['a','b','c','d','e','f'];

var insertArr = arr.splice(3,0,'m','n'); //从c后面开始插，c的索引为2，后面一位索引为3，所以index为3，0表示不删除，'m','n'表示插入的项
console.log(arr);  //现数组为['a','b','c','m','n','d','e','f']
console.log(insertArr);  //插入的时候，返回的结果为空

 

替换

语法：arrayObject.splice(index,count，item1，... itemX)

功能：在指定位置插入值，且同时删除任意数量的项

参数：

index：起始位置

count：要删除的项数

item1，... itemX：要插入的项

返回值：从原始数组中删除的项（如果没有删除任何项，则返回空数组）

//splice替换
var arr = ['a','b','c','d','e','f'];

var replaceArr = arr.splice(1,2,'x','y'); //从索引1开始删除2个元素，然后插入x和y；（也就是把数组中b和c替换为x和y）
console.log(arr);  //现数组为['a','x','y','d','e','f']
console.log(replaceArr);  //返回被删除的数组为['b','c']

 

7）数组方法（indexOf和lastIndexOf）

indexOf（）

语法：arrayObject.indexOf（searchvalue，startIndex）

功能：从数组的开头（位置0）开始向后查找。

参数：

searchvalue：必需，要查找的项；

startIndex：可选，起点位置的索引。

返回值：number，查找的项在数组中的位置，没有找到则返回-1.

// indexOf
var nums =['1','7','5','7','8','1','6','9']
var pos = nums.indexOf(7);  //indexOf(searchvalue,startIndex),在第二个数没有设置的情况下，是从数组的开头位置开始查询的，直到找到该元素为止

var pos = nums.indexOf(99); //查询99在该数组中的位置，99没有出现在该数组中，所以返回-1

var pos= nums.indexOf(7,3); //从数组中索引为3的位置开始查询7的所在位置
console.log(pos);  //3,在数组中，索引为3的位置上

 

lastIndexOf（）

语法：arrayObject.lastIndexOf（searchvalue，startIndex）

功能：从数组末尾开始向前查找

参数：

searchvalue：必需，要查找的项；

startIndex：可选，起点位置的索引。

返回值：number，查找的项在数组中的位置，没有找到则返回-1.

// lastIndexOf
var nums =['1','7','5','7','8','1','6','9']
var pos = nums.lastIndexOf(1);  //lastIndexOf(searchvalue,startIndex),在第二个数没有设置的情况下，是从数组的末尾位置开始查询的，直到找到该元素为止，返回5

var pos = nums.lastIndexOf(99); //查询99在该数组中的位置，99没有出现在该数组中，所以返回-1

var pos= nums.lastIndexOf(7,2); //从数组中索引为3的位置开始，倒数查询7的所在位置
console.log(pos);  //1,在数组中，索引为1的位置上

说明：

1，在比较第一个参数与数组中的每一项时，会使用全等操作符，即要求查找的项必须严格相等。

2，数组的位置方法是ECMAScript5为数组实例新增的，所以支持的浏览器只有IE9+,Firefox2+,safari3+,Opera9.5和Chrome。（需封装一个函数）

var nums=[1,7,5,7,8,1,6,9]

//A //indexOf支持的浏览器版本有限

//封装一个方法实现indexOf的功能
function ArrayIndexOf(arr,value){
   //检测value在arr中出现的位置
  //遍历整个数组
   for(var i=0;i<arr.length;i++){
     //用全等比较判断，看这个值是不是跟我们穿过来的值一摸一样的，如果一样，那说明这个就是我们要找的
     if（arr[i]===value）{
        return i; //检测value在arr中出现的位置,i是在数组中相应元素的下标位置
    }
  }
  return -1; //如果遍历了一遍后，没有和所传的参数一样的，就return -1（这段必须写在for遍历外，跟for并行）
}
/*var pos2 = ArrayIndexOf(nums,8);  //ArrayIndexOf()方法接收两个参数，第一个参数：要判断的数组，第二个参数：要判断的值。
//想调用这个方法就返回第二参数值在第一个参数数组中的位置
console.log(pos2); //返回索引为4，返回8在数组中的索引为4*/

var pos2 = ArrayIndexOf(nums,15); //查询15在数组中的索引是多少，15不在数组中出现，索引返回-1.


//B //要比较的每一项必须用全等来判断
var pos3=nums.indexOf('7'); 
console.log(pos3);  //-1,类型不一样，数组中是数字，而这里是字符串；要检测的值必须与在数组中的元素类型相同

 

20,javascript阻止事件冒泡和浏览器的默认行为

/*---------------------------
     功能:停止事件冒泡
---------------------------*/
function stopBubble(e) {
      //如果提供了事件对象，则这是一个非IE浏览器
       if ( e && e.stopPropagation )
          //因此它支持W3C的stopPropagation()方法
         e.stopPropagation();
        else
           //否则，我们需要使用IE的方式来取消事件冒泡
         window.event.cancelBubble = true;
 }
    //阻止浏览器的默认行为
  function stopDefault( e ) {
        //阻止默认浏览器动作(W3C)
       if ( e && e.preventDefault )
           e.preventDefault();
      //IE中阻止函数器默认动作的方式
       else
           window.event.returnValue = false;
       return false;
 }

 

21,triggerHandler()方法

triggerHandler( event, [data] )
这个特别的方法将会触发指定的事件类型上所有绑定的处理函数。但不会执行浏览器默认动作.
如果你对一个focus事件执行了 .triggerHandler() ，浏览器默认动作将不会被触发，只会触发你绑定的动作:

<button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br><br>
<input type="text" value="To Be Focused">
<script>
$(function(){
    $("#old").click(function(){
        $("input").trigger("focus"); //trigger（）方法会导致浏览器同名的默认行为的执行。如‘submit’，如果用trigger()触发一个’submit’，则同样会导致浏览器提交表单。如果要阻止这种默认行为，应返回false。
    });
    $("#new").click(function(){
        $("input").triggerHandler("focus");//triggerHandler不会执行浏览器的默认动作，只处理绑定的动作
    });
    $("input").focus(function(){
        $("<span>Focused!</span>").appendTo("body").fadeOut(1000);
    });
});
</script>

 

22，jquery对象和javascript对象相互转换

        jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的，其可以使用 jQuery 里的方法，但是不能使用 DOM 的方法；例如： $("#img").attr("src","test.jpg"); 这里的 $("#img")就是 jQuery 对象。

       DOM对象就是Javascript 固有的一些对象操作。DOM 对象能使用Javascript 固有的方法，但是不能使用 jQuery 里的方法。例如：document.getElementById("img").src = “test.jpg"；这里的document.getElementById("img") 就是DOM 对象。

       $("#img").attr("src","test.jpg"); 和 document.getElementById("img").src = "test.jpg"; 是等价的，是正确的，但是 $("#img").src = "test.jpg" ；或者 document.getElementById("img").attr("src","test.jpg"); 都是错误的。

        再说一个例子，就是this, 在写 jQuery 时经常这样写： this.attr("src","test.jpg")；可是就是出错，其实this 是DOM对象，而.attr("src","test.jpg") 是 jQuery 方法，所以出错了。要解决这个问题就要将 DOM对象转换成 jQuery 对象，例如 $(this).attr("src","test.jpg");

1. DOM 对象转成 jQuery 对象

对于已经是一个 DOM 对象，只需要用 $() 把DOM对象包装起来，就可以获得一个 jQuery 对象了，$(DOM 对象)     注： var是定义变量

如：　var v = document.getElementById("v");        //DOM对象

           var $v = $(v);        //jQuery 对象  

转换后，就可以任意使用 jQuery 的方法。

2. jQuery 对象转成 DOM 对象

两种转换方式讲一个 jQuery 对象转换成 DOM 对象： [index] 和 .get(index)；

(1) jQuery 对象是一个数据对象，可以通过 [index] 的方法，来得到相应的 DOM 对象。

   如： var $v = $("#v");          //jQuery 对象

            var v = $v[0];               //DOM 对象

            alert(v.checked);                  //检测这个checkbox是否被选中

   (2) jQuery 本身提供，通过.get(index) 方法得到相应的 DOM 对象

     如：var   $v = $("#v");           //jQuery 对象

             var v = $v.get(0);            //DOM对象 ( $v.get()[0] 也可以 )

             alert(v.checked);             //检测这个 checkbox 是否被选中

通过以上方法，可以任意的相互转换 jQuery 对象和 DOM 对象，需要再强调的是： DOM 对象才能使用DOM 中的方法，jQuery 对象是不可以使用ＤＯＭ中的方法。 

 

23，jQuery :gt() 选择器

语法：$(":gt(index)")

定义及用法

:gt() 选择器选取 index 值大于指定数字的元素。

index 值从 0 开始。

最常见的用法：与其他选择器一起使用，选取指定组合中特定序号之后的元素（如上面的实例）。

提示：请使用 :lt selector 来选取 index 值小于指定数字的元素。

//$(":gt(index)")

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
                <style type="text/css">
            p{
                float: left;
                width: 30px;
                border: 1px solid;
            }
        </style>
        <script src="jquery-1.12.3.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <p class="demo">123</p>
        <p class="demo">123</p>
        <p class="demo">123</p>
        <p class="demo">123</p>
        <p class="demo">123</p>
        <p class="demo">123</p>
        <p class="demo">123</p>
        <p class="demo">123</p>
        <p class="demo">123</p>
        <p class="demo">123</p>
    </body>
        <script type="text/javascript">
            $(".demo:gt(2)").css("color","red");
        </script>
</html>

结果就是从第四个p标签开始，内容是红色的。index是从0开始的

  

24.jQuery 遍历 - find() 方法

语法：.find(selector)

定义与用法

find() 方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。

（.find() 方法第一个明显特征是，其接受的选择器表达式与我们向 $() 函数传递的表达式的类型相同。将通过测试这些元素是否匹配该表达式来对元素进行过滤。）

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>
<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

<script>
$('li.item-ii').find('li').css('background-color', 'red');
</script>

</body>
</html>
结果是，项目 A、B、1、2、3 以及 C 均被设置了红色背景。即使项目 II 匹配选择器表达式，它也不会被包含在结果中；只会对后代进行匹配。

与其他的树遍历方法不同，选择器表达式对于 .find() 是必需的参数。如果我们需要实现对所有后代元素的取回，可以传递通配选择器 '*'。

选择器 context 是由 .find() 方法实现的；因此，$('li.item-ii').find('li') 等价于 $('li', 'li.item-ii')。



还可以这样写：
对于 jQuery 1.6，我们还可以使用给定的 jQuery 集合或元素来进行筛选。还是上面的嵌套列表，我们首先这样写：

var $allListElements = $('li');
然后将这个 jQuery 对象传递给 find 方法：

$('li.item-ii').find( $allListElements );

转载于:https://my.oschina.net/u/3719399/blog/1789467

chongnao6544
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值