DOM能够做什么样,js和jquery对dom节点的操作

XPath是一个好工具

2014/02/23 · CSS · 3 评论 · CSS

本文由 伯乐在线 - 杨帅 翻译。未经许可,禁止转载!
英文出处:rapgenius。欢迎加入翻译组。

我第一次接触XPath是在2007年,但最近才开始对它产生兴趣。以前在大多数情况下我都会尽量避免使用它,而当我不得不尝试使用它时,每次都以失败告终。那时XPath对我来说并没有什么意义。

但是后来我遇到了一个特殊的解析问题(对CSS选择器来说过于复杂,而用手工代码的话又过于简单),于是我决定再尝试一次XPath。令我感到惊喜的是,这的确行得通,而且很有用。

以下是我的亲身经历

DOM节点信息
每个DOM节点都保存了关于该节点的一些信息,我们来看看如何访问这些信息。
nodeName、nodeValue和nodeType
同样,按照字面意思:nodeName表示节点名称,nodeValue表示节点值,nodeType则为节点类型。每个DOM节点都包含这些信息,我们可以很方便地通过JavaScript来访问这些属性。下面我们就来看一个使用这些属性的一个例子。
应用实例
HTML代码:
<div>
  <p id="test">test文字</p>
</div>

鉴于我学过一点基础知识,所以这里做一些知识点归纳。

复制代码 代码如下:

我遇到的问题

假设你管理一个歌词网站,为了维持一致的阅读体验,你要收集每行歌词的第一个单词。如果歌词使用纯文本格式保存,那么可以直接用下面的代码来实现。

JavaScript

lyrics.gsub!(/^./) { |character| character.upcase }

1
lyrics.gsub!(/^./) { |character| character.upcase }

但是如果歌词被保存肯html格式就没有这么简单了,因为dom结构本身并没有”行”的概念,所以没有办法使用一个简单的正则表达式来识别行。

所以我们要做的第一件事情是定义什么是dom结构中的“行的起点”,下面是两个简单的例子:

  • <p>标签中第一个文本节点
  • <br>后面的第一个文本节点

就像下面这样:

XHTML

<p>This is the beginning of a line.<br>This is too.</p>

1
<p>This is the beginning of a line.<br>This is too.</p>

但是除此之外我们可能还要处理嵌套的行内元素:

XHTML

<p><em>This</em> is the beginning of a line. <strong>This is not.</strong></p>

1
<p><em>This</em> is the beginning of a line. <strong>This is not.</strong></p>

JavaScript代码
<script type="text/javascript">
function getName(){
        var x =document.getElementById("test");
        alert(x.nodeName);
}
function getValue(){
        var x =document.getElementById("test");
        alert(x.nodeValue);
}
function getType(){
        var x =document.getElementById("test");
        alert(x.nodeType);
}
</script>

 

<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#Button1').click(function () {
// var ha = '<p>a</p>';
// $('div').append(ha);
//1
// var w = '<a href="#">f4</a>'
// $('div').append(w);
// var sele = '<select><option>1</option><option>2</option><option>3</option></select>'
// $('div').append(sele);
})
})
//2var pstr = '<p><b><i>白日依山尽</br>黄河入海流</br>欲穷千里目</br>更上一层楼</i></b></p>'; $('div').append(pstr);将其改成用js来写,效果一样
function ha() {
// var p= document.createElement('p');
// var b = document.createElement('b');
// var i = document.createElement('i');
// var neirong1 = document.createTextNode('白日依山尽');
// var br1=document.createElement('br')
// var neirong2 = document.createTextNode('黄河入海流');
// var br2 = document.createElement('br')
// var neirong3 = document.createTextNode('欲穷千里目');
// var br3 = document.createElement('br')
// var neirong4 = document.createTextNode('更上一层楼');
// i.appendChild(neirong1);
// i.appendChild(br1);
// i.appendChild(neirong2);
// i.appendChild(br2);
// i.appendChild(neirong3);
// i.appendChild(br3);
// i.appendChild(neirong4);
//
// b.appendChild(i);
// p.appendChild(b);
// document.getElementById('div1').appendChild(p);
}
</script>
</head>
<body>
<input id="Button1" type="button" value="创建节点" />
<input id="Button2" type="button" value="2" onclick="ha()" />
<div id="div1"></div>

常规的解决方案

我想到的第一个解决方法是用Ruby写一个方法来扫描dom中所有相关的部分并递归找出所有符合条件的节点。其中用到了几个轻量级的css选择器:

JavaScript

def each_new_line(document) document.css('p').each { |p| yield first_text_node(p) } document.css('br').each { |br| yield first_text_node(br.next) } end def first_text_node(node) if node.nil? then nil elsif node.text? then node elsif node.children.any? then first_text_node(node.children.first) end end

1
2
3
4
5
6
7
8
9
10
11
def each_new_line(document)
  document.css(&#039;p&#039;).each { |p| yield first_text_node(p) }
  document.css(&#039;br&#039;).each { |br| yield first_text_node(br.next) }
end
 
def first_text_node(node)
  if node.nil? then nil
  elsif node.text? then node
  elsif node.children.any? then first_text_node(node.children.first)
  end
end

这是一个比较合理的解决方案,但是11行的代码似乎有点儿长。有点儿杀鸡用牛刀的感觉,仅仅为了获得dom的节点而用上Ruby的迭代器和条件语句感觉有点儿犯不上。应该有更好的办法吧?

实际效果:
test文字

1,一个轻量级的JS库,可以极大的简化JS操作和代码量。

您可能感兴趣的文章:

  • JavaScript 节点操作 以及DOMDocument属性和方法
  • JavaScript DOM节点操作方法总结
  • JS实现DOM删除节点操作示例
  • JS实现的DOM插入节点操作示例
  • JavaScript DOM节点操作实例小结(新建,删除HTML元素)
  • javascript 获取HTML DOM父、子、临近节点
  • javascript获取dom的下一个节点方法
  • Js 获取HTML DOM节点元素的方法小结
  • JavaScript中对DOM节点的访问、创建、修改、删除
  • JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】

终于说到正题了(XPath)

XPath有一下几个原因容易让人困惑。第一点是网上几乎没有可以参考的东西(W3Schools!就不用想了)。RFC已经是我找到的最好的文档了。

第二点是XPath看上去有点儿像CSS。方法名里就有“path”,所以我总是假设XPath的表达式中的 / 和CSS选择器中的 > 是一个意思。

JavaScript

document.xpath('//p/em/a') == document.css('p > em > a')

1
document.xpath(&#039;//p/em/a&#039;) == document.css(&#039;p &gt; em &gt; a&#039;)

其实,XPath表达式包含了许多简写,如果我们想要弄清楚上面代码运行时究竟发生了什么就必须要弄清楚这些简写。下面是用全拼写出来的相同的表达式:

JavaScript

/descendant-or-self::node()/child::p/child::em/child::a/

1
/descendant-or-self::node()/child::p/child::em/child::a/

这个XPath表达式和上面的CSS选择器的作用是一样的,但并不像我之前假设的那样。一个XPath表达式是由一个或多个被 / 分割的定位步(location steps)组成。表达式中的第一个 / 代表了文档(document)的根节点。每个定位步都表明了已经被匹配的节点并传达一下三条信息:

我想从当前的位置移动到哪?

答案是轴(Axis),是可选的。默认的轴是child,表示“当前被选中节点的所有子节点”。在上面的例子中,descendant-or-self是第一个定位部的轴,表示“所有当前被选中的节点和他们所有的子节点”。大部分XPath规范中定义的轴都有像“descendant-or-self”这样的语义化的名字。

我想要选择什么类型的节点?

选择的内容是由节点测试来指定的,这也是每个定位步中不可缺少的部分。在我们之前的例子中,node()匹配的是全部类型;text()匹配到的是文本节点;element()只能匹配到元素,并必须指明节点名称(像p,em等),节点名称必填。

可能增加额外的过滤器吗?

也许我们只想选择当前所有节点的第一个子元素或只想选则有href属性的<a>标签。对于此类断言(assertion),我们可以使用谓词(predicates)根据额外的遍历树(additional tree traversals)来过滤出符合条件的节点。这样我们就可以根据这些节点的属性(children, parents, or siblings)来过滤出符合条件的节点。

我们的例子中没有谓词,现在让我们来加一个只匹配有href属性的<a>标签:

JavaScript

/descendant-or-self::node()/child::p/child::em/child::a[attribute::href]

1
/descendant-or-self::node()/child::p/child::em/child::a[attribute::href]

虽然谓词看上去很像一个括号中的定位步,但是谓词中的“节点测试(node test)”部分有比定位步中的节点测试更多的功能。

getName()
getValue()
getType()

2,语法实例:

换一个角度来看XPath

与一个增强型的CSS选择器相比,XPath与JQuery的便利更相似。例如,我们可以把之前的XPath表达式换成JQuery的形式:

JavaScript

$(document).find('*'). children('p'). children('em'). children('a').filter('[href]')

1
2
3
4
$(document).find('*').
  children('p').
  children('em').
  children('a').filter('[href]')

上面的代码中,我们用到的JQuery的方法与轴的作用是一样的:

JavaScript

.children()相当于轴中的child,.find()相当于descendant。

1
.children()相当于轴中的child,.find()相当于descendant。

JQuery方法中的选择器相当于XPath中的节点测试,只可惜jQuery不允许选择文本节点。

jQuery中的.filter()方法相当于XPath中的谓词,.children(’em’)的作用是匹配所有匹配到的<p>标签中的所有<em>子元素。这样看来,XPah要比jQuery强大得多。

从例子中可以发现:一个p标签的nodeName是P,尽管在XHMTL中我们把段落写作小些的p,该属性仍然为大写字母。它的nodeValue是null,而并不是它所包含的文本,这是因为文本本身也是一个节点,而文本节点的nodeValue才是文字。
最后,nodeType是“1”。它的意思是元素节点(我们知道,p是一个HTML元素)。其它重要的DOM节点类型:
2 —— 属性节点
3 —— 文本节点

       在实际运用中可以慢慢领会。       

让我们回到识别行首的问题

现在我们对XPath的工作原理已经有了深入的了解,下面来用它解决之前提到的问题。首先我们先把问题简化一下,只寻找每段的第一个文本节点:

JavaScript

/descendant-or-self::node()/child::p/child::text()[position()=1]

1
/descendant-or-self::node()/child::p/child::text()[position()=1]

上面的代码的作用依次是:

  • 1.寻找文档中的所有节点
  • 2.寻找这些节点的所有为<p>的子节点
  • 3.寻找这些<p>的文本子节点
  • 4.只保留这些节点中符合条件的第一个元素

注意position() function 在代码中表示的是每个<p>中的第一个文本子节点而不是整个文档中的第一个<p>的文本子节点。

接下来,为了找到<p>中被嵌套得很深的文本节点,我们把child换成descendant

JavaScript

/descendant-or-self::node()/child::p/descendant::text()[position()=1]

1
/descendant-or-self::node()/child::p/descendant::text()[position()=1]

接下来是识别换行的问题,首先我们给这一长串代码折下行(因为太长了),XPath是允许这样做的。加入换行的识别后,代码如下:

JavaScript

/descendant-or-self::node()/ child::br/ following-sibling::node()[position=1]/ descendant-or-self::text()[position()=1]

1
2
3
4
/descendant-or-self::node()/
child::br/
following-sibling::node()[position=1]/
descendant-or-self::text()[position()=1]

每一行代码的意思分别是:

  • 1.找到所有节点
  • 2.找到到这些节点的<br>子节点
  • 3.找到这些<br>的下一个同级节点
  • 4.如果上面取到的不是文本节点,则取它们的子节点中的第一个文本节点

这样一来我们就可以同时选出<p>中和<br>后的新的一行。下面我们以上的代码合并成一个表达式:

JavaScript

(/descendant-or-self::node()/child::p| /descendant-or-self::node()/child::br/following-sibling::node()[position=1])/ descendant-or-self::text()[position()=1]

1
2
3
(/descendant-or-self::node()/child::p|
/descendant-or-self::node()/child::br/following-sibling::node()[position=1])/
descendant-or-self::text()[position()=1]

最后我们把简写替换进去:

JavaScript

(//p|//br/following-sibling::node()[position=1])/ descendant-or-self::text()[position=1]

1
2
(//p|//br/following-sibling::node()[position=1])/
descendant-or-self::text()[position=1]

这样我们就把一个复杂的概念用一个简单的表达式表示出来了。如果我们想加入更多的对行的操作,只需要往实现匹配的代码中加入更多的元素名称就可以了。

8 —— 注释节点

DOM信息nodeType的应用
本文介绍了使用DOM节点的nodeType属性来过滤出特定类型节点的方法。并且举了一个统计文档内所有元素节点的实例。
使用DOM时一个很奇怪(也很恼人)的情况就是连代码中的换行都可能会被视为节点。以下面的HTML代码为例。
HTML代码
代码如下,我们可以清楚地看到div节点内只有一个段落。
<div id="test">
        <p>我是测试段落</p>
</div>
<div id="result"> </div>
JavaScript代码
之后我们使用下面的JavaScript代码来显示id为test的div的子节点。首先,我们使用getElementById获得id为test的节点。之后使用childNodes获得它的子结点。最后在id为result的节点中显示这些子结点的节点名称和节点类型。
<script type="text/javascript">
function test(){
        var str = "";
        var nodes =document.getElementById("test").childNodes;
        for( var i = 0;i <nodes.length; i ){
               str = nodes[i].nodeName;
               str = ":";
               str = nodes[i].nodeType;
               str = "<br/>";
        }
        document.getElementById("result").innerHTML= str;
}
</script>
nodeType的应用
点击下面的按钮就可以看到您所使用的浏览器认为这个div有几个子结点。
test()
我是测试段落
 
在FireFox下,得到如下的结果:
#text:3
P:1
#text:3
在IE下,得到如下结果:
P:1
可见,在FireFox中,代码中的换行也被认为是一个类型为1,名字为#text的节点。但是通常我们对代码中的换行并不感兴趣。这时我们就可以使用nodeType来过滤掉这类不需要的元素。使用下面的JS代码就可以实现了。
for( var i = 0;i < nodes.length; i ){
        if(nodes[i].nodeType == 1){
        //代码,只有在节点为元素节点的时候才执行
        }
}
遍历文档所有的元素节点www.2cto.com
下面我们在来看一段使用nodeType的JS代码。它的功能是遍历文档中所有的元素节点,并且统计元素节点的总数。当然我们以可以修改代码来对这些元素节点做任何操作。JavaScript代码如下:
<script type="text/javascript">
function countElements(node){
        var total = 0;
        if(node.nodeType == 1){ total =1;}
        var children = node.childNodes;
        for(var i = 0;i <children.length; i ){
               total =countElements(children[i]);
        }
        return total;
}
function test2(){
        var elementsCount =countElements(document);
        alert(elementsCount);
}
</script>
test2()
点击上面的按钮就可以看到这个网页的总元素节点数了

======================================================================================================
修改DOM——innerHTML
本节介绍使用innerHTML来访问以及修改HTML DOM的方法。
我们之前已经了解到一些查询DOM节点的函数,例如getElementById和getElementsByTagName。但是我们不仅可以访问DOM节点,更可以改变它们,甚至改变整个节点树的结构。下面我们就来看看改变DOM的最简单的方法——innerHTML。
innerHTML的意思就是“里面的HTML”,就像它的名字一样容易理解,使用它也是异常的简单。我们先来看一个例子。
访问innerHTML实例代码
<div id="test">
        <p>我是测试段落。</p>
</div>
效果如下:
我是测试段落。
test() ,点击这个按钮就可以显示出div的innerHTML,它调用的JS代码如下:
<script type="text/javascript">
function test(){
        alert(document.getElementById("test").innerHTML);
}
</script>
修改innerHTML实例代码
给元素的innerHTML赋值就可以改变元素的内容了,同样是上面的div,我们创建另外一段代码来改变它的内容:
<script type="text/javascript">
function testW(){
        var str = "<p>面目全非!¥%……&*()</p>";
        document.getElementById("test").innerHTML= str;
}
</script>
testW() ,点击这个按钮就可以执行上面的代码,将第一个例子中div的内容改变。
 
删除DOM节点——removeChild
本节介绍了如何使用removeChild从文档中删除DOM节点,举出一个简单例子的同时还简单介绍了该函数的返回值。
上一节我们看了如何使用innerHTML来修改DOM,而使用removeChild函数则可以删除文档中的指定节点。我们仍然使用一个例子来说明该函数的使用方法。
HTML代码
<div id="test">
        <p>我是将要被删除的节点</p>
</div>
实例JavaScript代码
<script type="text/javascript">
function remove(){
        var test =document.getElementById("test");
        var children = test.childNodes;
        for(i=0;i<children.length;i ){
               test.removeChild(children[i]);
        }
}
</script>
删除节点示例
我是将要被删除的节点
remove() ,点击这个按钮就会将上面div的子结点全部删除。
从上面的JS代码可以看到,使用removeChild的格式为:
父节点.removeChild(子结点)
removeChild的返回值
removeChild删除节点后会返回被删除节点的引用,这样当我们以后再想重新将它添加到文档中,或者是对它进行其它操作的时候就可以使用这个引用了。例如下面的代码段:
var removed = xxx.removeChild(xxxx);
则removed就是被删除的节点,可以在后面的代码中使用。
添加DOM节点
本节介绍使用标准的DOM方法向文档中添加节点,用到了createElement、createTextNode以及appendChild等方法。
前面我们通过innerHTML来改变文档的内容,当然也可以用它来添加节点。下面我们来看另外一种想文档中添加节点的方式——使用标准的DOM方法。
使用DOM方法修改文档比使用innerHTML要麻烦一些,我们先来看一段示例HTML代码:
<div id="test" style="border:1pxsolid"></div>
使用DOM方法添加一个段落节点的思路如下:
创建一个p节点
穿件一个文本节点,并且添加到p节点中
将p节点添加到div中
实例JavaScript代码
按照上面的思路我们得出如下的JS代码:
<script type="text/javascript">
function test(){
        var test =document.getElementById("test");
        var para = document.createElement("P");
        var text =document.createTextNode("要添加的文本");
        para.appendChild(text);
        test.appendChild(para);
}      
</script>
添加节点的效果
下面就是原来的div,由于没有内容,我们只能看到边框。
添加节点 ,点击这个按钮就可以运行上面的代码。可以看到上面的div里多出了我们创造的段落节点。
代码解释
首先,我们用到了var para =document.createElement("P");该语句创建了一个段落节点,但是它并不会马上出现在文档中。要创建其它节点,只需要吧传递给该函数的字符串参数修改一些即可,例如document.createElement("DIV")。
var text = document.createTextNode("要添加的文本");一句创建了一个文本节点。
para.appendChild(text);将text作为子结点添加到para这个段落节点上。很容易看出,appendChild的调用语法如下:父节点.appendChild.(子结点)。
最后一句test.appendChild(para);则将段落节点para添加到test这个div节点上,由于test节点原来就是文档的一部分,这一句会造成文档的更新,也就是我们会看到段落文字被添加到了div节点里。

摘自 刘海闯的专栏

每个DOM节点都保存了关于该节点的一些信息,我们来看看如何访问这些信息。 nodeName、nodeValue和nodeType 同样,按照字面意思:...

[python] 
$(this).hide() 
演示jQueryhide()函数,隐藏当前的HTML元素。 
$("#test").hide() 
演示jQueryhide()函数,隐藏id="test"的元素。 
$("p").hide() 
演示jQueryhide()函数,隐藏所有<p>元素。 
$(".test").hide() 
演示jQueryhide()函数,隐藏所有class="test"的元素。 
 
$("p.test").hide()-隐藏所有class="test"的段落。 

我们究竟能从中获得什么?

既然我们能用相对易懂的Ruby来实现为什么还要选择XPath呢?

大多数情况下,Ruby是用来编写高层代码的,例如商业逻辑,整合应用组件,描述复杂的领域模型。从中可以看出最好的Ruby代码是用来描述意图而非用于实现。所以用Ruby来做一些低水平或与应用无关的事情(遍历dom树来找指定属性的节点)让人蛋疼。

XPath的其中一个优势是它的速度:XPath的遍历是通过libxml实现的,而原生代码的速度是非常快的。对于我上面举的例子,与Ruby的实现相比,XPath实际上要慢得多。我猜导致这个情况的原因是对于<br>标签的下一个元素的查找。因为在这个动作中实际上是先筛选出了<br>后面的所有与之同级的元素然后才过滤出其中的第一个。

所以XPath快慢与否取决于你的使用方式,但是上手有点儿难。这是一个专门用来让你使用简洁的惯用表达式来遍历dom的工具。

赞 收藏 3 评论

$(this).hide()
演示jQueryhide()函数,隐藏当前的HTML元素。
$("#test").hide()
演示jQueryhide()函数,隐藏id="test"的元素。
$("p").hide()
演示jQueryhide()函数,隐藏所有<p>元素。
$(".test").hide()
演示jQueryhide()函数,隐藏所有class="test"的元素。

关于作者:杨帅

图片 1

(新浪微博:@JAVA程序员杨帅) 个人主页 · 我的文章

图片 2

$("p.test").hide()-隐藏所有class="test"的段落。
3,语法基础

       jQuery语法是为HTML元素的选取编制的,可以对元素执行某些操作。

[python] 
基础语法是:$(selector).action() 
美元符号定义jQuery 
选择符(selector)“查询”和“查找”HTML元素 
jQuery的action()执行对元素的操作 

基础语法是:$(selector).action()
美元符号定义jQuery
选择符(selector)“查询”和“查找”HTML元素
jQuery的action()执行对元素的操作
4,注意

       所有jQuery函数位于一个documentready函数中
      [python] 
$(document).ready(function(){ 
        --- jQuery functions go here ---- 
            }); 

$(document).ready(function(){
   --- jQuery functions go here ----
   });   防止网页没有加载完就运行,出现无法找到的标签定义等等。

5,jQuery元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML元素进行选择。

[python] 
jQuery元素选择器 
jQuery使用CSS选择器来选取HTML元素。 
$("p")选取<p>元素。 
$("p.intro")选取所有class="intro"的<p>元素。 
$("p#demo")选取id="demo"的第一个<p>元素。 
jQuery属性选择器 
jQuery使用XPath表达式来选择带有给定属性的元素。 
$("[href]")选取所有带有href属性的元素。 
$("[href='#']")选取所有带有href值等于"#"的元素。 
$("[href!='#']")选取所有带有href值不等于"#"的元素。 
$("[href$='.jpg']")选取所有href值以".jpg"结尾的元素。 
jQueryCSS选择器 
jQueryCSS选择器可用于改变HTML元素的CSS属性。 

jQuery元素选择器
jQuery使用CSS选择器来选取HTML元素。
$("p")选取<p>元素。
$("p.intro")选取所有class="intro"的<p>元素。
$("p#demo")选取id="demo"的第一个<p>元素。
jQuery属性选择器
jQuery使用XPath表达式来选择带有给定属性的元素。
$("[href]")选取所有带有href属性的元素。
$("[href='#']")选取所有带有href值等于"#"的元素。
$("[href!='#']")选取所有带有href值不等于"#"的元素。
$("[href$='.jpg']")选取所有href值以".jpg"结尾的元素。
jQueryCSS选择器
jQueryCSS选择器可用于改变HTML元素的CSS属性。
下面的例子把所有p元素的背景颜色更改为红色:

实例:

        $("p").css("background-color","red");

 

6,jQuery名称冲突

           jQuery使用$符号作为jQuery的简介方式。

           某些其他JavaScript库中的函数(比如Prototype)同样使用$符号。

           jQuery使用名为noConflict()的方法来解决该问题。

                varjq=jQuery.noConflict(),帮助您使用自己的名称(比如jq)来代替$符号。

7,jQuery事件
        下面是jQuery中事件方法的一些例子:

Event函数
 绑定函数至
 
$(document).ready(function)
 将函数绑定到文档的就绪事件(当文档完成加载时)
 
$(selector).click(function)
 触发或将函数绑定到被选元素的点击事件
 
$(selector).dblclick(function)
 触发或将函数绑定到被选元素的双击事件
 
$(selector).focus(function)
 触发或将函数绑定到被选元素的获得焦点事件
 
$(selector).mouseover(function)
 触发或将函数绑定到被选元素的鼠标悬停事件
 
注意点:HTML元素默认是静态定位,且无法移动。如需使元素可以移动,请把CSS的position设置为relative或absolute。

例子:

[html] 
<scripttypescripttype="text/javascript"> 
$(document).ready(function(){ 
$("#start").click(function(){ 
$("#box").animate({left:"100px"},"slow"); 
$("#box").animate({fontSize:"3em"},"slow"); 
}); 
}); 
</script> 
<html> 
<head> 
<scripttypescripttype="text/javascript"src=" 
/jquery/1.4.0/jquery.min.js"></script> 
<scripttypescripttype="text/javascript"> 
$(document).ready(function(){ 
$("#start").click(function(){ 
$("#box").animate({left:"100px"},"slow"); 
$("#box").animate({fontSize:"3em"},"slow"); 
}); 
}); 
</script> 
</head> 
<body> 
<h2>Thisis a heading</h2> 
<pidpid="box">This is a paragraph.</p> 
<p>Thisis another paragraph.</p> 
<buttonidbuttonid="start">Click me</button> 
<p> 
<button>Click me2</button> 
</p> 
</body> 
</html> 

<scripttype="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>
<html>
<head>
<scripttype="text/javascript"src="
/jquery/1.4.0/jquery.min.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>
</head>
<body>
<h2>Thisis a heading</h2>
<pid="box">This is a paragraph.</p>
<p>Thisis another paragraph.</p>
<buttonid="start">Click me</button>
<p>
<button>Click me2</button>
</p>
</body>
</html>
我们可以通过以上例子测试一下,发现要想移动Html元素做出效果,需要设置position属性。

8,jQuery效果

函数
 描述
 
$(selector).hide()
 隐藏被选元素
 
$(selector).show()
 显示被选元素
 
$(selector).toggle()
 切换(在隐藏与显示之间)被选元素
 
$(selector).slideDown()
 向下滑动(显示)被选元素
 
$(selector).slideUp()
 向上滑动(隐藏)被选元素
 
$(selector).slideToggle()
 对被选元素切换向上滑动和向下滑动
 
$(selector).fadeIn()
 淡入被选元素
 
$(selector).fadeOut()
 淡出被选元素
 
$(selector).fadeTo()
 把被选元素淡出为给定的不透明度
 
$(selector).animate()
 对被选元素执行自定义动画  

 

本段小结:

由于jQuery是为处理HTML事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护:

把所有jQuery代码置于事件处理函数中

把所有事件处理函数置于文档就绪事件处理器中

把jQuery代码置于单独的.js文件中

如果存在名称冲突,则重命名jQuery库
作者:altand  

1,一个轻量级的JS库,可以极大的简化JS操作和代码量。 2,语法实例: 在实际运...

本文由星彩网app下载发布于前端技术,转载请注明出处:DOM能够做什么样,js和jquery对dom节点的操作

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。