关于jquery:Y-分钟速成-jquery

源代码下载：jquery-cn.js

jQuery 是 JavaScript 的一个函数库，它能够帮你“写更少，做更多”。它集成了很多常见的 JavaScript 工作并且很容易调用。jQuery 被世界各地的很多的大公司和开发者应用。它包含了 AJAX，事件处理，文档操作以及很多其它性能，并且更加简略和疾速。

正因为 jQuery 是 JavaScript 的一个函数库，所以你须要 首先学习 JavaScript

///////////////////////////////////
// 1. 选择器

// jQuery 中的选择器被用来抉择一个元素
var page = $(window); // 抉择整个视窗

// 选择器能够作为 CSS 选择器应用
var paragraph = $('p'); // 抉择所有段落元素
var table1 = $('#table1'); // 抉择 id 为 table1 的元素
var squares = $('.square'); // 抉择所有类是 square 的元素
var square_p = $('p.square') // 抉择具备 square 类的所有段落


///////////////////////////////////
// 2. 事件和成果
// jQuery 十分长于解决当事件触发的时候应该做什么
// 一个十分常见的事件就是文档的就绪事件
// 你能够用 ready 办法，在所有元素实现加载的时候执行
$(document).ready(function(){// 只有文档加载实现当前代码才会执行});
// 你也能够用定义了的函数
function onAction() {// 本函数在事件触发的时候被执行}
$('#btn').click(onAction); // 当点击的时候调用 onAction 函数

// 其它常见的事件：$('#btn').dblclick(onAction); // 双击
$('#btn').hover(onAction); // 划过
$('#btn').focus(onAction); // 聚焦
$('#btn').blur(onAction); // 失焦
$('#btn').submit(onAction); // 提交
$('#btn').select(onAction); // 当元素被选中
$('#btn').keydown(onAction); // 当一个按键被按下
$('#btn').keyup(onAction); // 当一个按键被抬起
$('#btn').keypress(onAction); // 当一个按键被按住
$('#btn').mousemove(onAction); // 当鼠标在挪动
$('#btn').mouseenter(onAction); // 鼠标移入元素
$('#btn').mouseleave(onAction); // 鼠标来到元素


// 如果不提供任何参数的话，那么这些办法能够触发事件
// 而不是定义处理事件的办法
$('#btn').dblclick(); // 触发元素上的双击

// 你能够只用选择器一次而解决多个事件
$('#btn').on({dblclick: myFunction1} // 双击的时候触发
  {blur: myFunction1} // 失焦的时候触发
);

// 你能够用一些成果函数来挪动或暗藏元素
$('.table').hide(); // 暗藏元素

// 留神：在这些办法中调用函数会依然暗藏元素
$('.table').hide(function(){// 元素先暗藏而后函数被执行});

// 你能够在变量中贮存选择器
var tables = $('.table');

// 一些根本的文档操作方法有：tables.hide(); // 暗藏元素
tables.show(); // 显示元素
tables.toggle(); // 对被选元素进行暗藏和显示的切换
tables.fadeOut(); // 淡出
tables.fadeIn(); // 淡入
tables.fadeToggle(); // 对被选元素进行淡入和淡出显示的切换
tables.fadeTo(0.5); // 把被选元素逐步扭转至给定的不透明度（0 和 1 之间）tables.slideUp(); // 通过调整高度来滑动暗藏被选元素
tables.slideDown(); // 对被选元素进行滑动暗藏和滑动显示的切换
tables.slideToggle(); // 对被选元素进行滑动暗藏和滑动显示的切换

// 下面所有的办法承受速度参数（毫秒）和一个回调函数
tables.hide(1000, myFunction); // 继续一秒的暗藏动画而后执行函数

// fadeTo 要求提供透明度参数作为第二个参数
tables.fadeTo(2000, 0.1, myFunction); // 通过 2 秒钟将透明度变为 0.1 而后执行函数

// 你能够用 animate 办法实现一些稍微高级的成果
tables.animate({margin-top:"+=50", height: "100px"}, 500, myFunction);
// animate 办法承受一个蕴含 CSS 和值的对象作为指标，// 其次是可选的速度参数，// 以及最初的回调函数

///////////////////////////////////
// 3. 操作

// 这些相似成果函数然而能够做更多
$('div').addClass('taming-slim-20'); // 给所有 div 增加类 taming-slim-20

// 常见操作方法
$('p').append('Hello world'); // 增加到元素开端
$('p').attr('class'); // 获取属性
$('p').attr('class', 'content'); // 设置属性
$('p').hasClass('taming-slim-20'); // 如果有类则为真
$('p').height(); // 获取和设置元素的高度


// 对于很多的操作函数来说，获取元素的信息
// 仅仅是第一个合乎元素的
$('p').height(); // 仅仅获取第一个 p 标签的高度

// 你能够用 each 来迭代所有元素
var heights = [];
$('p').each(function() {heights.push($(this).height()); // 把所有 p 标签的高度退出数组
});

有倡议？或者发现什么谬误？在 Github 上开一个 issue，或者发动 pull request！

原著 Sawyer Charles，并由 0 个好心人批改。
© 2022 Sawyer Charles
Translated by: zxyqwe
本作品采纳 CC BY-SA 3.0 协定进行许可。