软件设计之JavaScript(3)
学习内容：
软件开发技能点参照：软件开发，小白变大佬，这套学习路线让你少走弯路是认真的，欢迎讨论
软件开发技能点顺序参照：Java学习完整路线，强烈建议收藏转发
建议JSON、jQuery等深入知识还是看其他人的：
尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版
- jQuery概念及初步使用
- 选择器
- 事件
- 几个问题
jQuery概念及初步使用
jQuery导入
<script src = js/jquery-3.5.1.js>
//方式1导入
</script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
//方式2:CDN
</script>
jQuery初步使用
<body>
<script >
//使用原生DOM
window.onload = function () {
let btn1 = document.getElementById('btn1');
btn1.onclick = function (){
let username = document.getElementById("username").value;
alert(username)
}
}
</script>
<script src = js/jquery-3.5.1.js></script>
<script>
//绑定文档加载完成的监听
$(function(){
$('#btn2').click(function () {//给btn2绑定点击监听
let username = $('#username').val();
alert(username)
});
})
</script>
用户名：<input type="text" id ="username">
<button id="btn1">确定(原生版)</button>
<button id="btn2">确定(jQuery版)</button>
</body>
jQuery函数使用
1、$(param)格式
2、根据参数不同，有如下区别：
<body>
<script src = js/jquery-3.5.1.js></script>
<script>
//点击按钮的文本，显示一个新的输入框
$(function(){ //绑定文档加载完成的监听
//参数为选择器字符串，查找匹配的标签，封装为jQuery对象
$('#btn2').click(function () {//给btn2绑定点击监听
//此处this为发生事件的dom元素(button)
alert($(this).html())
//参数为标签语言
$('<input type="text" name ="msg"><br/>').appendTo('div')
});
})
</script>
<div>
用户名：<input type="text" id ="username"><br/>
<button id="btn2">确定(jQuery版)</button><br/>
</div>
</body>
jQuery对象使用
<body>
<button>测试一</button>
<button>测试二</button>
<button id="btn3">测试三</button>
<button>测试四</button>
<script src = js/jquery-3.5.1.js></script>
<script>
//需求：统计按钮个数
//size() 方法已被弃用： 在 jQuery 3.0 及更高版本中，size() 方法已经被弃用
let $button = $('button')
let num= $button.length;
console.log(num);
// 取出第二个button文本
index = 1
console.log($button[index].innerHTML)
// 输出所有button的标签文本
$button.each(function () {
//此处this是DOM元素(按钮)
console.log(this.innerHTML);
})
//输出'测试三'按钮是所有按钮中的第几个
console.log($('#btn3').index())//输出index
</script>
</body>
2、选择器
基本选择器
用于选择某个特定的元素或一组元素，以便对其进行操作。它可以基于元素的 id、class、标签名、属性等来选择元素。
补充：
$(‘div,span’)//选择所有div、span元素
$(‘*’)//选择所有dom元素
层次选择器
在jQuery中，层次选择器用于选择DOM树中不同层次的元素。
1、后代选择器$("ancestor descendant"):选择在某个祖先元素中的所有后代元素
例：$("div p")选择所有位于 div 标签内的 p 标签。
2、子选择器$("parent > child")：：选择所有直接子元素（child），仅限于父元素（parent）内的直接子元素。
$("ul > li")选择所有位于 ul 标签内的直接 li 子元素。
3、相邻兄弟选择器$("element + next"):选择紧接在某个元素（element）后的相邻兄弟元素（next）
$("h2 + p")选择紧跟在 h2 标签之后的第一个 p 标签。
4、一般兄弟选择器$("element ~ siblings"):选择某个元素（element）之后的所有兄弟元素（siblings），不局限于紧邻的一个。
$("h2 ~ p")选择 h2 标签之后的所有 p 标签。
5、父元素选择器$("parent:has(child)"):选择包含特定子元素的父元素。
$("div:has(p)")选择所有包含 p 标签的 div 标签
过滤选择器
在jQuery中，过滤选择器（Filter Selectors）用于从一组匹配的元素中选择特定的子集
1、$("li:first").css("color", "red");选中第一个li元素并将其文本颜色设置为红色。
2、$("li:last").css("color", "blue");选中最后一个li元素并将其文本颜色设置为蓝色。
3、$("li:eq(2)").css("font-weight", "bold");选中第三个li元素（索引2）并将其字体加粗。[即使 li 元素在父元素中不处于第三的位置，也会被选中]
4、$("li:even").css("background-color", "lightgray");选中所有偶数索引的li元素并设置背景颜色为浅灰色。
5、$("li:odd").css("background-color", "lightyellow");选中所有奇数索引的li元素并设置背景颜色为浅黄色。
6、$("li:nth-child(3)").css("font-size", "20px");会选择在其父元素中位置为第三的 li 元素，并将字体大小设置为20px。[若li父元素的第三个子元素不是li标签，那么它不会选择任何标签]
7、$("li:not(:first)").css("color", "gray"); 选中所有不是第一个li元素的li元素，并将其文本颜色设置为灰色。[排除第一个li元素外的所有li元素]
8、$("div:has(p)").css("border", "1px solid black");选中所有包含p标签的div元素，并添加黑色边框。
9、$("li:contains('Item 2')").css("font-style", "italic");选中包含文本“Item 2”的li元素，并将字体样式设置为斜体。
表单选择器
在 jQuery 中，表单选择器（Form Selectors）用于选择和操作表单元素。表单选择器专门用于处理表单中的不同控件，如文本框、复选框、单选按钮、下拉菜单等
1、$("input").css("border", "1px solid red");选择所有 input 元素并设置边框为红色。
2、$("input:text").css("background-color", "#f0f0f0");选择所有类型为文本的input元素 并设置背景颜色为浅灰色。[password、checkbox、radio同理]
3、$("select option:selected").css("color", "blue");选择所有被选中的下拉选项并将其文本颜色设置为蓝色。
4、$("input:disabled").css("background-color", "#f0f0f0");选中所有被禁用的input元素并设置背景颜色为浅灰色。
5、$("input:enabled").css("background-color", "#ffffff");选中所有未被禁用的input元素并设置背景颜色为白色。
6、$("input:checked").parent().css("background-color", "#e0e0e0");选中所有被选中的input元素的父元素，并设置背景颜色为灰色。[focus、empty同理]
3、事件
在 jQuery 中，事件处理是一个核心功能，用于响应用户与页面的交互
绑定事件
.on(event, selector, data, function)为元素绑定事件处理程序。可以指定事件类型、事件委托选择器、事件数据和处理函数。
.off(event, selector, function)移除绑定的事件处理程序
.one(event, function)绑定事件处理程序，只触发一次，然后自动解绑。
$("button").on("click", function() {
alert("Button clicked!");
});
常见事件类型
click：点击事件
dblclick：双击事件
mouseenter 和 mouseleave：鼠标进入和离开事件
focus 和 blur：获得焦点和失去焦点事件。
change：表单元素的值发生变化时触发。
submit：表单提交事件。
keydown, keyup, keypress：键盘事件。
事件委托
parentSelector：事件委托的父元素选择器。
event：事件类型，如 click、change 等。
childSelector：事件触发的目标子元素选择器。
function(event)：事件处理函数。
注意：.on方法是事件绑定还是事件委托取决于传递的参数！
$(parentSelector).on(event, childSelector, function(event) {
// 处理事件
});
事件对象
function(event) { // …}
function(event)：事件处理程序的参数 event 是一个事件对象，它包含关于事件的各种信息。
这个对象提供了对事件类型、目标元素和事件行为的访问。
事件生命周期
事件生命周期指的是事件从被触发到处理完成的整个过程
事件生命周期包括事件的触发、捕获阶段、目标阶段、冒泡阶段，以及事件处理程序的执行和默认行为的控制
若后续需要详细描述，再单独写
4、几个问题
id和name的区别
针对id:
1、id必须在整个 HTML 文档中唯一，也就是说，任何两个元素都不应有相同的id值。
2、id作为选择器使用，为标签设置样式#idname{ 样式内容}
3、id可以作为URL片段标识符使用，允许用户通过URL直接跳转到某个特定部分，例如，example.com/page#section1 会跳转到 id 为 section1 的元素。
4、在jQuery中，id也是一个非常常用的选择器，用来快速选取特定的 HTML 元素$(“#elementID”)会返回一个 jQuery 对象，包含具有该 id 的元素
针对name：
1、name 通常用于表单元素（如 input, select, textarea 等）指定表单字段的名称。当表单被提交时，name 属性的值会与用户的输入一起发送到服务器。
2、与 id 不同，name 值在一个 HTML 文档中可以重复多个元素使用。
3、name 不能在 CSS 中直接用作选择器，尽管在 JavaScript 中可以通过 document.getElementsByName 来选择具有相同 name 的元素集合
选择器字符串和标签字符串的区别
选择器字符串：
1、选择器字符串指的是用来选择 DOM 元素的字符串，通常用于选择某个特定的元素或一组元素，以便对其进行操作。它可以基于元素的 id、class、标签名、属性等来选择元素。
$(“#header”) // 选择 id 为 header 的元素
$(“.menu-item”) // 选择所有 class 为 menu-item 的元素
$(“div”) // 选择所有 div 元素
$(“input[type=‘text’]”) // 选择所有 type 为 text 的 input 元素
标签字符串：
1、标签字符串指的是 HTML 标签本身的字符串表示，用于创建或插入 HTML 元素。标签字符串通常包括标签名、属性和内容。
2、标签字符串通常用于动态创建元素，或者通过 innerHTML、jQuery.append()、jQuery.html() 等方法将 HTML 插入到 DOM 中
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
