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