第一篇 jQuery
2024-09-24 14:28:42
1-1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
window.onload = function(){};
//$(document).ready(function() {}); == $(function(){});
$(document).ready(function() {
alert("welcome to jquery");
});
//区别...
//1.执行时间不同--$(document).ready()在页面框架下载完毕后执行;window.onload必须在页面全部加载完毕后执行
//2.执行数量不同
//3.$(document).ready()简写 </script>
</head> <body>
</body>
</html>
1-2 链式写法,两个功能实现通"."符号连接
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件的链式方法</title>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script> <style type="text/css">
.divFrame{ width:260px; border:solid 1px #666; font-size:10pt;}
.divTitle{ background-color:#eee; padding:5px;}
.divContent{ padding:5px; display:none;}
.divCurrColor{ background-color:red;}
</style> <script>
var jici =0;
$(document).ready(function() {
$(".divTitle").click(function(){
//链式的写法...
$(this).addClass("divCurrColor").next(".divContent").css("display","block");
/*
if(jici ==0)
{
$(".divContent").css("display","block");
jici =1;
}
else
{
$(".divContent").css("display","none");
jici =0;
}
*/
});
}); </script> </head> <body> <div class="divFrame">
<div class="divTitle">Title</div>
<div class="divContent">
<a href="#">111</a>
<a href="#">222</a>
<a href="#">333</a>
</div>
</div> </body>
</html>
1-3 控制DOM对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head> <style type="text/css">
.divFrame{ width:260px; border:solid 1px #666; font-size:10pt;}
.divTitle{ background-color:#eee; padding:5px;}
.divContent{ padding:8px; font-size:9pt;}
.divTip{ width:244px; border:solid 1px #666; padding:8px; font-size:9pt; margin-top:5px; display:none;}
.txtCss{ border:solid 1px #ccc;}
.divBtn{ padding-top:5px;}
.divBtn .btnCss{ border:solid 1px #535353; width:60px;}
</style> <script>
//use javascript
function test(){
var name = document.getElementById('Text1').value;
var sex = (Radio1.checked)?"男":"女";
var marry = (Checkbox1.checked)? "已婚":"未婚"; document.getElementById('divTip').style.display ="block";
document.getElementById('divTip').innerHTML = name+"<br />"+sex+"<br />"+marry;
};
</script> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script> $(document).ready(function() {
$("#Button1").click(function () {
var name = $("#Text1").val();
var sex =$("#Radio1").is(":checked")?"男":"女";
var marry =$("#Checkbox1").is(":checked")?"已婚":"未婚";
$("#divTip").css("display","block").html(name+"<br />"+sex+"<br />"+marry);
});
});
</script> <body>
<div class="divFrame">
<div class="divTitle">请输入如下信息</div>
<div class="divContent">
姓名:<input id="Text1" type="text" class="txtCss" /><br />
性别:<input id="Radio1" name="rdoSex" type="radio" value="男" />男
<input id="Radio2" name="rdoSex" type="radio" value="女" />女<br />
婚否<input id="Checkbox1" type="checkbox" />
<div class="divBtn"><input id="Button1" type="button" value="提交" class="btnCss" /></div>
</div>
</div>
<div id="divTip" class="divTip"></div>
</body>
</html>
1-4 控制CSS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title> <style type="text/css">
.divDefault{ width:260px; font-size:10pt; padding:5px;}
.divClick{ width:260px; border:solid 1px #666; font-size:10pt; background-color:#eee; padding:5px;}
</style> <script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
// toggleClass addClass
$(function(){
$(".divDefault").click(function(){
$(this).toggleClass("divClick").html("点击后的样式");
});
})
</script>
</head>
<body>
<div class="divDefault">点击前的样式</div>
</body>
</html>
最新文章
- node09-cookie
- TCL 双引号和花括号的区别
- url找不到指定位置
- “IAsyncOperation<;StorageFile>;”不包含“GetAwaiter”的定义
- [PA 2014]Lustra
- leetcode刷题五<;最长回文子串>;
- 从Wos文本数据中获取摘要进行分析的一种方法
- centos rz sz安装
- NABCD校园生活
- WallPaper
- ELK菜鸟手记 (一) 环境配置+log4j日志记录
- Fiddler(三)Fiddler设置手机抓包
- postgresql逻辑结构--视图(五)
- CentOS7系统安装Nginx进行跨域处理
- 转 解决:error: Cannot find libmysqlclient_r under /usr/local/mysql.
- MacOS的多重启动工具
- redis 迁移工具 redis-port 从阿里云迁移到aws
- Unity 几何着色器
- Spark1.3.1 On Yarn的集群搭建
- CentOS6.X关闭防火墙