锋利的jquery读书笔记---jquery的dom操作

来源：互联网发布：pingfangsc字体 mac版编辑：程序博客网时间：2024/05/14 14:19
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>jquery dom</title> <!--   引入jQuery --><script src="../../scripts/jquery.js" type="text/javascript"></script><script type="text/javascript"> 一、创建节点 var $li_1 = $("<li></li>");    //  创建一个<li>元素$li_1 = $("<li>香蕉</li>");//  创建一个<li>元素，包括元素节点和文本节点//“香蕉”就是创建的文本节点var $li_1 = $("<li title='香蕉'>香蕉</li>");//创建一个<li>元素//包括元素节点,文本节点和属性节点//其中title='香蕉' 就是创建的属性节点二、插入节点$parent.append($li_1);    // 添加到<ul>节点中，使之能在网页中显示$parent.append($li_2);    // 可以采取链式写法：$parent.append($li_1).append($li_2);  $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>元素里//注意：remove只是从网页中删除，在jQuery对象中，这个元素还是存在的，我们可以重新获取它var $li = $("ul li:eq(1)").detach(); //获取第二个<li>元素节点后，将它从网页中删除。$li.appendTo("ul");//romeve和datach都可以删除元素，都是返回删除的该元素，但是detach删除元素，可以保留元素之前的操作行为，如上面绑定的事件$("ul li:eq(1)").empty(); // 找到第二个<li>元素节点后，清空此元素里的内容四、复制节点$(this).clone().appendTo("ul"); // 复制当前点击的节点，并将它追加到<ul>元素$(this).clone(true).appendTo("ul"); // 注意参数true，复制节点的同时 复制其操作行为五、替换节点$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");  // 同样的实现： $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p"); 六、包裹节点$("strong").wrap("<b></b>");//每个strong标签外面都标上b标签 一个个包$("strong").wrapAll("<b></b>"); //把strong标签收集到一起，最外面包上b标签，strong标签有标签之间如果有其他元素会被排除到b标签之外$("strong").wrapInner("<b></b>"); //每个strong标签内部元素包上b标签七、属性操作$("p").attr("title","选择你最喜欢的水果.");//设置<p>元素的属性'title'  $("p").attr("title");//获取<p>元素的属性'title'$("p").removeAttr("title");//删除<p>元素的属性'title'  八、样式操作       $("p").attr("class")//获取样式     $("p").attr("class","high");//设置样式     $("p").addClass("another");//追加样式    $("p").removeClass(); //删除全部样式    //$("p").attr("class",''); //这个方法也可以删除//$("p").removeAttr("class"); //这个方法也可以//$("p").removeAttr("style"); //这个方法不行，它能删除由css添加上去的属性 $("p").removeClass("high");//删除指定样式    $("p").toggleClass("another");//重复切换样式  $("p").hasClass("another")//判断元素是否含有某样式$("p").is(".another")//判断元素是否含有某样式   九、设置和获取HTML,文本和值$("p").html()//获取<p>元素的HTML代码  $("p").text() //获取<p>元素的文本$("p").html("<strong>你最喜欢的水果是?</strong>");//设置<p>元素的HTML代码$("p").text("你最喜欢的水果是?"); //设置<p>元素的文本$("p").text("<strong>你最喜欢的水果是?</strong>"); //设置<p>元素的文本(带html)$(this).val()//获取按钮的value值$(this).val("我被点击了!");//设置按钮的value值   /* 常见下拉框<select id="single">  <option>选择1号</option>  <option>选择2号</option>  <option>选择3号</option></select>多选下拉框<select id="multiple" multiple="multiple" style="height:120px;">  <option selected="selected">选择1号</option>  <option>选择2号</option>  <option>选择3号</option>  <option>选择4号</option>  <option selected="selected">选择5号</option></select> */ 单选下拉框选中方法1：$("#single").val("选择2号");//设置单选下拉框选中选中方法2：$("#single option:eq(1)").attr("selected",true); //设置第二个选项选中取消选中：$("#single option").removeAttr("selected");  //取消所有属性的选择状态    多选下拉框  选中方法1：  $("#multiple").val(["选择2号", "选择3号"]);//设置多选下拉框选中    选择方法2：  $("#multiple option:eq(2)").attr("selected",true);//设置第三个属性选中$("#multiple option:eq(3)").attr("selected",true);//设置第四个属性选中  取消选中：    $("#multiple option").removeAttr("selected");  //取消所有属性的选择状态设置单选框和多选框选中   选中方法1： $(":checkbox").val(["check2","check3"]);$(":radio").val(["radio2"]);选中方法2：$("[value=check2]:checkbox").attr("checked",true);//设置属性checked$("[value=check3]:checkbox").attr("checked",true);//设置属性checked$("[value=radio2]:radio").attr("checked",true);//设置属性checked    取消选中：  $(":checkbox").removeAttr("checked"); //移除属性checked$(":radio").removeAttr("checked"); //移除属性checked    小案例：  $(function(){      $("#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);// 如果符合条件，则设置内容}   }});十、遍历节点树$("p").children()$("p").next();//注意next里面加参数的话，如next('div')会判断下一个是不是div，如果是就返回这个元素，如果不是也不会继续向后查找，就是找不到了，并不是再往后查找，直到找到下一个div$("ul").prev();$("p").siblings();//找指定的一个最近的祖先元素(包括自身) , 必须要接收一个参数 ( 只能选择到一个唯一的元素 )$(e.target).closest("li") $('.item-1').parents('ul')十一、CSS-DOM$("p").css("color")$("p").css("color","red")//设置<p>元素的color$("p").css("color","")//删除<p>元素的color//设置<p>元素的fontSize和backgroundColor$("p").css({"fontSize":"30px" ,"backgroundColor":"#888888"})$("p").removeAttr("style");//删除通过css添加的所有样式$("p").removeAttr("class");//删除由attr('class','...') addClass('....')添加的样式$("p").height()//获取<p>元素的高度$("p").width()//获取<p>元素的宽度$("p").height("100px");//设置<p>元素的高度$("p").width("400px");//设置<p>元素的宽度//获取<p>元素的的左边距和上边距var offset = $("p").offset();var left = offset.left;var top =  offset.top;alert("left:"+left+";top:"+top); </script></head><body><strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong><div>中间的元素</div><strong title="选择你最喜欢的水果." >你最喜欢的水果是?</strong><p title="选择你最喜欢的水果." >你最喜欢的水果是?</p><ul>  <li title='苹果'>苹果</li>  <li title='橘子'>橘子</li>  <li title='菠萝'>菠萝</li></ul></body></html>
0 0