首页 > 代码库 > 第一章 jQuery基础方法回顾

第一章 jQuery基础方法回顾

jQuery即JavaScript,它是一个.js文件(官网下载)。使用时须将jQuery库的声明写在HTML文档的head标签里。

1、选择DOM节点(常用)

(1)$(‘p’)——访问HTML页面文档中所有的段落元素;

(2)$(‘#A’)——访问HTML页面文档中id=A的元素;(id号唯一)

(3)$(‘.b’)——访问HTML页面文档中所有class = b的元素;

2、延迟的JavaScript的执行

HTML文档head部分中引用了JavaScript文件。一旦浏览器发现脚本行就会立即执行该JavaScript文件,但此时HTML页面文档还没有完全加载完(body部分未加载),此时需要用到延迟JavaScript代码的执行直到HTML页面加载完。(其实也可以将JavaScript放在body的尾部这样就不用延迟执行)

用来通知JavaScript代码DOM准备完毕的方法是$(document).ready()。在DOM记载完毕后,此方法执行函数调用(函数作为它的参数)。

$(document).ready(function(){

})

函数体在DOM加载完后被调用,函数体被作为参数表示不希望该函数被第二次执行,即只执行一次。相当于$(document).ready()给文档注册了一个ready(就绪)事件。在JavaScript就是window.onload=function()一样的意思。

3、把CSS应用到元素上

addClass()方法用于应用一个CSS类到网页的选中部分。它包含CSS类的名称作为方法的参数(注意参数打引号,作为字符传,而不是变量)。

一个CSS类:

.highlight{

font-style:italic;

background-color:#0f0;

}

应用CSS类的Jquery代码:

$(‘div’).addClass(‘highlight’);

$(‘body’).addClass(‘highlight’);

4、选择一系列非标准的HTML元素

(1)$(‘span:contains(Life)’)——选择包含单词Life的Span元素;

(2)$(‘div:odd’)——选择偶数div元素,从0开始计数。

(3)$(‘div:even’)——选择奇数div元素,从0开始计数。

(4)$(‘p:eq(1)’)——选择第二个段落元素,从0开始计数。

5、计数DOM节点和显示其文本

在DOM中,网页被表示为一个根节点(parent)和一些分支节点(children)的树结构形式,其中每一个HTML元素表示一个节点。

<script type="text/javascript" src="http://www.mamicode.com/jquery.js"></script>

        <script type="text/javascript">

                 $(document).ready(function(){

                         var $nodes = $(‘#parent‘).children();

                         alert("Number of nodes is" + $nodes.length);

                         var txt = "";

                         $(‘#parent‘).children().each(function(){

                                  txt += $(this).text();

                         });

                         alert(txt);

                 });

        </script>

</head>

<body>

<div id="parent">

<div id="child1">child1</div>

<div id="child2">child2</div>

<div id="child3">child3</div>

</div>

以上代码访问HTML页面的id = parent的DIV元素的子节点,并将它的子节点存储在变量$nodes中,用alert显示子节点数组长度。然后用each()方法逐个访问其子节点(遍历数组$nodes),使用text()方法返回每个子节点的文本,并连接成一个字符串,最后用alert显示出来。

几个方法讲解:

①children()是遍历树的方法,它搜索指点元素的直接子节点,并返回一个新的jQuery对象。此方法仅在DOM树中向下遍历一层。

②each()方法用于循环访问包装集合中的每个元素。它包含一个迭代函数,在迭代函数中编写代码,应用于集合的每个单独元素。

③text()方法是jQuery对象的一个方法,用于访问指定元素的文本内容。

④parent()方法是遍历树的方法,用于搜索每个指定元素的直接亲元素(父元素),并返回一个新的jQuery对象。此方法仅在DOM树中向上遍历一层。

⑤html()方法从指定元素中的第一个元素获取HTML内容,以字符串的形式返回HTML内容,与text()方法不同,text()方法只返回文本。如HTML页面有一个段落元素:<p>我是段落元素<span>我是段落元素里的span元素</span></p>;

此时jQuery代码:$(‘p’).html();调用html方法,返回的是“我是段落元素<span>我是段落元素里的span元素</span>”

⑥text(text) ,html(html);即带参数的text()方法和html()方法可以用于改变DOM节点的内容。其中html(html)的参数html可以包含html标记;

6、快速创建DOM节点

这里列举三个创建DOM节点的方法:prepend()、prependTo()和clone()方法。(还有其他的一些方法,如:append()、appendTo()、before()、insertBefore()等)

HTML页面代码:

<body>

<p>我是段落元素<span>我是段落元素里的span元素</span></p>

<h2>我是一个h2元素</h2>

</body>

页面显示效果:

技术分享

(1)predend()方法在指点元素前插入指定的内容,并返回一个jQuery对象。内容可以是文本、HMTL元素或jQuery对象。在段落元素之前插入一个h2元素,其文本为“我是插入元素”。加入jQuery代码:

$(‘p’).prepend(‘<h2>我是插入元素</h2>’);

页面显示效果:

技术分享

(2)prependTo()方法在指定目标之前插入指定元素(和prepend方法类似,就是写法不同)。

实现上面功能的prependTo方法示例:$(‘<h2>我是插入元素</h2>’).prependTo(‘p’); 指定目标在后,插入元素在前;(用英语语法来理解)。:)

(3)clone()方法:为了快速添加DOM节点(该节点是已有元素的副本)时使用clone()方法。复制一个h2元素,在段落元素之前插入该段元素;

$(‘h2’).clone().prependTo(‘p’);

注意:如果使用prepend方法插入DOM元素,则插入内容和目标元素会被合并,这就是说如果把样式应用于段落元素,则该样式也会被应用于之前插入的h2元素。现在拿上面的HTML页面元素做验证;

编写一个CSS类:

.highlight{

background-color:#0f0;

font-style:italic;

}

HTML页面代码如下:

<!DOCTYPE html>

<html>

<head>

        <title>Test</title>

        <meta charset="utf-8">

        <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/style.css">

        <script type="text/javascript" src="http://www.mamicode.com/jquery.js"></script>

        <script type="text/javascript">

                 $(document).ready(function(){

                         $(‘p‘).prepend(‘<h2>我是插入元素</h2>‘);                    //在段落元素前插入h2元素

                         $(‘p‘).addClass(‘highlight‘);                                 //为段落元素添加样式

                 });

        </script>

</head>

<body>

<p>我是段落元素<span>我是段落元素里的span元素</span></p>

<h2>我是一个h2元素</h2>

</body>

</html>

页面显示效果:

技术分享

可见,样式也被应用于插入的h2元素。

第一章 jQuery基础方法回顾