今日学习内容
- jQuery 的原理、语法、使用方法；
- jQuery效果、jQuery HTML 操作；
代码练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#tinputValue {
font-size: 28px;
color: red;
}
</style>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
var getValue = function() {
alert($("#tinput").val());
$("#tinput").val("abc");
}
$(function(){
$("#img1").attr("src","http://img4.duitang.com/uploads/item/201306/19/20130619092333_5z2Si.jpeg");
$("#hid1").text("My first jQuery App");
$("#ds").html("<a href='http://www.baidu.com'>www.baidu.com</a>");
$("#tinput").keyup(function() {
var rs = $("#tinput").val(); //原始字符串
var rss = ""; //处理完的结果字符串
for (var i = 1; i <= rs.length; i++) {
var r = rs.charAt(i-1);
if (i % 4 == 0) {
rss += r + "-";
} else {
rss += r;
}
}
if (rss.lastIndexOf("-") == rss.length - 1) {
rss = rss.substring(0, rss.length - 1);
}
$("#tinputValue").html(rss);
});
})
</script>
</head>
<body>
<img id="img1" width="200px" height="200px" alt="xxx" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533553442880&di=ce6fd1c821619c4a0a7e860e36e3f64d&imgtype=0&src=http%3A%2F%2Fi10.hoopchina.com.cn%2Fhupuapp%2Fbbs%2F57914865802926%2Fthread_57914865802926_20180621164153_s_377042_o_w_1702_h_1568_43453.jpg%3Fx-oss-process%3Dimage%2Fresize%2Cw_800%2Fformat%2Cjpg">
<h1 id="hid1">我的第一个jQuery应用</h1>
<div id="ds">
<span>DIV-SPAN</span>
</div>
<input type="text" value="" id="tinput" name="">
<button onclick="getValue();">获取值</button>
<div>
<span id="tinputValue"></span>
</div>
</body>
</html>
学习感悟
不懂得蛮多的，继续加油吧！！！
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
