针对初学者的jQuery入门指南

2020-05-24 21:35:08易采站长站整理


var myElementHTML = $("#myElement").html();
// 获取 ID 为 myElement 的元素中的所有内容,包括文本和 HTML 标签
// 这种方法类似于传统 JavaScript 中的 innerHTML

var myElementHTML = $("#myElement").text();
// 获取 ID 为 myElement 的元素中的文本,仅包括文本,HTML 标签除外

类似以上两种方法,还可以改变 DOM 元素中的 HTML 或文本:


$("#myElement").html("<p>This is the new content.</p>");
// #myElement 中的内容将被这个段落替换掉

$("#myElement").text("This is the new content.");
// #myElement 中的内容将被这行文本替换掉

在元素内追加内容:


$("#myElement").append("<p>This is the new content.</p>");
// 保留标签内原有内容,并在末尾处追加新内容

对于向元素上追加内容,jQuery 还有其它几种用法,如: appendTo(), prepend(), prependTo(), before(), insertBefore(), after(), insertAfter(),各有其特点,但使用方法和 append() 类似。
jQuery 之事件处理

一些特定的事件处理程序可以用如下方法来实现:


$("a").click(function() {
// 可以在这里写一些代码
// 当超链接被点击的时候这里的代码将被执行
});

当超链接被点击的时候,function() 里面的代码将被执行。还有其它的一些事件使用方法也一样,如:blur, focus, hover, keydown, load, mousemove, resize, scroll, submit, select。
用 jQuery 隐藏或显示元素

jQuery 也可以非常方便地显示或隐藏 DOM 元素,示例代码如下:


$("#myElement").hide("slow", function() {
// 这里可以写一些代码,当元素被隐藏后,这里的代码将被执行
});

$("#myElement").show("fast", function() {
// 这里可以写一些代码,当元素被隐藏后,这里的代码将被执行
});

$("#myElement").toggle(1000, function() {
// 这里可以写一些代码,当元素被隐藏/显示后,这里的代码将被执行
});

可以看到,当元素显示或隐藏的时候,是慢慢的渐渐变化的,这是因为上面用到了几个速度参数,如 slow,fast,除此之外还有 normal,数字 1000 表示毫秒数,可以自定义。如果没有设置速度参数,那么元素将直接显示或隐藏,一闪而过,没有任何动画效果。后面的第二个参数是一个 function,用来当显示/隐藏完毕后,再执行一些需要的代码,如果不需要,可省略此参数。

另外还有一种“渐隐渐显”的方法,也是动画效果,使用方法如下: