Maison >interface Web >js tutoriel >Méthodes de base d'acquisition de valeur jQuery et d'affectation_jquery
/*Obtenir la valeur de TEXT.AREATETEX*/
var textval = $("#text_id").attr("value");
//ou
var textval = $("#text_id"); ) .val();
/*Obtenir la valeur du bouton radio*/
var valradio = $("input[@type=radio][@checked]").val(); /* Récupère la valeur d'un groupe d'éléments radio sélectionnés nommés (items)*/
var item = $('input[@name=items][@checked]').val(); Obtenir la valeur de la case à cocher*/
var checkboxval = $("#checkbox_id").attr("value");
/*Obtenir la valeur de la liste déroulante*/
var selectval = $( '# select_id').val();
//Zone de texte, zone de texte :
$("#text_id").attr("value",'');//Effacer le contenu
$("#text_id").attr("value",'test');//Remplir le contenu
//case à cocher Plusieurs cases de sélection :
$("#chk_id").attr(" checked", '');//Le rendre décoché
$("#chk_id").attr("checked",true);//Checked
if($("#chk_id").attr( 'checked')==true) //Déterminez si elle a été sélectionnée
//Radio de groupe à sélection unique :
$("input[@type=radio]").attr( "checked",'2');//Définissez l'élément avec la valeur = 2 comme élément actuellement sélectionné
//Boîte déroulante de sélection :
$("#select_id").attr( "value",'test ');//L'élément qui définit value=test est l'élément actuellement sélectionné
$("
test
").appendTo("# select_id")//Ajouter une option de liste déroulante
Obtenir la valeur d'un ensemble de radios sélectionné éléments nommés (items)
var item = $ ('input[@name=items][@checked]').val();//Si non sélectionné, val() = undefined
Obtenir le texte de l'élément sélectionné
var item = $( "select[@name=items] option[@selected]").text();
Le deuxième élément de la liste déroulante de sélection est la valeur actuellement sélectionnée
🎜>$('#select_id')[0].selectedIndex = 1;
Le deuxième élément du groupe radio radio est la valeur actuellement sélectionnée
$('input[@name=items]').get (1).checked = true;
//Réinitialiser le formulaire
$("form").each(function(){
.reset();
}); >
1. Sélectionnez l'élément
$( "#myid") a le même effet que document.getElementById("myid"), mais les caractères écrits sont bien moindres
Si vous en avez besoin. convertissez l'objet jQuery en un élément html, il vous suffit de prendre le 0ème élément. C'est tout. Par exemple, $("#myid") renvoie un objet jQuery et $("#myid")[0] renvoie l'élément html.
. Si vous sélectionnez tous les éléments img, alors écrivez comme ceci : $("img")
Si vous sélectionnez un élément div avec class="TextBox" (
), puis écrivez comme ceci : $("div.TextBox")
Sélectionnez l'élément avec l'attribut myattr $("div[myattr]")
Sélectionnez l'élément avec l'attribut myattr, et le la valeur de l'attribut est égale à maclasse L'élément $("div[myattr='myclass']")
L'attribut n'est pas égal à [myattr!='myclass']
L'attribut commence par mon [myattr^= 'my']
L'attribut commence par class Ending [myattr$='class']
L'attribut contient les trois caractères cla [myattr*='cla']
Si une sélection renverra plusieurs éléments, et vous souhaitez renvoyer chaque élément, puis pour appliquer certains attributs à l'élément, vous pouvez écrire
$("div").each(function()
{
$(this). css("background-color", "# F00″);
alerte($(this).html());
$(this).width(”200px”);
});
2. Événement
Ajouter la méthode de gestion des événements onload à la page
$(function()
{
alert("La structure de la page est chargée, mais certaines images peuvent ne pas l'être chargé (généralement, cet événement est suffisant) )");
});
Vous pouvez lier plusieurs méthodes de gestion des événements onload à la page
$(function()
{
alert("J'ai été exécuté en premier" );
});
$(function()
{
alert("J'ai été exécuté en deuxième");
} );
Tie Définir des événements spéciaux
$("#myid").keydown(function()
{
alert("événement keydown déclenché");
});
En plus de ces événements couramment utilisés et inhabituels doivent être liés via la méthode de liaison
3 Les attributs/méthodes d'élément
obtiennent la hauteur d'un élément, $(”#myid. ”).height()
obtenez une position de l'élément, $("#myid").offset() renvoie un objet offset si vous prenez le haut de la position de l'élément, alors $("#myid" ).offset().top, si vous prenez à gauche, alors $( "#myid").offset().left
Obtenez le innerHTML d'un élément, $("#myid").html()
Obtenir le texte interne d'un élément, $("#myid").text( )
Obtenir la valeur d'une zone de texte, $("#myid").val()
Obtenir l'attribut d'un element, $("#myid").attr("myattribute")
Les méthodes ci-dessus ont une fonctionnalité de base, c'est-à-dire qu'aucun paramètre n'est utilisé pour représenter la valeur et que les paramètres sont utilisés pour représenter le paramètre valeur (sauf décalage), telle que
$(”#myid”).height(”20″);
$("#myid").html("asdasd")
$("#myid").val("asdasd")
Notez que le décalage est uniquement en lecture
Définissez les attributs d'un élément $("#myid").attr(. "width", "20%")
Lire un attribut $("#myid").attr( "width")
Spécifier plusieurs attributs à la fois $("#myid").attr({disabled : "disabled", largeur : "20%", hauteur : "30″})
Supprimer les attributs $( "#myid").removeAttr("disabled")
Appliquer le style$("#myid) ").addClass("myclass")
Supprimer le style$("#myid").removeClass(" myclass")
Ajouter un style $(”#myid”).css(”height” , “20px”)
Ajouter un ensemble de styles $(”#myid”).css({height: "20px", width:"100px"})
Il est à noter que si vous ajoutez un style , le nom de ce style est le nom en CSS, par exemple, style=”background-color:#FF0000″, correspondant La méthode d'écriture jQuery est $("#myid").css("background-color", "# FF0000")
Mais lors de l'ajout d'un ensemble de styles, le nom du style est le nom css en JavaScript, par exemple : myid. style.backgroundColor = « #FF0000″, l'écriture jQuery correspondante est $( »#myid ”).css({backgroundColor:”#FF0000″})
4. Rechercher des éléments en fonction de la relation
Trouver la somme L'élément suivant de son propre niveau $("#myid").next ()
Trouver tous les éléments de son propre niveau qui sont en dessous de lui $("#myid").nextAll()
Trouver la somme L'élément précédent de son propre niveau $("#myid").prev ()
Trouvez tous les éléments de son propre niveau qui sont au-dessus de lui-même $("#myid").prevAll()
Trouvez votre propre élément enfant de première génération $("#myid").children()
Trouvez votre premier élément parent $("#myid").parent()
Trouvez tous vos propres éléments parents$ ("#myid").parents()
Exemple :
$(" div.l4").parents().each(
function() {
alert($(this). html());
});
obtiendra tous les éléments parents du div avec class=l4, et alerter leur html
Exemple :
$( ”div.l4″).parents(”div.l2″).each(function() { alert ($(this).html());
obtiendra l'élément parent de class=l4, qui doit être un div, et sa classe=l2
Toutes les méthodes. mentionné ici peut avoir des expressions. Pour la méthode d'écriture des expressions, veuillez vous référer à la partie 1
5 Maintenir l'élément
dans Ajouter un élément au corps
$("body").append(. "")
Cette instruction insérera ce code HTML avant la balise de fin de body, le résultat est