收藏
批改狀態(tài)：合格
老師批語：
知識(shí)重點(diǎn)：
1、導(dǎo)入jq資源庫，建議可以使用百度程序員類庫，類庫地址為：
百度程序員類庫：http://cdn.code.baidu.com/
jq導(dǎo)入資源庫地址為：http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js
導(dǎo)入方法為：
一、先導(dǎo)入jq類庫，導(dǎo)入方式為：
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
二、調(diào)取js代碼，在js代碼中填寫jq代碼：
<script type="text/javascript">
</script>
2、代碼語法：
一、 $('li:first-child')（選中標(biāo)簽）
二、.css({'background-color':'red'})（修改標(biāo)簽或?qū)傩裕琧ss部分需要用{}花括號(hào)括住且需要用單引號(hào)括住。）
代碼部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.jQuery的基本工作原理</title>
<style type="text/css">
ul {
margin:30px;
padding:10px;
overflow: hidden;
}
li {
list-style-type: none;
width: 40px;
height: 40px;
margin-left:10px;
background-color: lightskyblue;
text-align: center;
line-height: 40px;
font-size: 1.2em;
font-weight: bolder;
float:left;
border-radius: 50%;
box-shadow: 2px 2px 2px #808080;
}
/*將第一個(gè)li背景換成綠色*/
li:first-child {
/*background-color: lightgreen;*/
}
/*再將第4個(gè)元素背景換成橙色,前景換成白色*/
li:nth-child(4) {
/*background-color: orangered;*/
/*color: white;*/
}
li:nth-child(4) ~ * {
/*background-color: lightgreen;*/
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">
$('li:first-child').css({'background-color':'red'})
</script>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
微信掃碼
關(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)