Angular ile jQuery nasıl kullanılır?

Birisi bana Angular ile jQuery nasıl kullanılır söyleyebilir ?

class MyComponent {
    constructor() {
        // how to query the DOM element from here?
    }
}

DOM öğesinin sınıfını veya kimliğini önceden değiştirmek gibi geçici çözümler olduğunu biliyorum, ancak bunu yapmanın daha temiz bir yolunu umuyorum.

Angular2'den jQuery kullanmak ng1'e kıyasla çok kolay. TypeScript kullanıyorsanız, önce jQuery typescript tanımına başvurabilirsiniz.

tsd install jquery --save
or
typings install dt~jquery --global --save

Sadece kullanabilirsiniz beri TypescriptDefinitions gerekli değildir anyiçin türü olarak $veyajQuery

Açısal bileşeninizde, şablon @ViewChild()başlatıldıktan sonra şablondan bir DOM öğesine başvuruda bulunmalısınız . Görünüm başlatıldıktan sonra nativeElementbu nesnenin özelliğini kullanabilir ve jQuery'ye geçebilirsiniz.

JQueryStatic olarak bildirmek $(veya jQuery) size jQuery için yazılı bir başvuru verecektir.

import {bootstrap}    from '@angular/platform-browser-dynamic';
import {Component, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
declare var $:JQueryStatic;

@Component({
    selector: 'ng-chosen',
    template: `<select #selectElem>
        <option *ngFor="#item of items" [value]="item" [selected]="item === selectedValue">{{item}} option</option>
        </select>
        <h4> {{selectedValue}}</h4>`
})
export class NgChosenComponent implements AfterViewInit {
    @ViewChild('selectElem') el:ElementRef;
    items = ['First', 'Second', 'Third'];
    selectedValue = 'Second';

    ngAfterViewInit() {
        $(this.el.nativeElement)
            .chosen()
            .on('change', (e, args) => {
                this.selectedValue = args.selected;
            });
    }
}

bootstrap(NgChosenComponent);

Bu örnek dalma pistonunda mevcuttur: http://plnkr.co/edit/Nq9LnK?p=preview

tslint chosen$ üzerinde bir özellik olmamasından şikayet edecek , bunu düzeltmek için özel * .d.ts dosyanızdaki JQuery arabirimine bir tanım ekleyebilirsiniz.

interface JQuery {
    chosen(options?:any):JQuery;
}    

Neden herkes roket bilimi yapıyor? Statik elemanlar, örneğin bodyetiketi gibi bazı temel şeyler yapması gereken herkes için sadece şunu yapın:

1. İndex.html'de scriptjquery lib'inizin yolunu içeren etiket ekleme , nerede olduğu önemli değildir (bu şekilde IE9 için daha düşük jquery sürümünü yüklemek için IE koşullu etiketlerini de kullanabilirsiniz).
2. Senin içinde export component: blokta kodunuzu çağıran bir fonksiyonu var $("body").addClass("done");ekleyin, Normalde bu yüzden sadece bu ts dosyadaki tüm ithalatın sonra, beyan hataya neden declare var $:any;ve gitmek iyidir!

Bu benim için işe yaradı.

ADIM 1 - İlk önce

// In the console
// First install jQuery
npm install --save jquery
// and jQuery Definition
npm install -D @types/jquery

ADIM 2 - İTHALAT

// Now, within any of the app files (ES2015 style)
import * as $ from 'jquery';
//
$('#elemId').width();

// OR

// CommonJS style - working with "require"
import $ = require('jquery')
//
$('#elemId').width();

#GÜNCELLEME - Feb - 2017

Son zamanlarda, ben ile kod yazıyorum ES6yerine typescriptve am güçlü importolmadan * as $içinde import statement. Şimdi böyle görünüyor:

import $ from 'jquery';
//
$('#elemId').width();

İyi şanslar.

Şimdi çok kolaylaştı, bunu sadece Angular2 denetleyicisi içindeki herhangi bir türle jQuery değişkenini bildirerek yapabilirsiniz.

declare var jQuery:any;

Bunu içe aktarma ifadelerinden hemen sonra ve bileşen dekoratörünün önüne ekleyin.

X veya Sınıf X kimliğine sahip herhangi bir öğeye erişmek için yapmanız gereken

jQuery("#X or .X").someFunc();

Basit bir yol:

1. komut dosyası ekle

index.html

<script type="text/javascript" src="assets/js/jquery-2.1.1.min.js"></script>

2. beyan etmek

my.component.ts

declare var $: any;

3. kullanımı

@Component({
  selector: 'home',
  templateUrl: './my.component.html',
})
export class MyComponent implements OnInit {
 ...
  $("#myselector").style="display: none;";
}

Lütfen bu basit adımları uygulayın. Benim için çalıştı. Herhangi bir karışıklığı önlemek için yeni bir açısal 2 uygulaması ile başlayalım. Angular cli kullanıyorum. Yani, zaten yoksa yükleyin. https://cli.angular.io/

Adım 1: Demo açısal 2 uygulaması oluşturma

ng new jquery-demo

herhangi bir isim kullanabilirsiniz. Şimdi cmd altında çalışıp çalışmadığını kontrol edin.

ng serve

"Uygulama çalışır!" tarayıcıda.

2. Adım: Bower'ı yükleyin (Web için bir paket yöneticisi)

Bu komutu cli üzerinde çalıştırın (cd komutu kullanmıyorsanız 'jquery-demo' yu işaretlediğinizden emin olun):

npm i -g bower --save

Şimdi bower'ın başarıyla kurulumundan sonra, aşağıdaki komutu kullanarak bir 'bower.json' dosyası oluşturun:

bower init

Girişleri isteyecektir, varsayılan değerleri istiyorsanız sadece enter tuşuna basın ve "Evet" yazdığında "Evet" yazar.

Şimdi "jquery-demo" klasöründe yeni bir dosya (bower.json) görebilirsiniz. Daha fazla bilgiyi https://bower.io/ adresinde bulabilirsiniz.

Adım 3: jquery yükleyin

Bu komutu çalıştır

bower install jquery --save

Jquery kurulum klasörü içeren yeni bir klasör (bower_components) oluşturur. Şimdi 'bower_components' klasöründe jquery yüklü.

Adım 4: 'Angular-cli.json' dosyasına jquery konumu ekleyin

'Angular-cli.json' dosyasını açın ('jquery-demo' klasöründe bulunur) ve "komut dosyaları" na jquery konumu ekleyin. Bunun gibi görünecek:

"scripts": ["../bower_components/jquery/dist/jquery.min.js"
              ]

Adım 5: Test için basit jquery kodu yazın

'App.component.html' dosyasını açın ve basit bir kod satırı ekleyin. Dosya şu şekilde görünecektir:

<h1>
  {{title}}
</h1>
<p>If you click on me, I will disappear.</p>

Şimdi 'app.component.ts' dosyasını açın ve 'p' etiketi için jquery değişkeni bildirimi ve kodu ekleyin. Ayrıca yaşam döngüsü kancası ngAfterViewInit () de kullanmalısınız. Değişiklik yaptıktan sonra dosya şöyle görünecektir:

import { Component, AfterViewInit } from '@angular/core';
declare var $:any;

@Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
})
export class AppComponent {
     title = 'app works!';

     ngAfterViewInit(){
           $(document).ready(function(){
             $("p").click(function(){
             $(this).hide();
             });
           });
     }
}

Şimdi açısal 2 uygulamanızı 'ng serve' komutunu kullanarak çalıştırın ve test edin. İşe yaramalı.

Bazı DOM manipülasyonları eklemek için ngAfterViewInit () yaşam döngüsü kancasını uygulayabilirsiniz

ngAfterViewInit() {
            var el:any = elelemtRef.domElement.children[0];
            $(el).chosen().on('change', (e, args) => {
                _this.selectedValue = args.selected;
            });
}

Yönlendiriciyi kullanırken dikkatli olun çünkü angular2 görünümleri geri dönüştürebilir .. DOM öğelerinin manipülasyonlarının yalnızca afterViewInit öğesinin ilk çağrısında yapıldığından emin olmanız gerekir. (Bunu yapmak için statik boolean değişkenlerini kullanabilirsiniz)

class Component {
    let static chosenInitialized  : boolean = false;
    ngAfterViewInit() {
        if (!Component.chosenInitialized) {
            var el:any = elelemtRef.domElement.children[0];
            $(el).chosen().on('change', (e, args) => {
                _this.selectedValue = args.selected;
            });
            Component.chosenInitialized = true;
        }
    }
}

Daha basit bir şekilde yapıyorum - önce konsolda npm ile jquery yükleyin: npm install jquery -Sve sonra bileşen dosyasına sadece yazıyorum: let $ = require('.../jquery.min.js')ve işe yarıyor! İşte bazı kodumu tam örnek:

import { Component, Input, ElementRef, OnInit } from '@angular/core';
let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

@Component({
    selector: 'departments-connections-graph',
    templateUrl: './departmentsConnectionsGraph.template.html',
})

export class DepartmentsConnectionsGraph implements OnInit {
    rootNode : any;
    container: any;

    constructor(rootNode: ElementRef) {
      this.rootNode = rootNode; 
    }

    ngOnInit() {
      this.container = $(this.rootNode.nativeElement).find('.departments-connections-graph')[0];
      console.log({ container : this.container});
      ...
    }
}

Teplate'de örneğin:

<div class="departments-connections-graph">something...</div>

DÜZENLE

Alternatif olarak:

let $ = require('../../../../../node_modules/jquery/dist/jquery.min.js');

kullanım

declare var $: any;

ve index.html dosyasında:

<script src="assets/js/jquery-2.1.1.js"></script>

Bu, jquery'yi yalnızca global olarak bir kez başlatacaktır - bu, örneğin önyüklemede kalıcı pencereler için önemlidir ...

1. adım: şu komutu kullanın: npm install jquery --save

Adım 2: Açısal olarak aşağıdaki gibi içe aktarabilirsiniz:

'jquery'den $ içe aktar;

bu kadar .

Örnek olarak şunlar verilebilir:

import { Component } from '@angular/core';
import  $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app';
  constructor(){
    console.log($('body'));
  }


}

// jquery kurulumunpm install jquery --save

// jquery için tür tanımını yüklemetypings install dt~jquery --global --save

// belirtildiği gibi derleme yapılandırma dosyasına jquery kitaplığı ekleme ("angular-cli-build.js" dosyasında)

vendorNpmFiles: [
  .........
  .........
  'jquery/dist/jquery.min.js'
]

// jquery kütüphanesini derlemeye eklemek için derlemeyi çalıştırın ng build

// göreli yol yapılandırmasını ekleme (system-config.js içinde) /** Map relative paths to URLs. */ const map: any = { ....., ......., 'jquery': 'vendor/jquery/dist' };

/** User packages configuration. */
const packages: any = {
......,
'jquery':{ main: 'jquery.min',
format: 'global',
defaultExtension: 'js'}};

// jquery kütüphanesini bileşen dosyanıza içe aktarın

import 'jquery';

aşağıda örnek bileşenimin kod snipppet'i

import { Component } from '@angular/core';
import 'jquery';
@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',  
  styleUrls: ['app.component.css']
})
export class AppComponent {
  list:Array<number> = [90,98,56,90];
  title = 'app works!';
  isNumber:boolean = jQuery.isNumeric(89)  
  constructor(){}
}

Açısal klips kullanıyorsanız şunları yapabilirsiniz:

1. Bağımlılığı yükleyin :

   npm install jquery - kaydet

   npm install @ types / jquery --save-dev

2. Dosyayı içe aktarın :

   .Angular-cli.json dosyasındaki "komut dosyası" bölümüne "../node_modules/jquery/dist/jquery.min.js" dosyasını ekleyin

3. Jquery ilan et :

   Tsconfig.app.json dosyasının "türler" bölümüne "$" ekleyin

Resmi açısal cli doc hakkında daha fazla bilgi bulabilirsiniz

Jquery'yi Açısal Olarak Kullanma2 (4)

Bu ayarları uygulayın

Jquery ve Juqry tipi tanımlamayı kurar

Jquery Kurulumu İçin npm install jquery --save

Jquery Tipi Tanımlama Kurulumu için npm install @types/jquery --save-dev

ve sonra jquery'yi içe aktarın

import { Component } from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent { 
  console.log($(window)); // jquery is accessible 
}

Açısal Klibi Kullanma

 npm install jquery --save

Angular.json içinde script dizisi altında

"scripts": [ "node_modules/jquery/dist/jquery.min.js" ] // copy relative path of node_modules>jquery>dist>jquery.min.js to avoid path error

Şimdi jQuery kullanmak için tek yapmanız gereken jQuery kullanmak istediğiniz herhangi bir bileşen aşağıdaki gibi almaktır.

Örneğin, kök bileşeninde jQuery içe aktarma ve kullanma

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery'; // I faced issue in using jquery's popover
Or
declare var $: any; // declaring jquery in this way solved the problem

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {


ngOnInit() {
}

jQueryExampleModal() { // to show a modal with dummyId
   $('#dummyId').modal('show');
}

Bir aptal olduğum için, çalışma koduna sahip olmanın iyi olacağını düşündüm.

Ayrıca, açısal iletki Angular2 yazım sürümleri jQuery ile ilgili sorunlar var $ , bu yüzden kabul edilen en iyi cevap bana temiz bir derleme vermiyor.

İşte çalışmam gereken adımlar:

index.html

<head>
...
    <script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
...
</head>

My.component.ts içinde

import {
    Component,
    EventEmitter,
    Input,
    OnInit,
    Output,
    NgZone,
    AfterContentChecked,
    ElementRef,
    ViewChild
} from "@angular/core";
import {Router} from "@angular/router";

declare var jQuery:any;

@Component({
    moduleId: module.id,
    selector: 'mycomponent',
    templateUrl: 'my.component.html',
    styleUrls: ['../../scss/my.component.css'],
})
export class MyComponent implements OnInit, AfterContentChecked{
...
    scrollLeft() {

        jQuery('#myElement').animate({scrollLeft: 100}, 500);

    }
}

Sadece yaz

declare var $:any;

tüm içe aktarma bölümlerinden sonra jQuery kullanabilir ve jQuery kitaplığını index.html sayfanıza ekleyebilirsiniz

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

benim için çalıştı

1) Bileşende DOM'ye erişmek için.

import {BrowserDomAdapter } from '@angular/platform-browser/src/browser/browser_adapter';
constructor(el: ElementRef,public zone:NgZone) {
     this.el = el.nativeElement;
     this.dom = new BrowserDomAdapter();
 }
 ngOnInit() {
   this.dom.setValue(this.el,"Adding some content from ngOnInit"); 
 }

JQuery'yi aşağıdaki şekilde ekleyebilirsiniz. 2) açısal2 yüklenmeden önce size jquery dosyasını index.html dosyasına ekleyin

      <head>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- jquery file -->
    <script src="js/jquery-2.0.3.min.js"></script>
    <script src="js/jquery-ui.js"></script>
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>

Jquery aşağıdaki şekilde kullanabilirsiniz, İşte ben JQuery Ui tarih seçici kullanıyorum.

    import { Directive, ElementRef} from '@angular/core';
    declare  var $:any;
    @Directive({
      selector: '[uiDatePicker]',
     })
    export class UiDatePickerDirective {
      private el: HTMLElement;
      constructor(el: ElementRef) {
        this.el = el.nativeElement;

     }

    ngOnInit() {
        $(this.el).datepicker({
         onSelect: function(dateText:string) {
            //do something on select
         }
        });
    }
}

Bu iş benim için.

Jquery kurulumunu atlıyorum, çünkü bu nokta benimkinden önce oluşturulan tüm yazılarda belirtildi. Yani, zaten jquery yüklediniz. T bileşenini böyle içeri aktarma

import * as $ from 'jquery';

çalışır, ancak bunu bir hizmet oluşturarak yapmanın başka bir 'açısal' yolu vardır.

Adım no. 1: jquery.service.ts dosyası oluşturun .

// in Angular v2 it is OpaqueToken (I am on Angular v5)
import { InjectionToken } from '@angular/core';
export const JQUERY_TOKEN = new InjectionToken('jQuery');

Adım. Hayır. 2: hizmeti app.module.ts dosyasına kaydettirin

import { JQUERY_TOKEN } from './services/jQuery.service';
declare const jQuery: Object;

providers: [
    { provide: JQUERY_TOKEN, useValue: jQuery },
]

Adım no. 3: hizmeti bileşeninize my-super-duper.component.ts enjekte edin

import { Component, Inject } from '@angular/core';

export class MySuperDuperComponent {
    constructor(@Inject(JQUERY_TOKEN) private $: any) {}

    someEventHandler() {
        this.$('#my-element').css('display', 'none');
    }
}

Birisi her iki yöntemin de artılarını ve eksilerini açıklayabilirse çok minnettar olurum: hizmet olarak DI jquery, import * 'jquery'den $ $;

Bulduğum en etkili yol, setTimeout'u sayfa / bileşen yapıcısının içinde 0 zamanıyla kullanmaktır. Bu, Angular tüm alt bileşenleri yüklemeyi bitirdikten sonra jQuery'nin bir sonraki yürütme döngüsünde çalışmasına izin verin. Birkaç başka bileşen yöntemi kullanılabilir, ancak ben denedim tüm setTimeout içinde çalışırken en iyi çalışır.

export class HomePage {
    constructor() {
        setTimeout(() => {
            // run jQuery stuff here
        }, 0);
    }
}

İşte benim için işe yarayan - webpack ile Angular 2

Beyan etmeyi denedim $Tip olarakany çalıştım, ancak herhangi bir JQuery modülünü kullanmaya çalıştığımda (örneğin) aldığım $(..).datepicker()bir işlev değil

Jquery benim vendor.ts dosyama dahil olduğundan ben sadece kullanarak benim bileşeni içine ithal

import * as $ from 'jquery';

Jquery eklentilerini (bootstrap-datetimepicker gibi) şimdi kullanabiliyorum

Ayrıca "InjectionToken" ile içe aktarmayı deneyebilirsiniz. Burada açıklandığı gibi: Angular / Typescript içinde jQuery'yi tür tanımı olmadan kullanma

Sadece jQuery global örneğini enjekte edebilir ve kullanabilirsiniz. Bunun için herhangi bir tür tanımına veya tipine ihtiyacınız olmayacaktır.

import { InjectionToken } from '@angular/core';

export const JQ_TOKEN = new InjectionToken('jQuery');

export function jQueryFactory() {
    return window['jQuery'];
}

export const JQUERY_PROVIDER = [
    { provide: JQ_TOKEN, useFactory: jQueryFactory },
];

App.module.ts dosyasında doğru ayarlandığında:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

import { JQ_TOKEN } from './jQuery.service';

declare let jQuery: Object;

@NgModule({
    imports: [
        BrowserModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        { provide: JQ_TOKEN, useValue: jQuery }
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Bileşenlerinizde kullanmaya başlayabilirsiniz:

import { Component, Inject } from '@angular/core';
import { JQ_TOKEN } from './jQuery.service';

@Component({
    selector: "selector",
    templateUrl: 'somefile.html'
})
export class SomeComponent {
    constructor( @Inject(JQ_TOKEN) private $: any) { }

    somefunction() {
        this.$('...').doSomething();
    }
}

Resmi Kütüphane olarak Global Kütüphane Kurulumu

1. Npm'den yükle:

   npm install jquery --save

2. Komut dosyalarına gerekli komut dosyalarını ekleyin:

   "scripts": [ "node_modules/jquery/dist/jquery.slim.js" ],

Çalıştırıyorsanız sunucuyu yeniden başlatın ve uygulamanızda çalışıyor olması gerekir.

Eğer tek bileşenli kullanıma içine kullanmak istiyorsanız import $ from 'jquery';sizin bileşenlerin içinde

Diğerleri zaten yayınlanmış. ama burada basit bir örnek veriyorum, böylece yeni gelenlere yardımcı olabilirim.

Adım-1: index.html dosya başvuru jquery cdn

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Adım-2: Bir düğmeyi tıklayarak div göstermek veya div'ı gizlemek istediğimizi varsayalım:

 <input type="button" value="Add New" (click)="ShowForm();">


 <div class="container">
  //-----.HideMe{display:none;} is a css class----//

  <div id="PriceForm" class="HideMe">
     <app-pricedetails></app-pricedetails>
  </div>
  <app-pricemng></app-pricemng>
 </div>

Adım-3: Aşağıdaki bileşen dosyasında içe aktarma bildirimi $ olarak feryat:

declare var $: any;

feryat gibi bir işlev oluşturmaktan daha fazlası:

 ShowForm(){
   $('#PriceForm').removeClass('HideMe');
 }

En son Açısal ve JQuery ile çalışacaktır

İlk olarak, aşağıdaki gibi npm kullanarak jQuery yükleyin:

npm install jquery — save

İkinci olarak, Açısal CLI proje klasörünüzün kökündeki ./angular-cli.json dosyasına gidin ve komut dosyalarını bulun: [] özelliği ve jQuery yolunu aşağıdaki gibi ekleyin:

"scripts": [ "../node_modules/jquery/dist/jquery.min.js" ]

Şimdi, jQuery kullanmak için tek yapmanız gereken jQuery kullanmak istediğiniz herhangi bir bileşen içine onu almaktır.

import * as $ from 'jquery';
(or)
declare var $: any;

Özellikle ikinci satırda tıklama üzerine div canlandırmak için jQuery kullanan aşağıdaki koda bir göz atın. Her şeyi jQuery'den $ olarak alıyoruz.

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'Look jQuery Animation working in action!';

  public ngOnInit()
  {
    $(document).ready(function(){
        $("button").click(function(){
            var div = $("div");  
            div.animate({left: '100px'}, "slow");
            div.animate({fontSize: '5em'}, "slow");
        });
    });
  }
}

Jquery yükleyin

Terminal $ npm install jquery

(Bootstrap 4 için ...)

Terminal $ npm install popper.js

Terminal $ npm install bootstrap

Ardından importifadeyi şuraya ekleyin app.module.ts.

import 'jquery'

(Bootstrap 4 için ...)

import 'popper.js'
import 'bootstrap'

Artık ihtiyacınız olmayacak <SCRIPT> JavaScript'e başvurmak için etiketlere .

(Kullanmak istediğiniz herhangi bir CSS'ye hala başvurulmalıdır styles.css)

@import "~bootstrap/dist/css/bootstrap.min.css";

Angular'ı kullandığınızda, jquery kitaplığını kullanmamaya çalışın. Açısal çerçeve için üretilen özellikleri ve kütüphaneleri kullanmayı deneyin. Find () , html () , en yakın () ve benzeri jquery işlevlerini kullanmak istiyorsanız , saf js kullanmanızı öneririm. örnek: querySelector () , innerHTML , parentElement ve benzeri ...