ASP.NET动态网站制作（12）-- JQ（4）
前言：这节课接着上次课的继续讲。
内容：接上-->
1.jq元素样式设置：
（4）某个元素中是否含有某个css类别，返回布尔型：$("li:last").hasClass("myClass");
（5）直接获取、编辑内容：html(text);text(content);
1 $("p").click(function(){
2 var sHtmlStr = $(this).html();
3 $(this).text(sHtmlStr);
4 });
（6）移动和复制元素：
$("p").append("<h1>我爱北京天安门</h1>");表示给所有p标签添加一段html代码作为子元素；
$("p:eq(1)").append($("a:eq(1)"));表示第二个p后面添加第二个a作为它的子元素；
$("img:eq(1)").appendTo("p:eq(0)");表示把页面中的第二个img标签加到第一个p标签中去；appendTo是将对象加到相应的里面去。
$("p:eq(1)").after($("a:eq(1)"));表示在第二个p后面添加第二个a，after是加在其后面，而不是里面。
$("p:eq(1)").before($("a:eq(1)"));表示在第二个p前面添加第二个a。
（7）删除元素：
$("p:contains('大')").remove();表示删除含有‘大’的p标签；
$("p").empty();表示清空p里面的内容。
（8）处理表单元素的值：val()表示获取文本框或者按钮的文本属性;val(text)表示设置文本框或者按钮的文本属性;
（9）绑定事件监听：
bind
$(function(){
$("img")
.bind("click",function(){
$("#show").append("<div>点击事件1</div>");
})
.bind("click",function(){
$("#show").append("<div>点击事件2</div>");
})
.bind("click",function(){
$("#show").append("<div>点击事件3</div>");
});
});
一个对象可以绑定多个方法，bind方法可以反复执行；
one方法绑定事件触发一次后自动删除；one方法只执行一次。
$("p").unbind("click"):移除绑定。
（10）交替：toggle();高版本是不支持的，只有低版本支持。
（11）鼠标感应：即前面所讲的hover()方法。
2.jq里的动画事件：
（1）显示和隐藏：
slideToggle(speed,callback)，在显示和隐藏之间切换，toggle()是伸缩地显示隐藏，而slidetoggle()是上下地显示隐藏。slideToggle()对应的是slideDown()（即显示）和slideUp()（即隐藏）。
$(".btn1").click(function(){
$("p").slideToggle();
});
hide(毫秒)表示隐藏，show(毫秒)表示显示。toggle()默认在show()和hide()之间切换。hide()和show()还有一个特别重要的参数，叫做“回调函数”，即执行完之后再执行。slideDown()和slideUp也有回调函数参数。
$(function(){
$("#btn").click(function(){
$("#d1").show(1000,function(){
alert("hello");
});
});
});
fadeToggle(毫秒)，表示渐变地显示和隐藏，它的参数没有回调函数。fadeToggle可以拆分成fadeIn()（渐变地显示），fadeOut()（渐变地隐藏）。fadeTo是设置透明度。
animate()：自定义动画。（div自由自在的运动的前提条件是脱离文档流）
$(function(){
$("#btn").click(function(){
$("#d1").animate({"top":"300px","left":"300px"},2000,function(){
$("#d1").animate({"top":"0px","left":"600px"},2000};
});
});
});
（2）setInterval(function(){},time)：间隔time时间自动执行某个事件function。
$(function(){
$("#btn").click(function(){
var iNum = 0;
setInterval(function(){
iNum++;
$("#d1").text(iNum);
},2000);
});
});
clearInterval()可以将定时器移除。
setTimeout(function(){},4000);表示只执行一次function()。
3.例子：轮播图
HTML代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>轮播图</title>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/demo.js"></script>
<link href="css/demo.css" rel="stylesheet" />
</head>
<body>
<div>
<div class="image"><img src="data:image/1.jpg" /></div>
<div class="image"><img src="data:image/2.jpg" /></div>
<div class="image"><img src="data:image/3.jpg" /></div>
<div class="image"><img src="data:image/4.jpg" /></div>
<div class="image"><img src="data:image/5.jpg" /></div>
<div class="image"><img src="data:image/6.jpg" /></div>
</div>
<div id="tabs">
<div class="tab bg">1</div>
<div class="tab">2</div>
<div class="tab">3</div>
<div class="tab">4</div>
<div class="tab">5</div>
<div class="tab">6</div>
</div>
</body>
</html>
CSS代码:
* {
padding: 0px;
margin: 0px;
}
.image {
margin-left: 300px;
margin-top: 100px;
}
#tabs {
position: absolute;
top: 445px;
left: 500px;
}
.tab {
height: 24px;
width: 24px;
text-align: center;
line-height: 24px;
background-color: #00bfff;
float: left;
color: #fff0f5;
margin-right: 5px;
cursor: pointer;
border-radius: 50%;
}
.bg {
background-color: #ff7f50;
}
JS代码：
var iNum = 0;
function Show() {
$(".image").eq(iNum).show();
$(".image").eq(iNum).siblings().hide();
$(".tab").eq(iNum).addClass("bg");
$(".tab").eq(iNum).siblings().removeClass("bg");
}
$(function () {
$(".tab").click(function() {
iNum = $(".tab").index($(this));
Show();
});
$(".image").eq(0).siblings().hide();
setInterval(function() {
iNum++;
if (iNum == 6) {
iNum = 0;
}
Show();
}, 2000);
})
效果图：
后记：多多练习。
ASP.NET动态网站制作（12）-- JQ（4）的更多相关文章
- ASP.NET动态网站制作（3）--css（2）
前言:css分为四次课讲完,第一节课内容见ASP.NET动态网站制作(2)--css(1),接下来的内容会涉及到定位.浮动.盒子模型(第二次课).css的具体应用(第三次课).css3(第四次课).今 ...
- ASP.NET动态网站制作（18）-- jq作业讲解及知识补充
前言:这节课主要讲解js及jq作业,并在作业讲解完后补充关于jQuery的一些知识点. 内容: 1.作业讲解:计算器那一块考虑的各种情况还不算完善,只实现了基本的功能,还需多多练习使用jQuery. ...
- ASP.NET动态网站制作（11）-- JQ（3）
前言:这节课主要是讲CSS作业,然后继续讲jQuery. 内容: 1.css作业讲解. 2.jq设置元素样式: (1)添加.删除css类别:$("div").addClass(& ...
- ASP.NET动态网站制作（13）-- JQ（5）
前言:jq的最后一节课,主要讲解应用, 内容: 1.会飞的li: HTML代码: <!DOCTYPE html> <html xmlns="http://www.w3.or ...
- ASP.NET动态网站制作（10）-- JQ（2）
前言:jq的第二节课. 内容: 1.管理选择结果: (1)获取元素个数:$("img").size():获取页面中所有“img”个数: (2)提取元素:$("img[ ...
- ASP.NET动态网站制作（9）-- JQ（1）
前言:从这节课开始讲jQuery的相关内容,这节课主要围绕jQuery的选择器展开. 内容: 1.jQuery是一个优秀的js框架,目前企业里大多数都是用jQuery(以下简称jq).jq是对js里一 ...
- ASP.NET动态网站制作（1）--html
前言:正式上课的第一课,讲的是前端部分的最基础内容:html. 前端:html,css,js 数据库:sql server 动态部分:.net,c#... IIS(Internet Informati ...
- ASP.NET动态网站制作（20）-- C#（3）
前言:C#的第三节课,继续上次课的内容,依旧围绕基础的只是讲解. 内容: 1.StringBuilder类:由于string类一旦创建,则不能更改.如果做字符串拼凑的话,将会非常耗费空间,如: str ...
- ASP.NET动态网站制作（0）
前言:一直想系统地学习一下网站建设的相关内容,看过相关的书籍,也跟着视频学过,但总觉得效率不高,学过的东西印象不深刻,或许还是自己动手实践的少.无意中免费听了一堂讲ASP.NET网站建设的课,觉得性价 ...
随机推荐
- 教学生jni编程(一)
我的所有文件的目录在/home/michelle/WORKM/DAYCODE/day0426/,请根据个人情况适当调整 1)创建一个HelloWorld.Java文件,如下: public class ...
- 洛谷 P1014 Cantor表【蛇皮矩阵/找规律/模拟】
题目描述 现代数学的著名证明之一是Georg Cantor证明了有理数是可枚举的.他是用下面这一张表来证明这一命题的: 1/1 1/2 1/3 1/4 1/5 … 2/1 2/2 2/3 2/4 … ...
- 网站安全测试工具GoLismero
网站安全测试工具GoLismero GoLismero是一款开源的安全测试框架.目前,它的测试目标主要为网站.该框架采用插件模式,实现用户所需要的功能.GoLismero默认自带了导入.侦测.扫描.攻 ...
- php cli模式下调试
//设置内存大小 ini_set('memory_limit','512M'); //打开日志 ini_set('log_errors', 'On'); //定向日志记录文件 ini_set('err ...
- pt-query-digest 实践(转)
mysql slowlog 使用与介绍 slow_query_log =1-----是否打开 slow_query_log_file = /data/mysql_data/node-1/mysql-s ...
- hdu2102 BFS
这是一道BFS的搜索题目,只是搜索范围变为了三维.定义数组visit[x][y][z]来标记空间位置,x表示楼层,y和z表示相应楼层的平面坐标. #define _CRT_SECURE_NO_DEPR ...
- LeetCode OJ 之 Ugly Number （丑数）
题目: Write a program to check whether a given number is an ugly number. Ugly numbers are positive num ...
- Andriod 自动化测试研究方向
前言 孔子曰:"工欲善其事,必先利其器",我来云:"工欲利其器,必先知其理".我们无论学习任何新事物,都要尽量做到"知其然知其所以然",对于 ...
- jsp页面中，动态调用系统时间的实现
在做WEB项目时,经常会须要 在页面中显示当前时间,以下介绍一个简单的调用系统时间的方法,效果如图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvczI5 ...
- Java数组去掉反复的方法集
经经常使用到,有时候不仅仅是简单的基本类型,那种能够用set集合去重,好多时间用到的是我们自己定义的类型,以下举个样例(我这儿就那int举例了): 方法一. 这样的类似与选择排序算法,首先我们取i值, ...