首页 > 代码库 > 常用JQuery示例

常用JQuery示例

2024-10-08 18:35:39   216人阅读

1.单选按钮

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>js24.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery/jquery-3.2.1.min.js"></script>
   <script type="text/javascript" src="test.js"></script>
</head>
<body>
<div>
    <input type="radio" name="sex" value="M" checked>男<br>
    <input type="radio" name="sex" value="F">女<br>
</div>
<input type="button" value="click me" onclick="Invoice.test();">
</body>
</html>

test.js

;(function(window, document, undefined) {


var Invoice = {};
Invoice.test = function () {

    //定义一个对象接收页面传过来的属性
    var params = new Object();

    //取到的值不是男或女，而是M或F，我理解是value属性的值
    params.sex = $("input[name=‘sex‘]:checked").val();

    alert("性别:" + params.sex)
};


window.Invoice = Invoice;


})(window, document);

2.下拉列表

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>js24.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="test.js"></script>
</head>
<body>
<div>
    <select id="carType">
        <option value="Volvo">Volvo</option>
        <option value="Saab">Saab</option>
        <option value="Opel">Opel</option>
        <option value="Audi">Audi</option>
    </select>
</div>
<input type="button" value="click me" onclick="Invoice.test();">
</body>
</html>

test.js

;(function(window, document, undefined) {


var Invoice = {};
Invoice.test = function () {

    var params = new Object();

    params.status = $("#carType").val();

    alert("车型 : " + params.status)
};


window.Invoice = Invoice;


})(window, document);

 

常用JQuery示例


联系
我们