源代码下载: 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 协定进行许可。