Ausführliche Erläuterung der Werteerfassungs- und Zuweisungsbeispiele von jQuery für html elements_jquery

Das Beispiel in diesem Artikel beschreibt die Methode von jQuery zum Abrufen und Zuweisen von Werten zu HTML-Elementen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Jquerys Wertesammlung und Zuweisung zu grundlegenden Steuerelementen

TEXTFELD:

var str = $('#txt').val();
$('#txt').val("Set Lbl Value"); 
//文本框，文本区域：
$("#text_id").attr("value",'');//清空内容
$("#text_id").attr("value",'test');// 填充内容

ETIKETT:

var str = $('#lbl').text();
$('#lbl').text("Set Lbl Value");
var valradio = $("input[@type=radio][@checked]").val();
var item = $('input[@name=items][@checked]').val();
var checkboxval = $("#checkbox_id").attr("value")；
var selectval = $('#select_id').val();

Kontrollkästchen „Mehrfachauswahlfeld“:

$("#chk_id").attr("checked",'');//使其未勾选
$("#chk_id").attr("checked",true);// 勾选
if($("#chk_id").attr('checked')==true) //判断是否已经选中

Radiogruppenradio:

Code kopieren Der Code lautet wie folgt:

$("input[@type=radio]").attr( "checked" ,'2'); //Das Element mit dem Wert=2 als aktuell ausgewähltes Element festlegen

Dropdown-Feld auswählen:

$("#select_id").attr("value",'test');// 设置value=test的项目为当前选中项
$("<option value='test'>test</option><option value='test2'>test2</option>").appendTo("#select_id")//添加下拉框的 option
$("#select_id").empty();//清空下拉框

Ermitteln Sie den Wert einer Gruppe radioaktiv ausgewählter Elemente mit dem Namen (items)

Code kopieren Der Code lautet wie folgt:

var item = $('input[@name=items][@ geprüft]' ).val();//Wenn nicht ausgewählt, val() = undefiniert

Rufen Sie den Text des ausgewählten Elements in select ab

var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;

Das zweite Element der Radioauswahlgruppe ist der aktuell ausgewählte Wert

Code kopieren Der Code lautet wie folgt:

$('input[@name=items]').get( 1).geprüft = wahr;

Formular zurücksetzen:

$("form").each(function(){
  .reset();
});

Ergänzung:

Werterfassung und Zuweisung von jQuery zu Formularelementen:

1. Element auswählen

$("#myid") hat den gleichen Effekt wie document.getElementById("myid"), erfordert aber weitaus weniger Zeichen.

Wenn Sie ein jQuery-Objekt in ein HTML-Element konvertieren müssen, müssen Sie nur das 0. Element verwenden. Beispielsweise gibt $("#myid") ein jQuery-Objekt zurück, während $("#myid")[0 ] Was zurückgegeben wird, ist das HTML-Element

Wenn Sie alle img-Elemente auswählen, schreiben Sie: $("img")

Wenn Sie ein div-Element mit class="TextBox" (

) auswählen, dann schreiben Sie so: $("div.TextBox")

Wählen Sie das Element mit dem myattr-Attribut $("div[myattr]")
aus Wählen Sie das Element mit dem Attribut myattr und dem Attributwert gleich myclass $("div[myattr='myclass']")
aus Das Attribut ist nicht gleich [myattr!='myclass']
Attribute beginnen mit my [myattr^='my']
Attribute enden mit der Klasse [myattr$='class']
Das Attribut enthält die drei Zeichen cla [myattr*='cla']

Wenn eine Auswahl mehrere Elemente zurückgibt und Sie bestimmte Attribute auf jedes zurückgegebene Element anwenden möchten, können Sie so schreiben

$("div").each(function()
{
$(this).css("background-color", "#F00″);
alert($(this).html());
$(this).width("200px");
});

2. Veranstaltung

Onload-Ereignisbehandlungsmethode zur Seite hinzufügen

$(function()
{
alert("页面结构加载完毕, 但是可能某些图片尚未加载(一般情况下, 此事件就够用了)");
});

Sie können mehrere Onload-Ereignisbehandlungsmethoden an die Seite binden

$(function()
{
alert("我首先被执行");
});
$(function()
{
alert("我第二被执行");
});

Besondere Ereignisse binden

$("#myid").keydown(function()
{
alert("触发了keydown事件");
});

Zusätzlich zu diesen häufig verwendeten Ereignissen müssen auch ungewöhnliche Ereignisse über die Bindungsmethode gebunden werden

3. Elementattribute/-methoden

Ermitteln Sie die Höhe eines Elements, $("#myid").height()
Um die Position eines Elements zu ermitteln, gibt $("#myid").offset() ein Offset-Objekt zurück. Wenn Sie den Anfang der Elementposition nehmen, dann $("#myid").offset().top, wenn Sie biegen links ab und dann $("#myid").offset().left
Rufen Sie das innerHTML eines Elements ab, $("#myid").html()
Rufen Sie den inneren Text eines Elements ab, $("#myid").text()
Rufen Sie den Wert eines Textfelds ab, $("#myid").val()
Rufen Sie die Attribute eines Elements ab, $("#myid").attr("myattribute")

Die oben genannten Methoden haben eine Grundfunktion, das heißt, es werden keine Parameter zur Darstellung des Werts verwendet, und Parameter werden zur Darstellung des Einstellungswerts verwendet (außer Offset), wie z. B.

$("#myid").height("20″);
$("#myid").html("<a href=">asdasd</a>")
$("#myid").val("asdasd")

Beachten Sie, dass der Offset schreibgeschützt ist.

Attribute für ein Element festlegen

Code kopieren Der Code lautet wie folgt:

$("#myid") .attr( "width", "20%")

Ein Attribut lesen

Code kopieren Der Code lautet wie folgt:

$("#myid").attr("width ")

Geben Sie mehrere Attribute gleichzeitig an

Code kopieren Der Code lautet wie folgt:

$("#myid").attr( {disabled: "disabled", width:"20%", height: "30″})

Attribute löschen

Code kopieren Der Code lautet wie folgt:

$("#myid").removeAttr("disabled" )

应用样式

复制代码 代码如下:

$("#myid").addClass("myclass")

删除样式

复制代码 代码如下:

$("#myid").removeClass("myclass")

加一个样式

复制代码 代码如下:

$("#myid").css("height", "20px")

加一组样式

复制代码 代码如下:

$("#myid").css({height:"20px", width:"100px"})

需要注意的是: 如果是加一个样式, 这个样式的名字是css中的名字, 比如说style="background-color:#FF0000″, 对应的jQuery写法是

复制代码 代码如下:

$("#myid").css("background-color", "#FF0000″)

但是加一组样式的时候, 样式的名字就是javascript中的css名字了, 比如: myid.style.backgroundColor = "#FF0000″, 对应的jQuery写法是

复制代码 代码如下:

$("#myid").css({backgroundColor:"#FF0000″})

4. 根据关系查找元素

找和自己同级的下一个元素

复制代码 代码如下:

$("#myid").next()

找和自己同级的所有位于自己之下的元素

复制代码 代码如下:

$("#myid").nextAll()

找和自己同级的上一个元素

复制代码 代码如下:

$("#myid").prev()

找和自己同级的所有位于自己之上的所有元素

复制代码 代码如下:

$("#myid").prevAll()

找自己的第一代子元素

复制代码 代码如下:

$("#myid").children()

找自己的第一个父元素

复制代码 代码如下:

$("#myid").parent()

找自己的所有父元素

复制代码 代码如下:

$("#myid").parents()

例子:

$("div.l4″).parents().each(
function() {
alert($(this).html());
});

会把class=l4的div的所有父元素都得到, 并且alert出他们的html

例子:

复制代码 代码如下:

$("div.l4″).parents("div.l2″).each(function() { alert($(this).html()); });

会得到class=l4的父元素, 该父元素必须是div, 而且其class=l2

这里说的所有方法, 都可以带表达式, 表达式的写法参考第一部分

5. 维护元素

在body中增加一个元素

复制代码 代码如下:

$("body").append("")

该语句会把这段html插入到body结束标签之前, 结果是