JAVA学习总结二十

第四章 JS补充及Jquery语法及示例

JS引用数据类型

• 正则表达式为引用数据类型（对象）

Javascript对象的特点：

• Javascript是基于对象的面向对象语言。只有对象的概念，没有类，没有接口。
• Javascript的函数本身也是对象。
• Javascript对象的属性和方法，可以在运行期间动态添加或删除。

事件流

事件流意味着页面上不止一个元素可响应相同的事件。
如：当我们点击页面上的按钮时，实际上我们是点击了按钮，以及按钮的容器–整个页面。

不同的浏览器有不同实现事件流的方法。

• 事件冒泡（IE）。先响应事件源，再响应父容器。
• 事件捕获。先响应父容器，再响应事件源。
• 事件处理。可以选择先响应事件源，还是先响应父容器

事件指派的方式有两种：

• 传统事件添加。

特点：

• 兼容性好，几乎浏览器都支持。

• 一个元素的一个事件只能绑定一个函数。

• 现代事件添加。

特点：

• 兼容性差，浏览器不同，添加时间的方式就不同。
• 一个元素的一个事件，可以绑定多个函数。

注意：一个事件如果返回值为false，可以阻止元素默认行为

innerHTML

• 方便地设置元素内容
• 不是DOM的一部分，但被所有浏览器支持

jquery概述

jquery是一款免费且开放源代码javascript代码库，引入了全新的DOM选择器引擎，同时提供UI库组件。

jquery优点：

• 轻量级
• 强大的DOM选择器，简化javascript和ajax开发。
• 解决不同浏览器兼容问题
• 提供UI库组件，让页面开发更方便。

jquery对象

• 很多函数返回值都是jquery对象，jquery对象和dom对象可以互换。

jquery对象和dom对象的互换

• dom转为jquery：
  var obj= document.getElementById("div1");
//dom对象转化为jquery
var jq = $(obj);
alert(jq.html());
• jquery转为dom
  var jq = $(#div1);
var obj = $(jq)[0]
alert(obj.innerHTML)

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

jquery 元素选择器

按标记名称查找元素：

• var msg = $("#div1 label")
• • var msg = $("#div1").find("label")

取得数据第几个元素，返回dom对象

$("div1 label")[1].innerHTML;

数组长度

$("#div1 label").size();

遍历数组

("#div1 label").each(function(index,data)){
index为循环变量，data为数组中的DOM元素
//得到原始DOM对象
this.innerHTML
})

Jquery元素设置

设置、获得标签中的内容（相当于innerHTML）

• $(“#div1”).html(“

  aaa

  “)//设置内容

• $(“#div1”).html()//获得内容

设置、获得value值

• $(“#useName”).val(“张三”)//设置value值
• $(“#useName”).val()//获得value值

显示隐藏元素

• $(“p”).show(“slow”)//附加动画，显示元素
• $(“p”).hide(“slow”)//附加动画，隐藏元素

取消事件

• 取消对象中所有事件：$(“p”).unbind();
• 取消对象中所有点击事件：$(“p”).unbind(‘click’);
• 取消对象中某一个点击事件：$(“p”).unbind(‘click’，fun);

JS代码示例：

<script>        var obj;        //alert(obj)        //alert(mytest())        //function mytest(x,y,z){            //alert(x+"  "+y+"   "+z);        //}        //js调用函数时，形参和实参个数是可以不一致。没有赋值的形参为undefined        //mytest();        function mm(num){            if(num>10){                return 3;            }        }        var x=null;        alert(parseFloat("asp"));    //typeof:检测该变量中存放的数据类型，如果x的值为null，那么为object引用类型。      //  alert(typeof(x));        //数据类型转化：先将"10"自动转换为number类型，再运算        //alert("10"-2);        //当做+运算时，操作数有一个是字符串，那么做连接运算        //alert("10"+2-2);        //结果是"55"，先计算3+2，再和"5"做连接        //alert(3+2+"5");        //先将字符串自动转换为number，再做乘法运算        //alert("2"*"5");        //先将字符串转化为number，由于转换失败，结果是NaN        //alert("三"*"四")        //NaN和自身不相等        //alert(NaN==NaN);        //验证字符串，是否为非数字        //alert(isNaN("23"));        //先将'55'字符串转化为number，再做比较，结果为true;        //alert(55 == '55');        //不但比较内容，而且比较类型        //alert(55 === '55');        //强制类型转换        //alert(parseInt("23")+3)        //将第一个非数字的字符以后的内容全部忽略，将数字部分转化为number        //alert(parseInt("13fdsa")+3)        //转换字符串的第一个字符为非数字，转换结果为NaN        //alert(parseInt("f32")+3)//        alert(parseInt("3.14")+"    "+parseFloat("3.14"));    </script>

jquery代码示例：

<script>        $(function(){            var str = "";            $(countrys).each(function(index,obj){                str += "<option value='"+obj.countryid+"'>"+obj.countryName+"</option>"            })            $("#countryId").html(str);            var str1 = "";            $(citys).each(function(index,obj){                if(1==obj.countryid){                    str1 += "<option value='"+obj.countryid+"'>"+obj.cityName+"</option>"                }            })            $("#cityId").html(str1)           //方法二            $("#countryId").change(function(){                //此处的this.value相当于showCity(this)                var theId = this.value;                var cityStr = "";                $(citys).each(function(index,obj){                    if(theId==obj.countryid){                        cityStr += "<option value='"+obj.countryid+"'>"+obj.cityName+"</option>"                    }                })             $("#cityId").html(cityStr);            })        })        //方法一//        function showCity(selectObj){//            var str = "";////            $(citys).each(function(index,obj){//                if(selectObj.value==obj.countryid){//                    str += "<option value='"+obj.countryid+"'>"+obj.cityName+"</option>"//                }//            })//            $("#cityId").html(str);//        }    </script>