jQuery对象的each

jQuery元素也可以调用each方法,只是对$.each的简化调用。return false;终止循环

示例: 页面中有多个兴趣爱好,通过复选框设置,选中某个复选框,下面即可显示选中的个数及内容

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>jQuery测试</title>
    <script type="text/javascript" src="js/jquery-1.12.3.js"></script>
    <script type="text/javascript">
        $(function () {
            $(‘#dv input[type=checkbox]‘).click(function () {
                //var cks = $(‘#dv input[type=checkbox]:checked‘);
                var cks = $(‘#dv :checkbox:checked‘);//简写
                var len = cks.length;//记录个数
                var arr = [];
                cks.each(function (k,v) {
                    arr[arr.length] = $(v).val();//记录选中的value值
                });
                if(len == 0){
                    $(‘#result‘).text("");
                }
                else{
                    $(‘#result‘).text(‘共选择了‘+len+‘个,分别是:‘ + arr);
                }

            });
        });
    </script>
</head>
<body>
    <div id="dv">
        <label>爱好:</label>
        <input type="checkbox" name="hobby" value="吃饭" id="cf"/><label for="cf">吃饭</label>
        <input type="checkbox" name="hobby" value="睡觉" id="sj"/><label for="sj">睡觉</label>
        <input type="checkbox" name="hobby" value="读书" id="ds"/><label for="ds">读书</label>
        <input type="checkbox" name="hobby" value="运动" id="yd"/><label for="yd">运动</label>
        <input type="checkbox" name="hobby" value="篮球" id="lq"/><label for="lq">篮球</label>
        <input type="checkbox" name="hobby" value="游泳" id="yy"/><label for="yy">游泳</label>
    </div>
    <p id="result"></p>
</body>
</html>

效果图





时间: 2024-08-25 06:02:25

jQuery对象的each的相关文章

jquery对象与DOM对象

<head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://code.jquery.com/jquery-1.11.3.js"></script> <!-- 使用JS原生语法 --> <scri

javascript-jquery-更改jquery对象

在许多情况下,jquery代码所做的事情变成了:生成jquery对象A,操作对jquery象A:更改为jquery对象B,操作jquery对象B:更改为jqueryC,操作jquery对象C......: jquery的链式操作: 链式操作概述:生成一个jquery对象后,既要对它进行一次或多次的普通操作,同时还要对它进行更改操作.于是有必要把生成jquery对象储存在一个变量中,满足多次调用的需要. 例如: $(function(){ $("div").click(function(

一步一步学习 JQuery (一) JQuery 对象

jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库 jQuery 理念: 写得少, 做得多. 优势如下: 轻量级 强大的选择器 出色的 DOM 操作的封装 可靠的事件处理机制 完善的 Ajax 出色的浏览器兼容性 链式操作方式 JQuery:Hello World <html> <head> <meta charset="UTF-8"> <title>Insert title here</title&

jQuery对象与DOM对象转换

原文链接 http://www.cnblogs.com/ouyangping/p/6439939.html jQuery对象与DOM对象是不一样的 通过一个简单的例子,简单区分下jQuery对象与DOM对象: <p id="imooc"></p> 我们要获取页面上这个id为imooc的div元素,然后给这个文本节点增加一段文字:"hello,world",并且让文字颜色变成红色. 通过标准JavaScript处理: var p = docum

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <

DOM对象和js对象以及jQuery对象的区别

一.DOM对象 文档对象模型简称DOM,是W3C组织推荐的处理可扩展置标语言的标准编程接口. DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的对象.这些对象的行为和属性以及这些对象之间的关系. 通过DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性.可以对其中的内容进行修改和删除,同时也可以创建新的元素. HTML DOM 独立于平台和编程语言.它可被任何编程语言诸如 Java.JavaScript 和 VBScript 使用. DOM对象,即是我们用

Jquery对象和DOM对象的区别

1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM,因此需要重点了解jQuery对象和DOM对象以及它们之间的关系.DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象;复制代码 代码如下: var domObj = document.getElementById("id"); //DOM对象var $obj = $("#id"); //j

jquery对象转化为DOM对象

<html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://code.jquery.com/jquery-1.11.3.js"></script></head> <bo

认识JQuery,JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作,常用的方法

(一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQuery的优势 1)可以像CSS一样访问和操作DOM 2)修改CSS控制页面外观 3)简化JS代码操作 4)事件代理更加容易 5)动画效果使用方便 6) Ajax技术更加完美 7)大量的基于Jquery的插件 8)可以自定义扩展功能插件 (三)JQuery的语法 格式:$(selector).actio

jQuery对象的链式操作用法分析

可以使用下面的原则判断一个函数返回的时候是jQuery对象,即是否可以用于链式操作. 除了获取某些数据的函数,比如获取属性值"attr(name)",获取集合大小"size()"这些函数明显是返回数据的.除了这些函数之外的jQuery函数都可以用于链式操作,比如设置属性"attr(name.value)". 链式编程.html('val').text('val').css()链式编程,隐式迭代.链式编程注意:$('div').html('设置值'