jquery获取控件值(总结)

本文介绍了如何使用jQuery来操作各种表单元素,包括文本框、复选框、单选按钮和下拉框等,提供了获取和设置这些元素值的具体方法。

获取一组radio被选中项的值
var item = $('input[@name=items][@checked]').val();
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$('input[@name=items]').get(1).checked = true;

获取值:

文本框,文本区域:$("#txt").attr("value");
多选框checkbox:$("#checkbox_id").attr("value");
单选组radio: $("input[@type=radio][@checked]").val();
下拉框select: $('#sel').val();

控制表单元素:
文本框,文本区域:$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');//填充内容

多选框checkbox: $("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾

单选组radio: $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
下拉框select: $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
$("#sel").empty();//清空下拉框

<think>我们正在解决一个问题:如何使用jQuery获取触发onchange事件的元素? 根据引用[3]中的示例,我们看到在HTML中直接使用onchange属性时,我们可以在函数内通过this来获取触发事件的元素(但该示例中没有使用this,而是直接通过id获取select元素)。 然而,在jQuery中,我们通常使用事件处理函数,可以通过this或event.target来获取触发事件的元素。 引用[4]展示了如何通过jQuery触发change事件:先选中某个option,然后触发change事件。这里触发事件的对象是select元素。 因此,在jQuery中,我们可以这样获取触发onchange事件的控件: 方法1:使用jQuery的事件处理函数,通过this关键字 方法2:使用事件对象event的target属性 具体步骤: 1. 使用jQuery绑定change事件 2. 在事件处理函数中,this指向触发事件的DOM元素,event.target指向最初触发事件的DOM元素(对于change事件,由于是表单元素触发,通常两者一致) 示例代码: HTML: <select id="mySelect"> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> jQuery: // 绑定change事件 $('#mySelect').change(function(event) { // 方法1: 使用this var element1 = this; // DOM元素 var $element1 = $(this); // jQuery对象 // 方法2: 使用event.target var element2 = event.target; // DOM元素 var $element2 = $(event.target); // jQuery对象 console.log('触发事件的元素(通过this):', element1); console.log('触发事件的元素(通过event.target):', element2); }); 注意:在change事件中,this和event.target通常指向同一个元素(即select元素)。但是,如果事件是冒泡上来的(比如在事件委托中),则event.target可能是子元素,而this是事件绑定的元素。对于select的change事件,我们通常直接绑定在select上,所以两者相同。 另外,引用[1]和[2]提到的问题(事件干扰和手动触发)虽然与我们的问题不直接相关,但我们可以注意:在获取触发事件元素的同时,有时需要阻止事件冒泡(使用event.stopPropagation())或阻止默认行为(event.preventDefault())来避免干扰其他事件。 因此,获取触发onchange事件的控件,推荐使用this,因为它更直接地指向绑定事件的元素。 总结:在jQuery的change事件处理函数中,使用this或event.target都可以获取触发事件的控件,但要注意事件委托的情况。对于直接绑定,两者相同。 相关问题: 1. 在事件委托中如何获取触发change事件的元素? 2. 如何区分this和event.target在事件处理中的不同? 3. 如何手动触发select元素的change事件确保获取到正确的触发元素?</think>### jQuery 获取触发 onchange 事件的元素 在 jQuery获取触发 `onchange` 事件的元素,主要通过事件处理函数中的 `this` 关键字或 `event.target` 属性实现。以下是具体方法和代码示例: #### 方法 1:使用 `this` 关键字(推荐) ```javascript $("select").change(function() { // this 直接指向触发事件的 select 元素 const $select = $(this); // 获取当前选中 const selectedValue = $select.val(); const selectedText = $select.find("option:selected").text(); console.log("触发元素:", $select.attr("id")); console.log("选中:", selectedValue, "文本:", selectedText); }); ``` - **优点**:简洁可靠,直接指向绑定事件的元素 - **适用场景**:直接绑定的 `change` 事件[^3] #### 方法 2:使用 `event.target` ```javascript $(document).on("change", "select", function(event) { // event.target 指向实际触发事件的元素 const $target = $(event.target); // 获取变化后的 console.log("新:", $target.val()); }); ``` - **注意**:在事件委托中,`event.target` 始终指向实际触发事件的元素 #### 手动触发获取元素(扩展) ```javascript // 设置选中触发 change 事件 $("#mySelect").val("Apple").trigger("change"); // 在事件处理函数中仍可通过 this 获取 $("#mySelect").change(function() { console.log("手动触发元素:", $(this).attr("id")); // 输出 mySelect }); ``` #### 实际应用示例 ```html <select id="fruitSelect"> <option value="">请选择</option> <option value="apple">Apple</option> <option value="banana">Banana</option> </select> <script> $("#fruitSelect").change(function() { const $select = $(this); const value = $select.val(); const text = $select.find("option:selected").text(); $("#result").html(`选择了: ${text} (: ${value})`); }); </script> ``` #### 关键点总结 1. **直接绑定事件**时优先使用 `$(this)` 2. **事件委托场景**使用 `$(event.target)` 3. **手动触发事件**后,处理函数中的 `this` 仍指向目标元素 4. 可通过 `.val()` 获取,`.find("option:selected")` 获取选中项[^3][^4] > 最佳实践:始终在事件处理函数开头缓存元素引用 > ```javascript > $("select").change(function() { > const $el = $(this); // 缓存元素引用 > // 后续操作使用 $el... > }); > ```
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值