Тебе не нужен j Query ВСТУПЛЕНИЕ https

Тебе не нужен j. Query

ВСТУПЛЕНИЕ https: //github. com/cbrandolino/j. Query-basicarithmetic-plugin

ВСТУПЛЕНИЕ http: //stackoverflow. com/questions/16269385/jquery-adding-2 -numbers-from-input-fields I am trying to add two values of alert boxes but I keep getting a blank alert box. I don't know why. $(document). ready(function(){ var a = $("#a"). val(); var b = $("#b"). val(); $("submit"). on("click", function(){ var sum = a + b; alert(sum); }) }) http: //stackoverflow. com/questions/6552959/sum-of-two-input-value-by-jquery http: //stackoverflow. com/questions/4715780/jquery-multiply-a-number-with-7 -5 «Hi guys. I'm new to Java. Script and doesn't know very much about it. However I use j. Query a lot, and always search for plugins or snippets by searching "j. Query. . . "»

Когда тебе на самом деле нужен j. Query? • При разработке прототипов приложений • При использовании плагинов j. Query (j. Query UI…) • При использовании библиотеки или фреймворка, который зависит от j. Query (Ember. js, Backbone. js, Twitter Bootstrap …) • При поддержке старых браузеров: § § § § § document. query. Selector (IE 8 limited to CSS 2. 1 selectors) add. Event. Listener (IE 9+) dispatch. Event (IE 9+) XMLHttp. Request 2, Form. Data, etc… JSON. parse (IE 8+) Matches (IE 9+) ECMAScript 5 (bind, for. Each, filter, map, reduce, etc… IE 9+) class. List (IE 10+) CSS 3 animations (IE 9+)

Когда тебе на самом деле нужен j. Query? При поддержке старых браузеров: § § § § § document. query. Selector (IE 8 limited to CSS 2. 1 selectors) add. Event. Listener (IE 9+) dispatch. Event (IE 9+) XMLHttp. Request 2, Form. Data, etc… JSON. parse (IE 8+) Matches (IE 9+) ECMAScript 5 (bind, for. Each, filter, map, reduce, etc… IE 9+) class. List (IE 10+) CSS 3 animations (IE 9+)

Альтернативы Zepto. js - http: //zeptojs. com/ Ajax ajax https: //github. com/Forbes. Lindesay/ajax then-request https: //github. com/then/request reqwest https: //github. com/ded/Reqwest Effects Animate. css http: //daneden. github. io/animate. css/ move. js https: //github. com/visionmedia/move. js Elements $dom https: //github. com/julienw/dollardom bonzo https: //github. com/ded/bonzo min. js https: //github. com/remy/min. js/ qwery https: //github. com/ded/qwery Sizzle http: //sizzlejs. com/

Альтернативы Events Event. Emitter Vine microevent. js Utils Lo-dash Underscore. js - https: //github. com/Wolfy 87/Event. Emitter https: //github. com/arextar/Vine https: //github. com/jeromeetienne/microevent. js https: //lodash. com/ http: //underscorejs. org/

AJA - JSON AJAX $. get. JSON('/my/url', function (data) { var request = new XMLHttp. Request(); request. open('GET', '/my/url', true); }); request. onload = function () { if (request. status >= 200 && request. status < 400) { // Success! var data = JSON. parse(request. response. Text); } else { // We reached our target server, but it returned an error } }; request. onerror = function () { // There was a connection error of some sort }; request. send();

AJA - JSON AJAX $. ajax({ type: 'GET', url: '/my/url', success: function (resp) { }, error: function () { } }); var request = new XMLHttp. Request(); request. open('GET', '/my/url', true); request. onload = function () { if (request. status >= 200 && request. status < 400) { // Success! var resp = request. response. Text; } else { // We reached our target server, but it returned an error } }; request. onerror = function () { // There was a connection error of some sort }; request. send();

AJA - JSON AJAX $. ajax({ type: 'POST', url: '/my/url', data: data }); var request = new XMLHttp. Request(); request. open('POST', '/my/url', true); request. set. Request. Header('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); request. send(data);

AJA - JSON EFFECTS $(el). fade. In(); function fade. In(el) { el. style. opacity = 0; var last = +new Date(); var tick = function () { el. style. opacity = +el. style. opacity + (new Date() - last) / 400; last = +new Date(); if (+el. style. opacity < 1) { (window. request. Animation. Frame && request. Animation. Frame(tick)) || set. Timeout(tick, 16) } }; tick(); } fade. In(el);

AJA - JSON EFFECTS $(el). hide(); el. style. display = 'none'; $(el). show(); el. style. display = ''; $(el). add. Class(class. Name); if (el. class. List) el. class. List. add(class. Name); else el. class. Name += ' ' + class. Name; $(el). after(html. String); el. insert. Adjacent. HTML('afterend', html. String);

AJA - JSON ELEMENTS $(parent). append(el); parent. append. Child(el); $(el). before(html. String); el. insert. Adjacent. HTML('beforebegin', html. String); $(el). children(); el. children $(el). clone(); el. clone. Node(true); $. contains(el, child); el !== child && el. contains(child);

AJA - JSON ELEMENTS $(el). find(selector). length; el. query. Selector(selector) !== null $(selector). each(function (i, el) { var elements = document. query. Selector. All(selector); Array. prototype. for. Each. call(elements, function (el, i) { }); $(el). empty(); el. inner. HTML = '';

AJA - JSON ELEMENTS $(selector). filter(filter. Fn); Array. prototype. filter. call(document. query. Selector. All(selector), filter. Fn); $(el). find(selector); el. query. Selector. All(selector); $('. my #awesome selector'); document. query. Selector. All('. my #awesome selector'); $(el). attr('tabindex'); el. get. Attribute('tabindex');

AJA - JSON ELEMENTS $(el). html(); el. inner. HTML $('<div>'). append($(el). clone()). html(); el. outer. HTML $(el). css(rule. Name); get. Computed. Style(el)[rule. Name]; $(el). text(); el. text. Content

AJA - JSON ELEMENTS $(el). has. Class(class. Name); if (el. class. List) el. class. List. contains(class. Name); else new Reg. Exp('(^| )' + class. Name + '( |$)', 'gi'). test(el. class. Name); $(el). is($(other. El)) el === other. El

AJA - JSON ELEMENTS $(el). is('. my-class'); var matches = function (el, selector) { return (el. matches || el. matches. Selector || el. ms. Matches. Selector || el. moz. Matches. Selector || el. webkit. Matches. Selector || el. o. Matches. Selector). call(el, selector); }; matches(el, '. my-class'); $(el). next(); el. next. Element. Sibling

AJA - JSON ELEMENTS $(el). offset(); var rect = el. get. Bounding. Client. Rect(), offset; offset = { top: rect. top + document. body. scroll. Top, left: rect. left + document. body. scroll. Left } $(el). offset. Parent(); el. offset. Parent || el $(el). outer. Height(); el. offset. Height

AJA - JSON ELEMENTS $(el). outer. Height(true); function outer. Height(el) { var height = el. offset. Height; var style = get. Computed. Style(el); height += parse. Int(style. margin. Top) + parse. Int(style. margin. Bottom); return height; } outer. Height(el); $(el). outer. Width(); el. offset. Width

AJA - JSON ELEMENTS $(el). outer. Width(true); function outer. Width(el) { var width = el. offset. Width; var style = get. Computed. Style(el); width += parse. Int(style. margin. Left) + parse. Int(style. margin. Right); return width; } outer. Width(el); $(el). parent(); el. parent. Node

AJA - JSON ELEMENTS $(el). position(); var position = { left: el. offset. Left, top: el. offset. Top }; var offset = el. offset(), position. Relative. To. View. Port = { top: offset. top - document. body. scroll. Top, left: offset. left - document. body. scroll. Left }; el. get. Bounding. Client. Rect()

AJA - JSON ELEMENTS $(parent). prepend(el); parent. insert. Before(el, parent. first. Child); $(el). prev(); el. previous. Element. Sibling $(el). remove(); el. parent. Node. remove. Child(el); $(el). remove. Class(class. Name); if (el. class. List) el. class. List. remove(class. Name); else el. class. Name = el. class. Name. replace( new Reg. Exp('(^|\b)' + class. Name. split(' '). join('|') + '(\b|$)', 'gi'), ' ');

AJA - JSON ELEMENTS $(el). replace. With(string); el. outer. HTML = string; $(el). attr('tabindex', 3); el. set. Attribute('tabindex', 3); $(el). html(string); el. inner. HTML = string; $(el). css('border-width', '20 px'); el. style. border. Width = '20 px'; $(el). text(string); el. text. Content = string; $(el). siblings(); Array. prototype. filter. call( el. parent. Node. children, function (child) { return child !== el; });

AJA - JSON ELEMENTS $(el). toggle. Class(class. Name); if (el. class. List) { el. class. List. toggle(class. Name); } else { var classes = el. class. Name. split(' '); var existing. Index = classes. index. Of(class. Name); if (existing. Index >= 0) classes. splice(existing. Index, 1); else classes. push(class. Name); el. class. Name = classes. join(' '); }

AJA - JSON EVENTS $(el). off(event. Name, event. Handler); el. remove. Event. Listener(event. Name, event. Handler); $(el). on(event. Name, event. Handler); $(document). ready(function () { }); el. add. Event. Listener(event. Name, event. Handler); function ready(fn) { if (document. ready. State != 'loading') { fn(); } else { document. add. Event. Listener('DOMContent. Loaded', fn); } }

AJA - JSON EVENTS $(el). trigger('my-event', { some: 'data' }); if (window. Custom. Event) { var event = new Custom. Event('my-event', { detail: { some: 'data' } }); } else { var event = document. create. Event('Custom. Event'); event. init. Custom. Event('my-event', true, { some: 'data' }); } el. dispatch. Event(event);

AJA - JSON EVENTS $(el). trigger('change'); var event = document. create. Event('HTMLEvents'); event. init. Event('change', true, false); el. dispatch. Event(event);

AJA - JSON UTILS $. each(array, function (i, item) { array. for. Each(function (item, i) { }); $. proxy(fn, context); fn. bind(context);

AJA - JSON UTILS var deep. Extend = function (out) { out = out || {}; for (var i = 1; i < arguments. length; i++) { var obj = arguments[i]; if (!obj) continue; $. extend(true, {}, obj. A, obj. B); for (var key in obj) { if (obj. has. Own. Property(key)) { if (typeof obj[key] === 'object') deep. Extend(out[key], obj[key]); else out[key] = obj[key]; } } } return out; }; deep. Extend({}, obj. A, obj. B);

AJA - JSON UTILS var extend = function (out) { out = out || {}; for (var i = 1; i < arguments. length; i++) { if (!arguments[i]) continue; $. extend({}, obj. A, obj. B); for (var key in arguments[i]) { if (arguments[i]. has. Own. Property(key)) out[key] = arguments[i][key]; } } return out; }; extend({}, obj. A, obj. B);

AJA - JSON UTILS $. in. Array(item, array); array. index. Of(item); $. is. Array(arr); Array. is. Array(arr); $. map(array, function (value, index) { array. map(function (value, index) { }); $. now(); Date. now(); $. parse. JSON(string); JSON. parse(string);

AJA - JSON UTILS $. trim(string); string. trim(); $. type(obj); Object. prototype. to. String. call(obj). replace(/^[object(. +)]$/, "$1"). to. Lower. Case();

AJA JSON The- End Q&A