前端脚本练习

最新推荐文章于 2024-12-24 09:30:18 发布

zengshaotao

最新推荐文章于 2024-12-24 09:30:18 发布

阅读量134

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery javascript 文章标签：前端 javascript ViewUI

本文链接：https://blog.youkuaiyun.com/zengshaotao/article/details/84379185

javascript 同时被 2 个专栏收录

102 篇文章

订阅专栏

JQuery

80 篇文章

订阅专栏

<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 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 onload="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" onclick="getoffSet()">

    <img id="fff" alt="rr" src="holidate.jpg">
</body>
</html>