21 jquery高级

最新推荐文章于 2024-05-15 20:34:42 发布

莹火虫的另一半

最新推荐文章于 2024-05-15 20:34:42 发布

阅读量188

点赞数

分类专栏： javaWeb

本文链接：https://blog.csdn.net/woshilovetg/article/details/83686585

版权

javaWeb 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

********************************* 学会查文档**********************************

1. 动画

注意：toggle切换

2. *******************遍历******************************

两种jquery遍历方式（注意：return true 和 return false的区别）

3. 事件绑定

1.一般使用下面绑定事件

2.事件绑定的第二种方式&&事件的解绑

3.事件的切换

事件切换：toggle

* jq对象.toggle(fn1,fn2...)

* 当单击jq对象对应的组件后，会执行fn1.第二次点击会执行fn2.....

* 注意：1.9版本 .toggle() 方法删除,jQuery Migrate（迁移）插件可以恢复此功能。

<!DOCTYPE html>

<html>

<head>

$(function () {

$("#btn").toggle(function () {

$("#myDiv").css("backgroundColor", "green");

}, function () {

$("#myDiv").css("backgroundColor", "pink");

});

</script>

</head>

<body>

点击按钮变成绿色，再次点击红色

</div>

</body>

</html>

4. 案例

1.广告的自动显示与隐藏

<!DOCTYPE html>

<html>

<head>

<title>广告的自动显示与隐藏</title>

<style>

#content {

width: 100%;

height: 500px;

background: #999

}

</style>

/**

* 1. 当页面加载完，3秒后。自动显示广告

* 2. 广告显示5秒后，自动消失。

$(function () {

setTimeout(show, 3000);

});

//显示广告

function show() {

$("#ad").css("display", "block");

setTimeout(hide, 5000);

}

//隐藏广告

function hide() {

$("#ad").css("display", "none");

}

</script>

</head>

<body>

<div>

</div>

正文部分

</div>

</body>

</html>

2.实现抽奖******************

<!DOCTYPE html>

<html>

<head>

<title>jquery案例之抽奖</title>

</head>

//准备一个一维数组，装用户的像片路径

var imgs = [

"../img/man00.jpg",

"../img/man01.jpg",

"../img/man02.jpg",

"../img/man03.jpg",

"../img/man04.jpg",

"../img/man05.jpg",

"../img/man06.jpg"

];

//获取随机整数0 ~ imgs.length-1

var n = 0;

var m = imgs.length-1;//6

function rnd(n, m){

var random = Math.floor(Math.random()*(m-n+1)+n);

return random;

}

$(function () {

//页面加载完，停止按钮置为不可用

$("#stopID").prop("disabled",true);

var interval;

//点击开始按钮

$("#startID").click(function () {

//点击开始后，开始按钮置为不可用，停止按钮置为可用

$("#startID").prop("disabled",true);

$("#stopID").prop("disabled",false);

//每隔100ms，改变小项框的src属性

interval = setInterval(function () {

$("#img1ID").prop("src",imgs[rnd(n,m)]);

},100);

});

//点击停止按钮

$("#stopID").click(function () {

//1.点击停止后，停止按钮置为不可用，开始按钮置为可用

$("#stopID").prop("disabled",true);

$("#startID").prop("disabled",false);

clearInterval(interval);

//2.把小相框的图片放置到大相框中

//2.1获取小相框src属性值

var img1_src = $("#img1ID").prop("src");

//2.2设置img1_src到大相框src中

$("#img2ID").prop("src",img1_src).hide();//为实现动画，先隐藏，在进行特效展示

//2.2 1毫秒之后动态展示

setTimeout(function () {

$("#img2ID").show(1000,"linear");

},1);

});

</script>

<body>

</div>

<div

style="border-style:double;width:800px;height:500px;position:absolute;left:500px;top:10px">

</div>

</body>

</html>

5.小知识---->js获取随机数

function rnd(n, m){

var random = Math.floor(Math.random()*(m-n+1)+n);

return random;

}

莹火虫的另一半

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
21 jquery高级

********************************* 学会查文档**********************************1.2. 1. 动画 ...
复制链接

扫一扫

专栏目录