jQuery manipulant les attributs des éléments

jQuery exploite les attributs d'élément

Nous pouvons utiliser getAttribute et setAttribute en javascript pour exploiter les "attributs d'élément" de l'élément.

Dans jQuery, vous disposez de la fonction d'ensemble d'emballage attr(), qui peut utiliser simultanément les attributs de tous les éléments de l'ensemble d'emballage :

QQ截图20161026094540.png

Lors de l'utilisation du sélecteur d'identifiant, un seul L'objet est souvent renvoyé. JQuery wrapper set, à ce stade, la fonction attr(name) est souvent utilisée pour obtenir ses attributs d'élément :

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

Notez que la fonction attr(name) ne renvoie que la valeur d'attribut d'élément spécifique de le premier élément correspondant. Et attr(key , name) définira les attributs de l'élément dans tous les ensembles d'emballage :

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

et attr( Properties ) peuvent modifier plusieurs attributs d'élément à la fois :

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

De plus, bien que nous puissions utiliser removeAttr( name ) pour supprimer les attributs d'élément, les attributs DOM correspondants ne seront pas supprimés et n'affecteront que la valeur de l'attribut DOM

Par exemple, la suppression du. L'attribut d'élément en lecture seule d'un élément d'entrée fera que l'attribut DOM correspondant deviendra faux (c'est-à-dire que l'entrée deviendra modifiable) :

   $("#inputTest").removeAttr("readonly");


Formation continue
||
<!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>
soumettreRéinitialiser le code
  • Recommandations de cours
  • Téléchargement du didacticiel