一、查找节点
1.1、查找元素节点
var $li = $("ul li=eq(1)");
//获取<ul>里第2个<li>节点
var li_txt =
$li.text(); //获取第2个<li>元素节点的文本内容
alert(li_txt); //打印文本内容
2.2、查找属性节点
var
$para = $("p"); //获取<p>节点
var p_txt = $para.attr("title");
//获取<p>元素节点属性title
alert(p_txt); //打印title属性值
二、创建节点
1.1、创建元素节点
var
$li_1 = $("<li></li>"); //创建1个<li>元素
var $li_2 =
$("<li></li>"); //创建2个<li>元素
$("ul").append($li_1); //添加到<ul>节点中，使之能在网页中显示
$("ul").append($li_2); //可以采取链式写法：$("ul").append($li_1).append($li_2)
1.2、创建文本节点
var
$li_1 = $("<li>香蕉</li>"); //创建一个<li>元素，包括元素节点和文本节点
var
$li_2 = $("<li>雪梨</li>"); //”香蕉“ 就是创建的文本节点
//”雪梨“
就是创建的文本节点
$("ul").append($li_1);
$("ul").append($li_2);
1.3
创建属性节点
var $li_1 = $("<li title=‘香蕉‘>香蕉</li>");
var $li_2 =
$("<li
title=‘雪梨‘>雪梨</li>")
$("ul").append($li_1);
$("ul").append($li_2);
三、插入节点
四、删除节点
$("ul
li:eq(1)").remove();
五、复制节点
$("ul
li").click(
function(){
$(this).clone().appendTo("ul");
//复制当前单击的节点，并将它追加到<ul>元素中
}
);
六、替换节点
replaceWith replaceAll()
$("p").replaceWith("<strong>你最不喜欢的水果是？</strong>")
七、包裹节点
wrap()
wrapAll() wrapInner()
$("strong").wrap("<b></b>");
//用<b>标签把<strong>元素包裹起来
八、属性操作
attr()
removeAttr()
1.1、获取属性和设置属性
var $para = $("p"); //获取<p>节点
var
p_txt = $para.attr("title");
//获取<p>元素节点属性title
$("p").attr("title","your title");
//设置单个的属性值
$("p").attr({"title":"your title", "name" : "test"});//将一个”名/值“
形式的对象设置为匹配元素的属性
1.2、删除属性
$("p").removeAttr("title");
//删除<p>元素的属性title
九、样式操作
1.1、获取样式和设置样式
var p_class =
$("p").attr("class"); //获取<p>元素的class
$("p").attr("class",
"high"); //设置<p>元素的class为”high“
1.2
追加样式
$("p").addClass("another"); //给<p>元素追加“another” 类
1.3
移除样式
$("p").removeClass("high");
//移除<p>元素中值为“high”的class
$("p").removeClass("high").removeClass("another");
$("p").removeClass("hight
another")
$("p").removeClass(); //移除<p>元素的所有class
1.4
切换样式
toggle()
toggleClass()
$toggleBtn.toggle(function(){
//显示元素
}.function(){
//隐藏元素
});
$("p").toggleClass("another"); //重复切换类名“another”
1.5
判断是否含有某个样式
hasClass()
$("p").hasClass("another");
十、设置和获取HTML、文本和值
1.1
html()方法
var p_html = $("p").html();
//获取<p>元素的HTML代码
alert(p_html); //打印<p>元素的HTML代码
1.2
text()方法
var p_text =
$("p").text(); //获取<p>元素的文本内容
alert(p_text); //打印<p>元素的文本内容
1.3
val()方法
$("#address").focus(function(){
var txt_value = $(this).val();
//获取地址文本框的值
if(txt_value ==
"请输入邮箱地址"){
$(this).val("");
}
});