培训机构Day22

今天主要还是围绕着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]

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

相关推荐
闰土小蒋3 天前
豆包ai 生成动态tree 增、删、改以及上移下移 html+jquery
前端·html·jquery·豆包
one.dream3 天前
Electron不支持 jquery ,angularjs解决办法
electron·jquery·angular.js
良艺呐^O^4 天前
==和===的区别,被坑的一天
java·js
子非鱼@Itfuture5 天前
ts是什么、tsc是什么、tsx是什么、jsx是什么、scss是什么
前端·typescript·js·scss
niech_cn6 天前
原生js封装ajax请求以及css实现提示效果和禁止点击效果
js
Enti7c9 天前
改变HTML元素的方式有哪些?如何在HTML中添加/替换或删除元素?
前端·html·js
shuishen4910 天前
Web Bluetooth API 开发记录
javascript·web·js
sunphp开发者12 天前
黑客攻击网站,篡改首页问题排查修复
android·js
坐望云起13 天前
什么是WebAssembly?怎么使用?
html·web·wasm·js