Penjelasan terperinci tentang pemerolehan nilai jQuery dan contoh tugasan untuk html elements

Contoh dalam artikel ini menerangkan kaedah jQuery untuk mendapatkan dan memberikan nilai kepada elemen html. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Pengumpulan nilai Jquery dan penugasan kepada kawalan asas

KOTAK TEKS:

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

Salin selepas log masuk

LABEL:

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();

Salin selepas log masuk

Kotak pilihan berbilang kotak pilihan:

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

Salin selepas log masuk

Radio kumpulan radio:

Salin kod Kod adalah seperti berikut:

$("input[@type=radio]").attr( "checked" ,'2'); //Tetapkan item dengan nilai=2 sebagai item yang sedang dipilih 

Pilih kotak lungsur turun:

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

Salin selepas log masuk

Dapatkan nilai sekumpulan item terpilih radio bernama (item)

Salin kod Kod adalah seperti berikut:

var item = $('input[@name=items][@ ditanda]' ).val();//Jika tidak dipilih, val() = tidak ditentukan

Dapatkan teks item yang dipilih dalam pilihan

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

Salin selepas log masuk

Elemen kedua kumpulan pemilihan radio radio ialah nilai yang dipilih pada masa ini

Salin kod Kod adalah seperti berikut:

$('input[@name=items]').get( 1). disemak = benar;

Tetapkan semula borang:

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

Salin selepas log masuk

Tambahan:

pemerolehan nilai dan penugasan jQuery untuk membentuk elemen:

1. Pilih elemen

$("#myid") mempunyai kesan yang sama seperti document.getElementById("myid"), tetapi ia memerlukan lebih sedikit aksara.

Jika anda perlu menukar objek jQuery kepada elemen html, anda hanya perlu mengambil elemen ke-0 Sebagai contoh, $("#myid") mengembalikan objek jQuery, manakala $("#myid")[0 ] Apa yang dikembalikan ialah elemen html

Jika anda memilih semua elemen img, kemudian tulis: $("img")

Jika anda memilih elemen div dengan class="TextBox" (

), kemudian tulis seperti ini: $("div.TextBox")

Pilih elemen dengan atribut myattr $("div[myattr]")
Pilih elemen dengan atribut myattr dan nilai atribut sama dengan myclass $("div[myattr='myclass']")
Atribut tidak sama dengan [myattr!='myclass']
Atribut bermula dengan [myattr^='my']
saya Atribut berakhir dengan kelas [myattr$='class']
Atribut mengandungi tiga aksara cla [myattr*='cla']

Jika pilihan mengembalikan berbilang elemen, dan anda ingin menggunakan atribut tertentu pada setiap elemen yang dikembalikan, anda boleh menulis seperti ini

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

Salin selepas log masuk

Tambahkan kaedah pengendalian acara onload pada halaman

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

Salin selepas log masuk

Anda boleh mengikat berbilang kaedah pengendalian acara onload ke halaman

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

Salin selepas log masuk

Mengikat acara istimewa

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

Salin selepas log masuk

Selain daripada yang biasa digunakan ini, peristiwa luar biasa perlu diikat melalui kaedah bind

3. Atribut/kaedah elemen

Dapatkan ketinggian elemen, $("#myid").height()

Untuk mendapatkan kedudukan elemen, $("#myid").offset() mengembalikan objek offset Jika anda mengambil bahagian atas kedudukan elemen, maka $("#myid").offset().top, if anda belok kiri, kemudian $("#myid").offset().kiri
Dapatkan innerHTML elemen, $("#myid").html()
Dapatkan innerTeks elemen, $("#myid").text()
Dapatkan nilai kotak teks, $("#myid").val()
Dapatkan atribut elemen, $("#myid").attr("myattribute")

Kaedah di atas mempunyai ciri asas, iaitu, tiada parameter digunakan untuk mewakili nilai dan parameter digunakan untuk mewakili nilai tetapan (kecuali offset), seperti

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

Salin selepas log masuk

Perhatikan bahawa ofset ialah baca sahaja.

Tetapkan atribut untuk elemen

Salin kod Kod adalah seperti berikut:

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

Baca atribut

Salin kod Kod adalah seperti berikut:

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

Tentukan berbilang atribut sekaligus

Salin kod Kod adalah seperti berikut:

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

Padamkan atribut

Salin kod Kod adalah seperti berikut:

$("#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());
});

Salin selepas log masuk

会把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结束标签之前, 结果是

复制代码代码如下:

$("body").prepend("")

该语句会把这段html插入到body开始标签之后, 结果是

6.AJAX

用get方法请求一个页面

复制代码代码如下:

$.get("http://www.google.com", "q=jquery", function(data, status){alert(data)})

表示请求http://www.google.com, 参数是q, 参数的值是jquery, 请求结束后(不管成功还是失败)执行后面的function, 该function有两个固定参数, data和status, data是返回的数据, status是本次请求的状态

用post方法请求一个页面
$.post(……..) 参数同get方法

7.其他方法

$.trim(str) 将str前后空格去掉
$.browser 返回当前用户浏览器的类型
$.browser.version返回当前浏览器的版本

8. 插件

jQuery支持插件, http://jquery.com/plugins/上面有很多现成的插件, 也可以自己写
自己写插件, 请参考http://docs.jquery.com/Core/jQ.....end#object 和http://docs.jquery.com/Core/jQuery.extend#object

1. 下拉框:

var cc1 = $(".formc select[@name='country'] option[@selected]").text(); //得到下拉菜单的选中项的文本(注意中间有空格)
var cc2 = $('.formc select[@name="country"]').val(); //得到下拉菜单的选中项的值
var cc3 = $('.formc select[@name="country"]').attr("id"); //得到下拉菜单的选中项的ID属性值
$("#select").empty();//清空下拉框//$("#select").html('');
$("<option value='1'>1111</option>").appendTo("#select")//添加下拉框的option

Salin selepas log masuk

稍微解释一下:

select[@name='country'] option[@selected] 表示具有name 属性，
并且该属性值为'country' 的select元素里面的具有selected 属性的option 元素；
可以看出有@开头的就表示后面跟的是属性。

2. 单选框:

$("input[@type=radio][@checked]").val(); //得到单选框的选中项的值(注意中间没有空格)
$("input[@type=radio][@value=2]").attr("checked",'checked'); //设置单选框value=2的为选中状态.(注意中间没有空格)

Salin selepas log masuk

3. 复选框:

$("input[@type=checkbox][@checked]").val(); //得到复选框的选中的第一项的值
$("input[@type=checkbox][@checked]").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出
 alert($(this).val());
});
$("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined){} //判断是否已经打勾

Salin selepas log masuk

希望本文所述对大家jQuery程序设计有所帮助。