当前位置：首页 > news >正文

培训机构Day22

news 来源：原创 2025/5/17 14:15:17

今天主要还是围绕着jquery讲解的，没有什么可说的。

知识点：

常用事件类型：
1.click：单击事件。鼠标，或键盘都可以触发。
2.dblclick：双击事件。
3.contextmenu：右键事件。
4.键盘相关事件：document，及表单元素上。
keyup：键弹起，释放。只会触发一次。
keydown：键按下。如果键在按下状态，则持续触发。
keypressed：按下并释放。
5.鼠标相关事件：用在任意dom元素上。
mousedown:只会触发一次。
mouseup:只会触发一次。
mouseenter:只会触发一次。
mouseleave:只会触发一次。
mousemove:持续触发。

6.window.onload事件，只能用在window对象上。
表示window已加载，页面已加载完毕。

=======================================
事件冒泡与事件委托。

========================================
BOM：浏览器对象模型Browser Object Model。DOM：文档对象模型。
window：一个窗口一个window对象。
location:地址栏对象
history：访问历史对象 back()回退到上一页，forward()前进到下一页。
go(n)：n可为正，表示前进几页，为负表示后退几页。

localStorage：本地存储对象 setItem getItem removeItem。永久存储。
sessionStorage：会话存储对象。仅在一个会话内有效。
========================================
ecmascript + DOM + Bom
语法：
1。常量变量。let const var
2.数据类型：number string boolean null undefined
3.运算符：/不是整除，=== !== typeof instanceof
4.流程控制。
5.数组。let a = []; let a = new Array(); push pop unshift shift
6.函数：function xxx() {} let a = function() {};
函数参数默认值。
7.对象。let a = {}; 对象即键值对的集合。数组，函数都是对象。
构造函数，new+构造函数，可以创建对象。

DOM：一套用于操作html元素的规范接口。
1。获取对象。querySelector/querySelectorAll
2。增加对象。document.createElement(), appendChild insertBefore
3。修改对象：
4。删除对象：remove() removeChild()

四向遍历：
1。parentElement
2。children：多个
3。previousElementSibling：兄元素。
4。nextElementSibling：弟元素。

事件处理：
1。行内 onclick属性
2。dom.oncick = function() {}
3。dom.addEventListener("click", function(){})

事件对象：e，封装了事件的相关数据。

事件移除：
dom.onclick = null;
dom.removeEventListener("click", 函数名称);

事件的冒泡和事件委托：

常用事件：
1。click
2。键盘相关
3。鼠标相关。
4。dblclick
5。window.onload

BOM对象：
1。Window
2。location
3.history
4.localStorage对象
5。sessionStorage对象

=============================================
jquery：别人写好的函数库。
1.起手式：不是必须的，通常写在head中，表示页面就绪之后的操作。
$(()=>{
//xxx。表示页面就绪之后要执行的操作
});

2。用法：$("选择器").xxx(xxx).xxx(xxx); jquery对象.xxx();
jquery对象是一个类数组。

3。链式操作。调用xxx操作之后，仍然返回对象本身。

常用的jquery选择器：
1。:first：表示选中第一个元素。:last表示选中最后一个元素。
2。:eq(n)：表示选中第几个元素。从0开始。
3。:gt(n)：表示选中大于第几个元素。:lt(n)：表示选中小于第几个元素。
4。:even，:odd。奇数，偶数。
5。:not(selector)：表示选中selector之外的。
6。:contains(xxx)：选取包含指令文本的元素。
7。:empty：选中所有空元素。:parent 选中有子元素，或者有文本的元素。
8。:has(xxx)：选中包含指定选择器xxx的子元素的元素。
9。:hidden：选取所有隐藏元素。display:none，<input type="hidden" >，visibility：hidden
:visible，选取所有可见元素。
10。[key]：选取有key属性的元素。
11。[key=value]：选取有key属性且值等于value。
12。[key!=value]：选取没有key属性，或者有key属性，但值不等于value的。
13。[key^=value]：选取有key属性，且值以value开头的。
14。[key$=value]：选取有key属性，且值以value结尾的。
15。[key*=value]：选取有key属性，且值包含value的。

16。:input：选中所有类型表单元素。input textarea button
17。:text：选中单行文本框。<input type=text >
18。:submit：选中提交按钮。<input type=submit> button type=submit>

二次筛选：在使用选择器选中元素的基础上，再次进行筛选。
1。eq(x)：第几个
2。first()：第一个
3。last():最后一个。
4。filter(xxx)：选取符合xxx的元素。
5。has(xxx)：选取拥有指定后代的元素。
6。not(xxx)：去除符合xxx选择器的元素。
7。slice(start,end)：截取指定范围的元素。
8。add(xxx)：添加符合xxx的元素。
9。addBack()：将自身也添加进去。

四向遍历：
1.父方向：
1.1 .parent(xxx)：找父元素。
1.2 .parents(xxx)：找所有祖先元素，一直找到html为止。
1.3 .parentsUntil(xxx)：找所有祖先元素，一直到指定的为止，不包含xxx。
1.4 .closest(xxx)：找当前元素最近的祖先元素。

2.子方向：
2.1 children(xxx)：查找子元素。
2.2 find(xxx)：查找后台元素，包含子代。必须要有参数。

3.兄元素：
3.1 prev(xxx): 查找紧邻兄元素。
3.2 prevAll(xxx): 查找所有兄元素。
3.3 prevUntil(xxx)：查找所有兄元素，直到xxx为止。

4.弟元素：
4.1 next(xxx)：查找紧邻弟元素。
4.2 nextAll(xxx)：查找所有弟元素。
4.3 nextUntil(xxx)：查找所有弟元素，直到xxx为止。

5.兄弟元素：
siblings(xxx)：查找所有兄弟元素，不包括自身。

增删改查：
1. 父.append($jq|html)：添加一个子元素，添加到尾部。
2. 子.appendTo(父)：将子元素添加到父元素中。
3. 父.prepend($jq|html)：添加一个子元素，添加到头部
4. 子.prependTo(父)：添加一个子元素，添加到头部。
5. $a.after($b)：在a的后面添加一个b。
6. $b.insertAfter($a)：在a的后面添加一个b。
7. $a.before($b)：在a的前面添加一个b。
8. $b.insertBefore($a)：在a的前面添加一个b。
9. $a.remove(xxx)：直接移除自身。
10.$a.empty(); 清空内容（或子元素），不移除自身。

文档操作（增删改查）：很多方法：有参数则为设置，无参则为获取。
1.text(xxx)：更改元素的文本内容，有参数为赋值，无参数为获取。
2.html(xxx)：更改html文本。
3.css("样式名"，"样式值"); 设置行内样式。参数也可以是js对象。一个参数则为获取。
4.val(xxx): 设置表单元素的值。有参数则为设置，无参则为获取。
5.attr(k,v)：两个参数则为设置属性，一个参数则为获取属性。
6.removeAttr(k)：移除属性。
7.prop(k,v)：设置布尔属性。v只能是true和false，true表示添加此布尔属性，false表示移除。
8.addClass("a")：添加类名称。一次添加多个。
9.removeClass("a")：移除类名称，可以一次移除多个。
10.hasClass("a")：判断是否拥有指定类名称。返回布尔值。
11.toggleClass("a")：切换是否拥有类名称。
12.$a.is(xxx)：判断是否符合某个指定选择器。只对$a中的第一个元素进行判断。
13.width(xxx)：设置或获取宽度，height(xxx)设置或获取高度。
14.offset(xxx)：设置或获取元素相对于视区的偏移位置。

事件处理：
1.$jq.xxx(function(){
xxx函数处理
})；
jq.xxx();//用代码的形式来触发事件。

2.$jq.on("xxx",function(){
xxx事件处理函数
});

第2种事件添加方式有两个好处：
1.可以给事件命名。移除事件。$jq.off("click.xxx");

2.事件实现事件委托。
$jq.on("xxx","真正触发事件的元素",function(){
//xxxx
});

动画：
1.setTimeout(function(){}, 2000);//定时器。

2.setInterval(function(){} ,2000); //循环定时器。

3.hide：大小，透明度。隐藏。
speed: 2000, slow normal fast
easing：缓动函数，swing linear

4.show：一对。

5.slideDown：往下出现
6.slideUp：往上消失

7.fadeIn：渐现
8.fadeOut：渐隐
9.fadeToggle：切换渐隐渐现。
10.fadeTo：控制渐隐到什么程度。
11.animate()：第1个参数是动画结束时的状态。

jquery对象与dom对象的转换：
1.将dom转换成jquery对象：$(dom)。
2.从jquery对象中获取dom: jq[x]

==============================================================

知识点：

相关文章：