收藏
批改状态：合格
老师批语：
JQ的两种选择方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4.jquery的基本语法</title>
</head>
<body>
<h2>基本语法: <span>$(选择器).方法()</span></h2>
<p>基本流程:1-使用选择器找到DOM元素并打包生成jQuery对象<br>调用jQuery方法对找到的元素进行操作</p>
<p>总结: 找到元素,然后操作</p>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
// 选择到<span>标签中的文本,将它的前景色设置为红色
$('h2 span').css('color','red')
//我们还可以修改一个元素的内容
$('p+p').html('终于找到你了,开工吧')
//补充知识: $()还可以创建一个新元素
$('<img src="../images/zly.jpg" width="150">')
$('<img src="../images/zly.jpg" width="150">').insertAfter('h2').css('border-radius','50%')
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3.jQuery的工厂函数$()的妙用</title>
</head>
<body>
<ul>
<li>我是列表项1</li>
<li>我是列表项2</li>
<li>我是列表项3</li>
<li>我是列表项4</li>
<li>我是列表项5</li>
</ul>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$('li')[0].style.backgroundColor = 'coral'
$('li').get(2).style.backgroundColor = 'cyan'
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
用ready加载页面所有元素：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5.jquery代码的执行方式</title>
<style type="text/css">
.horiz {
float:left;
list-style: none;
margin: 10px;
}
</style>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#list > li').addClass('horiz')
})
</script>
</head>
<body>
<h2>购物清单</h2>
<ul id="list">
<li>生活用品
<ul>
<li><a href="">淘宝</a></li>
<li>箱包</li>
<li>衣服</li>
<li>鞋子</li>
</ul>
</li>
<li>数码产品
<ul>
<li><a href="">京东</a></li>
<li>笔记本电脑</li>
<li>显示器</li>
</ul>
</li>
<li>食品保健
<ul>
<li><a href="">拼多多</a></li>
<li>奶粉</li>
<a href="">玩具</a>
</ul>
</li>
</ul>
<script type="text/javascript">
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
