向网页中添加内容
<body>
<div class="container">
<button class="btn btn01">添加一张图片</button>
<div id="img"></div>
<br />
<button class="btn btn02">添加一段文字</button>
<div id="content"></div>
<script type="text/javascript">
$(function() {
$(".btn01").click(function() {
$('#img').html("<img src='img/img01.jpg' width='200pheight='200px'/>")
})
$(".btn02").click(function() {
// .text html标签不起作用
$("#content").text("<h1>2018</h1>")
})
});
</script>
</body>
表单验证
<body>
<div class="container">
<div class="">
<input type="text" name="username" id="username" value="" placeholder="请输入用户名" />
<span id="mwssage"></span>
</div>
</div>
<script type="text/javascript">
$(function() {
$("#username").blur(function() {
//alert('失去焦点')
//1.获取用户输入的值
var username = $(this).val()
//2.判断
if("admin" == username) {
$("#mwssage").text("此用户名已存在").css("color", "red")
} else {
$("#mwssage").text("此用户名可以使用").css("color", "green")
}
})
$("#username").focus(function() {
//alert('得到焦点')
})
});
</script>
</body>
问答效果
代码如下
<body>
<div class="container">
<h3>花儿为啥这么红</h3>
<p>关我屁事</p>
<h3>你咋这样</h3>
<p>关你屁事</p>
</div>
<script type="text/javascript">
$("h3").click(function() {
$(this).next().slideToggle();
})
});
</script>
</body>搜索效果
代码如下
<body>
<div class="container">
<input type="text" name="keywords" id="keywords" value="男装" placeholder="" />
<button>搜索</button>
</div>
<script type="text/javascript">
$("#keywords").focus(function() {
var key = $("#keywords").val();
//alert(key);
if("男装" == key) {
$(this).val("")
}
})
$("#keywords").blur(function() {
//alert("n");
var key = $("#keywords").val();
if("" == key) {
$(this).val("男装")
}
})
//自动补全
//词库
var keyword = ["马云", "马化腾", "马赛克", "罗老师", "罗贯中"]
$("#keywords").autocomplete(keyword)
});
</script>
</body>