查找节点
var $para = $("p");// 获取<p>节点var $li = $("ul li:eq(1)"); // 获取第二个<li>元素节点var p_txt = $para.attr("title"); // 输出<p>元素节点属性titlevar ul_txt = $li.attr("title");// 获取<ul>里的第二个<li>元素节点的属性titlevar li_txt = $li.text(); // 输出第二个<li>元素节点的textalert(ul_txt);alert(li_txt);alert(p_txt);创建节点
var $li_1 = $("<li></li>"); // 创建第一个<li>元素var $li_2 = $("<li></li>"); // 创建第二个<li>元素var $parent = $("ul"); // 获取<ul>节点。<li>的父节点$parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示$parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);var $li_1 = $("<li>香蕉</li>"); // 创建一个<li>元素，包括元素节点和文本节点//“香蕉”就是创建的文本节点。var $li_2 = $("<li>雪梨</li>"); // 创建一个<li>元素，包括元素节点和文本节点//“雪梨”就是创建的文本节点。var $parent = $("ul"); // 获取<ul>节点。<li>的父节点$("ul").append($li_1); // 添加到<ul>节点中，使之能在网页中显示$("ul").append($li_2); // 添加到<ul>节点中，使之能在网页中显示var $li_1 = $("<li title='香蕉'>香蕉</li>"); //创建一个<li>元素//包括元素节点,文本节点和属性节点//其中title='香蕉' 就是创建的属性节点var $li_2 = $("<li title='雪梨'>雪梨</li>"); //创建一个<li>元素//包括元素节点,文本节点和属性节点//其中title='雪梨' 就是创建的属性节点 var $parent = $("ul"); // 获取<ul>节点。<li>的父节点$parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示$parent.append($li_2); // 等价于：$parent.append($li_1).append($li_2); 插入节点
var $li_1 = $("<li title='香蕉'>香蕉</li>");// 创建第一个<li>元素var $li_2 = $("<li title='雪梨'>雪梨</li>");// 创建第二个<li>元素var $li_3 = $("<li title='其它'>其它</li>");// 创建第三个<li>元素var $parent = $("ul"); // 获取<ul>节点，即<li>的父节点var $two_li = $("ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点$parent.append($li_1); // append方法将创建的第一个<li>元素添加到父元素的最后面$parent.prepend($li_2); // prepend方法将创建的第二个<li>元素添加到父元素里的最前面$li_3.insertAfter($two_li); // insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后移动节点
var $one_li = $("ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点var $two_li = $("ul li:eq(2)"); // 获取<ul>节点中第三个<li>元素节点$two_li.insertBefore($one_li); //移动节点删除节点
$("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。var $li = $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。$li.appendTo("ul");// 把刚才删除的又重新添加到<ul>元素里//所以，删除只是从网页中删除，在jQuery对象中，这个元素还是存在的，我们可以重新获取它$("ul li").remove("li[title!=菠萝]"); //把<li>元素中属性title不等于"菠萝"的<li>元素删除 $("ul li").click(function(){ alert( $(this).html() ); })var $li = $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。$li.appendTo("ul");$("ul li").click(function(){ alert( $(this).html() ); })var $li = $("ul li:eq(1)").detach(); // 获取第二个<li>元素节点后，将它从网页中删除。$li.appendTo("ul");$("ul li:eq(1)").empty(); // 找到第二个<li>元素节点后，清空此元素里的内容复制节点
$("ul li").click(function(){ $(this).clone().appendTo("ul"); // 复制当前点击的节点，并将它追加到<ul>元素 }) $("ul li").click(function(){ $(this).clone(true).appendTo("ul"); // 注意参数true //可以复制自己，并且他的副本也有同样功能。 }) 替换节点
$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>"); // 同样的实现： $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p"); 包裹节点
$("strong").wrap("<b></b>");//用<b>元素把<strong>元素包裹起来$("strong").wrap("<b></b>");$("strong").wrapAll("<b></b>");$("strong").wrapAll("<b></b>");$("strong").wrapInner("<b></b>");属性操作
//设置<p>元素的属性'title'$("input:eq(0)").click(function(){ $("p").attr("title","选择你最喜欢的水果."); });//获取<p>元素的属性'title'$("input:eq(1)").click(function(){ alert( $("p").attr("title") ); });//删除<p>元素的属性'title'$("input:eq(2)").click(function(){ $("p").removeAttr("title"); }); 样式操作
//获取样式$("input:eq(0)").click(function(){ alert( $("p").attr("class") ); });//设置样式$("input:eq(1)").click(function(){ $("p").attr("class","high"); });//追加样式$("input:eq(2)").click(function(){ $("p").addClass("another"); }); //删除全部样式$("input:eq(3)").click(function(){ $("p").removeClass(); }); //删除指定样式$("input:eq(4)").click(function(){ $("p").removeClass("high"); }); //重复切换样式$("input:eq(5)").click(function(){ $("p").toggleClass("another"); }); //判断元素是否含有某样式$("input:eq(6)").click(function(){ alert( $("p").hasClass("another") ) alert( $("p").is(".another") ) }); 设置和获取HTML,文本和值
//获取<p>元素的HTML代码$("input:eq(0)").click(function(){ alert( $("p").html() ); });//获取<p>元素的文本$("input:eq(1)").click(function(){ alert( $("p").text() ); });//设置<p>元素的HTML代码$("input:eq(2)").click(function(){ $("p").html("<strong>你最喜欢的水果是?</strong>"); }); //设置<p>元素的文本$("input:eq(3)").click(function(){ $("p").text("你最喜欢的水果是?"); }); //设置<p>元素的文本$("input:eq(4)").click(function(){ $("p").text("<strong>你最喜欢的水果是?</strong>"); }); //获取按钮的value值$("input:eq(5)").click(function(){ alert( $(this).val() ); }); //设置按钮的value值$("input:eq(6)").click(function(){ $(this).val("我被点击了!"); }); $("#address").focus(function(){ // 地址框获得鼠标焦点 var txt_value = $(this).val(); // 得到当前文本框的值 if(txt_value=="请输入邮箱地址"){ $(this).val(""); // 如果符合条件，则清空文本框内容 } });$("#address").blur(function(){ // 地址框失去鼠标焦点 var txt_value = $(this).val(); // 得到当前文本框的值 if(txt_value==""){ $(this).val("请输入邮箱地址");// 如果符合条件，则设置内容 } })$("#password").focus(function(){ var txt_value = $(this).val(); if(txt_value=="请输入邮箱密码"){ $(this).val(""); } });$("#password").blur(function(){ var txt_value = $(this).val(); if(txt_value==""){ $(this).val("请输入邮箱密码"); } })$("#address").focus(function(){ // 地址框获得鼠标焦点 var txt_value = $(this).val(); // 得到当前文本框的值 if(txt_value==this.defaultValue){ $(this).val(""); // 如果符合条件，则清空文本框内容 } });$("#address").blur(function(){ // 地址框失去鼠标焦点 var txt_value = $(this).val(); // 得到当前文本框的值 if(txt_value==""){ $(this).val(this.defaultValue);// 如果符合条件，则设置内容 } })$("#password").focus(function(){ var txt_value = $(this).val(); if(txt_value==this.defaultValue){ $(this).val(""); } });$("#password").blur(function(){ var txt_value = $(this).val(); if(txt_value==""){ $(this).val(this.defaultValue); } })//设置单选下拉框选中$("input:eq(0)").click(function(){ $("#single").val("选择2号"); });//设置多选下拉框选中$("input:eq(1)").click(function(){ $("#multiple").val(["选择2号", "选择3号"]); });//设置单选框和多选框选中$("input:eq(2)").click(function(){ $(":checkbox").val(["check2","check3"]); $(":radio").val(["radio2"]); }); //设置单选下拉框选中$("input:eq(0)").click(function(){ $("#single option").removeAttr("selected"); //移除属性selected $("#single option:eq(1)").attr("selected",true); //设置属性selected });//设置多选下拉框选中$("input:eq(1)").click(function(){ $("#multiple option").removeAttr("selected"); //移除属性selected $("#multiple option:eq(2)").attr("selected",true);//设置属性selected $("#multiple option:eq(3)").attr("selected",true);//设置属性selected });//设置单选框和多选框选中$("input:eq(2)").click(function(){ $(":checkbox").removeAttr("checked"); //移除属性checked $(":radio").removeAttr("checked"); //移除属性checked $("[value=check2]:checkbox").attr("checked",true);//设置属性checked $("[value=check3]:checkbox").attr("checked",true);//设置属性checked $("[value=radio2]:radio").attr("checked",true);//设置属性checked }); 遍历节点树
var $body = $("body").children();var $p = $("p").children();var $ul = $("ul").children();alert( $body.length ); // <body>元素下有2个子元素alert( $p.length ); // <p>元素下有0个子元素alert( $ul.length ); // <p>元素下有3个子元素for(var i=0;i< $ul.length;i++){ alert( $ul[i].innerHTML );}var $p1 = $("p").next();alert( $p1.html() ); // 紧邻<p>元素后的同辈元素var $ul = $("ul").prev();alert( $ul.html() ); // 紧邻<ul>元素前的同辈元素var $p2 = $("p").siblings();alert( $p2.html() ); // 紧邻<p>元素的唯一同辈元素$(document).bind("click", function (e) { $(e.target).closest("li").css("color","red"); })//parent$("input:eq(0)").click(function(){ resetStyle(); $('.item-1').parent().css('background-color', 'red'); });//parents$("input:eq(1)").click(function(){ resetStyle(); $('.item-1').parents('ul').css('background-color', 'red'); });//closest$("input:eq(2)").click(function(){ resetStyle(); $('.item-1').closest('ul').css('background-color', 'red'); });function resetStyle(){ $("*").removeAttr("style");}CSS-DOM
//获取<p>元素的color$("input:eq(0)").click(function(){ alert( $("p").css("color") ); });//设置<p>元素的color$("input:eq(1)").click(function(){ $("p").css("color","red") });//设置<p>元素的fontSize和backgroundColor$("input:eq(2)").click(function(){ $("p").css({"fontSize":"30px" ,"backgroundColor":"#888888"}) }); //获取<p>元素的高度$("input:eq(3)").click(function(){ alert( $("p").height() ); }); //获取<p>元素的宽度$("input:eq(4)").click(function(){ alert( $("p").width() ); }); //获取<p>元素的高度$("input:eq(5)").click(function(){ $("p").height("100px"); }); //获取<p>元素的宽度$("input:eq(6)").click(function(){ $("p").width("400px"); }); //获取<p>元素的的左边距和上边距$("input:eq(7)").click(function(){ var offset = $("p").offset(); var left = offset.left; var top = offset.top; alert("left:"+left+";top:"+top); });
