kiltjs / jqlite Goto Github PK
View Code? Open in Web Editor NEWTiny JavaScript DOM query library that uses pure CSS selectors
License: MIT License
Tiny JavaScript DOM query library that uses pure CSS selectors
License: MIT License
seeing this error thrown in my app around these lines
// IE9-11 has no method "contains" in SVG element and in Node.prototype. Bug #10259.
var jqLiteContains = window.Node.prototype.contains || /** @this */ function(arg) {
// eslint-disable-next-line no-bitwise
return !!(this.compareDocumentPosition(arg) & 16);
};
happens with this user agent Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727)
Methods to be implemented
get()
eq()
addClass()
after()
append()
attr()
children()
closest()
clone()
- clone events not yet supportedcontents()
css()
data()
detach()
empty()
find()
hasClass()
html()
next()
- Does not support selectorson()
- Does not support namespaces, selectors or eventDataoff()
- Does not support namespaces or selectorsone()
- Does not support namespaces or selectorsparent()
prepend()
prop()
ready()
remove()
removeAttr()
removeClass()
removeData()
replaceWith()
text()
toggleClass()
triggerHandler()
trigger()
- Does not support selectorsval()
wrap()
I'm trying to remove an event handler given with one()
to 2 different elements, i'm basically trying to get both elements to unbind when either one of them gets called:
my code looks like this:
$('.elem1 , .elem2').one('click' ,function(){
// some code...
});
but when elem1
is clicked and gets unbind, elem2
does not, and clicking elem2
will fire the event. Same goes if i click elem2
first.
p.s. i don't want to remove all the previous click
events from them, just this event.
any idea what would be the best solution here?
Hello,
I am having problems with the .hasClass method.
If a node elem has a class attribute defined, then it will no matter what the contents of that class attribute are, the method hasClass will always return true no matter which class name you pass it to.
I don't know if someone else is experiencing the same problem.
I am using the latest version of this lib.
Hi,
is it possible to add the ..prev() , .prevAll() , .siblings() functions to jqlite?
Will help a lot with DOM manipulation...
Thanks in advance.
Hi,
What would be the best way to implement the .getJSON() function from jQuery?
the jQuery docs say it's basicly a shorthand Ajax function, which is equivalent to:
$.ajax({
dataType: "json",
url: url,
data: data,
success: success
});
would that work with jqlite
? is there anything that i should change?
Thanks in advance!
live listeners
signature: $.on(eventName, selector, handler)
nested option
signature: $.fn.on(eventName, [selector,] handler)
Hi,
would be awesome to have the .hover() function just like in jquery
thanks in advance
Hi,
is it possible to add the .height() and .width() functions to jqlite?
Thanks in advance.
Code:
$('.myNode').data('myData', {myPro: 'my value'});
console.log($('.myNode').data());
output:
DOMStringMap {myData: "[object Object]"}
expect:
Object {myData: Object}
Hi,
i'm trying to use the .on() function to take 2 events for the same function, but for some reason it doesn't work, for example (the jquery way to do this):
$(volumeBar).on('change input', function() {
playerObj.updateVolume(mediaVideo, volumeBar);
});
won't work, I insted have to split it to 2 different event handlers like this:
//volume change with drag for all except chrome
$(volumeBar).on('change', function() {
playerObj.updateVolume(mediaVideo, volumeBar);
});
//volume change with drag on chrome
$(volumeBar).on('input', function() {
playerObj.updateVolume(mediaVideo, volumeBar);
});
thanks in advance!
Hi @jgermade ,
I'm trying to use the .css() function as the jquery docs describe here: http://api.jquery.com/css/
as follows:
<script>
$( "#box" ).one( "click", function() {
$( this ).css( "width", "+=200" );
});
</script>
What i'm basically trying to achieve is to change the background-position
of a button so i'm going like this:
$('.Btn').hover(function(){
$(this).css('backgroundPosition', '-=49');
},function(){
$(this).css('backgroundPosition', '+=49');
});
but it's not working, is this option available and i'm making a mistake? or do you need to add it?
Thanks in advance!
Hi @jgermade.
I have an element with a width in %, i'm trying to get a listener on that element that would fire when it gets re-sized.
I thought about using MutationObserver but i need to keep it IE9 supported.
I saw this question, and what he answered in the question.
I was wandering, won't it screw-up the css function all togather?
This is what he wrote:
(function() {
var ev = new $.Event('style'),
orig = $.fn.css;
$.fn.css = function() {
$(this).trigger(ev);
return orig.apply(this, arguments);
}
})();
This will temporary override the internal prototype.css method and the redefine it with a trigger at the end.
But i'm not sure that's what i need.... any idea?
Hi @jgermade,
i'm having some issues with a 3rd party code overriding the HTML5 Media API 'ended'
event and i want to remove all listeners from that element, then, either restore them to default or add my own with the .on()
function.
I've seen that with jQuery i could have used video.unbind('ended')
.
Do you think it is possible to add this to jqlite? or can you think of an alternative ?
Hi @jgermade ,
I'm trying to use the same event handler for multiple jquery objects and from what i've found jquery uses the .add() function like so:
$(obj1).add(obj2).on('click', some_function);
is there another way to do so in jqlite? or is it possible to add the .add() function?
note: i'm not talking about css selectors like '.class1'
thanks in advance!
Hi @jgermade ,
is it possible to add the adding the .offset() and the .position() functions to jqlite?
Thanks in advance!
Hi, i've recently updated from version 2.19 to 2.24 (latest), and am now getting the following error:
Uncaught (in promise) TypeError: Cannot assign to read only property '___found___' of 0(…)
on line jqLite.js:949
the stack trace and devtools look like this:
Any idea why does this happens?
P.S. i'm using promise-polyfill
I have a snippet code but got error:
var $ = require('jqlite');
var
Uncaught ReferenceError: $ is not defined
Expecting your help.
Best.
The minified version runs code like this (pretty printed):
!function(t, e) {
var n = e(t);
"object" == ("undefined" == typeof module ? "undefined" : _typeof(module)) && "object" == ("undefined" == typeof exports ? "undefined" : _typeof(exports)) ? module.exports = n : ("function" == typeof define ? define("jqlite", function() {
return n
}) : "function" == typeof angular ? angular.module("jqlite", []).constant("jqlite", n) : t.jqlite = n,
t.$ || (t.$ = n))
}(void 0, function(t) {
So, to explain a bit, the function's t
parameter is void 0
a.k.a undefined
. Near the end of the function, assuming we're not using Angular, the code that is executed is t.jqlite = n
and that throws an exception.
Uncaught TypeError: Cannot set property 'jqlite' of undefined
The unminified code is passing this
instead of void 0
, so the minification process is breaking the code.
Is it possible to please add the WrapAll()
and unWrap()
function just like in jQuery?
Thanks in advance
Возможно ошибка в строке 810
if( !classListMethods.has(el, className) ) { el.className += ' ' + className; }
classListMethods - нигде не объявлена
Hi @jgermade ,
i have this code where i want to be able to drag a button on the X axis and for some reason when i try to off() the 'mousemove' event on the 'mouseup' event it wont work, any i idea why?
Here is my code:
$(progress-button).on('mousedown', function(e){
$(this).on("mousemove",function(e){
$(this).css('left', e.pageX + 'px');
});
}).on('mouseup', function(){
$(this).off('mousemove');
});
Hi,
I'm trying to bind a function to when a user presses ESC on his keyboard and then unbind it right after he pressed.
How should i bind when using jqlite? i see that the .on() function dosn't support namespaces but there is no bind/unbind of .keypress() functions.... any other way?
Thanks in advance!
o(∩_∩)o Hello~
I use this light weight these days, and I found a small logic that seems need to be adjusted.
In the newest source code of "jqlite.js", the part of the function of [ListDOM.prototype.toggleClass] as below:
if (add === undefined) {
for (i = 0, len = this.length; i < len; i++) {
if (this[i].classList.item(className)) {
this[i].classList.remove(className);
} else {
this[i].classList.add(className);
}
}
}
this[i].classList.item(className)
When I call toggleClass function many times,I found the result is not expected.
Therefore,I saw the function of hasClass function, and see the check logic is:
this[i].classList.contains(className)
So, I modify code use contains instead of item, then the result is correct now.
Thank you for your reading.
http://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery
// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", function(){
document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
jQuery.ready();
}, false );
// If IE event model is used
} else if ( document.attachEvent ) {
// ensure firing before onload,
// maybe late but safe also for iframes
document.attachEvent("onreadystatechange", function(){
if ( document.readyState === "complete" ) {
document.detachEvent( "onreadystatechange", arguments.callee );
jQuery.ready();
}
});
}
HI,
I'm trying to add css through the js with the .css() function and i have alot of css code to use, only thing is that the format where you could write:
$('.myClass').css({"background-color":"yellow","font-weight": "bolder"});
doesn't work... i insted have to do it like this:
$('.myClass').css("background-color","yellow");
$('.myClass').css("font-weight", "bolder");
which take alot of code and time, what can i do?
Thanks in advance
Hi @jgermade,
I want to use dotdotdot library with your fantastic library, and it seems that the only thing missing is support for extend method in jqlite.
Is it possible to add it?
I wrote a component with jqLite and now when others try to implement it in a webapp that uses JQuery a lot of things work differently or don't work at all.
Any idea how i can avoid it in my code? and if that's not possible then in their code?
Hi,
I'm trying to add this jquery-injectCSS: https://github.com/kajic/jquery-injectCSS
but when i load them in my js file i get:
Uncaught ReferenceError: jQuery is not defined
is there any way around this?
thanks in advance!
While I attempted to use jqLite in a project, I encountered the following error on Google Chrome 44.0.2403.157 on MacOS X (Yosemite):
Uncaught TypeError: Cannot assign to read only property 'find' of [object Array](anonymous function)
Unfortunately, I am not able to reproduce the error on similar machines.
My guess is that current browsers which are implementing the the upcoming ECMAScript2015 specification might throw new errors when over-/re-writing certain properties.
For example, the new language version will add couple of new methods to Array.prototype:
The collision with Array.prototype.find() might be the reason behind the aforementioned error. ListDOM is being implemented in jqlite.js:273.
// ListDOM
function ListDOM(){}
ListDOM.prototype = [];
// ...
ListDOM.prototype.last = function() {
var list = new ListDOM();
if( this.length ) {
list[0] = this[this.length - 1];
list.length = 1;
}
return list;
};
ListDOM.prototype.find = function(selector) {
// ...
};
Hi,
is it possible to add the .hide() and .show() functions to jqlite?
Thanks in advance.
dataset polyfill:
https://gist.github.com/brettz9/4093766
classList polyfill:
https://github.com/eligrey/classList.js
Hi,
if you guys could add the .first() method that would be awsome!
https://api.jquery.com/first/
Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.