DOM对象:直接使用JavaScript获取的节点对象:
var objDOM = document.getElementById("title");
var objHTML=objDOM.innerHTML;
jQuery对象:使用jQuery包装DOM对象后产生的对象,它能够使用jQuery中的方法:
$("#title").html();
等同于
document.getElementById("title").innerHTML;
DOM对象和jQuery对象分别拥有一套独立的方法,不能混用
jQuery对象转DOM对象:
1、jQuery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象:
var $txtName=$(".txtName"); //jQuery对象
var txtName=$txtName[0]; //DOM对象
2、通过get(index)方法得到相应的DOM对象:
var $txtName = $(".txtName"); //jQuery对象
var txtName = $txtName.get(0); //DOM对象
使用$()函数进行转化:$(DOM对象)
var txtName=document.getElementById("txtName"); //DOM对象
var $txtName = $(txtName); //jQuery对象
注意:
1、jQuery对象命名一般约定以$开头
2、常使用$(this)来获取触发该事件的当前jQuery对象
JSON(JavaScript Object Notation)一种轻量级的数据交互格式
var JSON = { 名称:值,名称:值,...}; //JSON的数值可以是数字、字符串、布尔值、数组或者 对象、null
JSON的取值方法:
点号表示法来获取
追加样式:
addClass("class") 或 addClass(" class1 class2..")
移除样式:
removeClass("class") 或 removeClass("class1 class2 ..")
HTML代码操作:
html()可以对HTML代码进行操作,类似于原生JavaScript中的innerHTML:
$("div.left").html();
或
$("div.left").html("<div class=‘content‘>...</div>");
文本操作:
text()可以获取或设置元素的文本内容:
$("div.left").text();
或
$("div.left").text("<div class = ‘content‘> ...</div>");
value值操作:
val()可以获取或设置元素的value属性值:
$(input).val(); //获取value值
或
$(input).val("值"); //设置value值
节点操作:
jQuery中节点操作主要分为:
查找节点
创建节点
插入节点
删除节点
替换节点
复制节点
创建节点元素:
工厂函数$()用于获取或创建节点:
$(selector):通过选择器获取节点
$(element):把DOM节点转化成jQuery节点
$(html):使用HTML字符串创建jQuery节点
var $newNode2=$("<li title=‘标题为千与千寻’>千与千寻</li>");
创建含文本与属性<li>元素节点
插入子节点:
元素内部插入子节点:
append(content) $(A).append(B)表示将B追加到A中如:$("ul").append($newNode1);
appendTo(content) $(A).appendTo(B)表示把A追加到B中如:$newNode1.appendTo(“ul”);
prepend(content) $(A).prepend(B)表示将B前置插入到A中如:$("ul").prepend($newNode1);
prependTo(content)
插入同辈节点:
元素外部插入同辈节点:
after(content) $(A).after(B)表示将B插入到A之后如:$("ul").after($newNode1);
insertAfter(content) $(A).insertAfter(B)表示将A插入到B之后如:$newNode1.insertAfter(“ul”);
before(content)
insertBefore(content)
替换节点:
replaceWith()和replaceAll()用于替换节点:
复制节点:
clone()用于复制节点:
$(A).clone(true).appendTo(B);
提示:
clone()有个副作用就是会复制id,要么避免对有id的元素克隆,要么使用class代替 id的作用
删除节点:
jQuery提供了三种删除节点的方法:
1、remove():删除整个节点
2、detach():删除整个节点,保留元素的绑定事件、附加的数据
3、empty():清空节点
属性操作:
attr()获取或设置匹配元素的属性值:
//获取元素的某属性的值
$(selector).attr("属性名");
//设置元素的属性值
$(selector).attr("属性名","值");//设置一个属性值
$(selector).attr({"属性1":“值1”,“属性2”,“值2”});//设置多个属性值
removeAttr()匹配的元素中删除一个属性:
$(selector).removeAttr("属性名称");
遍历子元素:
children()方法可以用来获取元素的所有子元素:
$("body").children(); //获取<body>元素的子元素,但不考虑后代元素及文本节点
遍历同辈元素:
jQuery可以获取紧邻其后、紧邻其前和位于该元素前与后的所有同辈元素:
next([expr]) 用于获取紧邻匹配元素之后的元素,如:$("li:eq(1)").css("background-color","#F06");
prev([expr]) 用于获取紧邻匹配元素之前的元素,如:$("li:eq(1)").prev().css("background-color","#F06");
siblings([expr]) 用于获取位于匹配元素前面和后面的所有同辈元素,如:$("li:eq(1)").siblings().css("background-color","#F06");
遍历前辈元素:
jQuery中可以遍历前辈元素,方法:
parent() 获取元素的父级元素
parents() 获取元素的祖先元素
遍历--其它方法:
jQuery遍历 - each() :
以每一个匹配的元素作为上下文来执行一个函数:
$("img").each(function(i){
this.src = "test" + i + ".jpg";
})
查找方法 - find() :
搜索所有与指定表达式匹配的元素:
$("p").find("span"); //在所有p元素的后代节点中查找span元素
CSS-DOM操作:
除css()外,还有获取和设置元素高度、宽度、相对位置等的样式操作方法:
height([value]) 设置或返回匹配元素的高度
width([value]) 设置或返回匹配元素的宽度
offset([value]) 返回以像素为单位的top和left坐标。此方法仅对可见元素有效
jQuery的事件:
jQuery事件是对JavaScript事件的封装,常用事件分类如下:
基础事件:
window事件
鼠标事件
键盘事件
表单事件
复合事件是多个事件的组合:
鼠标光标悬停
鼠标连续点击
鼠标事件:
click(fn) :单击鼠标时
mouseover(fn) :鼠标移过时
mouseout(fn) :鼠标移出时
键盘事件:
keydown(fn) :按下键盘时
keyup(fn) :释放按键时
keypress(fn) :产生可打印的字符时
表单事件:
focus(fn) :获得焦点
blur(fn) :失去焦点
submit(fn) :表单提交时
事件绑定:
bind()方法 - 事件绑定:
$(selector).bind(type[,data],fn)
//例如:
$("#btn").bind("click",fn);
$("#btn").bind("click dblclick",fn);
$("#btn").bind({
click:function(){},
mouseover:function(){}
});
unbind()方法 - 解除事件绑定:
$(selector).unbind()
//例如:
$("#btn").unbind()
$("#btn").unbind("click")
$("#btn").unbind("click",handler);//指定的事件处理函数
on()方法 - 事件绑定:
$(selector).on(events[,selector][,data],fn)
//例如:
$("#form").on("click",".btn",{},fn);
off()方法 - 解除事件绑定:
$(selector).off(events,[selector],[handler])
$(selector).off(events,[selector])
$(selector).off(events)
$(selector).off()
注意:
建议用on()方法绑定事件,效率更高
鼠标光标悬停事件:
hover(fn1,fn2)方法:
相当于mouseover与mouseout事件的组合
//鼠标在父级菜单移入移出,子菜单隐藏与显示:
$("#parentMenu").hover(function(){
$("#childMenu").css("display","block");//mouseover
},
function(){
$("#childMenu").css("display","none");//mouseout
}
);
鼠标连续click事件:
toggle()方法用于模拟鼠标连续click事件:
$("body").toggle(
function(){},//第1,4,7...次点击时触发
function(){},//第2,5,8...次点击时触发
function(){},//第3,6,9...次点击时触发
);
jQuery的动画效果:
1、控制元素显示与隐藏
2、控制元素淡入淡出
3、改变元素高度
显示及隐藏元素:
show([duration][,complete])
hide([duration][,complete])
$(".tipsbox").show("slow");
注意:
显示速度可以取如下值:
毫秒(如1000)、slow、normal、fast
淡入淡出效果:
fadeIn()和fadeOut()可以通过改变元素的透明度实现淡入淡出效果
$("input[name=fadein_btn]").click(function(){
$("img").fadeIn("slow");
});
$("input[name=fadeout_btn]").click(function(){
$("img").fadeOut(1000);
});
切换元素可见状态:
toggle()除了可以模拟鼠标的连续单击事件外,还能用于切换元素的可见状态
$("li:gt(5):not(:last)").toggle();
改变元素的高度:
slideDown() 可以使元素逐步延伸显示
slideUp() 则使元素逐步缩短直至隐藏
$("h2").click(function(){
$(".txt").slideUp("slow");
$(".txt").slideDown("slow");
});
自定义动画:
animate()方法用于创建自定义动画的函数:
$(selector).animate(params [,speed] [,easing] [,fn]);
params:规定产生动画效果的CSS样式和值
speed:三种预定速度之一的字符串(“slow”,“normal”,“fast”)或表示动画时长的毫秒数值(如:1000)
easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供“linear”和“swing”
fn:在动画完成时执行的函数,每个元素执行一次