收藏
批改状态：未批改
老师批语：
1、$()函数的常用场景:选择元素,创建元素，执行回调等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$()函数的常用场景</title>
</head>
<body>
<script src="../jquery.js"></script>
<ul>
<li>我是列表项01</li>
<li class="i02">我是列表项02</li>
<li id="hill">我是列表项03</li>
<li>我是列表项04</li>
<li>我是列表项05</li>
</ul>
<h3>选择元素</h3>
<script>
$('li').css('color','red');
$('h3').css({"color":"green","background":"highlight"});
$('.i02').css('color','blue');
$('#hill').css('color','highlight');
</script>
<h3>创建元素</h3>
<script>
$('<ul></ul>').appendTo('body');
$('<li></li>').appendTo('ul:last');
$('li:last').append('我是你的么么哒');
$('li:last').addClass('selected');
</script>
<h3>执行回调</h3>
<script>
$(function () {
$('.selected').css('color','skyblue');
});
$('li').each(function () {
$(this).css('background-color','yellow');
});
$('li').get(4).style.backgroundColor = 'lightgreen';
$('li')[3].setAttribute('style','color:coral');
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2、jQuery常用的选择器操作,重点在层级和表单上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery常用的选择器操作</title>
<style>
form {
width: 240px;
height: 220px;
background-color: lightskyblue;
box-shadow: 2px 2px 2px #999;
}
div {
margin: 10px auto;
text-align: center;
}
h3 {
margin: 0;
color: red;
text-align: center;
}
</style>
</head>
<body>
<ul>
<li>前端之html</li>
<li>前端之css</li>
<li>前端之javascript</li>
</ul>
<form action="">
<h3>用户注册</h3>
<div>
邮箱：<input type="text"><br>
密码：<input type="password">
</div>
<div>
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
<input type="radio" name="sex" value="nope" checked>不确定
</div>
<div>
<input type="checkbox" name="hobby" value="sing">唱歌
<input type="checkbox" name="hobby" value="dance" checked>跳舞
<input type="checkbox" name="hobby" value="cook" >做饭
<input type="checkbox" name="hobby" value="game" >玩游戏
</div>
<div>
请选择你的学历：
<select name="" id="">
<option value="">幼儿园</option>
<option value="">小学</option>
<option value="">初中</option>
<option value="">其它</option>
</select>
</div>
<div>
<button type="submit">提交</button>
<button type="reset">重置</button>
</div>
</form>
<script src="../jquery.js"></script>
<script >
$('li:first').addClass('read');
$('li:last').addClass('write');
$('li:first +li').css('color','red');
$('.read').css('backgroundColor','highlight');
$('.write').css('backgroundColor','green');
$('input').css('backgroundColor','highlight');
$(':checkbox').css('backgroundColor','highlight'); //老师我这个感觉无效。。。求告知啊
console.log($(':checkbox')); //但是这个又是有一个数组返回值的，说明上面是选中了的呀
$('select').css('backgroundColor','highlight');
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3、常用的DOM操作有哪些?一定要结合实例完成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery中的DOM操作</title>
</head>
<body>
<ul>
<li>我是列表项001</li>
<li>我是列表项002</li>
<li>我是列表项003</li>
<li>我是列表项004</li>
<li>我是列表项005</li>
</ul>
<script src="../jquery.js"></script>
<script >
//添加元素
$('ul').append('<li>我是新元素1</li>');
$('<li>我是新元素2</li>').appendTo('ul');
$('ul').prepend('<li>我是新元素3</li>');
$('<li>我是新元素4</li>').prependTo('ul');
// console.log($('li'));
$('li:eq(3)').after('<li>我是新元素5</li>');
// console.log($('li'));
$('<li>我是新元素6</li>').insertAfter('li:eq(5)');
// console.log($('li'));
$('<li style="color: lightcoral">我是更改后的新元素</li>').replaceAll('li:contains("新元素")');
$('li').remove(':last');
$('li').remove(':first');
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4、问答: jQuery与原生javascript相比，有哪些优势，哪些劣势。
jQuery比起javascript来讲，其优势主要在于轻量级，不需要用let去创建对象，
只需要直接调用元素，然后通过链式操作来完成DOM操作目标。
而劣势则在于易学难懂，普通状态下想通过很短的时间完全掌握jQuery是不现实的，
虽然它的语法也就那么些个。
我想jQuery和javascript相比较而言，首先还是看你用哪一个更加顺手；但是，
如果按照项目大小来区分，数据越多的项目尽可能的还是用jQuery来做，因为jQuery作为
一个类库，它对于元素的选择和操作显然是比javascript更加的方便。
而如果是小型的项目，jQuery和javascript就都可以考虑了，主要还是看自己用哪个更顺手！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
