jQuery Html控件基本操作(日常收集整理)

闲来无聊，收集总结一下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

//span$("#btnSpanSet").click(function(){$("#spanId").html("大家好");});$("#btnSpanGet").click(function(){alert($("#spanId").html());})

html代码

span标签：

<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选择的Valuevar text=$("#ddlBook option:selected").text(); //获取Select选择的Textvar 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" />