样式操作
设置/获取样式
语法
css(name,value) ;
//或
css({name:value, name:value,name:value…}) ;
//设置属性
css(name)
举例
$(this).css("border","5px solid #f5f5f5");
//或
$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"});
$(this).css("border");
追加样式
$(selector).addClass(class);
//或
$(selector).addClass(class1 class2 … classN);
移除样式
$(selector).removeClass("class") ;
//或
$(selector).removeClass("class1 class2 … classN ") ;
切换样式
$(selector).toggleClass(class) ;
判断样式
$(selector). hasClass(class);
内容及Value值操作
html()
$("div.left").html();//获取
//或
$("div.left").html("<div class='content'>…</div>")//设置
text()
$("div.left").text();//获取
//或
$("div.left").text("<div class='content'>…</div>");//设置
val() (input标签里的Value值)
$(this).val();//获取
//或
$(this).val(value);//设置
节点及节点属性操作
创建节点
$(selector):通过选择器获取节点
$(element):把DOM节点转化成jQuery节点
$(html):使用HTML字符串创建jQuery节点
插入节点
元素内部插入子节点
语法 | 功能 |
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) | $(A). prependTo (B)表示将A前置插入到B中 如:$newNode1. prependTo ("ul"); |
元素外部插入同辈节点
语法 | 功能 |
after(content) | $(A).after (B)表示将B插入到A之后 如:$("ul").after($newNode1); |
insertAfter(content) | $(A). insertAfter (B)表示将A插入到B之后 如:$newNode1.insertAfter("ul"); |
before(content) | $(A). before (B)表示将B插入至A之前 如:$("ul").before($newNode1); |
insertBefore(content) | $(A). insertBefore (B)表示将A插入到B之前 如:$newNode1.insertBefore("ul"); |
删除节点
remove():删除整个节点
empty():清空节点内容
替换节点
replaceWith()
复制节点
$(selector).clone(true) ;
$(selector).clone(false) ;
参数ture或flase, true复制事件处理,flase时反之。
节点遍历
$(selector).children();//遍历子元素
$(selector).next();//遍历同辈之后的
$(selector).prev();//遍历同辈之前的
$(selector).slibings();//遍历同辈前后的
$(selector).parent();//遍历父级
$(selector).parents();//遍历父级和以上的
$(selector).each( );//遍历每一个
属性操作
$(selector).attr([name]) ;//获取
//或
$(selector).attr({[name1:value1]…[nameN:valueN]}) ;//设置
$(selector).removeAttr(name) ;//删除