jquery节点的增删改查:
1.查找节点:
(1)查找元素节点:获得元素节点,通过选择器可以获得 eg:var $p_txt =
$("p").text(); alert($p_txt);
(2)查找属性节点:通过attr()如果1个参数的话,是获得属性节点的值;
如果有两个参数,就是给属性节点赋值;
eg:一个参数:var $title=$("p").attr("title");alert($title);
两个参数 var $title=$("p").attr("name","username");alert
($title);
2.创建节点:
(1)创建元素节点:将创建的元素节点追加到要创建的位置;
eg:var $li=$("<li></li>"); $("ul").append($li);
(2)创建属性节点: 就在创建元素节点的时候,直接写上属性就可以了;
eg: var $li=$("<li name='li'></li>");$("ul").append($li);
(3)创建文本节点: 就在创建元素节点的时候,直接写上文本就可以了;
var $content=$("<p id="p">快乐</p>");$("div").append($content);
插入节点:
append() 向匹配的元素内部追加内容:eg:$("ul").append($li);
$("ul")追加$li为干儿子
appendTo() 将匹配的元素追加到指定的元素之中: eg:$("li").appendTo
($ul); $("li")认$ul为干爹;
3.删除节点:
(1)remove()根据指定的参数删除
eg:$("ul li").remove("li[class='heigh]");删除class属性是heigt
的li;
eg:如果没有指定参数,表示都删除:$("ul li").remove();
(2)empty()清空 只清楚内容 eg:$("ul li").empty();
4.复制和替换节点:
1.clone()实现节点的复制;clone()方法,默认不复制绑定的事件,如果需要
复制元素的时候也同时复制这个元素身上的事件,需要增加一个参数(true)
eg: $("ul li").click(function(){
$(this).clone(true).appendTo($("ul"));
});
2.replaceWith()替换 使用with后面的标签替换匹配的元素
eg:$("p").replaceWith(<span>这是span</span>");
replaceAll() 使用某个元素替换所有的其他的元素
eg: $("<div>这是div</div>").replaceAll($("p"));
3.包裹节点 将某个节点用其他元素包裹起来
warp()给每一个匹配的元素单独的包裹起来 $("ul li").wrap("<b></b>");
warpAll() 用一个标签包裹所有匹配的元素 $("ul li").wrapAll
("<b></b>");
jquery属性的操作
1.attr()获取和设置属性 $("ul li").attr("title") 1个参数 是获取属性
值
$("ul li").attr("name","li") 2个参数是为元素设置属性
2.removeAttr() 参数就是要删除的参数名
eg:$("p").removeAttr("name");
jquery样式操作
1.attr() 获取样式和设置样式
eg:$("p").attr("class","high");
2.addClass()追加样式 eg:$("p").addClass("high");
3.removeClass()移除样式 eg:$("p").removeClass("high");
4toggleClass()切换样式 如果你有这个class属性我就删除,如果没有就增
加
eg:$("p").toggleClass("hign");
设置和获取html 文本 值
1.html()读取某个元素中html的内容;
eg:$("p").html();
设置html()中的内容
eg:$("p").html("你好");
2.text()获取某元素的文本内容
eg:alert($("p").text());
3.val()获取表单元素的值
$val = $("input").val();alert($val);
设置表单元素的值
$val =$("input").val("we");alert($val);
遍历节点
1.chirdren()父元素下面的所有子元素
eg:$body = $("body").children();
2,next()当前元素下一个同辈元素
eg: var $p= $("p").next();alert($p.html());
3.prev()当前元素上一个同辈元素
eg: var $p= $("p").prev();alert($p.html());
4.sibings()当前元素前后所有的同辈元素
eg:ar $siblings = $("ul li").siblings();
alert($siblings.length);