针对初学者的jQuery入门指南_jquery
下载 jQuery 代码，并在页面中载入
首先需要从jQuery 官方网站 去下载最新的 jQuery 代码，jQuery 官方提供两个版本的，一个是经过压缩的，一个是没有经过压缩的，如果你不打算阅读或分析 jQuery 源代码的话，那么建议下载压缩过的版本，因为它体积更小。下载完成后，在你的 HTML 代码中载入，载入方法如下：
jQuery tutorial jQuery tutorial
当然，介于 jQuery 目前之流行程度，也有不少网站提供了在线的 jQuery API，例如 Google API，所以我们可以通过以下方法载入 jQuery：
jQuery 代码如何执行
学习编写 jQuery 代码，首先要接触的就是 document ready 这个事件处理机制，几乎你所有的 jQuery 代码都要写在这个事件里面。这个东西主要有两个作用：
确保在网页完全载入完成后，才执行 jQuery 代码。因为如果网页中有 DOM 元素还未完全载入，那么用 jQuery 代码去访问或操作 DOM 元素的话会出错。
一定程度上将 jQuery 代码和其它代码区分开来。
代码写法一般如下：
使用 jQuery 选择器选择 DOM 元素
jQuery 里面封装了一个函数 $("") 让我们在 HTML 文档里面方便地选择 DOM 元素，下面是几个简单的使用方法。
$("div"); // 选择当前 HTML 文档中的所有 DIV 元素
$("#myElement"); // 选择当前 HTML 文档中 ID 为 "myElement" 的元素
$(".myClass"); // 选择当前 HTML 文档中 class 为 "myClass" 的元素
$("p#myElement"); // 选择当前 HTML 中 ID 为 "myElement" 的段落 P 标签元素
$("ul li a.navigation"); // 选择列表元素中 class 为 "navigation" 的超链接
jQuery 支持几乎所有的 CSS 选择器方法
$("p > a"); // 选择所有 P 标签中的超链接 A 元素
$("input[type=text]"); // 选择 input 元素中 type 为 text 的元素
$("a:first"); // 选择当前页面中的第一个超链接 A 元素
$("p:odd"); // 选择当前页面中序数为奇数的段落 P 元素
$("li:first-child"); // 选择列表中的第一个元素
jQuery 自身也定义了一些选择器方法，下面是几个例子：
$(":animated"); // 选择所有正在执行动画效果的元素
$(":button"); // 选择所有按钮元素 （input 或 button）
$(":radio"); // 选择所有单选框元素
$(":checkbox"); // 选择所有复选框元素
$(":checked"); // 选择所有已经在 选定状态 的单选框和复选框
$(":header"); // 选择所有标题元素 （h1, h2, h3, h4 ...）
操作和访问 CSS 中的 class 名称
利用 jQuery 可以为 DOM 元素添加、移除类名，并且使用起来相当之方便。下面是几个典型的使用方法：
$("div").addClass("content"); // 为所有 元素添加名为 "content" 的类
$("div").removeClass("content"); // 移除所有 元素中，名为 "content" 的类
$("div").toggleClass("content"); // 交替所有 元素中，名为 "content" 的类 （如果该元素中不存在这个类，则为它加上这个类；如存在，则移除之）
当然，你也可以用 jQuery 来检测一下某元素中是否正在使用某个 class，代码如下
if ($("#myElement").hasClass("content")) {
alert("存在名为 content 的类！");
}
else {
alert("不存在名为 content 的类！");
}
用 jQuery 来操作 CSS 中的样式
使用 jQuery 可以轻松的为 DOM元素添加 CSS 样式，下面是几个范例：
$("p").css("width", "400px"); // 为所有段落添加一个宽度
$("#myElement").css("color", "blue") // 将所有 ID 为 #myElement 的元素中文本颜色变为蓝色
$("ul").css("border", "solid 1px #ccc") // 为所有无序列表添加实线边框，且边框颜色为 #ccc
在网页中添加、移除、追加 DOM 元素或内容
jQuery 中同样提供了好多种方法来操作 DOM 元素，例如改变操作标签中的文本。。。几个例子如下：
var myElementHTML = $("#myElement").html();
// 获取 ID 为 myElement 的元素中的所有内容，包括文本和 HTML 标签
// 这种方法类似于传统 JavaScript 中的 innerHTML
var myElementHTML = $("#myElement").text();
// 获取 ID 为 myElement 的元素中的文本，仅包括文本，HTML 标签除外
类似以上两种方法，还可以改变 DOM 元素中的 HTML 或文本：
$("#myElement").html("This is the new content.
");
// #myElement 中的内容将被这个段落替换掉
$("#myElement").text("This is the new content.");
// #myElement 中的内容将被这行文本替换掉
在元素内追加内容：
$("#myElement").append("This is the new content.
");
// 保留标签内原有内容，并在末尾处追加新内容
对于向元素上追加内容，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，用来当显示/隐藏完毕后，再执行一些需要的代码，如果不需要，可省略此参数。
另外还有一种“渐隐渐显”的方法，也是动画效果，使用方法如下：
$("#myElement").fadeOut("slow", function() {
// 这里的代码在 fade out 完成后执行
});
$("#myElement").fadeIn("slow", function() {
// 这里的代码在 fade in 完成后执行
});
调整元素的透明度：
$("#myElement").fadeTo(2000, 0.4, function() {
// 这里的代码在在调整透明度完成后执行
});
其中第一个参数是仍然是速度参数，第二个参数是透明度，但三个参数是一个匿名回调函数，当渐变完成后执行。
jQuery 之动画效果
jQuery 可以为 DOM 元素添加上下滑动效果：
$("#myElement").slideDown("fast", function() {
// .......
});
$("#myElement").slideUp("slow", function() {
// .......
});
$("#myElement").slideToggle(1000, function() {
// .......
});
jQuery 的动画效果还可以应用在改变 DOM 元素样式的时候，使改变样式的过程以平滑过渡的方式进行，而且可以选择需要速度，示例如下：
$("#myElement").animate({
opacity: 0.3,
width: "500px",
height: "700px"
},
1000,
function() {
// ......
});
总的来说，jQuery 的动画效果很强大，但是也有其怪癖（例如要改变颜色的话，可能需要其它特定的插件）。jQuery 还有其它许多动画效果需要不断地去深入学习和挖掘。
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
相关文章
相关视频
专题推荐
-
独孤九贱-php全栈开发教程全栈 170W+
主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门
-
玉女心经-web前端开发教程入门 80W+
主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门
-
天龙八部-实战开发教程实战 120W+
主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习
- 最新文章
- 热门排行
上一篇： php怎么判断变量不存在
下一篇： php一句话木马怎么上传
网友评论
文明上网理性发言，请遵守 新闻评论服务协议
我要评论