样式操作
设置/获取样式
语法
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);
举例
$("p").addClass("content border");
移除样式
语法
$(selector).removeClass("class") ; 或 $(selector).removeClass("class1 class2 … classN ") ;
举例
$("p").removeClass("text content");
切换样式
语法
$(selector).toggleClass(class) ;
举例
$("p").toggleClass("content border");
判断样式
语法
$(selector). hasClass(class);
举例
$("h2").mouseover(function() { if(!$("p").hasClass("content ")){ $("p").addClass("content "); } });
内容及Value值操作
html()
举例
$("div.left").html();//获取 //或 $("div.left").html("<div class='content'>…</div>")//设置
text()
举例
$("div.left").text();//获取 //或 $("div.left").text("<div class='content'>…</div>");//设置
val()
举例
$(this).val();//获取 //或 $(this).val(value);//设置
节点及节点属性操作
创建节点
语法
$(selector):通过选择器获取节点 $(element):把DOM节点转化成jQuery节点 $(html):使用HTML字符串创建jQuery节点
举例
var $newNode=$("<li></li>"); var $newNode1=$("<li>你喜欢哪些冬季运动项目?</li>"); var $newNode2=$("<li title='last'>北京申办冬奥会是再合适不过了!</li>");
插入节点
语法
append(content) //$(A).append(B)表示将B追加到A中 appendTo(content) //$(A).appendTo(B)表示把A追加到B中 prepend(content) //$(A). prepend (B)表示将B前置插入到A中 prependTo(content) //$(A). prependTo (B)表示将A前置插入到B中 after(content) insertAfter(content) before(content) insertBefore(content)
举例
$("ul").append($("#dd")); $("#dd").appendTo("ul"); $("ul"). prepend ($("#dd")); $("#dd").prependTo ("ul"); $("ul").after($("#dd")); $("#dd").insertAfter("ul"); $("ul").before($("#dd")); $("#dd").insertBefore("ul");
删除节点
remove():删除整个节点 empty():清空节点内容 detach():删除整个节点,保留元素的绑定事件、附加的数据
举例
$("#dd").remove(); $("#dd").empty(); $("#dd").detach();
替换节点
replaceWith()
replaceAll()
举例
var $newNode1=$("<li>你喜欢哪些冬季运动项目?</li>"); $(".gameList li:eq(2)").replaceWith($newNode1); $($newNode1).replaceAll(".gameList li:eq(2)");
replaceWith() 与replaceAll() 方法都可以实现元素节点的替换,二者最大的区别在 于替换字符的顺序,前者是用括号中的字符替换所选择的元素,后者是用字符串替换括号中 所选择的元素。同时,一旦完成替换,被替换元素中的全部事件都将消失
复制节点
语法
$(selector).clone([includeEvents]) ;
举例
$(".gameList li:eq(1)").click(function(){ $(this).clone(true).appendTo(".gameList"); }) $(".gameList li:eq(2)").click(function(){ $(this).clone(false).appendTo(".gameList"); })
参数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) ;//删除
举例
$(".contain img").attr({width:"200",height:"80"}) $(".contain img").removeAttr("alt");
#####
#####