การจัดการ DOM ด้วย jQuery - 1

บทนำเกี่ยวกับเมธอด

เมธอด text

<h1 id="hello">Hello Coddy</h1>		
<h2 id="target"></h2>

<script>
$(document).ready(function(){

/*
With the $ ('# hello') statement, 
we selected the element with hello id 
and set the element's content related
to the text method of this object to 
the variable named result.
*/
var result =  $('#hello').text();

/* 
We find the element with the 
target id in the DOM and assign the value 
of the result variable to the 
text method of this object. 
*/

$('#target').text(result);

/*
As a result, we have assigned 
the value of the h1 element 
to the h2 element.
*/
});
</script>

คำถาม

เมธอด html

<div id="base">
    <p>Hello Coddy</p>
    <p>I'm p element</p>
  </div>		

<div id="target"></div>

<script>

/* 
Callback will run as son as 
the DOM is loaded
*/
$(document).ready(function(){
     //copy the base element HTML
     var baseHTML =  $('#base').html();
     /* update target element 
     by using baseHTML value
     */
     $('#target').html(baseHTML);
})
</script>

ตัวเลือกแอตทริบิวต์

<a  href="https://www.coddykit.com"  
       target="_blank"
       title="CoddyKit Web App" class="base">
     Go CoddyKit
</a>		
<br/>
<span id="link-title"></span>

<script>

/*
Callback will run as son 
as the DOM is loaded
*/
$(document).ready(function(){

     //Read link's title attribute
     var linkTitle =  $('a').attr('title');

     /* update target element content 
         by using linkTitle value
     */
     $('#link-title').text(linkTitle);
})
</script>

แอตทริบิวต์

/* 
The target attribute of the element with 
my-link id has been passed the _blank value.
*/
// Mock for Judge0 Node environment
const element = { attr: function(name, value) { console.log(`Setting ${name} to ${value} for #my-link`); } };
const $ = (selector) => element;
$('#my-link').attr('target', '_blank');

removeAttr

/*
All elements
with tag a have been deleted.
*/
// Simulated DOM for Node.js
const elements = [
  { tag: 'a', target: '_blank' },
  { tag: 'a', target: '_self' },
  { tag: 'p' }
];
elements.forEach(el => {
  if (el.tag === 'a') delete el.target;
});
console.log(JSON.stringify(elements));

เมธอด val

<input type="text" id="name" 
           name="yourname" 
           value="CoddyKit" />
  <p>
   Your name: <span id="target"></span>
 </p>
<script>

/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){

//copy the input elemens value
var yourName =  $('#name').val();

/* update target element 
    text by using yourName value
*/
  $('#target').text(yourName);
})

</script>

คำเตือน

ข้อมูลเพิ่มเติม

const $ = (selector) => ({
  val: (value) => console.log(`Set ${selector} to ${value}`)
});
$('#name').val('New value')

ขอแสดงความยินดี