一、基础性质
在使用jquery进行赋值时,我们首先需要了解jquery的基础性质。在jquery中,我们可以使用“$”符号来引用jquery库。
$('selector')
其中,“selector”表示我们要选择的元素,jquery会根据选择器的不同来定位想要修改的元素。
在jquery中,我们可以使用.val()方法来获取或设置元素的值。
// 获取input元素的值
$('input').val();
// 设置input元素的值
$('input').val('new value');
二、表单元素值的赋值
jquery最常用的赋值方式之一就是对表单元素的值进行赋值。比如我们可以通过下面的代码来设置文本框中的值。
$('input[type="text"]').val('new value');
同样的,我们也可以对下拉选项进行赋值。
$('select').val('option-value');
对于单选和复选框,我们需要使用.prop()或者.attr()方法来设置它们的checked属性。
// 设置单选框为选中状态
$('input[type="radio"][value="radio-value"]').prop('checked', true);
// 设置多个复选框为选中状态
$('input[type="checkbox"][value="value-1"], input[type="checkbox"][value="value-2"]').prop('checked', true);
三、元素属性值的赋值
除了对表单元素的值进行赋值,jquery还可以对元素的属性进行赋值。我们可以使用.attr()方法来实现此功能。
// 设置img元素的src属性值
$('img').attr('src', 'path/to/image.jpg');
同样的,我们也可以使用.removeAttr()方法来移除元素的属性。
// 移除button元素的disabled属性
$('button').removeAttr('disabled');
四、元素内容的赋值
有时候我们需要修改元素内部的HTML内容,jquery同样也提供了这样的方法。我们可以使用.html()或者.text()方法来对元素的内容进行赋值。
// 将div元素的HTML内容设置为new content
$('div').html('new content');
// 将p元素的文本内容设置为new text
$('p').text('new text');
需要注意的是,使用.html()方法会将元素内部的所有内容全部替换,包括子元素。 而使用.text()方法则仅替换文本内容。
五、综合案例
下面是一个综合应用各种jquery赋值方法的例子。在下面的例子中,我们通过一个按钮实现对多个表单元素的值进行修改,同时也修改了两个元素的属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery赋值综合案例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#change-btn').click(function() {
$('input[type="text"]').val('new value');
$('select').val('option-value');
$('input[type="checkbox"][value="value-1"], input[type="checkbox"][value="value-2"]').prop('checked', true);
$('input[type="radio"][value="radio-value"]').prop('checked', true);
$('img').attr('src', 'path/to/image.jpg');
$('button').removeAttr('disabled');
$('div').html('new content');
$('p').text('new text');
});
});
</script>
</head>
<body>
<div>
<img src="path/to/image.jpg">
<p>old text</p>
<form>
<input type="text" value="old value">
<select>
<option value="option-value">option-text</option>
</select>
<input type="checkbox" value="value-1">
<input type="checkbox" value="value-2">
<input type="radio" value="radio-value">
<button disabled>old button</button>
</form>
<button id="change-btn">Change</button>
</div>
</body>
</html>