jQuery memanipulasi atribut elemen

jQuery mengendalikan atribut elemen

Kita boleh menggunakan getAttribute dan setAttribute dalam javascript untuk mengendalikan "atribut elemen" elemen.

Dalam jQuery menyediakan anda dengan attr() fungsi set pembalut, yang secara serentak boleh mengendalikan atribut semua elemen dalam set pembalut:

QQ截图20161026094540.png

Apabila menggunakan pemilih id, hanya satu objek sering dikembalikan set pembungkus jQuery, pada masa ini fungsi attr(name) sering digunakan untuk mendapatkan atribut elemennya:

function testAttr1(event) {    
         alert($("#hibiscus").attr("class"));    
    }

Perhatikan bahawa fungsi attr(name) hanya mengembalikan nilai atribut elemen tertentu bagi elemen padanan pertama. Dan attr(key , name) akan menetapkan atribut elemen dalam semua set pembungkusan:

//修改所有img元素的alt属性    
$("img").attr("alt", "修改后的alt属性");

dan attr( properties) boleh mengubah suai berbilang atribut elemen pada satu masa:

rreee

Selain itu, walaupun kita boleh menggunakan atribut removeAttr( name ) delete element, tetapi atribut DOM yang sepadan tidak akan dipadamkan dan hanya akan menjejaskan nilai atribut DOM

Contohnya, mengalih keluar atribut elemen baca sahaja bagi elemen input akan menyebabkan atribut DOM yang sepadan menjadi palsu (iaitu, input boleh diedit):

  $("img").attr({title:"修改后的title", alt: "同时修改alt属性"});


Meneruskan pembelajaran
||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Jquery 动态修改连接</title> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <!--上面更换您的jquery 路径--> </head> <style> span{display:block; width:100px; margin:0 20px 15px 0; text-align:center; height:20px; line-height:20px; display:block; float:left; background:#CCC;} div{border:#000 solid 1px; height:30px; clear:left; width:300px; line-height:30px; text-align:center;} </style> <script> var link1 = "<a href='http://www.baidu.com' target='_blank'>";//声明一个变量 var link2 = "<a href='http://www.qq.com' target='_blank'>"; var link3 = "<a href='http://www.sina.com.cn' target='_blank'>"; var linkR = "</a>";//连接结束 $(function(){ $("#link1").hover(function(){ $("#test").html(link1+"连接文字"+linkR);//修改指向时的连接 }) $("#link2").hover(function(){ $("#test").html(link2+"连接文字2"+linkR); }) $("#link3").hover(function(){ $("#test").html(link3+"连接文字3"+linkR); }) }) </script> <body> <span id="link1">1</span> <span id="link2">2</span> <span id="link3">3</span> <div id="test"></div> </body> </html>
  • Cadangan kursus
  • Muat turun perisian kursus