<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.2.1.min.js"></script>
<title>1.原生querySelector()與querySelectorAll()獲取元素實(shí)例</title>
</head>
<style>
ul li {
float: left;
display: inline;
margin-left: 10px;
}
</style>
<body>
<ul>
<li><img src="img1.jpg" alt=""></li>
<li><img src="img2.png" alt=""></li>
<li><img src="img3.jpg" alt=""></li>
<li><img src="img4.jpg" alt=""></li>
<li><img src="img5.jpg" alt=""></li>
</ul>
<script>
//// 1.原生querySelector()與querySelectorAll()獲取元素實(shí)例
// var img =document.querySelector("img")
//// 將第一個(gè)img,設(shè)置為50px圓角
// img.style.borderRadius = '50px'
// 1.2 將所有img 設(shè)置為500px圓角
var img2 = document.querySelectorAll('img')
// 將所有的img，設(shè)置為500px
for (var i = 0; i < img2.length; i++) {
img2[i].style.borderRadius = '500px'
}
//2.jQuery對(duì)象的參數(shù)與基本語法，ready()事件注冊(cè)實(shí)例
// jQuery是一個(gè)函數(shù)庫，不是框架，（在文檔頭部使用本地和遠(yuǎn)程引入兩種方法都可以），jQuery是一個(gè)工廠函數(shù)，簡(jiǎn)寫:$
$('img')[0].style.borderRadius = '50px' //相等于$('img',document)[0].style.borderRadius
$('img').css('width', '100px')//選中所有img，寬度設(shè)置為100
var img =$('img')
for (var i = 0; i < img.length; i++) {
img[i].style.borderRadius = '10px'
}//用jQuery方法對(duì)img,設(shè)置圓角為10px
//3. jQuery中的事件注冊(cè)與刪除： on()和off()方法的使用
$(document.images).mouseenter(function () {//普通事件添加
$(this).hide(1000)
}).mouseleave(function () {
$(this).show(2000)
})
//on('click',function () {}是點(diǎn)擊觸發(fā)事件 off('mouseenter')關(guān)閉鼠標(biāo)進(jìn)入的功能
$('img').on('click',function () {
$(this).css('width','1000px')
}).off('mouseenter')
//4.reday()事件注冊(cè)，放在head中和放在這里，速度差不多。
$(document).ready(function () {
alert('準(zhǔn)備完成')
})
</script>
</body>
</html>
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)
收藏
