1 jQuery(JQ)
作用 大量直接操作DOM 解决兼容问题
dom操作
操作html: 获取元素 更改标签属性 操作节点
操作css: 设置或更改css样式
添加事件
网页特效
jQuery对象
是什么:一组DOM元素,所以具有批量操作DOM元素的特点
$("p") $(".demo") $("#one") $("*") $(".box1 p") $(".box1 p.cur")
$(".box1,#p1")
jQuery对象与原生js对象进行转化
jQuery对象--->原生js对象 $("div")[0]
原生js对象--->jQuery对象 $(原生对象) $(this)
jQuery常用方法
html("....") ===== innerHTML
html() alert($("table").html()); 获取内容
attr() ===== obj.style.width
addClass()/removeClass()/toggleClass() ===== obj.className
click(function() {
})
mouseover()
mouseout()
mousemove()
css()
动画方法
hide/show/toggle 实现原理width/height/opacity
slideDown/slideUp/slideToggle 实现原理height/display
fadeIn/fadeOut/fadeToggle/fadeTo 原理opacity/display
animate()
节点
parent() 必须是亲父亲
children() 必须是亲儿子
siblings() 兄弟
其他节点关系
find() 查找后代
next() 下一个兄弟
nextAll() 后面所有兄弟
链式编程 return this
$("button:eq(2)")//:eq(2)修饰button,表示第二个button
$(".box p").eq(1).css("background","green");//集合中的第二个
$(".box").each()//遍历JQ中DOM对象