OnlyWait's Blog

• parentNode
  • 属性，表示当前节点的父节点
• previousSibling
  • 属性，表示当前节点的前一个兄弟节点
• nextSibling
  • 属性，表示当前节点的后一个兄弟节点
• 定一个函数，专门用来为指定元素绑定单机响应函数
  • 参数：idStr 要绑定单机响应函数的对象的id属性值
  • fun 事件的回调函数，当单击元素时，该函数将会被触发

1
2
3
4
5
6
7
8
9

function myClick(idStr,fun){
	var btn = document.getElementById(idStr);
	btn.onclick = fun;}
}
myClick("btn02",function(){
	var bj = document.getElementById("bj");
	#获取bj的父节点
	var pn = bj.parentNode;
});

• parentNode
  • 属性，表示当前节点的父节点
• previouSibling
  • 返回当前节点的前一个兄弟节点（也可能获取到空白的文本）
• previoELementSibling
  • 获取当前节点的前一个兄弟元素，IE8及以下不支持
• nextSibling
  • 属性，表示当前节点的后一个兄弟节点
• value
  • 属性，获取当前节点的value值
• nodeValue
  • 获取bj元素的文本节点
    var bj = document.getElementById("bj");
alert(bj.firstChild.nodeValue); //以下三种效果相同
alert(bj.innerHTML);
alert(bj.innerText);
• innerHTML
  • 属性，可以获取到元素内部的内容
• innerText
  • 属性，获取元素内部的文本内容
  • 他和innerHTML类似，不同的是他会自动将html标签去除

主要利用checked的属性，来判断是否被选中，true或false
在事件的响应函数中，响应函数是给谁绑定的this，this就是代表当前被选中的函数

• 在docunment有一个属性body，他保存的是body的引用
  var body = document.body;
• document.documentElement保存的是html根标签
  var html = document.documentElement;
• document.all代表页面中所有的元素
  var all = document.all;
  • 各个浏览器支持性一般
  • 或者用tagName，//常用
  • body = document.getElementsByTagName(“body”);
  • html = document.getElementsByTagName(“html”);
  • all = document.getElementsByTagName(“*”);

• 根据class属性值查询一组元素节点对象
  • getElementsByClassName()可以根据class属性值获取一组元素节点对象
    • 但是该方法不支持IE8及以下的浏览器
    • 获取页面中的所有的div
    • var divs = document.getElementsByTagName("div");

• document.querySelector()
  • 需要一个选择器的字符串作为参数，可以根据一个CSS选择器，来查询一个元素节点对象
  • 虽然IE8中没有getElementsByClassName(),但是可以使用querySelector()
  • 使用该方法总会返回唯一的元素，如果满足条件的元素有多个，则只会返回第一个
  • var div = document.querySelector(".box1 div");

• document.querySelectorAll()
  • 该方法和querySelector()用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
  • 即使符合条件的元素只有一个，他也会返回数组

• document.createElement()
  • 创建一个元素节点对象
  • 他需要一个标签名作为参数，将会根据该标签名创建元素节点对象
  • 并将创建好的对象作为返回值返回
    var li = document.createElement("li");

• document.createTextNode()
  • 可以用来创建一个文本节点对象
  • 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
    var gzText = document.createTextNode("广州");

• appendChild()
  • 向一个父节点中添加一个新的子节点
  • 用法：父节点.appendChild(子节点);
    li.appendChild(gzText);

• 获取id为city的节点，将广州添加到city下
  var city = document.getElementById("city");
city.appendChild(li);

• insertBefore()
  • 可以在指定的子节点前插入新的子节点
  • 语法：
    父节点.insertBefore(新节点，旧节点);
city.insertBefore(li,bj);
  • 最好使用 bj.parentNode.insertBefore(li,bj);
  • 一定要使用其直接父节点，son1.parentNode.innerHTML 是tr
  • 而father.innerHTML 是tbody
  注意:一定要获取tbody才是tr的父元素！！

  1 2 3 4 5

  <table id="father1"> <tr id="son1"> <td> <td> </tr> </table>

• replaceChild()
  • 可以使用指定的子节点替换已有的子节点
  • 语法：
    § 父节点.replaceChild(新节点，旧节点);

• removeChild()
  • 可以删除一个子节点
  • 语法：
    • § 父节点.removeChild(子节点);
city.removeChild(bj);
    • § 子节点.parentNode.removeChild(子节点); //常用
bj.parentNode.removeChild("bj"); //直接通过子元素获取父元素

• innerHTML
  • 读取一个元素的HTML代码
  • 设置#bj的HTML代码
    • bj.innerHTML = "昌平";
  • 用innerHTML方式为city添加广州节点
    • city.innerHTML+="<li>广州</li>";//方式不太好，因为会把city的代码进行重写

！！使用innerHTML也能完成增删改

• 一般我们会用两种方式结合使用
  • innerHTML和节点对象结合 //综合两种方法的优点，非常推荐

1
2
3

var li = document.createElement("li");
li.innerHTML = "广州";
city.appendChild(li);  

• 点击超链接以后，超链接会自动跳转页面，这个是超链接的默认行为
  但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false 来取消默认行为

• 点击哪个超链接this就是谁
  • confirm
    提示框： 需要一个字符串作为参数，该字符串将会作为提示文字显示出来

• 基本数据类型
  String Number Boolean Null Undefined
• 引用数据类型
  Object

• 包装类是代码运行时提供给底层的，我们用不到

• 在JS中，为我们提供了三个包装类，通过这三个包装类可以将基本数据类型转换为对象
  • String()
    • 可以将基本数据类型字符串转换为String对象
  • Number()
    • 可以将基本数据类型的数字转换为Number对象
  • Boolean()
    • 可以将基本数据类型的布尔值转换为Boolean对象
  • 注意，我们在实际中基本不会使用基本数据类型的对象
    • 如果使用，可能会产生一些不可预期的结果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

//基本数据类型对象
var num = new Number(3);
var str = new String("hello");
var str2 = new String("hello");
var bool = new Boolean(true);

var bool2 = true;

//向num中添加一个属性
num.hello = "abcdefg";
console.log(bool == bool2);  //输出true，比较时会进行类型转化，bool对象转化为true了
console.log(bool === bool2);  //输出false，
console.log(num = num2);  //输出false，因为两个对象比较的是地址值
console.log(str == str2);  //输出
var b = new Boolean(false);
if(b){
	alert("运行了");  //if后面跟的b是一个对象，无论值是什么if都会运行的
}

1
2
3
4
5
6
7

- 方法和属性值能添加给对象，不能添加给基本数据类型
	- 当我们对一些基本数据类型的值去调用属性和方法时，浏览器会临时使用包装类将其转换为对象，然后再调用对象的属性和方法，调用完以后，在将其转换为基本数据类型
var s = 123;
s = s.toString();
console.log(typeof s);  //输出string
s.hello ="你好";
console.log(s.hello);  //输出undefined，因为只是暂时将s转换为对象，之后又转换为基本数据类型

1
2
3
4

var str = "Hello atsfsd";
//在底层字符串是以字符数组的形式保存的
["h","e","l"]
console.log(str[5]);

PS:该篇中的方法都不会影响原数组中的元素

• length()
  • 可以用来获取字符串的长度
  • console.log(str.length);

• charAt()
  • 可以返回字符串中指定位置的字符
  • var result = str.charAt(3);

• charCodeAt()
  • 返回字符串指定位置字符的Unicode编码

• formCharCode()
  • 可以根据字符编码去获取字符
  • result = String.fromCharCode(74);

• concat()
  • 可以用来连接两个或多个字符串
  • 作用和+一样

• indexOf()
  • 该方法可以检索一个字符串中是否含有指定内容
  • 如果字符床中含有该内容，则会返回其第一次出现的索引
    • 如果没有找到指定的内容，则会返回-1
  • 可以指定一个第二个参数，指定开始查找的位置

• lastIndexOf()
  • 该方法的用法和indexOf()一样
  • 不同的是，indexOf是从前往后找，而lastIndexOf是从后往前找

1
2
3

var str = "hello sdfsf";
result = str.indexOf("p");
console.log(result);  //输出-1，没找到p

• slice()
  • 可以从字符串中截取指定的内容
  • 不会影响原字符串，而是将截取的内容返回
  • 参数：
    • 第一个，开始位置的索引(包括开始位置)
    • 第二个，结束位置的索引(不包括结束位置)
      □ 如果省略第二个参数，则会截取到后边所有的
    • 也可以传递一个负数作为参数，负数时将从后边计算
  • str.slice(1,-2)

• substring()
  • 可以用来截取一个字符串，可以slice()类似
  • 参数：
    • 第一个：开始位置的索引(包括开始位置)
    • 第二个：结束为止的索引(不包括结束位置)
      □ 不同的是，这个方法不能接受负值作为参数,如果传递了一个负值，则默认使用0
      □ 而且可以自动调整参数的位置，如果第二个参数小于第一个，则自动交换

1
2

result = str.substring(1,2);
result = str.substring(1,0);//转换为substring(0，1);

• substr()
  • 用来截取字符串
  • 参数：
    • 第一个：截取开始位置的索引
    • 第二个：截取的长度

• split()
  • 可以将字符串拆封为一个数组
  • 参数：
    • 需要一个字符串作为参数，将会根据该字符串去拆分数组
    • 如果传递一个空串作为参数，则会将每个字符都会拆分为数组中的元素

1
2

str = "Aabc,bcd,egg,hij";
result = str.split(","); 

• toUpperCase()
  • 将一个字符串转换为大写并返回

• toLowerCase()
  • 将一个字符串转换为小写并返回

• 正则表达式用于定义一些字符串的规则
• 计算机可以根据正则表达式，来检查一个字符串是否符合规则，获取字符串中符合规则的内容提取出来
• 创建正则表达式的对象

• 语法：
  var 变量 = new RegExp("正则表达式"，"匹配模式");
  使用typrof检查正则对象，会返回object
  var reg = new RegExp("a"，"i");

• 这个正则表达式可以来检查一个字符串中是否含有a

• 在构造函数中可以传递一个匹配模式作为第二个参数：
  ○ 可以是i 忽略大小写
  ○ g 全局匹配模式
  var str = "a";

• 正则表达式的方法：
  • 使用这个方法可以以用来检查一个字符串是否符合字符串正则表达式的规则
    ○ 如果符合则返回true，否则返回false

1
2

var result = reg.test(str);
console.log(reg.test("Abcbc"));

• 使用字面量来创建正则表达式

  语法：var 变量 = /正则表达式/匹配模式
reg = /a/i;

• 方式：
  • 使用字面量的方式创建更加简单
  • 使用构造函数创建更加灵活

• 使用｜来表示或者的意思

• //创建一个正则表达式，姜茶一个字符串中是否含有a或b
  reg = /a|b/;

• //创建一个这个正则表达式检查字符串中是否有字母
  reg = /a|b|c|d|e|f|g/;

• 使用[]也是表示或的关系
  [ab] == a|b
[a-z] 任意小写字母
[A-Z] 任意大写字母
reg = /[a-z]/;

• //检查一个字符串中是否含abc 或 adc 或 aec
  reg = /a[bde]c/;

  [^ ]除了

  reg = /[^ab]/; //含有除了a或b以外的字符
reg = /[^0-9]/;

• split()
  • 可以将一个字符串拆分为一个数组
  • 方法中可以传递一个正则表达式作为参数，这样方法会根据正则表达式来拆分
  • 这个方法不指定全局匹配，也会全部拆分
  //可以根据任意字母来将字符串拆分
var str = “1a2b3c4d5e6f7”;
result = str.split(/[A-z]/);

• search()
  • 可以搜索字符串中是否含有指定内容
  • 如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1
  • 它可以接受一个正则表达式作为参数，然后根据正则表达式去检索字符串
  • 只会查找第一个，即使设置全局匹配也没用
  str = “hello abc hello abc”；
//搜索字符串中是否含有abc 或aec 或afc
result = str.search(/a[bef]c/);

• match()
  • 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
  • 默认情况下，我们的match只会找到一个符合要求的内容，找到后就停止检索
    § 我们可以设置正则表达式为全局匹配模式，来匹配所有的内容
    § 可以为一个正则表达式设置多个匹配模式，且顺序无所谓
  • match()会将匹配的内容封装到一个数组中返回，即使只查询到一个结果
    str = “1a2b3c4d5e6f7”;
result = str.match(/[A-z]/g);
result = str.match(/a-z/gi); //匹配大小写字母，和上方匹配相同

• replace()
  • 可以将字符串中指定内容替换为新的内容
  • 参数：
    § 被替换的内容，可以接受一个这个正则表达式作为参数
    § 新的内容
  • 默认只替换第一个
    result = str.replace(”a”,”@_@”); //匹配第一个a来进行替换为@_@
result = str.replace(/[a-z]/gi,””); //匹配所有大小写字母进行替换