亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 59
粉絲 0
評論 1
訪問量 57375
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
$(document).ready()要比window.onload更高效——2018年4月3日19時32分
白貓警長的博客
原創(chuàng)
649人瀏覽過

window.onload 和 $(document).ready 還是需要多關(guān)注的,因為這影響到一個前端的用戶體驗。window.onload是等頁面加載完后,才會處發(fā)此事件,包括,DOM元素,圖片,視頻,音樂等。而$(document).ready執(zhí)行速度要比前者更快。

實例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jQusey快速入門</title>
	<style>
		.box{
			width: 400px;
			height: 300px;
			border: 1px solid #808080;
		}
		.box ul{
			padding: 10px;
			margin: 0px;
			list-style: none;
		}
		.box ul li {
			margin-bottom: 5px;
			overflow: hidden;
		}
		
		.mali{
			background-color: lightgreen;
			border:1px solid #808080;
		}

		.box ul li span{
			width: 20px;
			height: 20px;
			float: left;
			background-color: #808080;
			text-align: center;
			line-height: 20px;
			border-radius: 50%;
			color: #fff;
			font-size: 13px;
			margin-right: 10px;
		}
		
		
		.box ul li a{
			text-decoration: none;
			float: left;
		}
	</style>
</head>
<body>
	<div class="box">
		<ul>
			<li class="bos"><span>1</span><a href="">PHP中文網(wǎng)-專注PHP學(xué)習(xí)平臺</a></li>
			<li><span>2</span><a href="">PHP中文網(wǎng)-專注PHP學(xué)習(xí)平臺</a></li>
			<li><span>3</span><a href="">PHP中文網(wǎng)-專注PHP學(xué)習(xí)平臺</a></li>
			<li><span>4</span><a href="">PHP中文網(wǎng)-專注PHP學(xué)習(xí)平臺</a></li>
			<li><span>5</span><a href="">PHP中文網(wǎng)-專注PHP學(xué)習(xí)平臺</a></li>
			<li><span>6</span><a href="">PHP中文網(wǎng)-專注PHP學(xué)習(xí)平臺</a></li>
			<li><span>7</span><a href="">PHP中文網(wǎng)-專注PHP學(xué)習(xí)平臺</a></li>
			<li><span>8</span><a href="">PHP中文網(wǎng)-專注PHP學(xué)習(xí)平臺</a></li>
			<li><span>9</span><a href="">PHP中文網(wǎng)-專注PHP學(xué)習(xí)平臺</a></li>
			<li><span>10</span><a href="">PHP中文網(wǎng)-專注PHP學(xué)習(xí)平臺</a></li>
		</ul>
	</div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
	
	// $(document).ready(function () {
		// 調(diào)用CSS樣式表里的樣式屬性
		// $('.box li').addClass('mali')
	// })

	// 簡寫:
	$( function (){
		$('.box li').addClass('mali')
	})

	// $('<img src="../3.29/images/yanjing.png">').insertAfter('span').css('float','left')
</script>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

執(zhí)行后效果圖:

QQ截圖20180403195720.png

總結(jié) :只有在一個頁面上具有圖片或視頻等效果才會比較明顯。

批改狀態(tài):合格

老師批語:
本博文版權(quán)歸博主所有,轉(zhuǎn)載請注明地址!如有侵權(quán)、違法,請聯(lián)系admin@php.cn舉報處理!
全部評論 文明上網(wǎng)理性發(fā)言,請遵守新聞評論服務(wù)協(xié)議
0條評論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng):公益在線php培訓(xùn),幫助PHP學(xué)習(xí)者快速成長!
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

  • 登錄PHP中文網(wǎng),和優(yōu)秀的人一起學(xué)習(xí)!
    全站2000+教程免費學(xué)