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(){});