Manipulasi HTML dengan Javascript sederhana.
<script src="https://cdn.jsdelivr.net/gh/ianfleon/seleku@main/seleku.min.js"></script>Download file yang ada disini
Link : Download SelekuJS
Memilih satu element html :
$elek('tag / .class / #id', index (opsional));$elek('.tombol'); // mengambil satu elementMemilih element tertentu atau semua element html yang dipilih :
$elek('p', 1); // mengambil tag <p> pada index ke-1
$elek('p', 'semua'); // mengambil semua tag <p>
$elek('p', 'awal'); // mengambil tag <p> pertama
$elek('p', 'akhir'); // mengambil tag <p> terakhirMemilih satu element html dan memanipulasinya :
$ku('h2').style('color', 'red');$ku('.card').css({
'background-color' : 'teal',
'color' : '#fff'
});$ku('body').tambahTag('p', 'Saya menggunakan SelekJS untuk ini!');- Menggunakan cara objek
const seleku = new SelekuClass();
const div = seleku.tambahElemen({
'tag' : 'div',
'attr' : {
'class' : 'container'
}
});
const card = seleku.tambahElemen({
'tag' : 'h2',
'attr' : {
'class' : 'card',
'id' : 'card'
},
'isi' : 'Ini judul dari card menggunakan Seleku JS'
});
seleku.gabung(div, card); // menggabungkan 'card' ke 'div'
$ku('body').gabung(div); // menggabungkan ke elemen 'body' atau yang lain sesuai target ($ku)- Menggunakan cara string
$ku('body').tambahElemen("<h2 class='judul' name='judul' id='judul'>Halo teman-teman.</h2>"); // Beserta Attribute
$ku('body').tambahElemen("<p>Selamat datang di web saya!</p>"); // Tanpa Attribute$ku('h2').isi('Selamat datang');$ku('h2').tambahClass('judul');$ku('h2').toggleClass('modemalam');$ku('h2').log();$ku('.tombol').pas('click', () => {
alert('Anda menekan tombol!');
);--- v1.2 ---
$ku('p.sinoposis').hapus();$ku('h1').attr('class', 'judul');
$ku('h1').attr('id', 'judulsaya');$ku('h2').hapusAttr('class');$ku('h1').tambahNilaiAttr('class', 'kelasbaru');$ku('h1').hapusNilaiAttr('class', 'judul');--- v1.3 ---
$ku('h1').buatDOM(function() {
this.style('color', '#fff');
this.css({
'background-color' : 'teal',
'font-family' : 'arial'
});
});Seleku juga memungkinkan untuk mengakses variabel di javascript secara langsung tanpa menggunakan DOM cukup dengan menambahkan {variable} di mana variabel
<!DOCTYPE html>
<html>
<head>
<title>selek</title>
</head>
<body>
<h1>hello {name}</h1>
<script src="seleku.js"></script>
<script src="global_function.js"></script>
<script src="joss.js"></script>
<script src="seleku-embbeded.js"></script>
<script>
let name = "seleku";
</script>
</body>
</html>Seleku juga memiliki binding dan reaktivitas, ingat hanya untuk tag input dan textarea, untuk menggunakannya cukup tambahkan atribut this-bind = {variable}
<!DOCTYPE html>
<html>
<head>
<title>selek</title>
</head>
<body>
<h1>hello {name}</h1>
<input type="text" name="try" this-bind={name}>
<script src="seleku.js"></script>
<script src="global_function.js"></script>
<script src="joss.js"></script>
<script src="seleku-embbeded.js"></script>
<script>
let name = "seleku";
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>selek</title>
</head>
<body>
<h1>hello {name}</h1>
<input type="text" name="try" oninput="input(this)">
<script src="seleku.js"></script>
<script src="global_function.js"></script>
<script src="joss.js"></script>
<script src="seleku-embbeded.js"></script>
<script>
let name = "seleku";
function input(element){
contexts.name = element.value;
}
</script>
</body>
</html>Dynamic attribute adalah attribute yang memiliki reaktivitas dan memungkinkan terjadinya perubahan attribute itu sendiri secara realtime
<!DOCTYPE html>
<html>
<head>
<title>selek</title>
</head>
<body>
<h1 style={myStyle}>{name}</h1>
<input type="text" name="try" oninput="changeColor(this)">
<script src="seleku.js"></script>
<script src="global_function.js"></script>
<script src="joss.js"></script>
<script src="seleku-embbeded.js"></script>
<script>
let name = "seleku";
let myStyle = "";
let changeColor = (element)=>{
contexts.myStyle = element.value;
}
</script>
</body>
</html>