jquery基礎(chǔ)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
jQuery實(shí)質(zhì)就是對(duì)js的封裝分扎，封裝的目的是為了更方便的使用js边翁。
js的代碼寫在哪兒塘匣，jq代碼就可以寫在哪兒,但是使用jq之前必須導(dǎo)入jQuery
-->
<!--1.導(dǎo)入jQuery-->
<!--導(dǎo)入本地的jquery-->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--導(dǎo)入CDN服務(wù)器上的遠(yuǎn)程的jQuery-->
<!--<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>-->
<!--導(dǎo)入jQuery后齐媒，就可以在后面使用jQuery語法-->
<script type="text/javascript">
//$ -> 代表jQuery對(duì)象
//==========1.onload(js)和ready(jQuery)==============
//onload - 網(wǎng)頁加載完成對(duì)應(yīng)的事件(包括標(biāo)簽加載完成和網(wǎng)絡(luò)請(qǐng)求完成)
window.onload = function(){
pNode = document.getElementById('p1')
pNode.innerText = 'hello jQuery！'
}
//ready
//$(document).ready(函數(shù)) - 網(wǎng)頁中標(biāo)簽加載完成后會(huì)自動(dòng)調(diào)用對(duì)應(yīng)的函數(shù)
//$(匿名函數(shù)) - 網(wǎng)頁中標(biāo)簽加載完成后會(huì)自動(dòng)調(diào)用對(duì)應(yīng)的匿名函數(shù)
$(document).ready(function(){
pNode2 = document.getElementById('p2')
pNode2.innerText = '你好 jQuery'
})
//相當(dāng)于上面的寫法
$(function(){
pNode2 = document.getElementById('p2')
pNode2.innerText = '你好 jQuery'
})
</script>
<style type="text/css">
div{
height: 600px;
background-color: blanchedalmond;
}
.color{
color: red;
}
</style>
</head>
<body>
<p id="p1">我是段落</p>
<a href="">我是a1</a>
<p id="p2" class="c1">我是段落</p>
<a href="">我是a11</a>
<img id="img1" src="img/a1.jpg"/>
<a href="" class="c1">百度</a>
<div id="">
<a href="">我是a5</a>
<p id="p3">我是段落3</p>
<a href="">我是a2</a>
<img src="img/slide-1.jpg"/>
<p>我是段落4</p>
<a href="">我是a4</a>
</div>
<a href="">我是a3</a>
<div>
<a href="">我是a31</a>
<a href="">我是a32</a>
<a href="">我是a33</a>
</div>
<script type="text/javascript">
//==============2.節(jié)點(diǎn)操作==============
//1)獲取節(jié)點(diǎn)
//語法: $('選擇器') - 返回的是jQuery的節(jié)點(diǎn)對(duì)象
//選擇器 - 這兒的選擇器和CSS的選擇器一模一樣
console.log($('#img1'))
console.log($('.c1'))
console.log($('p'))
console.log($('div p'))
console.log($('#p1,a'))
console.log($('p+a')) //選中所有緊跟著p標(biāo)簽的a標(biāo)簽
console.log($('#p3~*')) //選中和id值是p3的標(biāo)簽后面同級(jí)的所有標(biāo)簽
console.log($('#p3~a')) //選中和id值是p3的標(biāo)簽后面同級(jí)的所有的a標(biāo)簽
console.log($('p:first')) //選中當(dāng)前頁面中的第一個(gè)p標(biāo)簽
console.log($('div p:first')) //選中所有div標(biāo)簽中的第一個(gè)p標(biāo)簽
console.log($('p:last')) //選中當(dāng)前頁面中的最后一個(gè)p標(biāo)簽
console.log($('div *:first-child')) //選中div標(biāo)簽中的第一個(gè)子標(biāo)簽
//2)創(chuàng)建節(jié)點(diǎn)
//$('html標(biāo)簽語法')
imageNode = $("<img src='img/thumb-1.jpg'/ title='圖標(biāo)'>") //創(chuàng)建一個(gè)img標(biāo)簽
//3)添加節(jié)點(diǎn)
$('body').append(imageNode) //在body的最后添加一個(gè)子標(biāo)簽
$('body').prepend($('<input placeholder="請(qǐng)輸入賬號(hào)"/>')) //在body的最前面插入一個(gè)子標(biāo)簽
$('#img1').before($('<button>before</button>')) //在id是img1的標(biāo)簽的前面添加一個(gè)按鈕標(biāo)簽
$('#img1').after($('<button>after</button>')) //在id是img1的標(biāo)簽的后面添加一個(gè)按鈕標(biāo)簽
//4)刪除節(jié)點(diǎn)
$('#img1').remove() //標(biāo)簽.remove() - 刪除指定標(biāo)簽
$('div').empty() //標(biāo)簽.empty() - 清除指定標(biāo)簽中的內(nèi)容
//5)克隆和替換(查文檔)
</script>
<img id="img2" src="img/a2.jpg" title="服裝"/>
<div id="div">
<p>我是段落</p>
我是div
</div>
<input type="" name="user" id="user" value="張三" />
<button id="btn1">按鈕</button>
<script type="text/javascript">
//===================3.屬性操作=================
//1.獲取普通屬性
//標(biāo)簽.attr(屬性名) - 這兒的屬性名不包括innerHTML,innerText往湿，value
console.log($('#img2').attr('title'))
console.log($('#img2').attr('src'))
//2.修改/增加普通屬性
//標(biāo)簽.attr(屬性名,值)
$('#img2').attr('src', 'img/thumb-3.jpg')
//3.特殊屬性
//1)innerHTML（標(biāo)簽內(nèi)容屬性） - html()
console.log($('#div').html())
$('#div').html('我是新的div')
//2)innerText (標(biāo)簽文本內(nèi)容) - text()
console.log($('#div').text())
$('#div').text('我是新的div2')
//3)value (單標(biāo)簽內(nèi)容) - val()
console.log($('#user').val())
$('#user').val('李四')
//4)class
//標(biāo)簽.addClass(類名) - 給標(biāo)簽添加class值
$('p').addClass('color')
//標(biāo)簽.removeClass(類名) - 移除指定的class值
$('p').removeClass('color')
//4.樣式屬性
//標(biāo)簽.css(樣式屬性名) - 獲取樣式屬性值
//標(biāo)簽.css(樣式屬性名, 值) - 設(shè)置樣式
//標(biāo)簽.css({屬性名:屬性值, 屬性名:屬性值 ...}) - 同時(shí)設(shè)置多種樣式屬性
//$('p').css('color', 'slateblue')
//$('p').css('font-size', '20px')
$('p').css({
'color':'red',
'font-size':'30px'
})
//===================4.事件綁定==================
//標(biāo)簽.on(事件名, 函數(shù)) - 和js中的addEventListener是一樣的
$('#btn1').on('click', function(evt){
alert('點(diǎn)擊按鈕')
console.log(this, evt.offsetX, evt.offsetY)
})
</script>
</body>
</html>
一：添加刪除div
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--導(dǎo)入工具模塊-->
<script type="text/javascript" src="js/tool.js"></script>
<style type="text/css">
.fruitBox{
width: 250px;
height: 60px;
background-color: cadetblue;
margin-bottom: 2px;
line-height: 60px;
}
.fruitName{
float: left;
width: 230px;
text-align: center;
font-size: 20px;
color: white;
}
.close{
font-size: 20px;
color: white;
/*設(shè)置光標(biāo)樣式*/
cursor: pointer;
}
/*輸入框*/
#newFruit{
border: 0;
border-bottom: 1px solid #444444;
font-size: 30px;
width: 250px;
height: 50px;
text-align: center;
vertical-align: bottom;
}
#newFruit:focus{
outline: 0;
}
/*確定按鈕*/
#sure{
border: 0;
background-color: coral;
color: white;
font-size: 20px;
width: 70px;
height: 30px;
}
#sure:focus{
outline: 0;
}
/* 不能運(yùn)行因?yàn)檫€沒添加隨機(jī)顏色模塊*/
</style>
</head>
<body>
<div id="show"></div>
<div id='add'>
<input type="" name="" id="newFruit" value="" />
<button id="sure" onclick="addNewFruit()">確定</button>
</div>
<!--默認(rèn)顯示的水果-->
<script type="text/javascript">
//創(chuàng)建水果節(jié)點(diǎn)
function creatFruitNode(name){
//水果父節(jié)點(diǎn)
var divNode = document.createElement('div')
divNode.className = 'fruitBox'
//水果名字節(jié)點(diǎn)
var nameNode = document.createElement('font')
nameNode.innerText = name
nameNode.className = 'fruitName'
//關(guān)閉按鈕
var closeNode = document.createElement('font')
closeNode.innerText = '×'
closeNode.className = 'close'
//關(guān)閉按鈕添加點(diǎn)擊事件
closeNode.addEventListener('click', function(){
//移除被點(diǎn)擊的節(jié)點(diǎn)的父節(jié)點(diǎn)
this.parentElement.remove()
})
divNode.appendChild(nameNode)
divNode.appendChild(closeNode)
return divNode
}
fruitArray = ['蘋果', '香蕉', '梨', '獼猴桃']
//展示所有水果的節(jié)點(diǎn)
showNode = document.getElementById('show')
for(index = 0; index < fruitArray.length; index++){
//拿水果名
fruitName = fruitArray[index]
//創(chuàng)建對(duì)應(yīng)的節(jié)點(diǎn)
fruitNode = creatFruitNode(fruitName)
//添加水果節(jié)點(diǎn)
showNode.appendChild(fruitNode)
}
//點(diǎn)擊確定按鈕
function addNewFruit(){
//拿到輸入的水果名
var newFruitName = document.getElementById('newFruit').value
//創(chuàng)建對(duì)應(yīng)的節(jié)點(diǎn)
var newFruitNode = creatFruitNode(newFruitName)
newFruitNode.style.backgroundColor = randomColor()
//添加節(jié)點(diǎn)
showNode.insertBefore(newFruitNode, showNode.firstElementChild)
//清空輸入框
document.getElementById('newFruit').value = ''
}
</script>
</body>
</html>
二：縮略圖
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<img src="" alt="" id="big"/>
</div>
<div id="small"></div>
<script type="text/javascript">
//圖片對(duì)象構(gòu)造方法
function YTImageModel(smallImage, bigImage, title=''){
this.smallImage = smallImage
this.bigImage = bigImage
this.title = title
}
imageArray = [
new YTImageModel('thumb-1.jpg', 'picture-1.jpg', '圖片1'),
new YTImageModel('thumb-2.jpg', 'picture-2.jpg', '圖片2'),
new YTImageModel('thumb-3.jpg', 'picture-3.jpg', 'iamge3'),
]
//大圖節(jié)點(diǎn)
bigImgNode = document.getElementById('big')
bigImgNode.src = 'img/'+imageArray[0].bigImage
//小圖盒子
smallBoxNode = document.getElementById('small')
//創(chuàng)建小圖標(biāo)
for(i=0; i<imageArray.length;i++){
//拿到圖片模型
imageModel = imageArray[i]
//創(chuàng)建對(duì)應(yīng)的小圖節(jié)點(diǎn)
imageNode = document.createElement('img')
//設(shè)置圖片
imageNode.src = 'img/'+ imageModel.smallImage
//***通過節(jié)點(diǎn)來保存圖片模型
imageNode.imageMode = imageModel
//添加節(jié)點(diǎn)
smallBoxNode.appendChild(imageNode)
//添加事件
imageNode.addEventListener('mouseover', function(){
//使用鼠標(biāo)點(diǎn)擊的小圖節(jié)點(diǎn)中保存的信息
bigImgNode.src = 'img/'+this.imageMode.bigImage
bigImgNode.title = this.imageMode.title
})
}
</script>
</body>
</html>
三：閃爍
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/tool.js"></script>
<style type="text/css">
body{
text-align: center;
}
/*小盒子是60X60*/
#box{
width: 600px;
height: 300px;
margin-left: auto;
margin-right: auto;
margin-bottom: 5px;
border: 1px solid #666666;
}
/*按鈕*/
button{
width: 60px;
height: 30px;
color: white;
background-color: red;
border: 0;
font-size: 16px;
}
button:focus{
outline: 0;
}
.newDiv{
width: 60px;
height: 60px;
float: left;
}
</style>
</head>
<body>
<div id="box"></div>
<button onclick="addAction()">添加</button>
<button onclick="blink()" id="blink">閃爍</button>
<script type="text/javascript">
boxNode = document.getElementById('box')
//添加
function addAction(){
//創(chuàng)建節(jié)點(diǎn)
newDivNode = document.createElement('div')
newDivNode.className = 'newDiv'
newDivNode.style.backgroundColor = randomColor()
//添加節(jié)點(diǎn)
boxNode.insertBefore(newDivNode, boxNode.firstElementChild)
//判斷是否溢出
if(boxNode.children.length > 50){
//刪除最后一個(gè)
boxNode.lastElementChild.remove()
}
}
//閃爍
function blink(){
//拿到按鈕
blinkBtnNode = document.getElementById('blink')
//拿到所有的子標(biāo)簽
allSmallDiv = boxNode.children
if(blinkBtnNode.innerText == '閃爍'){
blinkBtnNode.innerText = '暫停'
//閃爍功能
timmer = setInterval(function(){
for(i=0; i<allSmallDiv.length;i++){
smallDivNode = allSmallDiv[i]
smallDivNode.style.backgroundColor = randomColor()
}
}, 100)
}else{
blinkBtnNode.innerText = '閃爍'
//暫停功能
clearInterval(timmer)
}
}
</script>
</body>
</html>
