网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 jQuery Html控件基本操作(日常收集整理)
内容
    这篇文章主要介绍了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选择的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 单选框
    //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源码：
    radio控件：
    是<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源码：
    按钮：
    <input type="button" id="btn" value="我是按钮"/><input type="button" id="btnHide" value="隐藏按钮"/>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <title>JQuery操作Html控件</title>
    <!--<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>
    <script type="text/javascript">
    $(document).ready(function(){
    //文本框
    $("#btnTextGet").click(function(){ 
    alert($("#txtNum").val());
    });
    $("#btnTextSet").click(function(){ 
    $("#txtNum").attr("value",'123456');//赋值
    //$("#txtNum").val("123456");//赋值
    });
    //span
    $("#btnSpanSet").click(function(){
    $("#spanId").html("大家好");
    });
    $("#btnSpanGet").click(function(){
    alert($("#spanId").html());
    })
    //下拉框
    $("#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(第一个位置)
    });
    //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的项目为当前选中项
    });
    //复选框
    $("#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);
    });
    //隐藏按钮 
    $("#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();//这一句就可以实现上面的功能
    });
    });
    </script>
    </head>
    <body>
    文本框：<input type="text" id="txtNum" />
    <input type="button" value="给文本框赋值" id="btnTextSet" /><input type="button" value="获取文本框值" id="btnTextGet" />
    <br /><br />
    span标签：<span id="spanId"></span><input type="button" value="给span标签赋值" id="btnSpanSet" /><input type="button" value="获取span标签内容" id="btnSpanGet" />
    <br /><br />
    下拉框：
    <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" />
    <br /><br />
    radio控件：
    是<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" />
    <br /><br />
    复选框：
    <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
    <br /><br />
    按钮：
    <input type="button" id="btn" value="我是按钮"/><input type="button" id="btnHide" value="隐藏按钮"/>
    <br /><br />
    </body>
    </html>
    关于jquery html控件基本操作相关知识就给大家介绍这么多，希望对大家有所帮助！
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/17 13:59:04