7、复习DOM操作
获取节点:document.getElementById();/document.getElementsByTagName();/querySelect()/........
创建节点:createElement()/createTextNode/createAttribute
替换节点:replaceChild
删除节点:removeChild
插入节点:appendChild/insertBefore
8、jQuery中的DOM操作
基本操作
①html() - 类似于原生DOM的innerHTML属性
获取 - html()
设置 - html(html代码)
②val() - 类似于原生DOM的value属性
获取 - val()
设置 - val(value)
③text() - 类似于原生DOM的textContent属性
获取 - text()
设置 - text(文本内容)
④attr() - 获取或设置指定元素的属性
获取 - attr(attrName) - 类似于getAttribute()
设置 - attr(attrName,attrValue) - 类似于setAttribute()
⑤removeAttr(attrName) - 类似于removeAttribute()
9、class操作
①attr("class",classValue) - 设置
②addClass() - 追加样式
③removeClass() - 删除样式
不传参 - 删除所有样式
传参 - 删除指定样式
④toggleClass() - 切换样式
只接受一个参数,是在没有样式与指定样式之间切换,没有就新建,有就删除
⑤ hasClass() - 判断样式
判断指定元素是否包含指定样式
10、设置css样式属性 - css()
①设置:.css(name,value)
如果同时设置多个,用对象文字值:’color’:’red’,’first-size’:’12px’,........
属性间用,隔开
②获取:.css(name)
11、遍历节点
parent() - 获取指定节点的父节点
children() - 获取指定节点的所有子节点
next() - 获取指定节点的下一个兄弟节点
prev() - 获取指定节点的上一个兄弟节点
siblings() - 获取指定节点的所有兄弟节点
find(expr) - 在指定节点中查找指定内容
注意 - 查找指定节点的后代节点
$("#nj").prev().attr("name")获取节点的上一个兄弟节点
$("#nj").siblings().length 获取节点的所有兄弟节点的个数
$("#city").find("li").length 获取id为city节点下所有li元素的个数(后代节点)
12、节点
①创建节点
Jquery创建元素节点、属性节点、文本节点都使用$(html)
创建元素节点:$("<li></li>");
创建属性节点:$("<li id='test'></li>");
创建文本节点:$("hello world !");
同时创建:$("<li id='test'>hello world !</li>");
②删除节点
remove() - 删除自身及后代节点
empty() - (清空)删除后代节点,但保留自身节点
③插入节点
内部插入(当做子节点插入):
append(content|fn) 向每个匹配的元素内部末尾追加内容。
appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合末尾。
prepend(content|fn) 向每个匹配的元素内部头部内容。
prependTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合头部
外部插入(当做兄弟节点插入):
after(content|fn) 向每个匹配元素的后面添加内容
before(content|fn) 向每个匹配元素的前面添加内容
insertAfter(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的后
面。
insertBefore(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的
前面。
④替换节点
A.replaceWith(B) 方法把被选元素替换为新的内容。B替A
A.replaceAll(B) 方法相反 A替B
$("button").replaceWith($("<p>这也是段落.</p>"));
$("<button>按钮</button>").replaceAll($("p"));
⑤复制节点
jQuery - clone(boolean)
boolean参数 - 表示是否复制事件
DOM - cloneNode(boolean)
boolean参数 - 表示是否复制后代节点
例:$("button").clone(true).appendTo($("p"));//复制button按钮,将其追加到p标签中
13、事件
ready() - 类似于window.onload的作用
写法
$(document).ready(function(){});
$().ready(function(){});
$(function(){}); //常用
14、ready与onload的区别
ready:具有简写方式
在一个HTML页面中允许多个
等待HTML页面中所有DOM结构加载完毕后就可以执行
onload:没有简写方式
在一个HTML页面中只能一个
必须等待HTML页面中所有内容全部加载完毕后才能执行
15、事件绑定与解绑
①绑定事件 bind(type,data,fn)
type - 指定绑定的事件名称
如果绑定多个事件时,使用空格隔开
data - 可选项,作为event.data属性值传递给事件对象的额外数据对象
fn - 绑定事件的处理函数
②解绑事件unbind(type)
type - 指定解绑的事件名称
默认不传递任何内容 - 即解绑所有事件
指定单个事件名称 - 解绑单个事件
指定多个事件名称 - 解绑多个事件
16、鼠标悬停事件
mouseover()事件是bind('mouseover')的简写方式
$(".d1>h3").bind("mouseover mouseout",function(){
if($(".d2").is(":hidden")){
$(".d2").show(1000);
}else{
$(".d2").hide(1000);
}
});
$(".d1>h3").mouseover(function(){
$(".d2").show(1000);
}).mouseout(function(){
$(".d2").hide(1000);
});
17、click()事件是bind('click')的简写方式
18、事件对象(event)
事件对象被封装在事件对应的处理函数的参数
ele.onclick = function(event){
event
}
常用用法
pageX/clientX/offsetX/x - 当前x轴
pageY/clientY/offsetY/y - 当前y轴
target - 当前绑定事件的源对象(元素)
returnValue - 返回值,Boolean类型
return false - 阻止页面的默认行为
which/keyCode/charCode - 键盘对应值
19、事件冒泡
捕获
冒泡
方式一:event.stopPropagation();
$("#div1").mousedown(function(event){
event.stopPropagation();
});
方式二:return false;
$("#div1").mousedown(function(event){
return false;3
});
事件切换
hover(over,out)方法
over - onmouseover事件的处理函数
out - onmouseout事件的处理函数
20、JQuery中的常用事件
.click() | 鼠标单击触发事件,参数可选(data,function) |
.dblclick() | 双击触发,同上 |
.mousedown()/up() | 鼠标按下/弹起触发事件 |
.mousemove() | 鼠标移动事件 |
.mouseover()/out() | 鼠标移入/移出触发事件 |
.mouseenter()/leave() | 鼠标进入/离开触发事件* |
.hover(func1,func2) | 鼠标移入调用func1函数,移出调用func2函数 |
.focusin() | 鼠标聚焦到该元素时触发事件 |
.focusout() | 鼠标失去焦点时触发事件 |
. focus()/.blur() | 鼠标聚焦/失去焦点触发事件(不支持冒泡) |
.change() | 表单元素发生改变时触发事件 |
.select() | 文本元素被选中时触发事件 |
.submit() | 表单提交动作触发* |
.keydown()/up() | 键盘按键按下/弹起触发 |
.on() | 多事件的绑定 |
.off() | 移除事件的绑定 |
.trigger(“event”) | 触发事件event调用 |
.triggerHandler() | 触发事件,不会冒泡,不会触发默认事件 |