针对初学者的jQuery入门指南

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

$("#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"); // 为所有 <div> 元素添加名为 "content" 的类
$("div").removeClass("content"); // 移除所有 <div> 元素中,名为 "content" 的类
$("div").toggleClass("content"); // 交替所有 <div> 元素中,名为 "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 元素,例如改变操作标签中的文本。。。几个例子如下: