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>