<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery 模块拖动,拖动层效果</title>
<style type="text/css">
</style>
<script type="text/javascript" language="javascript" src="js/jquery-1.6.1.js"></script>
<script type="text/javascript">
//需要初始化select的数据,这里是二维数组的形式,N x 2的形式
var dataArr = new Array(["value1","text1"],
["value2","text2"],
["value3","text3"]);
//需要校验的字段,这里是二维数组的形式,N x 3的形式
var checkArr = new Array(["id1","required","id1必须输入"],
["id2","required","id2必须输入"],
["id2","isNum","必须是数字"]);
//ready里面执行的是函数,而不是脚本语句,相当于ready方法参数是function
$(document).ready(
function(){
initSelect("selectId","",dataArr);
commonCheck(checkArr);
appendTest();
}
);
//在dd这个div的所有内容之后d
function appendTest(){
$("#dd").append("<br>fdfd</br>");
}
//写一个通用性的校验
function commonCheck(checkArr){
var length = checkArr.length;
for(var i=0; i < length ; i++){
var checkId = checkArr[i][0];
var tempValue = document.getElementById(checkId).value;
var checkType = checkArr[i][1];
var clueMsg = checkArr[i][2];
if("required"===checkType){
if(tempValue==""){
alert(clueMsg);
return false;
}
}else if("isNum"===checkType){
if(isNaN(tempValue)){
alert(clueMsg);
return false;
}
}else{
alert("【"+checkId+"】校验项输入不正确!");
return false;
}
if(tempValue==""){
alert(checkArr[i][2]);
return false;
}
}
return true;
}
//根据select的id或者name来创建option
// 都存在时选用id
//dataArr 是二维数组的形式,N x 2的形式,第一维是value,第二维是text
function initSelect(id,name,dataArr){
var optionArr = createMultiOption(dataArr);
if(id=="" || id ==null || (typeof(id))==="undefined"){
//没有id,这时需要校验name是否存在
if(name=="" || name ==null || (typeof(name))==="undefined"){
//id和name都没有提供
alert("创建option时出错,请检查!");
return false;
}else{
//通过name来将新创建option进行赋值
// 将一般对象封装成JQuery对象
//var JOption = $(option);
//alert(JOption.val());不能用value属性,因为是JQuery对象
//JOption.appendTo($("select[@name="+name+"]"));
//alert($("#selectId"));
//$("<option value='111'>UPS Ground</option>").appendTo($("[name=selectName]"));
}
}else{
//存在id,就用id
for(var i=0; i<optionArr.length ; i++){
var tempOption = optionArr[i];
document.getElementById(id).add(tempOption);
}
//不能将javascript和JQuery对象和方法混合使用
//因为add是普通的javascript方法,这里找寻对象时使用了JQuery方法
//$("#"+id).add(option);//该句无法添加
//这有才可以添加option
//但是公用的方法里,不能包括特定的值
//这里创建的option是比较有针对性的
//$("<option value='111'>UPS Ground</option>").appendTo($("#"+id));//可以添加
}
}
// 创建option,单个的
function createSingleOption(value,text){
var op=document.createElement("option");
op.value=value;
op.text=text;
return op;
}
//通过二维数组的形式创建多个option
//二维数组的形式
//alert(twoWei); 脚本也有toString的方法
function createMultiOption(twoWei){
var optionArr = new Array();
var length = twoWei.length;
for(var i=0 ; i < length ; i++){
var tempText = twoWei[i][1];
var tempValue = twoWei[i][0];
var tempOption = createSingleOption(tempValue,tempText);
optionArr[i] = tempOption;//给数组动态赋值
}
return optionArr;
}
function displayPhoto(){
$("#imgTest").attr({ src: "holidate.jpg", alt: "Test Image",width:"80",height:"80"});
}
function testFunction(){
//获得第一个p,其他的忽略
//var attr = $("p").css("color");//取得第一个段落的color样式属性的值
//alert("弹出的颜色的代码,而不是英文描述"+attr);
//如果属性名包含 "-"的话,必须使用引号
//为所有的P元素添加属性
//$("p").css("color","red");为所有匹配的元素添加单个属性
$("p").css({ "margin-left": "10px","background-color": "blue",color: "#ff0011" });
//注册事件
$("div").click(function() {
$(this).css({
width: function(index, value) {
alert(index+"-"+value);
return parseFloat(value) * 1.2;
},
height: function(index, value) {
return parseFloat(value) * 1.2;
},
//div字体的颜色
color:"red"
});
});
}
function getoffSet(){
var p = $("p:last");
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
}
$(document).ready(function(){
$("#fff").fadeTo("slow", 0.6); // This sets the opacity of the thumbs to fade down to 60% when the page loads
$("#fff").hover(function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity to 100% on hover
},function(){
$(this).fadeTo("slow", 0.6); // This should set the opacity back to 60% on mouseout
});
});
</script>
</head>
<body οnlοad="testFunction()">
<input type="text" id="id1" name="" value="32"/>
<input type="text" id="id2" name="" value="2"/>
<p color="red">这里是第一个段落,所以会自动换行</p>
<p color="blue">这里是第二个段落,所以会自动换行</p>
<p></p>
<select id="selectId" name="selectName" style="width:200px">
</select>
<div>
我是一个div
</div>
<div>
我是一个div
</div>
<div id="dd">
<a href="">tst</a>
</div>
<input type="button" value="getoffSet" οnclick="getoffSet()">
<img id="fff" alt="rr" src="holidate.jpg">
</body>
</html>