您的位置：首页 > Web前端 > JQuery

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

2016-10-19 23:23 260 查看

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>

<div id="gg" style="display: none;">
<img src="../../img/products/guanggao.jpg"/>
</div>

<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">.....................</div>
</div>

<div class="clear">
<img src="../../img/products/hao/ad.jpg" width="100%"/>
</div>

<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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery

相关文章推荐

新的分享

章节导航