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>