一、在html中添加jquery，可以使用cdn加載jquery
1、網址：https://www.bootcdn.cn/jquery/
2、推薦使用3.4左右版本的，建議使用min.js后綴的，min后綴是壓縮過的，體積比較小
//注冊窗口注冊是如果輸入內容為空則提示內容為空
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form action="">
<p><label for="i1">username:
<input type="text" id="i1" name="username">
<span class="errors"></span>
</label></p>
<p><label for="i2">password
<input type="password" id="i2" name="password">
<span class="errors"></span>
</label></p>
<input type="submit" value="注冊" id="d1">
</form>
<script>
// 獲取按鈕標簽
var $b1Ele=$("#d1");
// 給按鈕標簽綁定事件
$b1Ele.click(function () {
var $userName=$('#i1');
var $passWord=$('#i2');
//判斷用戶輸入框是否為空
if ($userName.val().length==0){
$('.errors').first().text('用戶不能為空')
}
if ($passWord.val().length==0){
$('.errors').last().text('棉麻不能為空')
}
// 點擊注冊按鈕不提交信息刷新頁面
return false;
})
</script>
</body>
</html>
//設置屬性，根據.attr(‘屬性名’)獲取對應的值，當輸入一個值的時候是獲取對應的值，兩個值的是都是添加值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p id="d1">20歲超過30歲，40歲，50歲</p>
<p>衣錦還鄉</p>
<p>技多不壓身</p>
</body>
</html>
$('#d1');
k.fn.init [p#d1]
$("#d1");
k.fn.init [p#d1]
$("#d1").attr('id');
"d1"
$("#d1").attr('username','yzn');
k.fn.init [p#d1]
$("#d1");
k.fn.init [p#d1]0: p#d1length: 1__proto__: Object(0)
$("#d1").attr('username');
"yzn"
$("#d1").attr({'password':'123','test':'test1'});
k.fn.init [p#d1]
//移除設置好的設置好的標簽
$("#d1").attr('username');
"yzn"
$("#d1").attr({'password':'123','test':'test1'});
k.fn.init [p#d1]
刪除已經添加好的標簽
$('#d1').removeAttr('test');
使用prop4獲取類似於checked的標簽屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p id="d1">20歲超越30歲，40歲，50歲的人</p>
<p>衣錦還鄉</p>
<p>技多不壓身</p>
<input type="checkbox" name="hobby" id="i1" checked>讀書
<input type="checkbox" name="hobby" id="i2">寫字
<input type="checkbox" name="hobby" id="i3">吹牛逼
</body>
</html>
//根據返回值獲取checked的標簽屬性，返回true或false
添加新的標簽，插入數據
var pEel=document.createElement('p');
undefined
pEel.innerText='我一定要超越前人';
"我一定要超越前人"
var $divEle=$('div');
undefined
$divEle.append(pEel);
//在div標簽里面最底部添加一個p標簽
添加新的標簽
var pEel=document.createElement('p');
undefined
pEel.innerText='我一定要超越前人';
"我一定要超越前人"
var $divEle=$('div');
undefined
$(pEel).appendTo($divEle);
添加標簽到指定div標簽內部頭
var pEle=document.createElement('p');
undefined
pEle.innerText='謙虛';
"謙虛"
var $divEle=$('div');
undefined
$divEle.prepend(pEle);
新建標簽放在指定標簽的前面：before
var pEel=document.createElement('p'); undefined pEel.innerText='淡定，切勿浮躁！！！'; "淡定，切勿浮躁！！！" var $divEle=$('div'); undefined $divEle.before(pEel);
新建標簽替換創建好的標簽
var pEel=document.createElement('p'); undefined pEel.innerText='堅持就是勝利，堅持就是勝利'; "堅持就是勝利，堅持就是勝利" var $divEle=$('div'); undefined $divEle.replaceWith(pEel);
克隆新的功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <style> button{ background-color: pink; } </style> </head> <body> <button>出籠報道，天下無敵</button> <script> $('button').on('click',function () { $(this).clone(true).insertAfter(this); }) </script> </body> </html>
鼠標懸停觸發事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>懸浮</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <p>歡迎光臨</p> <script> $('p').hover( function () { alert('how much?') }, function () { alert('歡迎下次還來') } ) </script> </body> </html>
獲取用戶在input框中輸入的實時內容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>獲取用戶輸入的信息</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <input type="text"> <script> $('input').on('input',function () { console.log(this.value) }) </script> </body> </html>
取消標簽自帶的事件（input點擊按鈕會出現頁面刷新）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>取消標簽自帶的事件</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <from action=""> <input type="submit"> </from> <script> $('input').click(function (e) { alert(123); // 阻止默認事件的發生 e.preventDefault() }) </script> </body> </html>
事件冒泡（鼠標點擊在設置好的標簽內容上觸發綁定事件）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>時間冒泡</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <div>div <p>div下的p <span>div下的p下的span</span> </p> </div> <script> $('div').click(function () { alert('div') }); $('p').click(function (a) { alert('p') a.stopPropagation() }); $('span').click(function (e) { alert('span'); }); </script> </body> </html>
事件冒泡（點擊按鈕，觸發對應事件）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件委托</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <button>我是金牌技師，很搞定為你服務</button> <script> $('body').on('click','button',function () { alert(123) }) </script> </body> </html>
設置圖片前台展示動態效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片動態效果</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<img src="http://hbimg.b0.upaiyun.com/828e72e2855b51a005732f4e007c58c92417a61e1bcb1-61VzNc_fw658" alt="">
</body>
</html>
//圖片虛化收縮左上角
$('img').hide(3000);
//圖片虛化從左上角展示出來
$('img').show(3000);
//=========================
//圖片收縮到左上角
$('img').slideDown(5000)
//圖片從左上角展示出來
$('img').slideUp(5000)
//圖片原地漸變顯示出來
$('img').fadeIn(5000)
//圖片原地漸變隱藏
$('img').fadeOut(5000)
//圖片原地變淡，
$('img').fadeTo(5000,0.4)
eachx循環
標簽可以當做數據存儲庫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<p></p>
</body>
</html>
//往p標簽中添加數據
$('p').data('username','json');
//查看數據，一個值是查看數據，兩個值是新增數據
$('p').data('username');
在html代碼中查看不到新增的數據的
Bootstrap：是一個前端框架
使用前提：到如bootstrap需要先導入jquery，對jquery有依賴