黑马程序员技术交流社区

标题: 【广州校区】【原创】javascript(一)-BOM [打印本页]

作者: yuhaohong 时间: 2018-5-11 10:30
标题: 【广州校区】【原创】javascript(一)-BOM
javascript

javascript里没有集合,只有数组

[JavaScript] 纯文本查看 复制代码

"通过document.getElement...获得的对象再设置事件,在方法内部可以使用this,因为事件只属于它自己一个,别人不能调用."

<script type="text/javascript">

    window.onload = function(){

        document.getElementById("checkall").onclick = function() {

            alert(this);

        }

    }

</script>



<input type="button" name="btn" id="btn" value="btn"/>

"调用的方法中不能使用this,因为这个方法是共有的,所有人都可以绑定.如果要使用到该元素,需要把对象作为参数传递进入"

js隔行换色

table标签补充
- table标签第一行用
- table标签表格内容用
思路:
- onload函数在页面加载完成后调用函数
  - onload可以在body标签中调用一个有名的函数,直接在script标签通过:window.onload = function() {}调用也一样
- document.getElementById()获取表格元素(为了获取表格中tbody的行数)
- tBody中rows.length获取所有的行数

[JavaScript] 纯文本查看 复制代码

<script>

window.onload = function(){

    //1.获取表格

    var tblEle = document.getElementById("tbl");

    //2.获取表格中tbody里面的行数(长度)

    var len = tblEle.tBodies[0].rows.length;

    //alert(len);

    //3.对tbody里面的行进行遍历

    for(var i=0;i<len;i++){

        if(i%2==0){

            //4.对偶数行设置背景颜色

            tblEle.tBodies[0].rows.style.backgroundColor="pink";

        }else{

            //5.对奇数行设置背景颜色

            tblEle.tBodies[0].rows.style.backgroundColor="gold";

        }

    }

}

</script>

鼠标移动到哪一行,表格哪一行颜色不一样
onmouseover & onmouseout

[JavaScript] 纯文本查看 复制代码
<script>
function changeColor(id,flag){
      if(flag=="over"){
         document.getElementById(id).style.backgroundColor="red";
      }else if(flag=="out"){
         document.getElementById(id).style.backgroundColor="white";
      }
}
</script>

[JavaScript] 纯文本查看 复制代码
# 网页加载完测后对元素设置事件
<script>
window.onload = function(){
document.getElementById("btn").onclick = function(){
      location.href="xxx.html"
}
}
</script>

常用事件:
onblur:元素失去焦点(表单校验)
onfocus:获取焦点(表单校验)
onchange:用户改变区域内的内容(二级联动)
onclick:点击
ondblclick:双击
onload:某个页面或者图像加载完成
onmouseover:鼠标悬浮在元素上
onmouseout:鼠标离开元素范围
onsubmit:提交表单
onkeydowm:键盘按下(网页搜索监听)
onkeypress:键盘释放(网页搜索)

js完成复选框全选效果
应用:群发邮件,批量操作
实现:目前只能使用传统的javascript来实现
document.getElementsByName:获取多个

[JavaScript] 纯文本查看 复制代码
<script type="text/javascript">
function selectAll(element) {
var flag = element.checked;

elements = document.getElementsByClassName("checked");
for (var i = 0; i < elements.length; i++) {
      elements.checked = flag;
}
}
</script>

DOM的操作
DOM:
document:html被浏览器解析后生成的树结构的文档对象模型
每个载入浏览器的html文档都会成为document对象

所有的标签都是Element(元素)
标签中的属性:attributte
标签中的内容:text
以上的document,element,attribute,text都统称为node

document对象:
getElementById:获取单个Element
getElementsByName:获取Element数组
getElementsByTagName:获取Elment数组
创建文本节点:document.createTextNode()
创建元素节点:document.createElement()

element对象
element.appendChild():在元素里追加子节点
element.firstChild:返回元素首个子元素
element.getAttribute():获取节点中某个具体属性
element.innerHTML():设置或者返回元素的内容
element.insertBefore():在指定子节点前插入子元素
element.lastChild:返回最后一个子元素
element.setAttribute():将制定属性设置为制定值

attribute对象:
attirb.value:获取属性值

[JavaScript] 纯文本查看 复制代码
<!--动态添加城市--
<script type="text/javascript">
function addCity() {
      var textNode = document.createTextNode('杭州')
      var liEle = document.createElement('li')
      liEle.appendChild(textNode)
      //通过liEle.inerHTML = '杭州'也可以添加
      var cityList = document.getElementById('cityList')
      cityList.appendChild(liEle)
}
</script>

js完成二级联动效果
开发中特别常用
使用二维数组存储省市(实际开发中从数据库中获取数据)
用户选择省份(通过方法传参的方式:this-代表当前操作的对象,this.value)
javascript中数组对象:
创建对象：
new Array()
new Array(size)
new Array(ele1, ele2, ele3,...)

清空下拉列表的内容:
selection.options.length = 0

[JavaScript] 纯文本查看 复制代码
<script>
//1.创建一个二维数组用于存储省份和城市
var cities = new Array(3);
cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");

function changeCity(val){
      //7.获取第二个下拉列表
      var cityEle = document.getElementById("city");
      //9.清空第二个下拉列表的option内容
      cityEle.options.length=0;
      //2.遍历二维数组中的省份
      for(var i=0;i<cities.length;i++){
         //注意，比较的是角标
         if(val==i){
            //3.遍历用户选择的省份下的城市
            for(var j=0;j<cities.length;j++){
                  //alert(cities[j]);
                  //4.创建城市的文本节点
                  var textNode = document.createTextNode(cities[j]);
                  //5.创建option元素节点
                  var opEle = document.createElement("option");
                  //6.将城市的文本节点添加到option元素节点
                  opEle.appendChild(textNode);
                  //8.将option元素节点添加到第二个下拉列表中去
                  cityEle.appendChild(opEle);
            }
         }
      }
}
</script>

javascript内置对象
Array:
数组的长度可变
数组长度为最大索引 + 1

Boolean:
new Boolean(val):如果参数不写,默认创建的为false

Date:
getTime():返回时间戳,访问网站,浏览器默认从缓存里取,如果加上时间戳,则不会取缓存的(解决浏览器缓存问题)

Math:与java里的基本一致
Number:与java里的基本一致
String:
match():匹配正则表达式
subStr(start, counts):从起始索引提取字符串中指定数目的字符
subString(start, end):提取字符串中两个指定索引号之间的字符(包头不包尾)

[JavaScript] 纯文本查看 复制代码
<script>
var str = "-a-b-c-d-e-f-";
var str1 = str.substr(2,4);//-b-c
//alert(str1);

var str2 = str.substring(2,4);//-b
alert(str2);
</script>

RegExp:正则表达式
test():检索字符串中指定的值

Functions:
全局函数(直接用,不需要创建对象)
decodeURI():解码某个编码的URI
decodeURIComponent():解码一个编码的URI组件
encodeURI():把字符串编码为URI
encodeURIComponent():把字符串编码为URI组件
eval():执行字符串里的代码
parseInt():
parseFloat():
String():把对象转成字符串

[JavaScript] 纯文本查看 复制代码
<script>
var str = "张三";
//alert(encodeURI(str));//%E5%BC%A0%E4%B8%89
//alert(encodeURIComponent(str));//%E5%BC%A0%E4%B8%89

//alert(decodeURI(encodeURI(str)));//张三
//alert(decodeURIComponent(encodeURIComponent(str)));//张三

var str1 = "http://www.itheima.cn";
//alert(encodeURI(str1));//http://www.itheima.cn
//alert(encodeURIComponent(str1));//http%3A%2F%2Fwww.itheima.cn

//alert(decodeURI(encodeURI(str1)));//http://www.itheima.cn
//alert(decodeURIComponent(encodeURIComponent(str1)));//http://www.itheima.cn

var str2 = "alert('abc')";
//alert(str2);
eval(str2);
</script>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2