收藏
批改状态：合格
老师批语：
这一节课主要讲的是jQuery的知识：jQuery的导入，常用的核心方法与属性，css操作，常用选择器，常用DOM操作
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li>我是列表项01</li>
<li>我是列表项02</li>
<li>我是列表项03</li>
<li>我是列表项04</li>
<li>我是列表项05</li>
</ul>
<script src="lib/jquery.js"></script>
<script>
$('li').eq(1).html('<span style="color:lightgreen">一二三</span>');
$('li').html();
$(function () {
var li=$('li').get(3);
li.innerHTML='<span style="color:red">新内容</span>'
});
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li>
<h3 id="title">前端课程</h3>
<ul>
<li>HTML</li>
<li>css</li>
<li>
<h3>JavaScript</h3>
<ul>
<li>jquery</li>
<li>bootstrap</li>
</ul>
</li>
</ul>
</li>
</ul>
邮箱：<input type="text"><br>
密码：<input type="password"><br>
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
<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>
<script src="lib/jquery.js"></script>
<script>
//通用选择器
$('*').addClass('highlight');
$('li').addClass('highlight');
$('.highlight').css('color','red');
$('#title').addClass('highlight');
//层级选择器
$('li:first h3').addClass('highlight');
$('li:first > h3').addClass('highlight');
$("li:contains('HTML'):last").addClass('highlight');
$("li:contains('HTML'):last + li").addClass('highlight');
$("li:contains('HTML'):last ~ li").addClass('highlight');
// 选择文本框
$('input[type="text"]').addClass('highlight');
$(':input').not(':submit').not(':disabled').addClass('highlight');
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ul>
<li>列表项01</li>
<li>列表项02</li>
<li>列表项03</li>
<li>列表项04</li>
<li>列表项05</li>
</ul>
<script src="lib/jquery.js"></script>
<script>
//元素内部添加
$('ul').append('<li>新元素1</li>'); // 添加到尾部
$('<li>新元素2</li>').appendTo('ul'); // 添加到尾部
$('ul').prepend('<li>新元素3</li>'); // 添加到头部
$('<li>新元素4</li>').prependTo('ul'); //
//元素前后添加
$('li:eq(2)').after('<li>新元素5</li>'); // 元素后添加
$('<li>新元素6</li>').insertAfter('li:eq(4)');
//替换:将li文本包含有: "新元素"内部的元素全部替换成指定元素
$('li:contains("新元素")').replaceWith('<li style="color:red">新元素</li>');
$('<li style="color:lightgreen">新元素</li>').replaceAll('li:contains("新元素")');
//$('li').remove();
//$('li').remove(':odd');
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
问答: jQuery与原生javascript相比，有哪些优势，哪些劣势
优点： jQuery使用更容易。 jQuery有一个庞大的库/函数。 jQuery有良好的文档和帮助手册。 jQuery支持AJAX。 缺点： 由于不是原生JavaScript语言，理解起来可能会受到限制。 项目中需要包含jQuery库文件。如果包含多个版本的jQuery库，可能会发生冲突。
总结
1、$(document)将整个document文档对象包装成jQuery对象再调用jQuery的ready(),jQuery就可以访问全部文档内容
2、.通用选择器: *, 标签, 类选择器., id选择器 #；层级选择器: 空格, >直接子元素, +相邻兄弟, ~ 所有兄弟；属性选择器: [name]属性名, [name=value]名值, 支持简单的正则
3、append()和appendTo(): 将当前元素添加到父元素内部的尾部；prepend()和prependTo(): 将节点添加到父元素内部的头部；after()和insertAfter():将元素插入到当前节点的后面；before()和insertBefore():将元素插入到当前节点的前面；replaceWith()和replaceAll():替换掉匹配的html内容；empty():删除匹配到的元素集合中所有的子节点；remove(可用selector):删除匹配的元素
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
