【我的javaEE学习】前端例子之广告展示与隐藏和左右选择

其他 2018-07-04 20:43:14 阅读次数: 0

很多购物平台，都会在打开购物平台首页出现一个广告，然后过一段时间自动关闭。可以利用JS或者Jquery来实现。


用js如下：

<html>
<head>
<title>展示广告，然后隐藏</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 src="${pageContext.request.getContextPath()}/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
	 //展示次数
	var i = 0;
	onload = function() {
		//设置定时器显示广告
		setInterval(show, 4000);
	}
	function show() {
		//没显示一次就对i加1
		i++;
		//判断i的值
		if (i <= 1) {
			var divobj = document.getElementById("ad");
			divobj.style.display = "block";
			//设置定时器隐藏广告
			setTimeout(hide, 3000);
		}
	}
	function hide() {
		var divobj = document.getElementById("ad");
		divobj.style.display = "none";
	} 
	
</script>
</head>
<body>
	<div id="ad" style="display: none">
		<img id="imgid1" src="${pageContext.request.getContextPath()}/img/front/section1.jpg">
	</div>
</body>
</html>

而用jquery实现如下：

<html>
<head>
<title>展示广告，然后隐藏</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 src="${pageContext.request.getContextPath()}/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	setTimeout(show, 3000);
})
function show() {
	$("#ad").show(1000);
	//$("#ad").slideDown(1000);
	setInterval(hide, 2000);
}
function hide() {
	$("#ad").hide(1000);
	//$("#ad").slideUp(1000);
} 
	
</script>
</head>
<body>
	<div id="ad" style="display: none">
		<img id="imgid1" src="${pageContext.request.getContextPath()}/img/front/section1.jpg">
	</div>
</body>
</html>


效果如下：





第二个例子：左右选择，所谓左右选择，其实效果如下：


代码实现如下：

<head>
<title>左右选中</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">
<script type="text/javascript">
	onload = function() {
		//从左往右
		//给单移按钮派发事件
		document.getElementById("toRight1").onclick = function() {
			//获取左边所有的option
			var arr = document.getElementById("left").options;

 			//遍历数组 判断是否选中
			for ( var i = 0; i < arr.length; i++) {
				//判断是否选中 若选中 则追加(移动)到右边的select中
				if (arr[i].selected) {
					document.getElementById("right").appendChild(arr[i]);
					break;
				}
			}
		}

		//给多移动按钮派发事件
		document.getElementById("toRight2").onclick = function() {
			//获取左边所有的option
			var arr = document.getElementById("left").options;

			//遍历数组 判断是否选中 
			for ( var i = 0; i < arr.length; i++) {
				//判断是否选中 若选中 则追加(移动)到右边的select中
				if (arr[i].selected) {
					alert(arr[i].selected);
					document.getElementById("right").appendChild(arr[i]);
					//注意:长度变化,移动过去一个，长度就减小了
					i--;
				}
			}
		}
		//给全部移动按钮派发事件
		document.getElementById("toRight3").onclick = function() {
			//获取左边所有的option
			var arr = document.getElementById("left").options;

			//遍历数组 判断是否选中 
			for ( var i = 0; i < arr.length;) {
				//相当于永远把第一个选项移动过去
				document.getElementById("right").appendChild(arr[i]);
			}
		}
		
		//从右往左
            document.getElementById("toLeft1").onclick = function() {
            	//获取左边所有的option
    			var arr = document.getElementById("right").options;

    			//遍历数组 判断是否选中
    			for ( var i = 0; i < arr.length; i++) {
    				//判断是否选中 若选中 则追加(移动)到右边的select中
    				if (arr[i].selected) {
    					document.getElementById("left").appendChild(arr[i]);
    					break;
    				}
    			}
		}
		
          //给多移动按钮派发事件
    		document.getElementById("toLeft2").onclick = function() {
    			//获取左边所有的option
    			var arr = document.getElementById("right").options;

    			//遍历数组 判断是否选中 
    			for ( var i = 0; i < arr.length; i++) {
    				//判断是否选中 若选中 则追加(移动)到右边的select中
    				if (arr[i].selected) {
    					document.getElementById("left").appendChild(arr[i]);
    					//注意:长度变化
    					i--;
    				}
    			}
    		}
    		//给全部移动按钮派发事件
    		document.getElementById("toLeft3").onclick = function() {
    			//获取左边所有的option
    			var arr = document.getElementById("right").options;

    			//遍历数组 判断是否选中 
    			for ( var i = 0; i < arr.length;) {
    				//相当于永远把第一个选项移动过去
    				document.getElementById("left").appendChild(arr[i]);
    			}
    		}
	}
</script>
</head>
<body>
	<table>
		<tr>
			<td>
				<select id="left" multiple="true" style="width:100px" size="10">
					<!--multiple表示可以多选-->
					<option>JAVA</option>
					<option>PHP</option>
					<option>c#</option>
					<option>c++</option>
					<option>IOS</option>
					<option>JS</option>
					<option>JQUERY</option>
					<option>LINUX</option>
				</select>
			</td>
			<td>
				<input type="button" value=">" id="toRight1" />
				<br>
				<input type="button" value=">>" id="toRight2" />
				<br>
				<input type="button" value=">>>" id="toRight3" />
				</br>
				
				<input type="button" value="<" id="toLeft1" />
				<br>
				<input type="button" value="<<" id="toLeft2" />
				<br>
				<input type="button" value="<<<" id="toLeft3" />
			</td>
			<td>
				<select id="right" multiple="true" style="width:100px" size="10">

				</select>
			</td>
		</tr>
	</table>
</body>
</html>


而利用jquery代码如下：

<head>
<title>左右选中</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">
<script src="${pageContext.request.getContextPath()}/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#toRight1").click(function(){
		$("#left>option:selected:first").appendTo($("#right"));
	});
	
	$("#toRight2").click(function(){
		$("#right").appendTo($("#left option:selected"));
	});
	
	$("#toRight3").click(function(){
		$("#right").appendTo($("#left option"));
	});
})
</script>
</head>
<body>
	<table>
		<tr>
			<td>
				<select id="left" multiple="true" style="width:100px" size="10">
					<!--multiple表示可以多选-->
					<option>JAVA</option>
					<option>PHP</option>
					<option>c#</option>
					<option>c++</option>
					<option>IOS</option>
					<option>JS</option>
					<option>JQUERY</option>
					<option>LINUX</option>
				</select>
			</td>
			<td>
				<input type="button" value=">" id="toRight1" />
				<br>
				<input type="button" value=">>" id="toRight2" />
				<br>
				<input type="button" value=">>>" id="toRight3" />
				</br>
				
				<input type="button" value="<" id="toLeft1" />
				<br>
				<input type="button" value="<<" id="toLeft2" />
				<br>
				<input type="button" value="<<<" id="toLeft3" />
			</td>
			<td>
				<select id="right" multiple="true" style="width:100px" size="10">

				</select>
			</td>
		</tr>
	</table>
</body>
</html>




在这补充一个js与jQuery的简单区分：



对jquery来说，知识点如下

1.jquery选择器总结:
   1.1基本选择器
        ID选择器： $(“#id”)
        类选择器：$(“.class”)
        元素选择器：$(“元素”)
        通配符选择器：$(“*”)
        选择器,选择器:$(“#id,.class”) 
        泛型选择器：$("*")
        获取多个选择器 用逗号隔开：$("#id值,.class值")


   1.2层次选择器 
        a b:a的所有b后代
        a>b:a的所有子树
        a+b:a的下一个子树
        a~b:a的所有子树


   1.3基本过滤选择器:
         :frist 第一个
         :last 最后一个
         :odd  索引奇数
         :even 索引偶数
         :eq(index) 指定索引
         :gt(index) >
         :lt(index) <


   1.4内容过滤:
        :has("选择器"):包含指定选择器的元素


   1.5可见过滤:
       :hidden   在页面不展示元素 一般指 input type="hidden" 和 样式中display:none
       :visible    在页面展示元素


   1.6属性过滤器:
        [属性名]
        [属性名="值"]


   1.7表单过滤:
        :input  所有的表单子标签  input select textarea button


2.jquery属性和css操作总结:
    2.1对属性的操作:
         2.1.1 attr():设置或者获取元素的属性
                  方式1:获取
                            attr("属性名称")
                  方式2:设置一个属性
                             attr("属性名称","值");
                  方式3:设置多个属性  json
                            attr({
                                   "属性1":"值1",
                                   "属性2":"值2"
                                  })
         2.1.2 removeAttr("属性名称"):移除指定属性
                  2.1.3对于class
                          addClass("指定的样式值"); 相当于 attr("class","指定的样式值");
                          removeClass("指定的样式值");


    2.2对css操作:操作元素的style属性
         2.2.1 css():获取或者设置css样式
                 方式1:获取
                           css("属性名")
                 方式2:设置一个属性
                           css("属性名","值")
                 方式3:设置多个
                           css({
                                   "属性1":"值1",
                                   "属性2":"值2"
                                });


3.文档操作:
   3.1内部插入
        append(c):将c插入到a的内部(标签体)后面
        HTML 代码:  <p>I would like to say: </p>
        jQuery 代码:  $("p").append("<b>Hello</b>");
        结果:             <p>I would like to say: <b>Hello</b></p> 


       prepend(c):将c插入到a的内部的前面
       HTML 代码:  <p>I would like to say: </p>
       jQuery 代码: $("p").append("<b>Hello</b>");
       结果:             <p><b>Hello</b>I would like to say: </p> 

       appendTo  把所有匹配的元素追加到另一个指定的元素元素集合中。
       HTML 代码:  
                         <p>I would like to say: </p>
                        <div></div><div></div>
       jQuery 代码:$("p").appendTo("div");
       结果:       
                          <div><p>I would like to say: </p></div>
                         <div><p>I would like to say: </p></div>


       prependTo 把所有匹配的元素前置到另一个、指定的元素元素集合中。
       HTML 代码:  <p>I would like to say: </p><div id="foo"></div>                 
       jQuery 代码: $("p").prependTo("#foo");
       结果:             <div id="foo"><p>I would like to say: </p></div>

  3.2外部插入
       a.after(c):将c放到a的后面
       a.before(c):将c放到a的前面

       a.insertAfter(c) 
       a.insertBefore(c)


  3.3删除
       empty() 清空元素
       remove() 删除元素

  3.4表单对象属性过滤选择器
       :enabled   可用的
       :disabled  不可用
       :checked   选中的(针对于单选框和复选框的)
       :selected  选中的(针对于下拉选)


4.遍历数组
     数组.each(function(){});
        $.each(遍历数组,function(){});

    注意:
   each的function中可以加两个参数 index和dom
   index是当前遍历的索引值
   dom指代的是当前遍历的dom对象(开发中一般使用this即可)

5.设置或者获取value属性
       jquery对象.val():获取
       jquery对象.val("...."):设置

6.设置获取获取标签体的内容 
html()
text()

xxxxx():获取标签体的内容
xxxxx("....."):设置标签体的内容

设置的区别:
html:会把字符串解析
text:只做为普通的字符串
获取的区别:
html:获取的html源码
text:获取只是页面展示的内容

猜你喜欢

转载自blog.csdn.net/suqi356/article/details/78811877
今日推荐
周排行
解析ReentrantLock实现原理
面试之非技术
第三周助教点评
《阅读-拖延心理学》
第二章 使用 kind 一分钟搭建 k8s 集群
2018福大软工实践第五次作业
Day2.基本条件语句
抢占物联网入口，“腾讯云小微”将和AliGenie互怼
IO流的输入输出
vSphere 7.0初体验
每日归档
更多
2024-06-12(0)
2024-06-11(0)
2024-06-10(0)
2024-06-09(0)
2024-06-08(0)
2024-06-07(0)
2024-06-06(0)
2024-06-05(0)
2024-06-04(10)
2024-06-03(52)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022