Giriş
Bazı notlarım şöyle
DOM Nedir
Açıklaması şöyle.
Açıklaması şöyle.
Şöyle yaparız
Şöyle yaparız.
Elimizde şöyle bir kod olsun.
Yeni bir html tag'i ekler
Örnek
Şöyle yaparız
Belirtilen nesneyi insertAfter() içine parametre olarak verilen nesnenin arkasına ekler.
Örnek
Elimizde şöyle bir kod olsun.
Örnek
Elimizde şöyle bir kod olsun.
Şöyle yaparız
Elimizde şöyle bir kod olsun
Şöyle yaparız.
Bazı notlarım şöyle
DOM Nedir
Açıklaması şöyle.
Document Object Model (DOM) is a programming interface for HTML, XHTML, or XML documents, organized in the form of a tree that enables scripts to dynamically interact with the content and structure of a web document and update them.JQuery İle React'ın Farkı Nedir?
There are two types of DOMs: virtual and real. Traditional or real DOM updates the whole tree structure, even if the changes take place in one element, while the virtual DOM is a representation mapped to a real DOM that tracks changes and updates only specific elements without affecting the other parts of the whole tree.
Açıklaması şöyle.
jQuery is a DOM manipulation library. It reads from and writes to the DOM. React uses a virtual DOM (a JavaScript representation of the real DOM). React only writes patch updates to the DOM, but never reads from it.constructor
It is not feasible to keep real DOM manipulations in sync with React's virtual DOM. Because of this, all jQuery functionality has been re-implemented in React.
Şöyle yaparız
var div = $('<div></div>'); // will create a div and wait for you to append it
appendTo metoduŞöyle yaparız.
div.appendTo("body"); // this will append it body
Şöyle yaparız.div.appendTo(win.document); // the div will be appended somewhere else
each metoduElimizde şöyle bir kod olsun.
<img src="imagename0.jpg">
<img src="imagename1.jpg">
<img src="imagename2.jpg">
<img src="imagename3.jpg">
<img src="imagename4.jpg">
<div id="bg" style="background-image: url('imagename2.jpg')"></div>
Şöyle yaparız.var key='imagename3.jpg';
$('img').each(function(){
if($(this).attr('src')==key)
console.log($(this).attr('src'))
});
var a=document.getElementById('bg').style;
var image=a['background-image'].split('(')[1].split(')')[0]
console.log(image)
html metoduYeni bir html tag'i ekler
Örnek
Şöyle yaparız
var var11 = 500
$('#warning').html('<p style="font-size: 12px;padding-top: 13px;">The updated list value
is ' + var11+'<p>' );
insertAfter metoduBelirtilen nesneyi insertAfter() içine parametre olarak verilen nesnenin arkasına ekler.
Örnek
Elimizde şöyle bir kod olsun.
<div class="div1">Slider</div>
<div class="div2">User Profile</div>
Şöyle yaparız.$(".div1").insertAfter($(".div2"));
Çıktı olarak şunu alırız.<div class="div2">User Profile</div>
<div class="div1">Slider</div>
insertBefore metodu
Belirtilen nesneyi insertBefore() içine parametre olarak verilen nesnenin önüne ekler.Örnek
Elimizde şöyle bir kod olsun.
<div class="div1">Slider</div>
<div class="div2">User Profile</div>
Şöyle yaparız.$('.div2').insertBefore($('.div2').prev('.div1'));
Çıktı olarak şunu alırız.<div class="div2">User Profile</div>
<div class="div1">Slider</div>
keyup metoduŞöyle yaparız
$(document).ready(function () {
$(".phone_us").keyup(function (e) {
var value = $(".phone_us").val();
...
$(".phone_us").val(value + "-")
});
});
parent metoduElimizde şöyle bir kod olsun
<div class="parent">Test <input type="text" /> </div>
Elimizde şöyle bir kod olsun.focused{
color:red;
}
input bileşenine girdi olunca div bileşenine focused özelliği için şöyle yaparız. class ismi parent olanların altındakileri seçeriz. Bu nesnelerin input metodlarına function bağlarız.$(document).ready(function(){
$('.parent > *').focus();
$('.parent > *')
.on('input', function() {
if($(this).val().trim() != '')
$(this).parent().addClass('focused');
else
$(this).parent().removeClass('focused');
});
});
ready metoduŞöyle yaparız.
$(document).ready(function(){
...
});
Hiç yorum yok:
Yorum Gönder