[学习交流] 【广州校区】【原创】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[i].style.backgroundColor="pink";
        }else{
            //5.对奇数行设置背景颜色
            tblEle.tBodies[0].rows[i].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[i].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[i].length;j++){
                    //alert(cities[i][j]);
                    //4.创建城市的文本节点
                    var textNode = document.createTextNode(cities[i][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>

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] 【广州校区】【原创】javascript(一)-BOM

0 个回复