jQuery之基本Html控制項操作

来源:http://www.cnblogs.com/shouce/archive/2016/03/11/5264208.html
-Advertisement-
Play Games

閑來無聊，收集總結一下jQuery常用操作，希望對新手有用。 基於jquery 1.3.2 <!--<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>--><!--<script src="https://aja


閑來無聊，收集總結一下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>

　　


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 是什麼在.NET程式關閉時阻礙進程的退出？
    在平時使用軟體或是.NET程式開發的過程中，我們有時會遇到程式關閉後但進程卻沒有退出的情況，這往往預示著代碼中有問題存在，不能正確的在程式退出時停止代碼執行和銷毀資源。這個現象有時並不容易被察覺，但在另一些情況下卻會產生影響軟體功能的Bug。本文列舉可能影響.NET程式進程退出的因素，並用幾個小例子
  • 一個非常簡單的演算法題是否願意挑戰一下呢
    求兩個數之和。這個問題夠簡單吧！能做對絕對不是問題，問題是你是否能做的比較好。好了，請看題目： Given an array of integers, return indices of the two numbers such that they add up to a specific targ
  • MVC後臺數據賦值給前端JS對象
    Controller中的數據，不管是使用的是ViewModel 還是ViewBag.Data，要將他傳遞到View中，這個很容易，但是如果要將它傳遞給JS中的某個對象，這個改如何處理呢？ 後臺的數據格式： public class ViewModel { public int ID { get; s
  • 分散式dubbo， zookeeper，fastdfs，activemq，redis 分散式緩存
    分散式dubbo zookeeperfastdfsactivemqredis 分散式緩存
  • 【設計模式】22、模板模式
    1 package com.shejimoshi.behavioral.TemplateMethod; 2 3 4 /** 5 * 功能：抽象模板類 6 * 時間：2016年3月10日下午9:02:32 7 * 作者：cutter_point 8 */ 9 public abstract class
  • [Architect] Abp 原理解析(3) DynamicFilters
    本節目錄 介紹 定義Filter 設置Filter 這是Abp中多租戶、軟刪除、激活\禁用等如此方便的原因 Install-Package EntityFramework.DynamicFilters 定義數據 class DemoDb : DbContext { public DemoDb() :
  • 利用簡潔的圖片預載入組件提升h5移動頁面的用戶體驗
    在做h5移動頁面，相信大家一定碰到過頁面已經打開，但是裡面的圖片還未載入出來的情況，這種問題雖然不影響頁面的功能，但是對於不利於用戶體驗。拋開網速的原因，解決這個問題有多方面的思路：最基本的，要從http請求合併，緩存管理，圖片壓縮等方面做性能優化；另外就是可以對頁面里用到的所有圖片做預載入的處理。
  • javascript 數組迭代與歸併
    數組的5個迭代方法： every(); //對數組中的每一項運行給定函數，如果該函數對每一項都返回true，則返回true； filter(); //對數組中的每一項運行給定函數，返回該函數會返回true的項組成的數組； forEach(); //對數組中的每一項運行給定函數，這個方法沒有返回值；
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類