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
- 下一篇： 废弃电器电子产品回收：需要的不仅是补贴