样式操作
i.设置css()
jquery对象.css("属性名","属性值");
jquery对象.css({ "属性名":"属性值" ,"属性名":"属性值" ,...,"属性名":"属性值" });
ii.追加或移除样式class
addClass("x");
addClass("x x x");
removeClass(x);
removeClass(x x );
removeClass():移除全部样式
toggleClass("x x x"):切换追加与移除
内容操作
html():获取值 ,获取的是元素 的内容 ,包含了 元素内部的 各种标签
html(xxxx) :先渲染,后显示
text()::获取值 ,值获取文本值
text(xxxx):將值原样显示,没有渲染
val():获取value值
val(xxx):设置value值
节点与属性操作
i.节点操作
①查询节点 (jquery选择器)
②创建节点 : $()
$(选择器):获取节点
$(DOM对象):转换
$(html字符串), $("<li onclick="..">xxx</li>")
③插入节点 文档
内部插入 :
$(A).append(B) 将B追加到A中 如:$("ul").append($node);
$(A).appendTo(B) 把A追加到B中 如:$ node.appendTo("ul");
$(A). prepend (B) 将B前置插入到A中 如:$("ul"). prepend ($node);
$(A). prependTo (B) 将A前置插入到B中 如:$ node.prependTo ("ul");
外部插入
$(A).after(B) 将B插入到A之后 如:$("ul").after($node);
$(A).insertAfter(B) 将A插入到B之后 如:$ node.insertAfter("ul");
$(A).before(B) 将B插入至A之前 如:$("ul").before($node);
$(A).insertBefore(B) 将A插入到B之前 如:$ node.insertBefore("ul");
④替换节点
$X.replaceWith($Y) :用$Y替换$X
replaceAll();
⑤删除节点
remove():彻底删除
detach():将结点删除,但关联的事件、数据不会删除(不推荐使用)
empty() :只删除内容
⑥克隆节点
clone(true|false)
$(document).ready(function(){
$("li").click(function(){ ... });
});
<li>xxxx</li>
属性操作
attr("属性名") :获取属性值
attr("属性名","属性值") :设置属性值
attr({ "属性名":"属性值", "属性名":"属性值" , "属性名":"属性值" } );
removeAttr("属性名"); 删除属性值
获取集合与遍历集合
①子节点集合
$(...).children( "li")
后代集合(不推荐使用,影响性能)
$(...).find( "li")
②同辈集合
next():后一个 +
prev(): 前一个
siblings():同辈,左、右
③前辈
parent():父代
parents("ul"):祖先
过滤集合:
i.很多方法的()就是一个过滤选择器
ii.filter("选择器...");
遍历集合:
$(...).each(function(index,element){
});
CSS-dom操作:
height(500) ;
width(500);
offset():偏移量(左上角的点),left top
offset(function(n,oldOffset){ ... })
offsetParent():获取 (已定位)的最近的祖先元素
已定位:元素position属性(默认static)被设置为了relative absolute 或fixed
scrollLet()
scrollTop()