客户端笔记五

innerWidth 客户区宽度

 

innerHeight 客户区高度

 

 

JSON数组内容的显示：需要用

JSON.stringify(array);

将数组转化为json格式的字符串

 

窗体大小改变事件

window.onresize =function(){

 

}

 

节点属性：

 

nodeName,nodeValue nodeType

 

firstChild,lastChild

 

appendChild

removeChild

 

 

//改变Class属性 需要使用className
divObj.className = "mm";

 

            var spObj = document.getElementById("mySpan");
            //得到元素文本节点
            var txtObj = spObj.firstChild;
            //改变文本节点的内容
            txtObj.nodeValue = "bbb";
            //上面等同于下面
//            spObj.innerHTML = "bbb" ;

 

innerHTML

方便设置元素的内容

不是DOM的一部分，但是被所有浏览器支持

推荐使用

老式的浏览器 TABLE和SELECT 不支持

 

利用js文件 和 css 文件来对网页操作

jquery ：免费开元的js代码库，引入了全新的dom选择器引擎，同时提供UI库

特点:

1.      轻量级

2.      强大的DOM选择器，简化 js 和 ajax开发

3.      解决不同浏览器的兼容问题

4.      提供UI库组件，让页面开发更方便

 

ext：重量级

 

jquery 用法：

 

ID选择器：

//相当于document.getElementById("infoSpan")按元素ID得到对象
$("#infoSpan")

 

 

 

jquery 和dom对象互换

 

dom转jquery

var obj = document.getElementById(“div1”);

var jq = $(obj);

 

jquery 转 dom

var jq = $(“#div1”);

var obj = $(jq)[0]

 

//$()等价于 window.onload
$(function(){
    $("#imgSelect").change(function(){
        //dom方式获得value  this.value
        //jq 方式获得value  $(this).val()

        //改变图片的src值,jq只能用attr方法 前面参数是属性名 后面是属性值
        $("#myImg").attr("src",$(this).val());
    });
})

 

jquery 添加事件，全部是现代事件添加，一个事件可以绑定多个函数，一个函数可以绑定多个事件

 

 

 

按标记名称查找元素

dom var div1 = document.getElementById(“div1”)

                   div1.getElementByTagName(“tabel”)

 

jq:

方法1：var msg = $(“#div1 table”);

方法2：var msg=$(“#div1”).find(“table”);

 

 

//取得数据的第几个元素，返回的是一个dom对象

//jq取得数组长度是 .size()方法

 

//遍历数组

$(“#div1 span”).each(function(index,data){

//index 为循环变量，data为数组中dom元素

this.innerHTML

})

 

 

 

jq元素设置

 

有参数设置，没参数获取 

如$(“#div1”).html(); //获取元素内容

         $(“#div1”).html(“abcd”)//设置元素内容

 

         $(“#div1”).val()//获取元素的value值

         $(“#div1”).val(“aaaa”)//设置元素的value值

 

显示隐藏：

show（）

hide（）  里面可以带参数 表示动画效果 如 show（”slow”）

 

 

jquery 取消事件

 

 

$(“p”).unbind() //取消对象中所有事件

$(“p”).unbind(‘click’) //取消对象中所有点击事件

$(“p”).unbind(‘click’,fun) //取消对象中某一个点击事件

 

<script src="WdatePicker.js"></script>

导入他来获得日历挂件

 

<img src="skin/datePicker.gif"style="cursor: pointer" width="16" height="22" align="absmiddle" οnclick="WdatePicker({el:'birth'})">

 

 

点击图片弹出日历

 

jq属性选择器：