收藏
批改状态：未批改
老师批语：
$()函数的常用场景:选择元素,创建元素，执行回调等。
jQuery常用的选择器操作,重点在层级和表单上
常用的DOM操作有哪些?
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.highlight {
background-color: yellow;
}
</style>
</head>
<body>
邮箱:<input type="text"> <br>
密码:<input type="password"> <br>
<!--input:radio-->
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
<br>
<!--input:checkbox-->
<input type="checkbox" name="hobby[]" value="dance"checked>跳舞
<input type="checkbox" name="hobby[]" value="sing">唱歌
<br>
你的学历:
<select name="" id="">
<option value="">幼儿园</option>
<option value="小学" selected>小学</option>
<option value="">初中</option>
<option value="">其它</option>
</select>
<br>
<button type="submit">提交</button>
<button type="reset" disabled>重置</button>
<hr>
<!--导入jQuery函数库-->
<script src="lib/jquery.js"></script>
<!--1. 编程:$()函数的常用场景:选择元素,创建元素，执行回调等。-->
<script>
// 创建
$('<ul id="ul1">测试标题</ul>').appendTo('body');
// 选择
$('#ul1').append($('<li class="li1">测试项目1</li>'));
$('#ul1').append($('<li class="li2">测试项目2</li>'));
$('<ul id="ul2">测试子标题</ul>').appendTo('.li2');
$('#ul2').append($('<li class="li3">测试子项目1</li>'));
$('#ul2').append($('<li class="li4">测试子项目2</li>'));
$('#ul2').append($('<li class="li5">测试子项目3</li>'));
//执行回调
$(function(){
$('.li1').css('color','lightblue');
})
</script>
<!--2.编程:jQuery常用的选择器操作,重点在层级和表单上-->
<SCRIPT>
// $('*').addClass('highlight'); //选择了页面中所有元素
//$('li').addClass('highlight'); // 标签选择器
//$('#ul1').addClass('highlight'); // id选择器
$('.li2').css('background-color','red'); // 类选择器
$('li:first').css('color','green'); // 位置过滤选择器
//$("li:contains('项目1')").height('30px'); //内容过滤选择器
//表单选择器
$(':input').not(':submit').css('color','red');
$(':radio').height('40px');
//层级选择器
//$('#ul1 li').height('50px'); //所有子li
$('#ul1>li').height('50px'); //仅第一层子li
//$(".li3 + li").css('background-color','orange'); //相依兄弟
$(".li3 ~ li").css('background-color','orange'); // 相邻所有兄弟
</SCRIPT>
<!--3. 编程:常用的DOM操作有哪些?-->
<script>
// (1).插入与替换:
// [1]append()和appendTo(): 将当前元素添加到父元素内部的尾部
// 1.$(父元素).append(当前元素);
// 2.$(当前元素).appendTo(父元素);
// [2].prepend()和prependTo(): 将节点添加到父元素内部的头部
// 1.$(父元素).prepend(当前元素);
// 2.$(当前元素).prependTo(父元素);
// [3].after()和insertAfter():将元素插入到当前节点的后面
// 1.$(前).after(后);
// 2.$(后).insertAfter(前)
// [4].before()和insertBefore():将元素插入到当前节点的前面
// 1.$(后).before(前);
// 2.$(前).insertBefore(后)
// [5].replaceWith()和replaceAll():替换掉匹配的html内容
// 1. $(原).replaceWith(新);
// 2. $(新).replaceAll(原);
// (2).empty():删除匹配到的元素集合中所有的子节点
// (3).remove(可用selector):删除匹配的元素
$('#ul2').append('<li class="li6">DOM操作测试1</li>')
$('#ul2').prepend('<li class="li7">DOM操作测试2</li>')
$('.li7').after('<li class="li8">DOM操作测试3</li>')
$('<li class="li9">DOM操作测试4</li>').insertBefore('.li6')
$('.li9').replaceWith('<li style="color: darkblue">替换后</li>')
//$('#ul2').empty()
$('#ul2 li').remove(':odd')
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
问答：jquery相比原生JavaScript的优劣势
JavaScript的优点和缺点：
优点：
性能：由于JavaScript运行在***端，节省了web服务器的请求时间和带宽。 运行在用户机器上，运行结果和处理相对比较快，运行效率大大提高 可以使用第三方附加组件来检查代码片段。
缺点：
安全问题：由于JavaScript在***端运行，可能被用于黑客目的。
渲染问题：在不同浏览器中的处理结果可能不同。也就是兼容性较差。
jQuery的优点和缺点： 使用jQuery最大的好处是少写多做
问答部分参考： https://blog.csdn.net/Girl_0919/article/details/76912906?utm_source=copy
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
