Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Быстродействие JQuery (selector).each()

Добрый вечер всем. Подскажите по такому вопросу: как ускорить работу с таблицей? На клиентской стороне формируется таблица размером около 2 000 строк. Далее выборочно отмечаются значения с помощью checkbox в графах и функция each (для каждого чекбокса если он выбран (обращение к DOM элементу через $(this)) делай ....) выполняет редактирование выбранных полей. Но это неимоверно долго. Можно как то ускорить?
Слышал про quickEach, в нем вроде как быстрей. Что это и где брать? Может есть другие идеи?
Ответ: читать про вставку
Вопрос: jquery selector

$('body').on('click', '.left', function(){
                            rating(post.id, 'down');
                        }); 


на странице есть 2 элемента с классом left
при клике на одном элементе, rating вызывается 2 раза

если сделать так
$('.left').on('click', function(){
                            rating(post.id, 'down');
                        }); 

то при клике на втором элементе ничего не происходит

как исправить?
Ответ: разобрался, вопрос закрыт, не нужно в пятницу вечером работать
Вопрос: Просмотрела исходик jQuery Откорректируйте где не верно

Приветствую. Изучаю javascript и пытаюсь понять как работает jQuery. Прошу поправить мои комментарии к релизу версии 1.12. (из-за поддержки старых IE) в случае неверного истолкования.
jQuery JavaScript Library v1.12.4
Обозначения в комментариях:
-"Количество вызовов" = количество вызовов в других местах исходника
-"..." = см. исходник
Код значительно урезан с соблюдением исходной последовательности и синтаксиса, крупные блоки оставленные в оригинале если непрокомментированы

Разбиваю на несколько сообщений, целиком не пропускает
// 1. Мгновенно вызываемая функция (IIFE)
(function( global, factory ){определение модуля}(модуль))

// 1.1. Определение модуля
if ( typeof module === "object" && typeof module.exports === "object" ) { //... }

// 1.2. Модуль
typeof window !== "undefined" ? window : this, function( window, noGlobal ) {
"use strict";

// Количество вызовов: 9
var deletedIds = [];

// Без комментариев
var document = window.document;
var slice = deletedIds.slice;
var concat = deletedIds.concat;
var push = deletedIds.push;
var indexOf = deletedIds.indexOf;

// Class2type карта. Количество вызовов: 4
var class2type = {};

// Количество вызовов: 2
var toString = class2type.toString;

// Количество вызовов: 6. У Sizzle своя переменная hasOwn
var hasOwn = class2type.hasOwnProperty;

/* Объект с информацией об особенностях текущего браузера. Количество вызовов: 74. У Sizzle своя переменная support */
var support = {};

var 
    // Количество вызовов: 2
    version = "1.12.4", 

    /* Основная функция. Функция-конструктор, создающая в памяти браузера копию (экземпляр)
    базового объекта - объект jQuery. Количество вызовов: 744 */
    jQuery = function( selector, context ){return new jQuery.fn.init( selector, context );},
    
    // Количество вызовов: 2. У Sizzle своя переменная rtrim
    rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,

    // Количество вызовов: 1
    rmsPrefix = /^-ms-/,
    rdashAlpha = /-([\da-z])/gi,

    // Камелизация. Количество вызовов: 1
    fcamelCase = function( all, letter ) { return letter.toUpperCase(); 	};

// Для освобождения памяти от дубликатов методов. Количество вызовов: 39
jQuery.fn = jQuery.prototype = { /* определение свойств экземпляра jQuery в свойстве prototype конструктора объекта jQuery */ };

// Количество вызовов: 30
jQuery.extend = jQuery.fn.extend = function() { /* функция extend() - реализация extends (JS), наследование */ };

jQuery.extend( { /* добавление следующих свойств в объект jQuery: expando, isReady, error, noop, isFunction, isArray, isWindow, isNumeric, 

isEmptyObject, isPlainObject, type, globalEval, camelCase, nodeName, each, trim, makeArray, inArray, merge, grep, map, guid, proxy, now, 

support */ } );

// Анализатор кода JSHint
/* jshint ignore: start */
if ( typeof Symbol === "function" ) {
  jQuery.fn[ Symbol.iterator ] = deletedIds[ Symbol.iterator ];
}
/* jshint ignore: end */

// Заполнение class2type карты
jQuery.each( "Boolean Number String Function Array Date RegExp Object Error Symbol".split( " " ),
function( i, name ) { class2type[ "[object " + name + "]" ] = name.toLowerCase(); } );

// Функция, определяющая является ли объект массивом. Количество вызовов: 3
function isArrayLike( obj ) { //... }

// Количество вызовов: 6, не включая Sizzle.js
var Sizzle = (function( window ) { /* Sizzle - кросс-браузерный движок селекторов */ })( window );

// Количество вызовов: 10
jQuery.find = Sizzle;

// Количество вызовов: 12 
jQuery.expr = Sizzle.selectors;

// Количество вызовов: 0 
jQuery.expr[ ":" ] = jQuery.expr.pseudos;

// Количество вызовов: 3
jQuery.uniqueSort = jQuery.unique = Sizzle.uniqueSort;

// Количество вызовов: 2
jQuery.text = Sizzle.getText;

// Количество вызовов: 4
jQuery.isXMLDoc = Sizzle.isXML;

// Количество вызовов: 12
jQuery.contains = Sizzle.contains;

// Функция проверки dir()-проверка на наличие в результатах иных элементов, кроме DOM
Количество вызовов: 6. У Sizzle своя переменная dir
var dir = function( elem, dir, until ) { //... };

// Функция выбора потомков siblings(). Количество вызовов: 2
var siblings = function( n, elem ) { //... };

// Количество вызовов: 2
var rneedsContext = jQuery.expr.match.needsContext;
var rsingleTag = ( /^<([\w-]+)\s*\/?>(?:<\/\1>|)$/ );

// Количество вызовов: 1
var risSimple = /^.[^:#\[\.,]*$/;

// Количество вызовов: 3
function winnow( elements, qualifier, not ) { /* функция-фильтр winnow() - реализация js-функции filter() */ }

// Количество вызовов: 4
jQuery.filter = function( expr, elems, not ) { /* метод .filter()-реализация js-функции filter() */ };

jQuery.fn.extend( { /* добавление следующих свойств в экземпляр jQuery: find, filter, not, is */ } );

// Главная ссылка на корневой jQuery(document). Количество вызовов: 3
var rootjQuery,

    // Проверка HTML строк. Количество вызовов: 3
    rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,

    // Количество вызовов: 5
    init = jQuery.fn.init = function( selector, context, root ) { /* функция init() */ };

// Придание функции init свойства prototype конструктора объекта jQuery для последующего создания экземпляра. Количество вызовов: 1
init.prototype = jQuery.fn;

// Инициализация главной ссылки
rootjQuery = jQuery( document );

// Количество вызовов: 1
var rparentsprev = /^(?:parents|prev(?:Until|All))/,
    
    // Методы jQuery, гарантирующие создание уникального набора. Количество вызовов: 1
    guaranteedUnique = {
      children: true,
      contents: true,
      next: true,
      prev: true
    };

jQuery.fn.extend( { /* добавление следующих свойств в экземпляр jQuery: has, closest, index, add, addBack */ } );

// Функция выборки потомков sibling(). Количество вызовов: 2
function sibling( cur, dir ) { //... }

// Количество вызовов: 29
jQuery.each( { /* перебирающая функция jQuery.each() */ };

// Количество вызовов: 10
var rnotwhite = ( /\S+/g );

/* Функция преобразования строчно-отформатированных опций в объектно-отформатированные.
Количество вызовов: 1 */
function createOptions( options ) { //... }

// Количество вызовов: 5
jQuery.Callbacks = function( options ) { функция jQuery.Callbacks() }

jQuery.extend( { /* добавление следующих свойств в объект jQuery: Deferred, when(Deferred helper) */ } );

// Deferred, используемая в DOM, готовность. Количество вызовов: 4
var readyList;

// Количество вызовов: 0
jQuery.fn.ready = function( fn ) {
  // Добавление функции обратного вызова
  jQuery.ready.promise().done( fn );
  return this;
};

jQuery.extend( { /* добавление следующих свойств в объект jQuery: readyWait, holdReady, ready */ } );

// Функция очистки для готовых событий DOM. Количество вызовов: 0
function detach() { //... }

// Обработчик готовых событий. Количество вызовов: 0
function completed() { //... }

// Количество вызовов: 2
jQuery.ready.promise = function( obj ) { /* jQuery.ready.promise() - метод самоочистки */ };

// Удаляем проверку готовности DOM даже если пользователь этого не делал
jQuery.ready.promise();

// Повторение свыше унаследованных свойств объекта вплоть до его собственных
var i;
for ( i in jQuery( support ) ) { break; }
support.ownFirst = i === "0";

/* Примечание: Большинство тестов поддержки определены в их соответствующих модулях. False до запуска теста. Количество вызовов: 2 */
support.inlineBlockNeedsLayout = false;

jQuery( function() { /* исполнение «как можно скорее» в случае если нужно установить body.style.zoom */ } );

( function() {
  var div = document.createElement( "div" );
  // Support: IE<9
  support.deleteExpando = true;
  try {
    delete div.test;
  } catch ( e ) {
    support.deleteExpando = false;
  }
  // Null elements to avoid leaks in IE.
  div = null;
} )();

// Проверка данных. Количество вызовов: 5
var acceptData = function( elem ) { //... };

// Количество вызовов: 1
var rbrace = /^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,
    rmultiDash = /([A-Z])/g;

// Подготовка данных для метода .data(). Количество вызовов: 2
function dataAttr( elem, key, data ) { //... }

// Проверка объекта кэша на пустоту. Количество вызовов: 3
function isEmptyDataObject( obj ) { //... }

// Количество вызовов: 2
function internalData( elem, name, data, pvt ) { /* правила обработки данных */ }

jQuery.fn.extend( { /* добавление следующих свойств в экземпляр jQuery: data, removeData */ } );

jQuery.extend( { /* добавление следующих свойств в объект jQuery: queue, dequeue, _queueHooks */ } );

jQuery.fn.extend( { /* добавление следующих свойств в экземпляр jQuery: queue, dequeue, clearQueue, promise */ } );

( function() {
  var shrinkWrapBlocksVal;
  support.shrinkWrapBlocks = function() {
    if ( shrinkWrapBlocksVal != null ) { return shrinkWrapBlocksVal; }
    shrinkWrapBlocksVal = false;
    var div, body, container;
    body = document.getElementsByTagName( "body" )[ 0 ];
    if ( !body || !body.style ) { return; }
    div = document.createElement( "div" );
    container = document.createElement( "div" );
    container.style.cssText = "position:absolute;border:0;width:0;height:0;top:0;
    left:-9999px";
    body.appendChild( container ).appendChild( div );
    if ( typeof div.style.zoom !== "undefined" ) {
      div.style.cssText =
      "-webkit-box-sizing:content-box;-moz-box-sizing:content-box;" +
      "box-sizing:content-box;display:block;margin:0;border:0;" +
      "padding:1px;width:1px;zoom:1";
      div.appendChild( document.createElement( "div" ) ).style.width = "5px";
      shrinkWrapBlocksVal = div.offsetWidth !== 3;
    }
    body.removeChild( container );
    return shrinkWrapBlocksVal;
  };
} )();
Ответ:
// Создание объекта запроса с учетом кросс-браузерности. Количество вызовов: 1
jQuery.ajaxSettings.xhr = window.ActiveXObject !== undefined ? function() {
  if ( this.isLocal ) { return createActiveXHR(); }
  if ( document.documentMode > 8 ) { return createStandardXHR(); 	}
  return /^(get|post|head|put|delete|options)$/i.test( this.type ) &&
    createStandardXHR() || createActiveXHR();
} : createStandardXHR;

// Количество вызовов: 1
var xhrId = 0,

    // Количество вызовов: 4
    xhrCallbacks = {},

    // Количество вызовов: 2
    xhrSupported = jQuery.ajaxSettings.xhr();

/* Отмена открытых запросов, если страница не загрузилась по каким-либо причинам, либо при закрытии окна (вкладки) браузера. */
if ( window.attachEvent ) {
  window.attachEvent( "onunload", function() {
    for ( var key in xhrCallbacks ) { xhrCallbacks[ key ]( undefined, true ); }
  } );
}

// Для проверки поддержки браузером кросс-доменных запросов. Количество вызовов: 1
support.cors = !!xhrSupported && ( "withCredentials" in xhrSupported );

// Для проверки поддержки браузером технологии ajax. Количество вызовов: 1
xhrSupported = support.ajax = !!xhrSupported;


if ( xhrSupported ) {

// Функция, создающая объект для обработки ajax-запроса Количество вызовов: 1
  jQuery.ajaxTransport( function( options ) { //... }
}

// Функция создания объекта XHR. Количество вызовов: 3
function createStandardXHR() {
  try {
    return new window.XMLHttpRequest();
  } catch ( e ) {}
}

// Функция создания объекта XHR. Количество вызовов: 2
function createActiveXHR() {
  try {
    return new window.ActiveXObject( "Microsoft.XMLHTTP" );
  } catch ( e ) {}
}

/* Установка значений по умолчанию для следующих настроек ajax-запроса: accepts, contents, converters */
jQuery.ajaxSetup( { //... } );

// Настройка индивидуального и глобального кэша для ajax-запросов типа script.
jQuery.ajaxPrefilter( "script", function( s ) {
  if ( s.cache === undefined ) { s.cache = false; }
  if ( s.crossDomain ) {
    s.type = "GET";
    s.global = false;
  }
} );

// Создание объекта для обработки ajax-запроса типа script
jQuery.ajaxTransport( "script", function( s ) { //... } );

// Количество вызовов: 2
var oldCallbacks = [],

    // Количество вызовов: 3
    rjsonp = /(=)\?(?=&|$)|\?\?/;

// Установка значений по умолчанию для следующих настроек ajax-запроса: jsonp, jsonpCallback
jQuery.ajaxSetup( {
  jsonp: "callback",
  jsonpCallback: function() {
    var callback = oldCallbacks.pop() || ( jQuery.expando + "_" + ( nonce++ ) );
        this[ callback ] = true;
    return callback;
  }
} );

// Выявление, нормализация и установка callbacks для ajax-запросов типа json, jsonp
jQuery.ajaxPrefilter( "json jsonp", function( s, originalSettings, jqXHR ) { //... }

// Функция разбора строки в массив узлов DOM. Количество вызовов: 2
jQuery.parseHTML = function( data, context, keepScripts ) { //... };

// Сохранение копии прежнего метода загрузки. Количество вызовов: 2
var _load = jQuery.fn.load;

// Функция загрузки URL на страницу. Метод .load(). Количество вызовов: 0
jQuery.fn.load = function( url, params, callback ) { //... };

/* Присоединение для общепринятых ajax-событий функции обработчика для одного или нескольких событий */
jQuery.each( [
  "ajaxStart",
  "ajaxStop",
  "ajaxComplete",
  "ajaxError",
  "ajaxSuccess",
  "ajaxSend"
], function( i, type ) {
  jQuery.fn[ type ] = function( fn ) { return this.on( type, fn ); };
} );

// Функция проверки наличия элемента в jQuery.timers. Количество вызовов: 0
jQuery.expr.filters.animated = function( elem ) {
  return jQuery.grep( jQuery.timers, function( fn ) {
    return elem === fn.elem;
  } ).length;
};

// Функция, получающая корреспондирующее с элементом окно. Количество вызовов: 2
function getWindow( elem ) {
  return jQuery.isWindow( elem ) ? elem : elem.nodeType === 9 ? 
    elem.defaultView || elem.parentWindow : false;
}

/* Функция, устанавливающая местоположение выбранного элемента относительно границ текущего документа. Количество вызовов: 1 */
jQuery.offset = { //... };

jQuery.fn.extend( { /* добавление следующих свойств в экземпляр jQuery: offset, position, offsetParent */ } );

// Создание scrollLeft и scrollTop методов
jQuery.each( { scrollLeft: "pageXOffset", scrollTop: "pageYOffset" }, function( method, prop ) { //... } );

// CSS-хуки для свойств top и left
jQuery.each( [ "top", "left" ], function( i, prop ) { //... } );

// Создание innerHeight, innerWidth, height, width, outerHeight и outerWidth методов
jQuery.each( { Height: "height", Width: "width" }, function( name, type ) { //... } );

jQuery.fn.extend( { /* добавление следующих свойств в экземпляр jQuery: bind, unbind, delegate, undelegate */ } );

// Функция, определяющая количество выбранных элементов. Метод .size() Количество вызовов: 0
jQuery.fn.size = function() { return this.length; };

// Замена функции jQuery.fn.andSelf, которая больше не может использоваться
jQuery.fn.andSelf = jQuery.fn.addBack;

/* Проверка наличия js-скрипта «require.js» (библиотеки управления зависимостями JavaScript для улучшения скорости и качества кода) */
if ( typeof define === "function" && define.amd ) {
  define( "jquery", [], function() { return jQuery; } );
}

// Карта к jQuery на случай перезаписи. Количество вызовов: 1
var _jQuery = window.jQuery,

    // Карта к $ на случай перезаписи. Количество вызовов: 0
    _$ = window.$;

/* Функция, отключающая использование $ в качестве переменной jQuery, без потери функциональности библиотеки jQuery. Количество вызовов: 0 */
jQuery.noConflict = function( deep ) {
  if ( window.$ === jQuery ) { window.$ = _$; }
  if ( deep && window.jQuery === jQuery ) { window.jQuery = _jQuery; }
  return jQuery;
};

/* Зачастую если noGlobal является undefined, то jQuery добавит себя к глобальному window объект, за исключением случая когда загрузчик 

модуля – CommonJS */
if ( !noGlobal ) { window.jQuery = window.$ = jQuery; }

// Завершение блока Модуля
return jQuery;
})

// Закрытие круглых скобок, в которые обернута IIFE.
);
Вопрос: $ или jQuery

Здравствуйте.
В чем разница между $() и jQuery() ??
В одних местах работает одно, в других другое (модули на сайт joomla, например)

И еще такой вопрос. Выбираю элементы и вывожу что получилось
var	sections = $('#part1, #part2');
    for(k in sections) { 
        str += k+": "+ sections[k]+"\r\n"; 
    } 
    alert(str);

и мне выводит
Код:
0: [object HTMLDivElement]
1: [object HTMLDivElement]
length: 2
prevObject: [object Object]
context: [object HTMLDocument]
selector: #part1, #part2
jquery: 1.11.3
constructor: function(a,b){return new m.fn.init(a,b)}
toArray: function(){return d.call(this)}
get: function(a){return null!=a?0>a?this[a+this.length]:this[a]:d.call(this)}
pushStack: function(a){var b=m.merge(this.constructor(),a);return b.prevObject=this,b.context=this.context,b}
each: function(a,b){return m.each(this,a,b)}
map: function(a){return this.pushStack(m.map(this,function(b,c){return a.call(b,c,b)}))}
slice: function(){return this.pushStack(d.apply(this,arguments))}
first: function(){return this.eq(0)}
last: function(){return this.eq(-1)}
eq: function(a){var b=this.length,c=+a+(0>a?b:0);return this.pushStack(c>=0&&b>c?[this[c]]:[])}
end: function(){return this.prevObject||this.constructor(null)}
push: function push() { [native code] }
sort: function sort() { [native code] }
...
куча других данных
это нормально? Мне бы только элементы что я указал... потому что потом, когда я хочу обратиться к выборке, мне эти length prevObject и берутся как элементы тоже. то есть, например
for (pos in sections){
jQuery('#info-'+pos).text('pos');
}

мне выводит не 0 1 2... в элементах #info-0 #info-1 #info-2 и тд...
а ищет #info-length #info-prevObject и тд..
Ответ: нашел ошибку... вместо
var screenH = jQuery(document).height();

надо было
var screenH = jQuery(window).height();


из-за этого неправильно отрабатывало условие и элемент съезжал
Вопрос: Перевод стилей из *.css в jquery

у меня есть вот такой html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="jsChecboxIntoLabel.js"></script>
</head>
<body>


<div>
      <label class="checkbox">
        <input type="checkbox" />
        <div class="divTextNearCheckbox">Я переключаю чекбокс</div>
    </label>

</div>

</body>
</html>



вот обычный *.css к нему

.checkbox input {
    position: absolute;
    z-index: -1;
    opacity: 0;
    margin: 10px 0 0 20px;
}


.checkbox__text {
    position: relative;
    padding: 0 0 0 60px;
    cursor: pointer;
}


.checkbox__text:before {
    content: '';
    position: absolute;
    top: -4px;
    left: 0;
    width: 50px;
    height: 26px;
    border-radius: 13px;
    background: #CDD1DA;
    box-shadow: inset 0 2px 3px rgba(0,0,0,.2);
    transition: .2s;
}


.checkbox__text:after {
    content: '';
    position: absolute;
    top: -2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 2px 5px rgba(0,0,0,.3);
    transition: .2s;
}


.checkbox input:checked + .checkbox__text:before {
    background: #9FD468;
}
.checkbox input:checked + .checkbox__text:after {
    left: 26px;
}
.checkbox input:focus + .checkbox__text:before {
    box-shadow: inset 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,0,.7);
}


Но мне нужно перевести этот код в jquery и нужно повесить событие, которое бы ловило переключение текста.

$(document).ready(function () {

    var selectorCheckbox = '.checkbox'; /*селектор элемента 'label'*/
    var selectorCheckboxInput = selectorCheckbox + ' ' + 'input';

    /*селектор контейнера 'div', находится внутри элемента 'label'*/
    var selectorDivText = '.divTextNearCheckbox';

    var nameClassBefore = 'textBefore';

    var nameClassAfter = 'textAfter';

    /*ситилизация для элемента 'input' типа 'checkbox'*/
    makeStyleCheckboxInput(selectorCheckboxInput);

    /*стилизация надписи, в контейнере 'div'*/
    makeStyleDivFotText(selectorDivText);

    /*описываем первоначальное состояние контейнера
    * 'div' с текстом*/
    addClassBeforeText(selectorDivText, nameClassBefore);

    addClassAfterText(selectorDivText, nameClassAfter)

});

/*ситилизация для элемента 'input' типа 'checkbox';
* 'checkbox' становится невидимым*/
function makeStyleCheckboxInput(selector){

    applyStyle(selector, {

    'position': 'absolute',
    'z-index': '-1',
    'opacity': '0',
    'margin': '10px 0 0 20px'
    });
}

/*стилизация надписи, в контейнере 'div';
'position': 'relative'- элемент с относительным
позиционированием.
'padding' - задает смещение элемента, относительно
его позиции, а на его месте остается пустое пространство.
* */
function makeStyleDivFotText(selector) {
    applyStyle(selector, {

    'position': 'relative',
    'padding': '0 0 0 60px',
    'cursor': 'pointer',

    });
}

/*добавим класс в контейнер с текстом и применим стиль.
 * Этот класс будет описывать первоначальное состояние
 * контейнера div*/
function addClassBeforeText(selectorForAdd, nameClass) {

    $(selectorForAdd).addClass(nameClass);

    applyStyle('.' + nameClass, {

    'position': 'absolute',
    'top': '4px',
    'left': '4px',
    'width': '25px',
    'height': '26px',
    'border-radius': '13px',
    'background': '#CDD1DA',
    'box-shadow': 'inset 0 2px 3px rgba(0,0,0,.2)',
    'transition': '.2s',


    });

}


function addClassAfterText(selectorForAdd, nameClass) {

    $(selectorForAdd).addClass(nameClass);

    applyStyle('.' + nameClass, {
        'position': 'absolute',
    'top': '-2px',
    'left': '2px',
    'width': '22px',
    'height': '22px',
    'border-radius': '10px',
    'background': '#FFF',
    'box-shadow': '0 2px 5px rgba(0,0,0,.3)',
    'transition': '.2s'
    });
}


/*Применение стиля*/
function applyStyle(selector, style) {
    $(selector).css(style);
}


Но стилизация становится совсем другой и я не понимаю почему ?

кто знает подскажите.
Ответ: да вы чудесно все сделали и это то что нужно.

Но основная задача полностью перенести весь css на javaScript, таблица для базы данных рисуется только на javaScript, с использованием jQuery и вся информация будет выводится в одной html с помощью ajax (то есть авторизация, данные из разных таблиц).
Переход по ссылке на нужную страницу, будет выполняться стиранием текущей страницы и рисованием новой, в одном и том же документе.
Поэтому *.css не использую и так будет много файлов подключаться и много кода

Я не понимаю как можно выполнить стилизацию чекбокса полностью на js.

На css лишь некоторые вещи могу повторить, но не понимаю как заменить вот

это .checkbox__text:before

если можете подскажите.

Спасибо.
Вопрос: Вопрос по jQuery

я использую jQuery плагин Chosen ( )

<select form="fiter" class="chosen-select" width="350px">
<option value="">Все</option>
<option value="test" selected>test</option>
</select>

Но есть проблема, что плагин не работает, когда div в котором он находится, скрыт (display: none).
Я нашла описание решения проблемы: там написано:
Решение:
1. Качаем последнюю версию плагина:
2. Обновляем версию jQuery для верности.
3. Где вызов добавляем:
$(".chosen-select").chosen({width: '350px'});

Я не понимаю 3 пункт (Где вызов добавляем: $(".chosen-select").chosen({width: '350px'})
Подскажите, пожалуйста, куда нужно добавить этот код?
Ответ: Ivetta,

.. откройте страницу вашего плагина по вашей же ссылке и посмотрите код страницы .. там внизу активируются селекты .. примерно вот так

<script type="text/javascript">
    var config = {
      '.chosen-select'           : {},
      '.chosen-select-deselect'  : {allow_single_deselect:true},
      '.chosen-select-no-single' : {disable_search_threshold:10},
      '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
      '.chosen-select-width'     : {width:"95%"}
    }
    for (var selector in config) {
      $(selector).chosen(config[selector]);
    }
  </script>

... вот то что нужно вам, то и пропишите себе прямо в HTML ..
Вопрос: В чём разница между .each() и $.each()

читаю про jquery и там есть .each() и $.each() в чем разница?
Где можно прочитать про тонкости jquery?

 Комментарий модератора 
Давайте осмысленные названия темам!
Ответ: jQuery.each ($.each) - это универсальная функция jQuery с помощью которой можно осуществить перебор элементов массива или объекта.

.each - это метод, который применяется к набору элементов для организации цикла по ним.

Добавлено через 1 минуту
Вопрос: Как работают дополнительные методы в jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css" type='text/css'  />
    <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript" src="js/my-plugin.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
</head>
<body class="shadow">
 
 
<h3>Click on Paragraph</h3>
<button name="red">Установить - Red</button>
<button name="green">Установить - Green</button>
<button name="blue">Установить - Blue</button>
<button name="reset">Сбросить цвет</button>
<button name="destroy">Вернуть по умолчанию</button>
<br/>
<p>
    Искусство появилось почти сразу же после появления человечества,
    и на протяжении веков было создано множество величайших
    произведений в живописи, скульптуре и других сферах искусства.
    Какие из них считать самыми лучшими, вопрос очень спорный,
    ведь даже эксперты расходятся во мнениях на этот счет.
    Мы же сегодня попробуем составить список десяти наиболее
    известных произведений искусства за все время.
</p>
<p>
    Каменные монолитные статуи, расположенные на острове Пасхи в Тихом океане.
    Считается, что статуи были созданы аборигенами острова
    между 1250 и 1500 годами нашей эры.
</p>
<p>
    Одна из наиболее известных древнегреческих скульптурных работ,
    созданная где-то между 130 и 100 годами до нашей эры.
    Мраморная скульптура была обнаружена в 1820 году на острове Милос.
</p>
 
</body>
</html>



плагин

(function ($) {
 
    /*значение по умолчанию - ЗЕЛЁНЫЙ */
    var defaults = {color: 'green'};
 
    var methods = {
 
        init: function (params) {
            /*актуальные настройки, будут индивидуальными
            при каждом запуске*/
            var options = $.extend({},
                defaults,
                params);
 
            /*инициализируем один раз
            * data() — это хороший способ отслеживать
            * состояние переменных для каждого элемента.
            *   Рекомендуется использовать один объектный литерал,
            *  который будет объединять все ваши переменные
            *  под одной крышей и вы будете обращаться к
            *  этому объекту через одно пространство имён.*/
 
            var init = $(this).data('myPlugin');
 
            if (init) {
                return this;
            } else {
 
                $(this).data('myPlugin', true);
 
                return this.on("click.myPlugin", function () {
 
                    $(this).css('color', options.color);
                });
            }
        },
 
        /* Устанавливаем цвет*/
        color: function (color) {
            $(this).css('color', color);
        },
 
        /* Меняем на цвет, который мы считаем цветом по умолчанию*/
        reset: function () {
            $(this).css('color', 'black');
        },
 
        destroy: function () {
 
            /* var resetMethods = methods.reset;
             $(resetMethods).apply(this);*/
 
            methods.reset.apply(this);
            /*указывает на то, что нужно отсоединить все
            * обработчики, привязанные к пространству имен ".myPlugin"*/
            $(this).off(".myPlugin");
        }
    };
 
    $.fn.myPlugin = function (method) {
 
        /* если запрашиваемый метод существует, мы его вызываем,
        * все параметры, кроме имени метода прийдут в метод,
        * this (то есть контекст, полученный в точке вызвова),
         * будет использоваться в вызываемом методе*/
        if (methods[method]) {
 
           /*Извлекает диапазон значений и возвращает его в виде нового массива.*/
            var rangeValues = Array.prototype.slice;
 
           /* Метод call позволяет указать объект,
              на который будет ссылаться this во время вызова Функции.
            Метод call применяется к функции, в параметре получает объект.
           Помимо контекста, в параметры передаем параметр функции.
           (который был указан нами в точке вызова плагина, при вызове
            текущей функции, например  ' $('p').myPlugin('color', color);'*/
            var callMethod = rangeValues.call(arguments, 1);
 
            var currentMethod = methods[method];
 
            var readyFunction = currentMethod.apply(this, callMethod);
 
            return readyFunction;
 
             //   return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
 
        } else if (typeof method === 'object' || !method) {
            /* если первым параметром при вызове плагина указан объект,
              либо параметров нет, тогда вызываем метод init,
               для первоначальной настройки плагина*/
            return methods.init.apply(this, arguments);
        } else {
            /* если условия не выполнились, тогда указываем, что запрашиваемый метод,
            * остутсвует в данном плагине*/
            $.error('Метод "' + method + '" не найден в плагине jQuery.myPlugin');
        }
    };
 
})(jQuery);


вызов плагина

$(document).ready(function () {
 
    $('p').myPlugin();
  //  $('p').myPlugin();
 
    /*указывает на то, что в качестве селекторо,
    * используется наличие элемента button, но при этом указывается
    * условие, что событие click и его обработчик,
    * должне сработать для элементов button c 0 по 2 (одинаковые элементы в
    * DOM-структуре, имеют порядковый номер), то есть не более 3-го номера*/
    $('button:lt(3)').click(function(){
        var color = this.name;
        /*вызываем метод color, из указанного плагина,
        *'color' - это аргумент, который указывает на имя метода
        * из массива методов в плагине;
        * color - Содержит название цвета, которое нужно передать в
         * вызываемый метод плагина*/
        $('p').myPlugin('color', color);
    });
 
    /* если элемент button, имеет индекс 3 (то есть 4-й элемент)
     * в массиве элементов button, тогда запускаем другой обработчик */
    $('button:eq(3)').click(function(){
        $('p').myPlugin('reset');
    });
 
    /* если элемент button, имеет индекс 4 (то есть 5-й элемент)
     * в массиве элементов button, тогда запускаем другой обработчик */
    $('button:eq(4)').click(function(){
        $('p').myPlugin('destroy');
    });
 
});



Вопросы:

/*Извлекает диапазон значений и возвращает его в виде нового массива.*/
            var rangeValues = Array.prototype.slice;


что это такое, диапазон каких значений ?

var currentMethod = methods[method];


Это сформированный объект, который содержит данные о запрашиваемом методе ?
Что это за структура и что он содержит ?

var readyFunction = currentMethod.apply(this, callMethod);


" Метод apply позволяет указать объект, на который будет ссылаться this во время вызова Функции. "

Так метод call() то же самое делает.

В чем же отличие ?


destroy: function () {
 
            /* var resetMethods = methods.reset;
             $(resetMethods).apply(this);*/
 
            methods.reset.apply(this);
            /*указывает на то, что нужно отсоединить все
            * обработчики, привязанные к пространству имен ".myPlugin"*/
            $(this).off(".myPlugin");
        }


Вообще не понятно, что делает данный метод

reset() для чего здесь.

И еще вопрос, я оставлял комментарии в плагине, я правильно понял суть работы участок кода ?



Спасибо.
Ответ:
Сообщение от alex-romanov
плагин... вызова плагина... вызове плагина указан... настройки плагина... данном плагине... в плагине... вызов плагина... указанного плагина... в плагине... метод плагина... в плагине, я...
Это не плагин, это метод расширения. Это такой метод, добавляемый к существующему классу в месте, отличном от объявления класса.

Вместо того, чтобы расширять существующий jQuery, вы можете создать свою собственную «jquery». В вашем коде много раз создаётся $(this), почему бы тогда не наследовать от jQuery. Вот ваш пример с цветом...

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://code.jquery.com/jquery-latest.js"></script>
	<script>

class MyColorJQuery extends jQuery {
	constructor(selector, context) {
		super(selector, context);
		this.__proto__ = MyColorJQuery.prototype;

		this.options = this.constructor.defaultOptions;

		if(!this.data("my-color")) {
			this.data("my-color", this);
			this.on("click.my-color", () => this.color(this.options.color));
		}
	}

	static get defaultOptions() {
		return {
			color: "green"
		};
	}

	setOptions(options) {
		this.extend(this.options, options);
		return this;
	}

	color(color) {
		return this.css("color", color);
	}

	reset() {
		return this.css("color", "black");
	}

	destroy() {
		this.reset();
		this.off(".my-color");
		return this;
	}
}

$(() => {
	const p = new MyColorJQuery("p").setOptions({ color: "deeppink" });

	$("button:lt(3)").click(function() {
		const color = this.name;
		p.color(color);
	});

	$("button:eq(3)").click(function() {
		p.reset();
	});

	$("button:eq(4)").click(function() {
		p.destroy();
	});
});

	</script>
</head>
<body>

<h3>Click on Paragraph</h3>
<button name="red">Установить - Red</button>
<button name="green">Установить - Green</button>
<button name="blue">Установить - Blue</button>
<button name="reset">Сбросить цвет</button>
<button name="destroy">Вернуть по умолчанию</button>

<p>
	Искусство появилось почти сразу же после появления человечества,
	и на протяжении веков было создано множество величайших
	произведений в живописи, скульптуре и других сферах искусства.
	Какие из них считать самыми лучшими, вопрос очень спорный,
	ведь даже эксперты расходятся во мнениях на этот счет.
	Мы же сегодня попробуем составить список десяти наиболее
	известных произведений искусства за все время.
</p>
<p>
	Каменные монолитные статуи, расположенные на острове Пасхи в Тихом океане.
	Считается, что статуи были созданы аборигенами острова
	между 1250 и 1500 годами нашей эры.
</p>
<p>
	Одна из наиболее известных древнегреческих скульптурных работ,
	созданная где-то между 130 и 100 годами до нашей эры.
	Мраморная скульптура была обнаружена в 1820 году на острове Милос.
</p>

</body>
</html>
Вопрос: Функция Jquery each

Добрый день. подскажите как пробежаться по списку и подсчитать сколько значений <a data-original-title='В работе, просрочено свыше 1 месяца'></a>


$(document).ready(function () {
jQuery("[id^='{8680286B-98C5-4B22-9AF8-06C736C0BD80}'] [data-original-title='В работе, просрочено свыше 1 месяца']").each(function(){


});
});
Ответ: Castromen,
Я точно не уверен, но у вас, для них одинаковый id? Если так, то я не думаю, что такой запрос Jquery будет работать. ID должен быть уникальным.
Вопрос: jQuery each - не работает

Значит есть 5 ссылок <a> с href'ами типа #main, #about и т.д.
Есть 5 <section> с id типа main, about и т.д.
Задача: по нажатию на <a> проверить его href и изменить z-index на "6"
Цикл нужен для того, что бы z-index:6; было только у одного "активного" <section>, а остальным дать на 1 меньше, то есть 5.
Пробовал так:
$("nav a").click(function () {
	var href = $(this).attr("href");
	var page = $(href);
	//page.css("z-index","6");
	page.each(function (i) {
		if(page.css("zIndex") > 5) {
			page.css("zIndex","5");
		} else {
			page.css("zIndex","6");
		}
	});
});

Но белеберда выходит
Ответ: karakym,
<!doctype html>
<html lang="ru-RU">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="HandheldFriendly" content="true">
  <title>Default Page Title</title>
  <!--<link rel="shortcut icon" href="img/favicon.ico">
  <link rel="icon" href="img/favicon.ico">
  <link rel="stylesheet" type="text/css" href="css/responsive.css"/>-->
  <link rel="stylesheet" type="text/css" href="http://bplus.advokat-alekseenko.dp.ua/test/css/base.css"/>
  <link rel="stylesheet" type="text/css" href="http://bplus.advokat-alekseenko.dp.ua/test/css/style.css"/>
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<style type="text/css">
#sections>section{
  transition: all 0.8s;
  opacity: 0;
}
#sections>section:first-child{
  opacity: 1;
}
</style>
</head>
<body>
  <aside>
    <nav>
      <a href="#main">Главная<i class="icon">&#xe800;</i></a>
      <a href="#about">О нас<i class="icon">&#xf27a;</i></a>
      <a href="#revs">Отзывы<i class="icon">&#xe809;</i></a>
      <a href="#adrs">Адреса<i class="icon">&#xf277;</i></a>
      <a href="#feed">Контакты<i class="icon">&#xe808;</i></a>
    </nav>
  </aside>
  <div id="sections">
    <section id="main">
    <h1>Главная</h1>
    <h2>This is main page</h2>
    </section>
    <section id="about">
    <h1>О нас</h1>
    <h2>This is main page</h2>
    </section>
    <section id="revs">
    <h1>Отзывы</h1>
    <h2>This is main page</h2>
    </section>
    <section id="adrs">
    <h1>Адреса</h1>
    <h2>This is main page</h2>
    </section>
    <section id="feed">
    <h1>Контакты</h1>
    <h2>This is main page</h2>
    </section>
  </div>
  <script type="text/javascript" src="http://bplus.advokat-alekseenko.dp.ua/test/js/jquery-2.1.0.min.js"></script>
    <script type="text/javascript">
      $("nav a").click(function (event) {
        event.preventDefault()
        var href = $(this).attr("href");
        $("#sections>section").css("opacity", function() {
   return this == $(href)[0] ? 1 : 0
});

    });    </script>
</body>
</html>