script 和 document.ready
首先,在页面顶部添加 script 标签, 记得添加结束标签。

创新互联公司于2013年成立,先为兴县等服务建站,兴县等地企业,进行企业商务咨询服务。为兴县企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
浏览器会运行 script 标签所有的 JavaScript 脚本包括 jQuery。
在 script 标签中添加代码 $(document).ready(function() {。 然后在后面(仍在该 script 标签内)用 }); 闭合它。只要浏览器加载页面,function 中放入的代码就会运行。
有一点很重要,如果没有 document ready function,代码将在 HTML 页面呈现之前运行,这可能会导致错误。
$(document).ready(function() {
});
选择器 Selector
所有的 jQuery 函数都以 $ 开头,这个符号通常被称为美元符号(dollar sign operator)或 bling。
jQuery 通常选取并操作带有选择器(selector)的 HTML 标签。
标签
比如,想要给 button 元素添加跳跃效果。 只需要在 document ready 函数内添加如下代码:
$("button").addClass("animated bounce");
class
使用 $(".well") 选取类为 well 的 div 标签。
jQuery 的 .addClass() 方法用来给标签添加类。
值得注意的是,和 CSS 声明一样,在类名前需要添加 .。
$(".well").addClass("animated shake");
id
首先,用 $("#target3") 选择器选取 id 为 target3 的 button 标签。
注意,和 CSS 声明一样,在 id 名前需要添加 #。
$("#target3").addClass("animated fadeOut");
移除 class
利用 jQuery 的 removeClass() 方法移除。
$("button").removeClass("btn-default");
css
用 jQuery 直接改变 HTML 标签的 CSS。
jQuery 有一个 .css() 方法,能改变标签的 CSS。
下面的代码效果是把颜色变蓝:
$("#target1").css("color", "blue");
这与通常的 CSS 声明略有不同,因为这个 CSS 属性和值在英文引号里,并且它们用逗号而不是冒号间隔开。
$("#target1").css("color", "red");
禁用元素
用 jQuery 改变 HTML 标签的非 CSS 属性, 例如:禁用按钮。
当禁用按钮时,它将变成灰色并无法点击。
jQuery 有一个 .prop() 方法,可以用其调整标签的属性。
下面是禁用所有的按钮的代码:
$("button").prop("disabled", true);
更改文本
通过 jQuery 改变元素开始和结束标签之间的文本。 甚至改变 HTML 标签。
jQuery 有一个 .html() 函数,能用其在标签里添加 HTML 标签和文本, 函数提供的内容将完全替换之前标签的内容。
下面是重写并强调标题文本的代码:
$("h3").html("jQuery Playground");
jQuery 还有一个类似的函数 .text(),可以在不添加标签的前提下改变标签内的文本。
注意, 标签虽然传统上用来强调文本,但此后常用作图标(Font Awesome)的标签。 标签作为强调标签现在已被广泛接受。
$("#target4").html("#target4");
删除元素
用 jQuery 从页面移除 HTML 标签。
jQuery 有一个 .remove() 方法,能完全移除 HTML 标签。
$("#target4").remove();
移动元素
现在来把标签从一个 div 移动到另一个里。
jQuery 有一个 appendTo() 方法,可以选取 HTML 标签并将其添加到另一个标签里面。
例如,如果要把 target4 从 right well 移到 left well,可以设置如下
$("#target4").appendTo("#left-well");
克隆元素
也可以把元素从一个地方复制到另一地方。
jQuery 有一个 clone() 方法,可以复制标签。
例如,如果想把 target2 从 left-well 复制到 right-well,可以设置如下:
$("#target2").clone().appendTo("#right-well");
是否注意到这两个 jQuery 函数连在一起了? 这被称为链式调用(function chaining),是一种用 jQuery 实现效果的简便方法。
选择父元素
每个 HTML 标签都默认 inherits(继承)其 parent(父标签)的 CSS 属性。
jQuery 有一个 parent() 方法,可以访问被选取标签的父标签。
下面的代码展示了使用 parent() 方法把 left-well 标签的父标签背景色设置成蓝色(blue):
$("#left-well").parent().css("background-color", "blue");
选择子元素
把 HTML 标签放到另一个级别的标签里,这些 HTML 标签被称为该标签的子标签(children element)。
jQuery 有一个 children() 方法,可以访问被选取标签的子标签。
下面的代码展示了用 children() 方法把 left-well 标签的子标签的颜色设置成 blue(蓝色):
$("#left-well").children("color", "blue");
选择特定子元素
jQuery 可以用 CSS 选择器(CSS Selectors)选取标签。 target:nth-child(n) CSS 选择器可以选取指定 class 或者元素类型的的第 n 个标签。
下面的代码展示了给每个区域(well)的第 3 个标签设置弹跳(bounce)动画效果:
$(".target:nth-child(3)").addClass("animated bounce");
选择偶数元素
也可以用基于位置的奇 :odd 和偶 :even 选择器选取标签。
注意,jQuery 是零索引(zero-indexed)的,这意味着第 1 个标签的位置编号是 0。 这有点混乱和反常——:odd 表示选择第 2 个标签(位置编号 1),第 4 个标签(位置编号 3)……等等,以此类推。
下面的代码展示了选取所有 target class 元素的奇数元素并设置 sheke 效果:
$(".target:odd").addClass("animated shake");
。请记住, 偶数指的是基于零系统的元素的位置。
jQuery 也能选取 body 标签。
$("body").addClass("animated hinge");
新闻名称:jQuery 笔记
文章起源:http://jxjierui.cn/article/dsoghje.html


咨询
建站咨询
