收藏
批改状态：未批改
老师批语：
一、jquery的两种引入方式
本地引入：<script type="text/javascript" src="jquery-3.3.1.js"></script>
cdn在线引入：<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
代码演示如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{
margin: 0;
padding: 0;
overflow: hidden;
}
li{
width: 40px;
height: 40px;
background-color: black;
margin-left: 10px;
border-radius:50%;
float: left;
color: white;
list-style-type: none;
text-align: center;
line-height: 40px;
font-weight: bolder;
font-size: 1.3em;
}
</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>
<!-- jquery的编程思想：查询+操作，自带循环（迭代和递归也是循环的意思）特效
$(选择器).操作(参数) -->
<!-- jQuery的两种引入方式 -->
<!-- 1.本地引入 -->
<!-- <script type="text/javascript" src="jquery-3.3.1.js"></script> -->
<!-- 2.cdn在线引入 -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$('li:nth-child(5)~*').css('background-color','red')
// alert($(document).length)
</script>点击 "运行实例" 按钮查看在线实例
二、$(document).ready()的使用方式与简写
页面的渲染顺序（①第一步生成dom结构；②加载资源：图片、文件）
windows.onload():必须要等到资源全部加载完成后才会触发
$(document).ready():只要生成dom结构就会触发
$(document).ready()的简写是：$()
代码演示如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.one{
list-style-type: none;
float: left;
margin-left: 10px;
}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#box>li').addClass('one')
})
// 简写：
// $(function(){
// $('#box>li').addClass('one')
// })
</script>
</head>
<body>
<h2>风俗民情</h2>
<ul id="box">
<li>西安：
<ul>
<li>小吃繁多</li>
<li>第一大古都</li>
<li>美女多</li>
</ul>
</li>
<li>浙江：
<ul>
<li>多山多水</li>
<li>有生意头脑</li>
<li>色情场所</li>
</ul>
</li>
<li>海南：
<ul>
<li>皮肤黝黑身材娇小</li>
<li>淡泊名利</li>
<li>华侨之乡</li>
</ul>
</li>
</ul>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
