1.jquery查找节点
(1) 查找元素节点
var $p_txt=$(“p”).text();
alert($p_txt);
(2) 查找属性节点
Var $title =$("p").attr("title");
alert($title);
2. jquery创建节点
(1) 创建元素节点
$(“ul”).append($(“<li></li>”));
(2) 创建属性节点
$(“ul”).append($(“<li name=’orange’></li>”));
(3) 创建文本节点
$(“ul”).append($(“<li name=’apple’>苹果</li>”));
3. jquery插入节点
(1) append()相匹配的元素内部追加内容
$(“p”).append($(“苹果”));
(2) appendTo()将匹配的元素追加到指定的元素中
$(“<li name=’banana’>香蕉</li>”).appendTo(“ul”);
4. jquery删除节点
(1)根据参数删除指定的元素 remove()
$(“ul li”).remmove(“li[name=banana]”);
(2) 清空节点,只清空内容 empty()
$(“ul li[name=orange]”).empty();
5. 复制和替换节点
(1) clone()复制节点
$(“ul li”).click(function(){
$(this).clone().appendTo(“ul”);
//clone()方法,默认不复制绑定的事件,如果需要复制元素的时候也同时复制这个元素身上的事件,需要增加一个参数(true)
$(this).clone(true).appendTo(“ul”);
});
(2) 替换节点
① replaceWith()使用with后面的标签替换匹配的元素
$(“p”).click(function(){
$(“p”).replaceWith(“<span>大将军掉进</span>”);
});
② replaceAll()使用某个元素替换所有的其他的元素
$(“p”).click(function(){
$(“<span>大将军掉进</span>”).replaceAll(“p”);
});
6. 包裹节点 将某个节点,用其他标记包裹起来
(1)将所有的元素单独包裹 wrap()
$("p").click(function(){
$("ulli").wrap("<b></b>");
});
(2)将所有匹配的用一个元素来包裹 wrapAll()
$("p").click(function(){
$("ulli").wrapAll("<div></div>");
});
7. jquery属性操作
(1) 获得属性和设置属性 attr()
如果一个参数:获得这个属性的值
var $p =$("p").attr("title");
alert($p);
如果2个参数:设置这个属性的值为xxx
$("p").attr({"name":"fruit","id":"fruit1"});
(2) 删除属性 removeAttr()
$("p").removeAttr("title");
8. jquery样式操作
(1)获取样式和设置样式 attr()
$("p").click(function(){
$(this).attr("class","high");
});
(2)追加样式 addClass()
$("p").click(function(){
$(this).addClass("high");
});
(3)移除样式 removeClass()
$("p").removeClass("high");
(4)切换样式 toggle()
$(“p”).toggle(“high”);
9.设置和获取html,文本和值
(1)读取某个元素中html内容 html()
var $p = $("p").html();
alert($p);
(2)某元素中的文本内容 text()
var $p = $("p").text();
alert($p);
(3)获取某元素的值 val()
var $val =$("input").val();
$("input").val("xxx");
alert($val);
10.遍历节点
(1)取得匹配元素的子元素的集合 children()
var $body =$("body").children();
alert($body.length);
(2)取得匹配元素后面紧邻的同辈元素 next()
var $p = $("p").next();
alert($p.html());
(3)取得匹配元素前面紧邻的同辈元素 prev()
var $pre =$("ul").prev();
alert($pre.html());
(4)取得匹配元素前后紧邻的同辈元素 siblings()
var $siblings =$("ul").siblings();
alert($siblings.length);