使用jQuery管理选择结果


Posted in Javascript onJanuary 20, 2015

使用jQuery选择出来的元素与数组非常类似,可以通过jQuery提供的一系列方法对其进行处理,包括长度、查找某个元素,截取某个段落等。

1.获取元素的个数。

在jQuery中可以通过size()方法获取选择器中元素的个数,它类似数组中的length属性,返回整数值,例如:

$("img").size()
获取页面中,所有图片<img>的数目

如下是一个实例,通过不断的点击添加div块并计算页面中的<div>块。

<style>

            div {

                border: 1px solid #003a75;

                background-color: #FFFF00;

                margin: 5px;

                padding: 20px;

                text-align: center;

                height: 20px;

                width: 20px;

                float: left;

            }

        }

        </style>

        <script type="text/javascript">

            document.onclick = function() {

                var i = $("div").size() + 1; //获取div的数目,(此时还没有div块)

                $(document.body).append($("<div>" + i + "</div>")); //添加一个div块

                $("#number").html(i);

            }

        </script>

页面中一共有<span id="number">0</span>个DIV块。单击鼠标添加

2.提取元素

在jQuery中选择器中,如果想提取某个元素,最直接的方法是采用方括号加序号的形式,例如;

$("img[title]")[1]
获取了所有设置了title属性的img标记中的第二个元素。jQuery也提供了get(index)方法来提取元素,以下的代码与上面的完全等效

$("img[title]")get(1)
get方法在不设置任何参数时,可以将元素转化为一个元素对象的数组,如下的例子:

<style>

            div {

                border: 1px solid #003a75;

                background-color: #FFFF00;

                margin: 5px;

                padding: 20px;

                text-align: center;

                height: 20px;

                width: 20px;

                float: left;

            }

        }

        </style>

        <script type="text/javascript">

            function displayleb(ndiv) {

                for (var i = 0; i < ndiv.length; i++)

                    $(document.body).append($("<div style='background:"+ndiv[i].style.background + ";'>" + ndiv[i].innerHTML + "</div>"));

            }

            $(function(){

                var aDiv = $("div").get();//转化为div对象数组

                displayleb(aDiv.reverse());

            });

        </script>

        <div style="background:#FFFFFF">1</div>

        <div style="background:#CCCCCC">2</div>

        <div style="background:#999999">3</div>

        <div style="background:#666666">4</div>

        <div style="background:#333333">5</div>

        <div style="background:#000000">6</div>

上面代码将页面本身的6个<div>块用get()方法转化为数组,然后用数组反序reverse(),并传给displayleb()函数,再将其一个个现在页面中。

get(index)方法可以获取指定位置的元素,反过来,index(element)方法可以查找元素的element所处的位置。例如

var iNum=$("li").index($(li[title=isaac]")[0])
以上取<li titile="isaac">标记在整个<li>标记列表所处的位置,并将该位置返回给整数iNum.如下举例index(element)方法的典型运用。

例:用index()方法获取元素的序号

    <style>

            div {

                border: 1px solid #003a75;

                background-color: #FFFF00;

                margin: 5px;

                padding: 20px;

                text-align: center;

                height: 20px;

                width: 20px;

                float: left;

            }

        }

        </style>

        <script type="text/javascript">

            $(function() {

                //div click()添加单击函数

                $("div").click(function() {

                    //将本身通过this关键字传入,获取自身的序号。

                    var index = $("div").index(this) + 1;

                    $("#display").html(index.toString());

                })

            });

        </script>

        <div style="background:#FFFFFF">1</div>

        <div style="background:#CCCCCC">2</div>

        <div style="background:#999999">3</div>

        <div style="background:#666666">4</div>

        <div style="background:#333333">5</div>

        <div style="background:#000000">6</div>

        单击的是第<span id="display"></span>个div。

以上代码块本身用this关键字传入index()方法中,获取自身的序号,并且利用click()添加事件,将序号显示出来。

3.添加、删除、过滤元素

除了获取选择元素外,jQuery还提供了一系列的方法来修改元素集合,例如用add()的方法添加元素。

$("img[alt]").add("img[title]")
以上代码将设置了alt元素的图像和说呀设置了title属性的图像组合在一起,供别的方法统一调运。它完全等同于

$("img[alt],img[title]")
例如,可以讲组合后的元素集统一添加css属性。

$("img[alt]").add("img[title]").addClass("altcss")
与add()方法相反,not()方法可以去除元素集合中的某些元素形成集合

$("li[title]").not("[title*=isaac]")
以上代码表示,选中所有设置了title属性的标记 ,但不包括title的值中包含"isaac"的<li>。

例:

<style>

            div {

                border: 1px solid #003a75;

                background-color: #FFFF00;

                margin: 5px;

                padding: 20px;

                text-align: center;

                height: 20px;

                width: 20px;

                float: left;

            }

            .altcss {

                border: 2px solid #000000;

            }

        }

        </style>

        <script type="text/javascript">

            $(function() {

                $("div").not(".green, #blueone").addClass("altcss");

            });

        </script>

        <div></div>

        <div id="blueone"></div>

        <div></div>

        <div class="green"></div>

        <div class="green"></div>

        <div class="gray"></div>

        <div></div>

以上的Jquery通过not()的方法去掉风格为"green"和"blueone"的<div>块,给剩下的div块加altcss样式。

not()方法所接收的参数都不能包含特定的元素,只能是通过通用的表达式例如下面的代码是错误的

$("li[title]").not("img[title*=isaac]")
正确的写法是:

$("li[tile]").not("[title*=isaac]")
除了add()和not()外,jQuery还提供了更强大的filter()方法来筛选元素。filter()可以接受两种类型的参数,一种与not()方法一样,接受通用的表达式。代码如下:

$("li").filter("[title*=isaac]")
以上的代码表示:筛选出title值包含isaac字符串的li元素组合。

$("li[title*=isaac]")
所筛选的组合相同。

<script type="text/javascript">

            $(function() {

                $("div").addClass("css1").filter("[class*=middle]").addClass("css2");

            });

        </script>
        <div></div>

        <div class="middle"></div>

        <div class="middle"></div>

        <div class="middle"></div>

        <div class="middle"></div>

        <div></div>

以上代码中其中4个class属性为middle,Jq先给所有的div块都添加了css1样式,然后通过filter()方法,把class中包含middle的div添加css2样式。

在filter()的参数中,不能直接的等于匹配(=),只能使用前匹配(^=)、后匹配(&=),或者任意匹配(*=).

filter()另外一种类型的参数是函数,对于返回ture元素匹配保留,否则排除集合。函数参数功能十分强大,可以让用户自定义筛选函数。

例如:

<script type="text/javascript">

            $(function() {

                $("div").addClass("css1").filter(function(index) {

                    return index == 1 || $(this).attr("id") == "fourth";

                }).addClass("css2");

            });

        </script>      

<div id="first"></div>

    <div id="second"></div>

    <div id="third"></div>

    <div id="fourth"></div>

    <div id="fifth"></div>

以上jq执行:

将所有的div添加css1然后利用filter()返回的函数将div列表中第一个(index为1),id是fourth的div元素筛选出来,添加css2.

4.查询过滤新元素组

jq还提供了 一些很有的用的方法组合,通过查询来获取新元素组合。例如find()方法。通过匹配选择器来筛选元素

$("p").find("span")
表示查找到<p>标记下含有<span>标记的组合

完全等于

$("span",$("p"))

$(function(){

    $("p").find("span").addClass("css1");

});
<p><span>Hello</span>, how are you?</p>

表示给Hello添加css1的样式.

另外,还可以通过is()方法来检测是否包含指定的元素,例如可以通过下面代码检测页面中<div>块中是否包含图片。

var himg = $("div").is("img");
试想下,is()还可以结合filter()使用,是不是很惬意?

以上就是本文的全部内容了,虽然有点长,但是还是建议小伙伴们仔细读一下,希望大家能够喜欢。

Javascript 相关文章推荐
纯js实现的论坛常用的运行代码的效果
Jul 15 Javascript
ExtJS 下拉多选框lovcombo
May 19 Javascript
jQuery中height()方法用法实例
Dec 24 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
javascript之IE版本检测超简单方法
Aug 20 Javascript
JS实现自动阅读单词(有道单词本添加功能)
Nov 14 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
Dec 20 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
vue.js打包之后可能会遇到的坑!
Jun 03 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
javascript动态修改Li节点值的方法
Jan 20 #Javascript
js+css实现tab菜单切换效果的方法
Jan 20 #Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 #Javascript
js动态切换图片的方法
Jan 20 #Javascript
JavaScript 基本概念
Jan 20 #Javascript
自己动手手写jQuery插件总结
Jan 20 #Javascript
JavaScript学习心得之概述
Jan 20 #Javascript
You might like
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
PHP 日,周,月点击排行统计
2012/01/11 PHP
php和js如何通过json互相传递数据相关问题探讨
2013/02/26 PHP
用PHP将Unicode 转化为UTF-8的实现方法(推荐)
2017/02/08 PHP
php 多继承的几种常见实现方法示例
2019/11/18 PHP
20个非常有用的PHP类库 加速php开发
2010/01/15 Javascript
获取焦点时,利用js定时器设定时间执行动作
2010/04/02 Javascript
javascript 学习笔记(一)DOM基本操作
2011/04/08 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
原生js实现弹出层登录拖拽功能
2016/12/05 Javascript
如何抽象一个Vue公共组件
2017/10/17 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
Python中List.index()方法的使用教程
2015/05/20 Python
详解python基础之while循环及if判断
2017/08/24 Python
实用自动化运维Python脚本分享
2018/06/04 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
美国著名的团购网站:Woot
2016/08/02 全球购物
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
美体小铺印度官网:The Body Shop印度
2019/10/17 全球购物
联谊活动策划书
2014/01/26 职场文书
信息技术毕业生自荐信范文
2014/03/13 职场文书
上课不认真检讨书
2014/09/17 职场文书
临时用工协议书范本
2014/10/29 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸
python游戏开发Pygame框架
2022/04/22 Python
SQL Server中使用表变量和临时表
2022/05/20 SQL Server