JQuery ve $ işareti

Giriş
1.JQuery ile kullanılan $ işareti document.getElementById() ile aynı anlama geliyor. Bu konuyu From jquery back to JavaScript sorusunda görmek mümkün.

document.getElementById('some_button') fonksiyonu bir HtmlElement döndürür.

2. $(".XYZ") şeklinde başlayanlar ise class="XYZ" olan elemetlere uygulanır.

3. $(this) Event handler içinde kullanılır. Hangi nesne event kaynağı ise onu temsil eder.

Örnek - Class
Elimizde şöyle bir html olsun.

<img class="switch" data-switchid="1" src="https://via.placeholder.com/150">

Class değeri switch olan nesnelere şöyle yaparız

$(document).on('click','.switch',function(){
    console.log($(this).data("switchid"));
});

Aynı şeyi JQuery olmadan şöyle yaparız

document.querySelector(".switch").onclick = function(){
  console.log(this.getAttribute("data-switchid"));
}

Örnek - Class

Şöyle yaparız. Burada class değeri olarak restaurantName ve link kısmında çiğ köfte geçen nesneler parent nesneden siliniyor.

$(document).ready(function(){
  $(".restaurantName[href*='cig-kofte'], .restaurantName[href*='cigkofte']")
    .parents(".ys-item").remove();
});

Örnek - Html Tag
Şöyle yaparız

jQuery($ => {
  $('td').on('click', function() {
    console.log(this);
  })
});

Örnek - $(this)
Eğer $(this) asenkron olarak kullanılacaksa onu bir değişkende saklamak gerekir. Şöyle yaparız.

$("#table_tbody").on("click", ".remove-category", function(e){
    e.preventDefault();
    var $this = $(this); // save $(this)
    let entryId = $this.data("id"); //use $this here
    $.ajax({
        url : controller_url + '/remove_category/' + entryId,
        type: "GET",
        dataType: "JSON"
    }).done(function(response){
        if(response.status) {
            $this.parents("tr").remove(); // use $this here (again)    
        }
    });
});

JQuery ve DOM

Giriş
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.

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.

JQuery İle React'ın Farkı Nedir?
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.

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.

constructor
Şö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 metodu
Elimizde şö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 metodu
Yeni 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 metodu
Belirtilen 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 metodu
Elimizde şö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(){
  ...
});