jQuery 基础知识点梳理
Posted 一纸流年
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 基础知识点梳理相关的知识，希望对你有一定的参考价值。
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:在动画完成时执行的函数，每个元素执行一次
以上是关于jQuery 基础知识点梳理的主要内容，如果未能解决你的问题，请参考以下文章