培训机构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]

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

相关推荐
outstanding木槿1 天前
现实生活例子[特殊字符] 通俗易懂的解释[特殊字符] JS中的原型和原型链[特殊字符]
前端·javascript·js
QQ_hoverer2 天前
前端使用 preview 插件预览docx文件
前端·javascript·layui·jquery
potender2 天前
前端基础学习html+css+js
前端·css·学习·html·js
漫步企鹅3 天前
【JS服务器】JETBRAINS IDEs JS服务器使用什么编译JNI
js·jni·网站服务器
站在风口的猪11084 天前
React前端框架
前端·react.js·前端框架·js
kaikaile19957 天前
jQuery和CSS3卡片列表布局特效
jquery
知识分享小能手7 天前
Typescript学习教程,从入门到精通,TypeScript 配置管理与编译器详解(19)
前端·javascript·学习·typescript·前端框架·ecmascript·jquery
西洼工作室7 天前
【手搓一个原生全局loading组件解决页面闪烁问题】
前端·css·js
西洼工作室8 天前
使用原生前端技术封装一个组件
前端·js
知识分享小能手8 天前
Typescript学习教程,从入门到精通,TypeScript 泛型与类型操作详解(二)(17)
前端·javascript·学习·typescript·jquery·前端网页学习