jQuery-attr()、val()、add()属性和each函数

heliuerya

于 2023-05-27 09:04:50 发布

阅读量857

点赞数

分类专栏： jQuery 练习题文章标签： jquery html

本文链接：https://blog.csdn.net/heliuerya/article/details/130897140

版权

练习题同时被 2 个专栏收录

52 篇文章 1 订阅

订阅专栏

jQuery

13 篇文章 1 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <title>jQuery-attr()、add()属性和each函数</title>
       <script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
       <script type="text/javascript">
           //页面加载完毕之后
           $(function(){
               //将第一个按钮绑定鼠标点击事件
               $("input[type=button]:eq(0)").click(function(){
                   //选定第三个选项（方法一）
                   $("#single>option:eq(2)").attr("selected", "selected");
                   //选定第三个选项（方法二）
                   // $("#single").val(["s3"]);
               });

               $(":button:eq(1)").click(function(){
                   $("#multiple").val(["x2", "x4"]);
               });

               $(":button:eq(2)").click(function(){
                   $(":checkbox").val(["check2", "check4"]);
               });

               $(":button:eq(3)").click(function(){
                   $(":radio").val(["radio2"]);
               });

               $(":button:eq(4)").click(function(){
                   //.add() 把 add匹配的选择器的元素添加到当前 jquery 对象中,然后循环执行弹窗
                   $("#single")
                       .add("#multiple")
                       .add(":checkbox:checked")
                       .add(":radio:checked")
                       .each(function(){
                           alert($(this).val());
                       });
               });
           });
       </script>
   </head>
   <body>

       <input type="button" value="使单选下拉框的'选择3号'被选中"/>
       <input type="button" value="使多选下拉框选中的'选择2号'和'选择4号'被选中"/><br>
       <input type="button" value="使多选框的'多选2'和'多选4'被选中"/>
       <input type="button" value="使单选框的'单选2'被选中"/><br>
       <input type="button" value="弹出已经被选中的值"><br>

       <br/>

       <select id="single" name="singlecheck">
       <option value="s1">选择1号</option>
       <option value="s2">选择2号</option>
       <option value="s3">选择3号</option>
       </select>

       <select id="multiple" multiple="multiple" name="multiplecheck" style="height:120px;">
       <option selected="selected" value="x1">选择1号</option>
       <option value="x2">选择2号</option>
       <option value="x3">选择3号</option>
       <option value="x4">选择4号</option>
       <option selected="selected" value="x5">选择5号</option>
       </select>

       <br/><br/>

       <input type="checkbox" name="c" value="check1"/> 多选1
       <input type="checkbox" name="c" value="check2"/> 多选2
       <input type="checkbox" name="c" value="check3"/> 多选3
       <input type="checkbox" name="c" value="check4"/> 多选4

       <br/>

       <input type="radio" name="r" value="radio1"/> 单选1
       <input type="radio" name="r" value="radio2"/> 单选2
       <input type="radio" name="r" value="radio3"/> 单选3

</body>
</html>

heliuerya

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-attr()、val()、add()属性和each函数

input type="checkbox" name="c" value="check1"/> 多选1。<input type="checkbox" name="c" value="check2"/> 多选2。<input type="checkbox" name="c" value="check3"/> 多选3。<input type="checkbox" name="c" value="check4"/> 多选4。<input type="button" value="弹出已经被选中的值"><br>
复制链接

扫一扫

专栏目录