jQuery-02-个人学习笔记

jQuery-02-个人学习笔记

 

一、jQuery中的DOM操作

1、基本操作

html（）-类似于原生DOM的innerHTML属性

获取-html（）

设置-html（html代码）

val（）-类似于原生DOM的value属性

获取-val（）

设置-val（value）

text（）-类似于原生DOM的textContent属性

获取-text（）

设置-text（文本内容）

attr（）-类似于原生DOM的getAttribute()|setAttribute()|removeAttribute()

获取-attr（attrName）-类似于getAttribute（）

设置-attr（attrName，attrValue）-类似于setAttribute（）

移除-removeAttr（attrName）-类似于removeAttribute（）

2、样式操作——css

attr（“class”，classValue）

addClass（）-追加样式

removeClass（）-删除样式，如果不传参-删除所有样式，传参-删除指定样式

toggleClass（）-切换样式，只接收一个参数，在没有样式与指定样式之间切换

hasClass（）-判断样式

css（）-操作样式

设置为css（name，value）或css（options），options-选项{name:value,name:value,...}

获取为css（name）

3、遍历节点

parent（）-获取指定节点的父节点

children（）-获取指定节点的所有子节点

next（）-获取指定节点的下一个兄弟节点

prev（）-获取指定节点的上一个兄弟节点

siblings（）-获取指定节点的所有兄弟节点

find（expr）-在指定节点中查找指定内容（查找指定节点的后代节点）

4、创建、删除、插入节点

创建节点

元素节点-$（HTML代码）

文本节点-text（）

属性节点-attr（）

jQuery-$（HTML代码）

删除节点

remove（）-删除自身及后代节点

empty（）-（清空）删除后代节点，但保留自身节点

插入节点

内部插入

append-后面的节点被添加到append前面的节点的后面

prepend-后面的节点被添加到prepend前面的节点的前面

appendTo-反append

prependTo-反prepend

外部插入

before-before后面的节点被添加到before前面的节点的前面

after-after后面的节点被添加到after前面的节点的后面

insertBefore-反before

insertAfter-反after

5、替换节点

replaceWith-后面的元素替换前面的元素

replaceALL-前面的元素替换后面的元素

6、复制节点

jQuery-clone（boolean），boolean参数-表示是否复制事件

DOM-cloneNode（boolean），boolean参数-表示是否复制后代节点

二、事件

1、ready（）-类似于window.onload的作用

写法：$(document).ready(function(){ });或$().ready(function(){});或$(function(){});

ready与onload的区别

ready-具有简写方式，在一个HTML页面中允许多个，等待HTML页面中所有DOM结构加载完毕后就可以执行，加载时间短

onload-没有简写方式，在一个HTML页面中只能一个，必须等待HTML页面中所有内容全部加载完毕后才能执行，加载时间长

2、事件绑定与解绑

bind(type,data,fn)-绑定事件

type-指定绑定的事件名称（如果绑定多个事件时，使用空格隔开）

data-可选项，作为event.data属性值传递给事件对象的额外数据对象

fn-绑定事件的处理函数

unbind()-解绑事件

type-指定解绑的事件名称（默认不传递任何内容-解绑所有事件，指定单个事件名称-解绑单个事件，指定多个事件名称-解绑多个事件）

绑定与解绑允许指定哪些事件？

blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 。

所谓的click()事件是bind('click')的简写方式

3、事件对象（event）-事件对象被封装在事件对应的处理函数的参数

ele.οnclick=function(event){event}

常用用法

pageX/clientX/offsetX/x-x轴

pageY/clientY/offsetY/x-y轴

target-当前绑定事件的源对象（元素）

returnValue-返回值，Boolean类型（return false-阻止页面的默认行为）

which/keyCode/charCode-键盘对应值

4、事件冒泡

捕获

冒泡

5、原生DOM绑定事件三种

在HTML页面元素中指定事件名称

在JavaScript代码中

element.οnclick=function(){}

element.addEventListener("click",function(){});