Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tayfunerbilen/jquery-to-javascript-convert
It helps to convert your simple jquery codes to vanilla javascript codes
https://github.com/tayfunerbilen/jquery-to-javascript-convert
Last synced: 3 months ago
JSON representation
It helps to convert your simple jquery codes to vanilla javascript codes
- Host: GitHub
- URL: https://github.com/tayfunerbilen/jquery-to-javascript-convert
- Owner: tayfunerbilen
- Created: 2020-01-27T22:26:38.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-01-31T10:45:39.000Z (almost 5 years ago)
- Last Synced: 2024-04-23T12:37:28.821Z (7 months ago)
- Language: PHP
- Homepage:
- Size: 113 KB
- Stars: 70
- Watchers: 11
- Forks: 11
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome - tayfunerbilen/jquery-to-javascript-convert - It helps to convert your simple jquery codes to vanilla javascript codes (PHP)
README
# jQuery to Javascript Converter
This PHP class helps to convert your (really) simple jquery codes to vanilla javascript codes.
There is a lot of issues, it's not completed yet, yet you can convert your simple jquery codes to vanilla js instead of use jquery library using this php class.
> Inspired from [youmightnotneedjquery.com](http://youmightnotneedjquery.com)
for javascript adaptation follow this repo as well: https://github.com/aykutkardas/jquery-to-javascript
# Installation
Install with composer
```
composer require tayfunerbilen/jquery-to-javascript-convert dev-master
```
then include `autoload.php` file in to your php file.
```php
require __DIR__ . '/vendor/autoload.php';
```
you're ready to go.
# Usage
convert onload function
```php
$js = << {
});
*/
```
convert variables
```php
echo Erbilen\JqueryToJS::convert("var test");
// let test
```
convert id selectors
```php
echo Erbilen\JqueryToJS::convert("var test = $('#test')");
// let test = document.getElementById("test")
```
convert class selectors
```php
echo Erbilen\JqueryToJS::convert("var list = $('.list')");
// let list = document.getElementByClassName("list")
```
or
```php
echo Erbilen\JqueryToJS::convert("var list = $('.list li')");
// let list = document.querySelectorAll(".list li")
```
convert `html()` method
```php
echo Erbilen\JqueryToJS::convert("var content = $('#content').html()");
// let content = document.getElementById("content").innerHTML
```
or
```php
echo Erbilen\JqueryToJS::convert("var content = $('#content').html('new content')");
// let content = document.getElementById("content").innerHTML = 'new content'
```
convert `text()` method
```php
echo Erbilen\JqueryToJS::convert("var content = $('#content').text()");
// let content = document.getElementById("content").innerText
```
or
```php
echo Erbilen\JqueryToJS::convert("var content = $('#content').text('new content')");
// let content = document.getElementById("content").innerText = 'new content'
```
convert `val()` method
```php
echo Erbilen\JqueryToJS::convert("var name = $('#name').val()");
// let name = document.getElementById("name").value
```
or
```php
echo Erbilen\JqueryToJS::convert("var name = $('#name').val('Tayfun Erbilen')");
// let name = document.getElementById("name").value = 'Tayfun Erbilen'
```
convert `show()` method
```php
echo Erbilen\JqueryToJS::convert("$('#content').show()");
// document.getElementById("content").style.display = ""
```
convert `hide()` method
```php
echo Erbilen\JqueryToJS::convert("$('#content').hide()");
// document.getElementById("content").style.display = "none"
```
convert `remove()` method
```php
echo Erbilen\JqueryToJS::convert("$('#container').remove()");
/*
let container = document.getElementById("container");
container.parentNode.removeChild(container);
*/
```
convert `addClass()` method
```php
echo Erbilen\JqueryToJS::convert("$('#container').addClass('active')");
// document.getElementById("container").classList.add("active")
```
convert `removeClass()` method
```php
echo Erbilen\JqueryToJS::convert("$('#container').removeClass('active')");
// document.getElementById("container").classList.remove("active")
```
convert `hasClass()` method
```php
echo Erbilen\JqueryToJS::convert("$('#container').hasClass('active')");
// document.getElementById("container").classList.contains("active")
```
convert `toggleClass()` method
```php
echo Erbilen\JqueryToJS::convert("$('#container').toggleClass('active')");
// document.getElementById("container").classList.toggle("active")
```
convert `next()` method
```php
echo Erbilen\JqueryToJS::convert("$('#test').next()");
// document.getElementById("test").nextElementSibling;
```
convert `prev()` method
```php
echo Erbilen\JqueryToJS::convert("$('#test').prev()");
// document.getElementById("test").previousElementSibling;
```
convert `clone()` method
```php
echo Erbilen\JqueryToJS::convert("var test = $('#test').clone()");
// let test = document.getElementById("test").cloneNode(true)
```
convert `$.each()` method
```php
$js = << {
});
*/
```
or
```php
$js = << {
if (this.status >= 200 && this.status < 400) {
let responseVar = this.response;
document.getElementById("response").innerHTML = responseVar;
}
}
request.onerror = (err) => {
document.getElementById("error").innerHTML = err;
}
request.send(data);
*/
```
convert `$.getJSON()` method
```php
$js = <<= 200 && this.status < 400) {
let json = JSON.parse(this.response);
console.log(json);
}
};
request.send();
*/
```
also you can send data as well
```php
$js = <<= 200 && this.status < 400) {
let json = JSON.parse(this.response);
console.log(json);
}
};
request.send(JSON.stringify(data));
*/
```
# converting little bit complex code
```php
$js = <<container hidden');
} else {
container.addClass('actived');
text.html('container showed');
}
e.preventDefault();
});
$('#load-btn').on('click', function (e) {
$.ajax({
type: 'GET',
url: 'api/load-more',
success: function (result) {
console.log(result);
},
error: function (err) {
console.log(err);
}
});
e.preventDefault();
});
});
JS;
echo \Erbilen\JqueryToJS::convert($js);
/*
document.addEventListener("DOMContentLoaded", () => {
document.getElementById("button").addEventListener('click', (e) => {
let container = document.getElementById("container"),
text = document.getElementById("text");
if (container.classList.contains("active")) {
container.classList.remove("active");
text.innerHTML = 'container hidden';
} else {
container.classList.add("actived");
text.innerHTML = 'container showed';
}
e.preventDefault();
});
document.getElementById("load-btn").addEventListener('click', (e) => {
let request = new XMLHttpRequest();
request.open('GET', 'api/load-more', true);
request.onload = () => {
if (this.status >= 200 && this.status < 400) {
let result = this.response;
console.log(result);
}
};
request.onerror = (err) => {
console.log(err);
};
request.send();
e.preventDefault();
});
});
*/
```