jquery 笔记

一、查找节点
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("");
}
});