심심해서 jQuery의 일반적인 동작을 모아서 정리해보았는데, 초보자들에게 도움이 되었으면 좋겠습니다.
jquery 1.3.2 기준
<!--<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>--> <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js" type="text/javascript"></script>--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
1. 텍스트 상자
//文本框
$("#btnTextGet").click(function(){
alert($("#txtNum").val());
});
$("#btnTextSet").click(function(){
$("#txtNum").attr("value",'123456');//赋值
//$("#txtNum").val("123456");//赋值
});html 코드:
텍스트 상자:
<input type="text" id="txtNum" /> <input type="button" value="给文本框赋值" id="btnTextSet" /><input type="button" value="获取文本框值" id="btnTextGet" />
2.스팬
//span
$("#btnSpanSet").click(function(){
$("#spanId").html("大家好");
});
$("#btnSpanGet").click(function(){
alert($("#spanId").html());
})html 코드
스팬 태그:
<span id="spanId"></span><input type="button" value="给span标签赋值" id="btnSpanSet" /><input type="button" value="获取span标签内容" id="btnSpanGet" />
3. 드롭다운 상자:
//下拉框
$("#btnSelectText").click(function(){
alert($("#ddlBook option:selected").text());
});
$("#btnSelectValue").click(function(){
alert($("#ddlBook option:selected").val());
});
$("#btnClearSelect").click(function(){
$("#ddlBook").empty();//清空下拉列表
});
$("#ddlBook").change(function(){//添加change事件
var val=$("#ddlBook").val(); //获取Select选择的Value
var text=$("#ddlBook option:selected").text(); //获取Select选择的Text
var checkIndex=$("#ddlBook ").get(0).selectedIndex; //获取Select选择的索引值
var maxIndex=$("#ddlBook option:last").attr("index"); //获取Select最大的索引值
alert(text);
});
$("#btnSelectAppend").click(function(){
$("#ddlBook").append("<option value=\"5\">物理</option>"); //为Select追加一个Option(下拉项)
});
$("#btnSelectPreAppend").click(function(){
$("#ddlBook").prepend("<option value=\"0\">请选择</option>"); //为Select插入一个Option(第一个位置)
});html 소스코드
드롭다운 상자:
<select id="ddlBook"> <option value="1">语文</option> <option value="2">数学</option> <option value="3">英语</option> <option value="4">政治</option> </select> <input type="button" value="获取下拉框选中的值" id="btnSelectText" /><input type="button" value="获取下拉框选中的value" id="btnSelectValue" /> <input type="button" value="清空下拉框" id="btnClearSelect" /><input type="button" value="后面追加选项" id="btnSelectAppend" /> <input type="button" value="第一个位置插入" id="btnSelectPreAppend" />
4.라디오 라디오 버튼
//radio 单选框
$("#btnRadioValue").click(function(){
//alert($("input:radio[type='radio'][checked]").val());
alert($("input:radio[type='radio'][name=IsEnable][checked]").val());//这是jquery 1.3的写法，在1.2版本下运行有问题
//alert($("input[@type=radio][@checked]").val());//1.2的版本的写法
});
$("#btnRadioSet").click(function(){
$("input:radio[type='radio'][name=IsEnable]").attr("checked",'0');//设置value=0的项目为当前选中项
});html 소스 코드:
무선 제어:
是<input type="radio" value="1" checked="checked" name="IsEnable" /> 否<input type="radio" value="0" name="IsEnable" /> <input type="button" value="获取Radio选中的值" id="btnRadioValue" /><input type="button" value="选中Value为0的选项" id="btnRadioSet" />
5. 체크박스
//复选框
$("#btn1").click(function(){
$("[name='checkbox']").attr("checked",'true');//全选
});
$("#btn2").click(function(){
$("[name='checkbox']").removeAttr("checked");//取消全选
});
$("#btn3").click(function(){
$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
});
$("#btn4").click(function(){
$("[name='checkbox']").each(function(){
if($(this).attr("checked"))
{
$(this).removeAttr("checked");
}
else
{
$(this).attr("checked",'true');
}
});
});
$("#btn5").click(function(){
var str="";
$("input[name='checkbox']:checkbox:checked").each(function(){
str+=($(this).val()+"\r");
});
alert(str);
});html 소스 코드:
체크박스:
<input type="button" id="btn1" value="全选"/> <input type="button" id="btn2" value="取消全选"/> <input type="button" id="btn3" value="选中所有奇数"/> <input type="button" id="btn4" value="反选"/> <input type="button" id="btn5" value="获得选中的所有值"/> <br> <input type="checkbox" name="checkbox" value="checkbox1" />checkbox1 <input type="checkbox" name="checkbox" value="checkbox2" />checkbox2 <input type="checkbox" name="checkbox" value="checkbox3" />checkbox3 <input type="checkbox" name="checkbox" value="checkbox4" />checkbox4 <input type="checkbox" name="checkbox" value="checkbox5" />checkbox5 <input type="checkbox" name="checkbox" value="checkbox6" />checkbox6 <input type="checkbox" name="checkbox" value="checkbox7" />checkbox7 <input type="checkbox" name="checkbox" value="checkbox8" />checkbox8
6. 버튼
//隐藏按钮
$("#btnHide").click(function()
{
if($("#btn").is(":hidden"))
{
$("#btnHide").val("隐藏按钮");
//$("#btn").show;//这种写法也可以
$("#btn").css('display','');
}
else
{
$("#btnHide").val("显示按钮");
//$("#btn").hide();//这种写法也可以
$("#btn").css('display','none');
}
//$("#btn").toggle();//这一句就可以实现上面的功能
});html 소스 코드:
버튼:
JQuery操作Html控件 <!--<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>--> <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js" type="text/javascript"></script>--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>文本框：
span标签：
드롭다운 상자:
<select id="ddlBook"> <option value="1">语文</option> <option value="2">数学</option> <option value="3">英语</option> <option value="4">政治</option> </select> <input type="button" value="获取下拉框选中的值" id="btnSelectText" /><input type="button" value="获取下拉框选中的value" id="btnSelectValue" /> <input type="button" value="清空下拉框" id="btnClearSelect" /><input type="button" value="后面追加选项" id="btnSelectAppend" /> <input type="button" value="第一个位置插入" id="btnSelectPreAppend" />
무선 제어:
是<input type="radio" value="1" checked="checked" name="IsEnable" /> 否<input type="radio" value="0" name="IsEnable" /> <input type="button" value="获取Radio选中的值" id="btnRadioValue" /><input type="button" value="选中Value为0的选项" id="btnRadioSet" />
체크박스:
<input type="button" id="btn1" value="全选"/> <input type="button" id="btn2" value="取消全选"/> <input type="button" id="btn3" value="选中所有奇数"/> <input type="button" id="btn4" value="反选"/> <input type="button" id="btn5" value="获得选中的所有值"/> <br> <input type="checkbox" name="checkbox" value="checkbox1" />checkbox1 <input type="checkbox" name="checkbox" value="checkbox2" />checkbox2 <input type="checkbox" name="checkbox" value="checkbox3" />checkbox3 <input type="checkbox" name="checkbox" value="checkbox4" />checkbox4 <input type="checkbox" name="checkbox" value="checkbox5" />checkbox5 <input type="checkbox" name="checkbox" value="checkbox6" />checkbox6 <input type="checkbox" name="checkbox" value="checkbox7" />checkbox7 <input type="checkbox" name="checkbox" value="checkbox8" />checkbox8
버튼:
<input type="button" id="btn" value="我是按钮"/><input type="button" id="btnHide" value="隐藏按钮"/> <br /><br /> </body> </html>
jquery html 컨트롤의 기본 작업 지식에 대한 모든 내용이 도움이 되기를 바랍니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
