javascript or jquery

最新推荐文章于 2024-04-24 09:22:16 发布

mexican_jacky

最新推荐文章于 2024-04-24 09:22:16 发布

阅读量470

点赞数

分类专栏： javascript and jquery 文章标签： javascript stylesheet input function button string

本文链接：https://blog.csdn.net/mexican_jacky/article/details/6726999

版权

javascript and jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

/==================================入门实例==============================================

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

============================================表格奇偶变色======================

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'demo1.jsp' starting page</title>

//用DOM方式来让表格奇偶变色

//window.οnlοad=function(){

//var myTable=document.getElementById("mytable");
//var myTbody=myTable.getElementsByTagName("tbody");
//var trs=myTbody[0].getElementsByTagName("tr");
//for(var i=0;i<trs.length;i++){
//if(i%2==0){
//trs[i].style.backgroundColor="red";
//}else{
//trs[i].style.backgroundColor="blue";
//}
//}

//}

/**
*
*用Jquery来是表格变色
*/

$(this).ready(function(){
//:even过滤出为偶数的行
$("#mytable tr:even").css("background","yellow");
//:odd过滤出为奇数行的
$("#mytable tr:odd").css("background","gray");
}
);

</script>
</head>

====================================复选框的选中========================================

==============================Jquery 属性======================

===========================html页面中添加元素=========================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>My JSP 'demo1.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
<script type="text/javascript">
   //---使用javascript来添加元素
/**
  function addItems(){
   document.getElementById("div1").innerHTML="";
   var num=parseInt(document.getElementById("num").value);
   for(var i=0;i<num;i++){
    var input=document.createElement("input");
     input.type="text";
     input.setAttribute("name","items");
    var br=document.createElement("br");
     document.getElementById("div1").appendChild(input);
     document.getElementById("div1").appendChild(br);
   }
  }
*/

  //使用jquery来添加元素
$(function(){
  $("#btn").click(function(){
   var num=$("#num").val();
   $("#div1").html("");
   for(var i=0;i<num;i++){
    $("#div1").append("<input type='text' name='items'/> <br/>");
   }

  });
});


</script>
</head>

<body>
    <input type="text" name="items" id="num"/> 
    
    <input type="button" value="click" id="btn" >
    <div id="div1"></div>
</body>
</html>

=====================文件上传的file添加和删除============================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>My JSP 'demo1.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="js/jquery-1.6.2.js"></script>
<script type="text/javascript">
  //用javascirpt来控制的
/*
*
*
* function addItem(){
  var input=document.createElement("input");
   input.type="file";
   input.setAttribute("name","items");

  var button=document.createElement("input");
   button.type="button";
   button.setAttribute("value","删除");

   var br=document.createElement("br");

   document.getElementById("fileDiv")
   .appendChild(br);

   document.getElementById("fileDiv")
   .appendChild(input);

   document.getElementById("fileDiv")
   .appendChild(button);


   //给button注册单击事件

   button.οnclick=function(){
    //删除换行
    document.getElementById("fileDiv").removeChild(br);
    //删除file
    document.getElementById("fileDiv").removeChild(input);
    //删除自身button
    document.getElementById("fileDiv").removeChild(button);
   }


  }

*/

//用jquery来创建和控制

$(function(){
  $("#more").click(function(){
   //获得div
   var div=$("#fileDiv");

   var br=$("<br/>");
   var file=$("<input type='file'/>");
   var btn=$("<input type='button' value='删除'/>");

   //追加
   div.append(br).append(file).append(btn);
   //删除
   btn.click(function(){
    br.remove();
    file.remove();
    btn.remove();
   });

  });


});

</script>
</head>

<body> 
  
  <input type="file"> 
  <input type="button" value="more" id="more"/>
    <div id="fileDiv"></div>

</body>
</html>

======================元素克隆==========================

=========================

mexican_jacky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript or jquery

/==================================入门实例==============================================String path = request.getContextPath();String b
复制链接

扫一扫