JQuery学习总结

JQuery学习总结

1.什么是JQuery？
JS库
是对JS的封装，简化了操作

2.JQuery介绍
优点:
①.强大的选择器
②.轻量级
③.简化了DOM操作
④.链式操作
⑤.JQuery-Ajax

ready()和onload()的区别:
ready() 执行多次 DOM树结构加载完毕以后就会执行 $(function())
onload() 只能执行一次 必须要等到图片等信息加载完毕后才会进行

3.JQuery选择器
①.基本选择器(通配符 * 标签选择器、ID选择器、类选择器、并集选择器)
②.层次选择器(空格:所有的后代 >:直接子元素 +/next():兄弟元素 ~/nextAll():所有后面的同级元素 )
③.过滤选择器: :eq(index) :even :odd :first :last :hidden [attribute] :contains
④.表单选择器: :input :text :password :checkbox :radio :file :email :color :button :submit :reset :image
⑤.元素选择方法: next() nextAll() siblings():所有的同级元素 parent() children()
finde():查找 index():获取元素的索引 eq(index) first() last() prev()

4.JQuery DOM操作
①.$(this)和this的异同
a.都代表当前对象;
b.$(this)是JQuery对象,this是DOM对象;
c.不能用对方的方法。
②.查找节点
③.创建节点
JQ:$("<td id="name">数学</td>") $("tr").append($td)
JS:document.createElement("td")
④.删除节点
remove():删除节点 直接将标签下的所有后代元素全部删除
empty():清空节点 只是将文本内容清除掉 并不会将标签删除
⑤.修改节点
复制节点:clone(true)
⑥.属性操作
attr():针对标签的自定义属性
添加属性:$("p").attr("title","fruit");
获取属性:$("p").attr("属性名");
移除属性:removeAttr()
prop():针对标签的固有属性
⑦.CSS操作
$("p").css("color","red");设置单个样式
$("p").css({"color":"red","background":"blue"});设置多个样式
⑧.样式操作
addClass(“className”) 添加样式
removeClass() 移除全部样式
removeClass(“className”) 移除单个样式
hasClass() 判断是否包含某个样式 返回值:true|false
⑨.设置和获取HTML文本、值
text() 获取文本
text(“文本内容”) 设置文本
html() 获取html
html(“html代码”) 设置文本
val() 获取表单元素的value值
val("") 设置表单元素的value值

5.JQuery事件和方法
绑定事件:bind(type,function)
bind(“click”,function(){})
合成事件:hover()
toggle() 控制显示和隐藏
动画:show() 显示
hide() 隐藏

6.JQuery表格和表单