一、jQuery的向下遍历 <script src="../JS/Extend.js"></script><script src="../JS/my.js"></script><link type="text/css" rel="stylesheet" href="../CSS3/my.css"></head> <body> <div id="div1"><div id="div2"><p id="p1"><a>hello world</a></p></div> </div>#div1{width:500px;height:200px;border:3px solid coral; }#div2{width:400px;height:150px;margin-top:10px;margin-left:10px;border: 3px solid coral; }#p1{mar...
示例如下: <script>//函数: 反复执行的代码块//全局只有一个对象,防止全局变量污染var itcast = {getElen : {tag : function(tag){return document.getElementsByTagName(tag);},id : function(id){return document.getElementById(id);}},css : {addStyle : function(){},removeStyle : function(){},addClass : function(){}}}//调用itcast.getElen.tag(body)[0];</script>以上这篇封装获取dom元素的简单实例就是小编分享给大...
本文实例讲述了jQuery遍历DOM元素与节点方法。分享给大家供大家参考,具体如下: 一、向上遍历--祖先元素 ① $(selector).parent([filter]):返回selector匹配元素的直接父元素,方法可以接受一个过滤selector来过滤返回的父元素。 ② $(selector).parents([filter]):返回匹配元素的所有祖先节点,一直向上直到文档根元素html,方法可以接受一个过滤selector来过滤返回的祖先节点。 备注:parent与parents的区别,parent返回直接父节...
本文实例分析了jQuery添加删除DOM元素的方法。分享给大家供大家参考,具体如下: 介绍 DOM是Document Object Modeule的缩写,一般来说,DOM操作分成3个方面。 1、DOM Core DOM Core并不专属于javascript,任何一种支持DOM的程序设计语言都可以使用它,用途也远不止仅限于网页,也可以用来处理任何一种使用标记语言编写出来的文档,如XML。 例如:document,getElementsByTagName("form");//使用DOM Core来获取表单对象的方法。 2、H...
作为技术狂热分子的职业本能,看到一个技术产品的功能,总会忍不住想知道它是怎么被实现的。比如我每每看到别人网站一个很炫的界面或者很酷的功能,就忍不住打开了浏览器的控制台。。。 好,不扯远,说说当你想看到网站上某个元素绑定的事件函数的代码时应该怎么做吧。 查看原生绑定的事件函数代码 所谓原生就是通过addEventListener方法绑定到dom元素上。这个好办: 审查绑定事件的元素(对着它右键->审查元素)在弹出的Elements视...
在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式、内容等。如何获取要更新的元素,是首先要解决的问题。令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过): 1. 通过顶层document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法。如果页面上含...
一 获取元素的CSS大小 1.通过style内联获取元素的大小 代码如下: var box = document.getElementById(box); // 获得元素; box.style.width; // 200px; box.style.height; // 200px; // PS:style获取只能取到行内style属性的CSS样式中的宽和高,如果有,则获取;如果没有则返回空; 2.通过计算获取元素的大小代码如下: var style = window.getComput...
对于DOM元素,children是指DOM Object类型的子对象,不包括tag之间隐形存在的TextNode,而childNodes包括tag之间隐形存在的TextNode对象。 具体看一下针对children和childNodes在chrome环境下的测试: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body><div id="div1" class="div"><span id="s1" class="sp" lang="zh-cn"></span></div> </body> <script type="text/javascr...
jQuery中操纵元素属性的方法:attr(): 读或者写匹配元素的属性值.removeAttr(): 从匹配的元素中移除指定的属性.attr()方法 读操作attr()读操作. 读取的是匹配元素中第一个元素的指定属性值.格式: .attr(attributeName),返回值类型:String.读取不存在的属性会返回undefined. 注意选择器的选择结果可能是一个集合,这里仅仅获取的是集合中第一个元素的该属性值.看例子:代码如下: <!DOCTYPE html> <html> <head> <script type="tex...
本文实例讲述了jQuery创建DOM元素的使用技巧。分享给大家供大家参考。具体分析如下: 利用DOM方法创建元素节点,通常要将document.createElement()、document.createTextNode()、appendChild()配合使用,十分麻烦。 而jQuery使用$就可以直接创建DOM元素代码如下:var oNewP = $("<p>使用jQuery创建的内容</p>"); 以上代码等同于javascript代码如下:var oNewP2 = document.createElement("p"); var oText = document.createTextNode(...
利用DOM方法创建元素节点,通常要将document.createElement()、document.createTextNode()、appendChild()配合使用,十分麻烦。 而jQuery使用$就可以直接创建DOM元素代码如下: var oNewP = $("<p>使用jQuery创建的内容</p>");以上代码等同于javascript代码如下: var oNewP2 = document.createElement("p"); var oText = document.createTextNode("这是使用javascript方法创建的内容"); oNewP2...
近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: /**//* 动态创建DOM元素的相关函数支持 www.jcodecraeer.com */ /**//* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj==string?document.getElementById(obj):obj; } /**//* 获取某个元素的位置 @obj 该元素的DOM对象,或该元素的ID */...
让浏览器DOM元素最后加载的js方法 window.onload = =function() { a(); b(); }就在界面所有元素加载完后,执行a()方法和 b()方法,防止在界面加载一半就弹出对话框,结果背景是空白的
jQuery的属性操作非常简单,下面以一个a元素来说明属性的获取/设置/删除操作 代码如下:<body> <a>jquery.com</a> </body> 添加属性 $(a).attr(href, http://www.jquery.com) 添加多个属性 $(a).attr({href:http://www.jquery.com, title:jquery.com}) 获取属性 $(a).attr(href) class属性 addClass() 添加一个class hasClass() 判断是否有参数中指定的class removeClass() 移除一个class toggleClass() 如果参数中指定的class已...
如何一气呵成地,on the fly地操作DOM元素呢? 例如顺序执行【创建】-> 【修改】-> 【添加】三个动作。 由于jQuery支持链式操作,其实就是设计模式的builder模式,所以我们可以把三个操作串在一起来执行。 首先创建一个p元素,内容包含一个a元素。 代码如下:$(<p><a>jQuery</a></p>) 然后为a元素添加一个href属性 代码如下:$(<p><a>jQuery</a></p>).find(a).attr(href, http://www.jquery.com) 最后把新添加的p元素添加到body中...