abstrak：<!DOCTYPE html><html><head> <title>Jq基本語(yǔ)法</title> <style type="text/css"> *{margin: 0;padding: 0;} .radius{ border-radius: 50px; } button{ margin-
<!DOCTYPE html>
<html>
<head>
<title>Jq基本語(yǔ)法</title>
<style type="text/css">
*{margin: 0;padding: 0;}
.radius{
border-radius: 50px;
}
button{
margin-left: 32px;
margin-top: 30px;
}
.radius1{
width: 80px;
height: 80px;
box-shadow: 1px 12px 10px #ccc;
border: 12px solid lightblue;
}
</style>
</head>
<body>
<!-- jq命令需要引入jquery-3.1.1.min.js -->
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
// 一 文檔就緒, 在html中當(dāng)文檔加載完成后才執(zhí)行JQ語(yǔ)法,
$(document).ready(function(){
// 二 function(){}為JQ的入口函數(shù), 所有操作方法都是寫在入口函數(shù)內(nèi)
// 定義jq選擇器 $符號(hào)+() 括號(hào)內(nèi)是html的標(biāo)簽 id class
// $('div') $('span') 根據(jù)標(biāo)簽選擇
// $('#box') 根據(jù)標(biāo)簽內(nèi)部id選擇
// $('.boxs') 基礎(chǔ)形式選擇 根據(jù)標(biāo)簽內(nèi)部樣式名稱選擇
// 三 標(biāo)簽樣式操作
$('.boxs').css('background','blue');
$('#box').css('background','lightblue');
$('div').css('background','green');
// 四 標(biāo)簽屬性操作 attr() 第一個(gè)參數(shù)是標(biāo)簽的class屬性 第二個(gè)參數(shù)是屬性的值
// 只有一個(gè)參數(shù) 就獲取class屬性的值
$('#box').attr('class','radius');
console.log($('#box').attr('class')); // 瀏覽器按F12 Console查看輸出
// 五 JQ常用事件
// 當(dāng)點(diǎn)擊button標(biāo)簽時(shí)執(zhí)行
$('button').click(function(){
// removeClass() 移除樣式
// 注意removClass()參數(shù)是class樣式的名稱 不需要帶"."
$('div').removeClass('radius');
});
// 當(dāng)鼠標(biāo)移入div時(shí)執(zhí)行
$('div').mouseover(function(){
// addClass() 添加樣式
// 注意addClass()參數(shù)是class樣式的名稱 不需要帶"."
$(this).addClass('radius1'); // this 相對(duì)于選中的整個(gè)div
});
});
</script>
<div id="box" class="boxs" style="width: 100px;height: 100px;background: red;">
<button>點(diǎn)擊</button>
</div>
<span></span>
</body>
</html>
Guru membetulkan：天蓬老師Masa pembetulan：2019-02-11 13:48:45
Rumusan guru：jQuery的重點(diǎn)是選擇器, dom操作, ajax,這也是核心,多練習(xí)