DOM操作
// 外部之前
$('#d').before('<span style="color:red">Before</span>');
// 外部之后
$('#d').after('<span style="color:red">After</span>');
// 內(nèi)部之前
$('#d').prepend('<span style="color:blue">Prepend</span><br>');
// 內(nèi)部之后
$('#d').append('<span style="color:blue">Append</span><br>');
// 外部周圍
$('#d').wrap('<div style="border: 5px solid red"></div>');
// 內(nèi)部周圍
$('#d').wrapInner('<div style="border: 5px solid green"></div>');
// 刪除節(jié)點(diǎn)(節(jié)點(diǎn)+內(nèi)容)
$('#d1').remove();
// 清空節(jié)點(diǎn)(內(nèi)容)
$('#d2').empty();
// 刪除父節(jié)點(diǎn)
$('p').unwrap();
// 節(jié)點(diǎn)替換
$('p').replaceWith('<h3>標(biāo)題3</h3>');
雜項(xiàng)方法
// 聲明字符串
var str = ' helloworld ';
console.log(str);
console.log($.trim(str));
console.log($.type(str)); // string
var cars = ['奔奔', '紅旗', '50宏光'];
console.log($.type(cars));
console.log(cars);
// 遍歷數(shù)組
$.each(cars, function(i, v){
console.log("索引:"+i+" 值:"+v);
});
var person = {
username: "小新",
age: "18",
skill: "PHP"
};
// 遍歷對(duì)象
$.each(person, function(label, value){
console.log('屬性名: '+label+'屬性值: '+value);
});
// 遍歷選擇器選中的結(jié)果集
$('ul').children().each(function(i,v){
// console.log(i+": "+v);
// 獲取當(dāng)前節(jié)點(diǎn) $(this)
// 獲取當(dāng)前節(jié)點(diǎn)的索引
console.log($(this).index());
// 獲取當(dāng)前節(jié)點(diǎn)的內(nèi)容
console.log($(this).text());
});
事件綁定
綁定多個(gè)事件
$('button').bind('click mouseout', function(){
$('#d').text('試試就試試');
});
鼠標(biāo)懸浮態(tài)
$('#d').hover(function(){
// 鼠標(biāo)滑過
$(this).text('我進(jìn)來了');
}, function(){
// 鼠標(biāo)離開
$(this).text('我離開了');
});
隱藏與顯示
// 單擊第一個(gè)按鈕,將div藏起來
$('button:first').click(function(){
$('#d').hide(20000, function(){
alert('我藏起來了');
});
});
// 單擊第二個(gè)按鈕,顯示div
$('button').eq(1).bind('click', function(){
$('#d').show(20000);
});
// 單擊最后一個(gè)按鈕,切換div的狀態(tài)
$('button:last').click(function(){
$('#d').toggle(1000);
});
滑動(dòng)收起
// 單擊第一個(gè)按鈕,將div藏起來
$('button:first').click(function(){
$('#d').slideUp(10000, function(){
// alert('我藏起來了');
});
});
// 單擊第二個(gè)按鈕,顯示div
$('button').eq(1).bind('click', function(){
$('#d').slideDown(10000);
});
// 單擊最后一個(gè)按鈕,切換div的狀態(tài)
$('button:last').click(function(){
$('#d').slideToggle(1000);
});
漸變
// 單擊第一個(gè)按鈕,將div藏起來
$('button:first').click(function(){
$('#d').fadeOut(10000, function(){
// alert('我藏起來了');
});
});
// 單擊第二個(gè)按鈕,顯示div
$('button').eq(1).bind('click', function(){
$('#d').fadeIn(10000);
});
// 單擊最后一個(gè)按鈕,切換div的狀態(tài)
$('button:last').click(function(){
$('#d').fadeToggle(1000);
});
});
自定義動(dòng)畫
// 自定義動(dòng)畫
$('button').click(function(){
$('#d').animate(
{
left: '100px',
top: '50px',
width: '200px',
height: '50px'
},
5000,
function() {
alert('動(dòng)畫執(zhí)行完畢');
}
);
});
驗(yàn)證碼點(diǎn)擊更新-原生寫法
// 1. 獲取驗(yàn)證碼對(duì)象
var c = document.getElementById('captcha');
// 2. 響應(yīng)單擊事件
c.onclick = function(){
// 3. 設(shè)置src屬性
c.src = "captcha/c.php?rand="+Math.random();
}
驗(yàn)證碼點(diǎn)擊更新-jQuery寫法
// 單擊事件
$('#captcha').click(function(){
$(this).attr('src', 'captcha/c.php?rand='+Math.random());
});
京東側(cè)邊欄動(dòng)畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<style>
a {
color: #EE00EE;
text-decoration: none;
padding: 0 20px;
}
.nav {
position: relative;
width: 100px;
background-color: #EEE;
}
.nav-1 {
display: block;
height: 40px;
line-height: 40px;
}
.nav-2 {
display: none;
position: absolute;
top: 0;
left: 100%;
padding: 0;
margin: 0;
width: 200px;
background-color: #DDFFBB;
}
li {
list-style: none;
float: left;
line-height: 40px;
}
</style>
</head>
<body>
<div class="nav">
<a href="#" class="nav-1">北京</a>
<ul class="nav-2">
<li><a href="#">重慶</a></li>
<li><a href="#">河南</a></li>
<li><a href="#">山東</a></li>
</ul>
</div>
<script type="text/javascript" src="../../jquery-3.4.1.min.js" ></script>
<script type="text/javascript">
// 就緒函數(shù)
$(function(){
$('.nav-1').hover(function(){
// 1. 鼠標(biāo)進(jìn)入"北京",顯示其他省份
$(this).next().show();
$(this).css('background-color', '#DDFFBB');
}, function(){
// 2. 鼠標(biāo)離開"北京"
$(this).next().hover(function(){
// 2.1 進(jìn)入了"其他省份"(保持顯示)
$(this).show();
$(this).prev().css('background-color', '#DDFFBB');
}, function(){
// 2.2 離開"其他省份"(隱藏)
$(this).hide();
$(this).prev().css('background-color', '#EEE');
});
// 2.3 完全離開
$(this).next().hide();
$(this).css('background-color', '#EEE');
});
});
</script>
</body>
</html>
tab選項(xiàng)卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab(選項(xiàng)卡)</title>
<style type="text/css">
#tabmenu {
width: 300px;
height: 30px;
}
#tabmenu > h3 {
width: 96px;
height: 30px;
line-height: 30px;
float: left;
margin: 0;
background-color: #DDEEFF;
border: 2px solid #FFFFFF;
text-align: center;
}
#tabmenu > h3.active {
background-color: #DDEEAA;
border: 2px solid #DDEEAA;
}
#tabcontent {
width: 300px;
height: 200px;
background-color: #DDEEAA;
}
#tabcontent > div {
display: none;
}
#tabcontent > div.active {
display: block;
}
</style>
</head>
<body>
<h3>選項(xiàng)卡功能</h3>
<div id="tab">
<div id="tabmenu">
<h3 class="active">西游記</h3>
<h3>水滸傳</h3>
<h3>紅樓夢(mèng)</h3>
</div>
<div id="tabcontent">
<div class="active">悟空,蜘蛛精,金角大王</div>
<div>潘金蓮,武松,大郎</div>
<div>寶玉,劉姥姥,黛玉</div>
</div>
</div>
<!-- 引入jQuery -->
<script type="text/javascript" src="../../jquery-3.3.1.js"></script>
<script type="text/javascript">
// 單擊h3(tab菜單)
$('#tabmenu>h3').click(function(){
// 獲取當(dāng)前菜單的索引值
var index = $(this).index();
// console.log(index);
// 高亮當(dāng)前菜單, 回調(diào)兄弟菜單
$(this).addClass('active').siblings().removeClass('active');
// 高亮當(dāng)前內(nèi)容, 隱藏兄弟內(nèi)容
// $('#tabcontent>div').eq(index).addClass('active').siblings().removeClass('active');
$('#tabcontent>div').eq(index).show().siblings().hide();
});
</script>
</body>
</html>
