jquery技术初探-广告淡入淡出

最新推荐文章于 2022-09-04 23:56:48 发布

火焰长岛冰茶

最新推荐文章于 2022-09-04 23:56:48 发布

阅读量374

点赞数

分类专栏： Web前端文章标签： jquery

本文链接：https://blog.csdn.net/u013469562/article/details/52864943

版权

Web前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

jQuery是一个JavaScript框架。它兼容CSS3（动态效果），还兼容各种浏览器。文档说明很全，应用详细，成熟插件多。它可以看做是js的升级版，里面封装了大量的属性和方法。兼容性好，调用方便。哦我们呢可以在jquery.com的官网上下载。

在学习Jjs时，有自定义JS库的导入，学习jQuery只需要将对应js库下载，并导入到我们项目下，在html页面使用<script>导入即可。

<script src="../js/jquery-1.11.0.js" type="text/javascript" ></script>

/1 获得jQuery对象
// * 命名约定：jQuery对象变量名建议以$开头。
var demoId = $("#demoId");

1. jQuery对象和DOM对象的转换

jQuery对象和DOM对象可以项目转换，但两个对象的函数不能彼此混搭使用。及jQuery对象只能使用自己的函数

DOM对象转换成jQuery对象，语法：jQuery(dom对象)

jQuery对象转换成DOM对象，语法：$username[index]

知道了以上的两种转换方法基本可以做到js和jquery的无缝转化，大大方便了使用，而且对于项目而言也会经常用到，本文也会有几个实例的案例大量的运用这种方法。

//1 原生javascript获得value值
var d1 = document.getElementById("demoId");
	alert(d1.value);   //可以打印看看数值

//2 将js dom对象 转换成jQuery对象
// * 语法：$(dom对象) 或  jQuery(dom对象)
var d2 = $(d1);
	alert(d2.val()); //可以试着输出

//3 将jQuery 转换成 dom对象
// * jQuery对象内部以数组方式存放数据，这里只有一个JS对象变为了JQuery对象，所以数组中仅有一个对象，它的索引号为0。
var d3 = d2[0];
alert(d3.value);


// 总结：jQuery对象和dom对象，函数(api)不能相互调用

注：JS的基本数据类型不参与jQuery转换，但是String除外。

2.jQuery的页面加载
jQuery提供 用于页面成功加载后执行的方式。与window.onload函数类型。
<script type="text/javascript">
	//实际开发中，我们习惯将<script>标签编写在<head>标签体内，
//整个页面的解析时从上网下的，此时将不能获得<input>对象
	alert($("#demoId").length);	//获得匹配对象的个数，0表示没有匹配到任何
	
	
	//1 javascript页面加载
	window.onload = function(){
		alert("js页面加载");
	}
	
	//2 jQuery页面加载
	$(function () {
		alert("jQuery页面加载");
	});
	
	/*
	 * 注意：
	 * * js给onload只能赋一个值，如果对此赋值，后面的将覆盖前的。
	 * * jQuery可以使用多次，多个页面加载将依次执行。
	 */
	
</script>
<body>
	<input type="text" id="demoId" value="传智&黑马&You"/>
</body>

3.jquery的选择器

//基本选择器有三种，分别对应css标签的ID,CLASS和标签名
<script type="text/javascript">
	$(function () {
		//1 id选择器，格式：$("#id值")
		var $d1 = $("#r01");
		alert($d1.length);	//1 ,id="r01"只有一个
		
		//2 标签选择器，格式：$("标签名")
		var $d2 = $("input");
		alert($d2.length);	//3，表示3个input
		
		//3 类选择器，格式：$(".class类名")
		// * length 和 size() 等效
		var $d3 = $(".myClass");
		alert($d3.size());	//2，表示两个input class为myClass
	});
</script>
<input type="radio" name="hobby" value="1" id="r01"/>
<input type="radio" name="hobby" value="2" class="myClass"/>
<input type="radio" name="hobby" value="3" class="myClass"/>

运用以上的一些内容，我简单的做了一个页面效果，广告图片的淡入淡出，类似于门户网站的一些广告效果，利用jquery实现。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.main{
				margin-left: 50px;
				width: 95%;
			}
			.header .top{
				float: left;
				width: 33.2%;
			}
			ul{
				/*取消无序列表符号*/
				list-style: none;
			}
			ul li{
				display: inline;
			}
			a{
				/*取消超链接下划线*/
				text-decoration: none;
				
			}
			.menu{
				clear: both;
				background-color: #333;
				height: 50px;
			}
			.menu ul{
				padding-top:10px;
				padding-left:10px;
			}
			.menu a{
				padding-left:10px;
				color: #fff;
			}

			.product .left{
				float:left;
				width: 18%;
			}
			.product .right{
				float:left;
				width: 80%;
			}
			.product .right .first{
				float:left;
			}
			.product .right .item{
				float:left;
				margin-left: 5px;
			}
			.clear{
				clear:both;
			}
		</style>
		<script type="text/javascript" src="../../js/jquery-1.11.0.js" ></script>
		<script>
			$(function(){
				//写定时器
				setTimeout("run1()",2000);
			});
			
			function run1(){
				//显示
				//1、获取对应的元素节点对象
				var gg=$("#gg");
				//2、动画效果
				gg.slideDown(1000,function(){
					setTimeout("run2()",2000);
				});
			}
			
			function run2(){
				$("#gg").slideUp(1000);
			}
		</script>
	</head>
	<body>
		<!--
        	1、会引入jQuery
        	2、页面加载完成时，执行相关代码。
        	3、执行一次性定时器。    JS定时器
        	
        	4、jQuery如何获取元素节点
        	5、隐藏显示的动画效果
        -->
			<div id="gg" style="display: none;">
				<img src="../../img/products/guanggao.jpg"/>
			</div>
			<!-- header -->
			<div class="header">
				<div class="top"><img src="../../img/logo.png"/></div>
				<div class="top"><img src="../../img/header.png"/></div>
				<div class="top">
					<ul>
						<li><a href="#">登录</a></li>
						<li><a href="#">注册</a></li>
						<li><a href="#">购物车</a></li>
					</ul>
				</div>
			</div>
			<!-- 导航条 -->
			<div class="menu">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">首页</a></li>
					<li><a href="#">11</a></li>
					<li><a href="#">22</a></li>
				</ul>
			</div>
			<!-- 轮播图 -->
			<div>
				<img src="../../img/1.jpg" width="100%"/>
			</div>
			<!-- 热门商品 -->
			<div class="product">
				<div class="">
					<font size="6">商品</font>
					<img src="../../img/img/title2.jpg" />
				</div>
				<div class="left">
					<img src="../../img/products/hao/big01.jpg"/>
				</div>
				<div class="right">......<!-- 一些html代码 -->...............</div>
			</div>
			<!-- 广告 -->
			<div class="clear">
				<img src="../../img/products/hao/ad.jpg" width="100%"/>
			</div>
			<!-- footer -->
			<div class="footer">
				<div class="clear">
					<img src="../../img/img/footer.jpg" width="100%" />
				</div>
				<div align="center">
					<a href="#">关于我们</a> |
					<a href="#">关于我们</a> |
					<a href="#">关于我们</a> |
					<a href="#">关于我们</a> |
					<a href="#">关于我们</a> |
					<a href="#">关于我们</a> 
					<br />
				
				</div>
			</div>
		</div>
	</body>
</html>

火焰长岛冰茶

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery技术初探-广告淡入淡出

jQuery是一个JavaScript框架。它兼容CSS3（动态效果），还兼容各种浏览器。文档说明很全，应用详细，成熟插件多。它可以看做是js的升级版，里面封装了大量的属性和方法。兼容性好，调用方便。哦我们呢可以在jquery.com的官网上下载。在学习Jjs时，有自定义JS库的导入，学习jQuery只需要将对应js库下载，并导入到我们项目下，在html页面使用导入即可。/1 获得
复制链接

扫一扫