parentNode和parentElement功能一样，childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持 示例： "parentNode" 常用来获取某个元素的父节点. 把 parentNodes 理解为容器, 在容器中有个子节点 ，如下：<div id="parent"> <b id="child">My text</b> </div>在上面的代码中, 你看到把"爹"作为一个 div 容器, 该容器中有个"孩子", 就是粗体的...
本文实例讲述了javascript与jquery动态创建html元素的方法。分享给大家供大家参考，具体如下： 1.javascript创建元素 创建select var select = document.createElement("select"); elect.options[0] = new Option("加载项1", "value1"); select.options[1] = new Option("加载项2", "value2"); select.size = "2"; testDiv.appendChild(select);创建div var openDiv = document.createElement("div"); openDiv.id = "div3D"; openD...
用js动态添加html元素,以及属性的简单实例 function test(){//创建节点var lswt_2=document.createElement("div");//设置节点idlswt_2.id=lswtColse;//设置节点属性lswt_2.style.width=11px; lswt_2.style.height=10px; lswt_2.style.top=0px; lswt_2.style.right=0px; lswt_2.style.position=absolute; lswt_2.style.background=url(7.gif); lswt_2.style.backgroundRepeat=no-repeat;//为这个节点添加点击时间lswt_4.addEventLis...
JavaScript中取得元素的方法有三种：分别是： 1、getElementById() 方法：通过id取得HTML元素。 2、getElementsByName()方法：通过name取得元素，是一个数组。 3、getElementsByTagName()方法：通过HTML标签取得元素，是一个数组。 如果要取得值可以使用value，如：var x=document.getElementById("id").value; 方法一：getElementById() 方法 可返回对拥有指定 ID 的第一个对象的引用。 语法：document.getElementById(id) 在 DOM...
对于js来说，我想每一个刚接触它的人都应该会抱怨：为什么没有一个通过class来获取元素的方法。尽管现在高版本的浏览器已经支持getElementsByClassName()函数，但是对于低版本浏览器来说，还是无法兼容，在脱离其他库的时候，还是得自己封装一个方法。 方法一 function getByClass1(parent, cls){var res = []; //存放匹配结果的数组var ele = parent.getElementsByTagName(*);for(var i = 0; i < ele.length; i++){if(ele[i].cla...
wrap()函数用于在每个匹配元素外部包裹指定的HTML结构。 与该函数相对的是unwrap()函数，用于当前匹配元素的父元素(只移除父元素，其内部节点全部保留)。 该函数属于jQuery对象(实例)。 语法 jQueryObject.wrap( wrapper )参数 wrapper String/Element/jQuery/Function类型用于包裹匹配元素的节点。 如果参数wrapper为字符串，则将其视作jQuery选择器或html字符串，jQuery会自行判断。 jQuery 1.4 新增支持：参数wrapper可以为函数...
在实际开发中会遇到要给动态生成的html元素绑定触发事件的情况： <div id="testdiv"><ul></ul> </div> 假设我们要给ul动态添加的<li>绑定click事件形成如下结果<div id="testdiv"><ul><li name="apple">apple</li><li name="pear">pear</li></ul> </div> <script>function test(name){alert("Im "+name);}//做法如下:$("#testdiv ul").on("click","li", function() {//test($(this).attr("name"));//do something here });//主动触...
第一种情况就是宽高都写在样式表里，就比如#div1{width:120px;}。这中情况通过#div1.style.width拿不到宽度，而通过#div1.offsetWidth才可以获取到宽度。 第二种情况就是宽和高是写在行内中，比如style="width:120px;"，这中情况通过上述2个方法都能拿到宽度。 小结，因为id.offsetWidth和id.offsetHeight无视样式写在样式表还是行内，所以我们获取元素宽和高的时候最好用这2个属性。注意如果不是写在行内style中的属性都不能通过i...
这是一款基于HTML5的焦点图动画，它和其他焦点图不同的地方在于，它播放的不仅仅是图片，而是可以自定义控制的网页元素。它不仅在图片间切换有过渡动画效果，而且在切换时图片中的元素也将出现动画效果，比如图中的文字移动、打散、重新组合等，这款HTML5动画图片播放器算得上是高端大气上档次。 效果图：HTML代码 <div class="parallax-bg" id="slider-wrap"><div class="slider parallax-bg" id="slider"><div class="slider-sec...
本文实例讲述了jQuery对html元素的取值与赋值方法。分享给大家供大家参考，具体如下： Jquery给基本控件的取值、赋值 TEXTBOX: var str = $(#txt).val(); $(#txt).val("Set Lbl Value"); //文本框，文本区域： $("#text_id").attr("value",);//清空内容 $("#text_id").attr("value",test);// 填充内容LABLE: var str = $(#lbl).text(); $(#lbl).text("Set Lbl Value"); var valradio = $("input[@type=radio][@checked]").val()...
JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。 实例<div id="div1"> <p id="p1">This is a paragraph.</p> <p id="p2">This is another paragraph.</p> </div><script> var para=document.createElement("p"); var node=document.createTextNode("This is new."); para.appendChild(node);var element=document.getElem...
如果我要创建一个div元素。 1.使用DOM对象创建： 使用document.createElement(div)方法创建元素。 2.使用JQuery创建： 使用$(<div>通过JQuery创建的新元素</div>)的方法直接创建元素。 如果需要将id是‘div2js的div元素删除。 1.使用DOM对象 首先需要找到被删元素的父元素，通过父元素将其需要删除的子元素删除。 var el = document.getElementById(div2js);el.parentNode.removeChild(el);2.使用JQuery 直接找到并删除。 $(#div2...
有时，你需要Post数据到另一个页面上，那么你就需要构建一个Form表单 <form id="postform" name="postform" method="post"> <input name="msg" value=""/> </form> 代码如下: document.write("<form ..." //document.write("<iframe src=\"about:blank\" name=\"hiddenFrame\" id=\"hiddenFrame\" width=\"0\" height=\"0\" frameborder=\"0\"></iframe>");用如下js提交不起作用，因为打到页面上的form不是一个对象，而是一个字符串...
代码很简单，效果非常棒，直接给大家上源码： html <div><div class="money-input">定投金额 :<div class="input-rela"><input type="text" placeholder="2000"/><span>元</span></div></div><div class="money-line"><img index="js-minus-a" class="js-minus" src="../images/minus.png" alt=""/><img id="dragImg" class="red-rela" src="../images/money-dw.png" alt="" onDrag="drag(event)" onDragEnd="dragEnd(event)" styl...
本文实例讲述了jQuery使用append在html元素后同时添加多项内容的方法。分享给大家供大家参考。具体分析如下： 下面的代码可以同时在文本段落后添加多项内容 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"> </script> <script> function appendText() { var txt1="<p>Text.</p>"; // Create text with HTML var txt2=$("<p></p>").text("Text."); // Create text with jQuery var txt3=document.createElement("p"...