Jquery基础

来源：互联网发布：炒股软件ipad版编辑：程序博客网时间：2024/04/29 06:36
表单的jquery操作，包括多选框与下拉列表，有一个地方比较容易犯错
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>表单属性选择器</title>    <script type="text/javascript" src="jquery-1.3.1.js"></script></head><body><form >    <button type="reset">重置表单所有元素</button>    <br>    <button id="btn1">对表单能进行赋值</button>    <br>    <button id="btn2">对表单不能进行赋值</button>    <br>    <input type="text" name="name" disabled="disabled" value="不可用input赋值" title=""/><br>    <input type="text" name="email" value="可以用input赋值" title=""/><br>    多选框：<br>    <input type="checkbox" name="newLetter" checked="checked" value="test1" title="">test1    <input type="checkbox" name="newLetter" value="test1" title="">test2    <input type="checkbox" name="newLetter" value="test1" title="">test3    <input type="checkbox" name="newLetter" value="test1" title="">test4    <input type="checkbox" name="newLetter" checked="checked" value="test1" title="">test5    <div></div>    <br><br>    操作下拉列表：    <br>    <select name="test1" multiple="multiple" style="height: 60px" title="">    <option>广州</option>    <option selected="selected">深圳</option>    <option>茂名</option>    <option>珠海</option>   </select>    <br><br>    下拉列表：<br>    <select name="test2" title="">        <option selected="selected">北京</option>        <option>重庆</option>        <option>成都</option>    </select>    <br><br>    <div></div></form></body><script type="text/javascript">    $(function(){        //可以变化的表单        $("#btn1").click(function(){            $("input:enabled").val("这里变化了");            return false;        });        //不可以变化的表单        $("#btn2").click(function(){            $("input:disabled").val("这里变化不了") ;            return false;        });        //操作复选框//            alert($("input[checked=checked]").length);        $(":checkbox").click(function(){            //input:checked没有空格            $("div:first").html("共有"+($("input:checked").length)+"被选中");        });       //操作下拉列表       $("select").change(function() {           var str = "";           //select: selected注意有空格,因为加了空格表示select下面的子元素           $("option:selected").each(function () {               str += $(this).text() + ",";           });           $("div").eq(1).html("你选择了：" + str);       }).trigger('change');        //使用:selected选择器，来操作下拉列表.//        $("select").change(function () {//            var str = "";//            $("select :selected").each(function () {//                str += $(this).text() + ",";//            });//            $("div").eq(1).html("<strong>你选中的是："+str+"</strong>");//        }).trigger('change');//    });</script></html>
0 0