根据鼠标移动变更菜单样式.html
要求：当鼠标移过某个目录时，该条目颜色加深，字体颜色变为白色，鼠标移出时，恢复初始状态
<!DOCTYPE html>
<html>
<head>
<title>根据鼠标移动变更菜单样式.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<style type="text/css">
.a{
background:blue;
color: white;
}
</style>
<script type="text/javascript">
$(function(){
$("li").mouseover(function(){
$(this).addClass("a");
}).mouseout(function(){
$(this).removeClass("a");
});
});
</script>
</head>
<body>
<h1>新手上路</h1>
<ul>
<li>注册登录</li>
<li>易付宝账户激活</li>
<li>易付宝实名认证</li>
<li>密码相关</li>
<li>会员购买</li>
</ul>
</body>
</html>
HTML代码操作与文本操作.html
<!DOCTYPE html>
<html>
<head>
<title>HTML代码操作与文本操作.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
//通过html（）获取html代码
//alert($("div").html());
//通过text（）获取文本内容
//alert($("div").text());
//通过html（）设置html代码
//$("div").html("<button>click</button>");
//通过text（）设置html代码，直接替换为文本格式
//$("div").text("<button>click</button>");
//获取input元素的值$("input").val("");
//设置元素的值
$("input").val("bbb");
});
</script>
</head>
<body>
<div style="width: 200px;height: 200px;border: 1px soild black">
<button>button</button>
<input type="text" value="aaaa">
</div>
</body>
</html>
文本框获得焦点变化.html
<!DOCTYPE html>
<html>
<head>
<title>文本框获得焦点变化.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<style type="text/css">
.a{
opacity:0.5;
}
</style>
<script type="text/javascript">
$(function(){
$("input").on("focus",function(){
//获得焦点
$(this).removeClass("a");
if($(this)[0].value==null || $(this)[0].value=="" || $(this)[0].value=="请输入密码"){
$(this).val("");
}else{
$(this).select();
}
}).on("blur",function(){
//失去焦点
if($(this)[0].value==null || $(this)[0].value=="" || $(this)[0].value=="请输入密码"){
$(this).val("请输入密码");
$(this).addClass("a");
}else{
$(this).removeClass("a");
}
});
});
</script>
</head>
<body>
请输入密码：<input type="text" value="请输入密码" class="a">
</body>
</html>
节点元素操作.html
<!DOCTYPE html>
<html>
<head>
<title>节点元素操作.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
//查找节点（前面章节已讲）
//创建节点
var donghua = $("<li>冰雪奇缘</li>");
//插入节点(插入子节点)
//$("ul").append(donghua);
//donghua.appendTo($("ul"));
//$("ul").prepend(donghua);
//donghua.prependTo($("ul"));
//插入同辈节点
//$("ul").after(donghua);
//donghua.insertAfter($("ul"));
//$("ul").before(donghua);
//$("ul li:eq(1)").replaceWith(donghua);.insertBefore($("ul"));
//替换节点
//A replaceWith B 把符合条件的A替换为B
//B replaceAll A 把B替换所有符合条件的A
//$("ul li:eq(1)").replaceWith(donghua);
//donghua.replaceAll($("ul li:eq(1)"));
//复制节点
//$("ul li:eq(1)").clone(true).appendTo("ul");
//定义事件
/* $("ul li:eq(1)").click(function(){
alert($(this).text());
}); */
//删除节点
//$("ul li:eq(1)").remove();//删除整个节点
//$("ul li:eq(1)").detach();//删除整个节点,保留元素的绑定事件、附加的数据
$("ul li:eq(1)").empty();//清空节点内容
});
</script>
</head>
<body>
<p>热门动画排行</p>
<ul>
<li>葫芦娃</li>
<li>黑猫警长</li>
<li>铠甲勇士</li>
</ul>
</body>
</html>
获取与设置节点属性.html
<!DOCTYPE html>
<html>
<head>
<title>获取与设置节点属性.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
$("img").attr({width:"500px",height:"500px"});
});
</script>
</head>
<body>
<img alt="" src="../../image/)QVV0UZDG]GJ~YW756[B{`C.png">
</body>
</html>
遍历节点.html
<!DOCTYPE html>
<html>
<head>
<title>遍历节点.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(function(){
//遍历子节点，遍历div1的所有子节点
//$("#div1").children().css({background:"red"});
//同辈元素相关操作，获取匹配元素后一个元素
//$("#div4").next().css({background:"green"});
//获取匹配元素前一个元素
//$("#div4").prev().css({background:"green"});
//获取前后所有兄弟元素
//$("#div4").siblings().css({background:"yellow"});
//遍历父辈元素
//$("#div4").parent().css({background:"red"});
//遍历祖先元素
$("#div4").parents().css({background:"red"});
//CSS-DOM
//offset获取元素坐标
var offset = $("#div4").offset();
alert(offset.left);
alert(offset.top);
});
</script>
</head>
<body>
<div id="div0" style="width: 500px;height: 500px ;border: 1px solid black">
<div id="div1" style="width: 310px;height: 310px ;border: 1px solid black">
<div id="div2" style="width: 100px;height: 100px ;border: 1px solid black">
<div id="div3" style="width: 50px;height: 50px ;border: 1px solid black"></div>
</div>
<div id="div4" style="width: 100px;height: 100px ;border: 1px solid black">
<div id="div5" style="width: 50px;height: 50px ;border: 1px solid black"></div>
</div>
<div id="div6" style="width: 100px;height: 100px ;border: 1px solid black">
<div id="div7" style="width: 50px;height: 50px ;border: 1px solid black"></div>
</div>
</div>
<div id="div8" style="width: 50px;height: 50px ;border: 1px solid black">
<div id="div9" style="width: 30px;height: 30px ;border: 1px solid black"></div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号