jquery简单使用入门
生活随笔
收集整理的这篇文章主要介绍了
jquery简单使用入门
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
<!DOCTYPE html>
<html>
<head><title>jquery</title><meta charset="utf-8"><!-- 引入jquery库和bootstrap的css库 --><script src="static/jquery-3.3.1.min.js"></script><link rel="stylesheet" type="text/css" href="static/bootstrap.min.css">
<div class="container"><div id="alertbox" class="alert alert-success" role="alert">这是警告框</div>
</div>
</head>
<body><!-- ①按钮和表单元素 -->
<button id="btn1" class="btn btn-info">按钮</button><form id="form1" action="http://www.baidu.com/s"><input type="text" id="search1" name="wd"><input type="submit" name="提交">
</form><!-- ②通过按钮提交内容到某段内容id=content中并累加 -->
<div class="alert alert-success" id="content"></div><input type="text" id="input-text" name="">
<button class="btn btn-default" id='submit-btn'>发送</button><script type="text/javascript">/*注意：js代码必须在获取的元素以后加载，否则无法正常获取元素jquery的语法$(选择元素).操作方法().操作方法2()选择元素和我们的css语法一致操作方法：.show 显示.hide 隐藏 可以传入一个毫秒值 产生动画.html() 修改元素标签内的内容.html() 获取标签内部的值.html(xxx) 把标签内部的值 设置为xxx.on 绑定事件(时间类型，触发函数).val 获取或者设置输入框的值.val() 获取输入框的值.val(xxx) 把输入框的值 设置为xxx*/// ①jquery实现隐藏3秒，和展示动画效果1秒展示/*$('#alertbox').hide(3000).show(1000);// 赋值html$('#alertbox').html('heihei');// 赋值输入框$('#alertbox').html('username: <input type="text" value="username" />');*///触发点击事件/*$('#btn1').on('click',function(){$('#alertbox').html('username: <input type="text" value="username" />').hide(2000);// alert('jack')})*///通过val赋值/*$('#btn1').on('click',function(){$('#search1').val('51reboot');})$('#form1').on('submit',function(){if ($('#search1').val() == "51reboot"){alert('go');//return false是终止submit事件return false;}})*///②通过按钮提交内容到某段内容中并累加
$('#submit-btn').on('click', function(){var oriText = $('#input-text').val()var oriContent = $('#content').html()$('#content').html(oriContent + '<br/>' + oriText)//清除输入框的内容
$('#input-text').val('')})</script>
</body>
</html>
转载于:https://www.cnblogs.com/reblue520/p/8472562.html
《新程序员》：云原生和全面数字化实践50位技术专家共同创作，文字、视频、音频交互阅读总结
以上是生活随笔为你收集整理的jquery简单使用入门的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： mybatis添加记录时返回主键id
- 下一篇： 废弃电器电子产品回收：需要的不仅是补贴