JQuery 干货篇之选择元素

实验的HTML+CSS的代码

html

<!DOCTYPE html>
<html>
<head>
    <title>Example</title>
    <script src="jquery-3.2.1.min.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="main.css"/>
    <script src="main.js" type="text/javascript"></script>
</head>
<body>
<h1>Jacqui's Flower Shop</h1>
<form method="post">
    <div id="oblock">
        <div class="dtable">
            <div id="row1" class="drow">
                <div class="dcell">
                    ![](astor.png)<label for="astor">Astor:</label>
                    <input name="astor" value="0" required>
                </div>
                <div class="dcell">
                    ![](daffodil.png)<label for="daffodil">Daffodil:</label>
                    <input name="daffodil" value="0" required>
                </div>
                <div class="dcell">
                    ![](rose.png)<label for="rose">Rose:</label>
                    <input name="rose" value="0" required>
                </div>
            </div>
            <div id="row2" class="drow">
                <div class="dcell">
                    ![](peony.png)<label for="peony">Peony:</label>
                    <input name="peony" value="0" required>
                </div>
                <div class="dcell">
                    ![](primula.png)<label for="primula">Primula:</label>
                    <input name="primula" value="0" required>
                </div>
                <div class="dcell">
                    ![](snowdrop.png)<label for="snowdrop">Snowdrop:</label>
                    <input name="snowdrop" value="0" required>
                </div>
            </div>
        </div>
    </div>
    <div id="buttonDiv">
        <button type="submit">Place Order</button>
    </div>
</form>
</body>
</html>

css

h1 {
    min-width: 70px;
    border: thick double black;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: x-large;
    padding: .5em;
    color: darkgreen;
    background-image: url("border.png");
    background-size: contain;
    margin-top: 0;
}

.dtable {
    display: table;
}

.drow {
    display: table-row;
}

.dcell {
    display: table-cell;
    padding: 10px;
}

.dcell > * {
    vertical-align: middle
}

input {
    width: 2em;
    text-align: right;
    border: thin solid black;
    padding: 2px;
}

label {
    width: 5em;
    padding-left: .5em;
    display: inline-block;
}

#buttonDiv {
    text-align: center;
}

#oblock {
    display: block;
    margin-left: auto;
    margin-right: auto;
    min-width: 700px;
}

.hover{
    background: blue;
    color: white;
    height:300px;
    width:300px;
}

选择器

:animated :选择正在处理动画的元素

:first :选择第一个元素

:last :选择最后一个元素

:eq(n) :选择第n个元素(从0开始)

:even :选择序号为偶数的元素

:odd :选择序号为奇数的元素

:gt(n) :选择序号大于n的元素

:lt(n) :选择序号小于n的元素

:text :选择所有的文本输入框

:contains(text) :选择包含指定文本的元素

file :选择所有文件上传输入框

:button :选择所有的按钮

:checkbox :选择所有的复选框

:hidden :选择隐藏的元素

实例

$("img:odd").css("border","thick double red");选择序号为奇数的img元素
$("img:first").css("border","thick double red") 选择第一个img元素

JQuery对象的方法

context 选择元素时使用的上下文对象

$("img:odd").context.TagName;

each(function()) 在每个选中的元素上运行给定的函数

$("img").each(function(index,elem){
console.log(ele.TagName+"   "+elem.id);//这里的index表示每一个元素的索引，elem表示每一个元素的htmlElement对象，并不是jquery对象
})

index(jquery) || index(selector) 返回给定jquery对象在住对象中的序号，或者返回给定选择器参数的索引

$("img").index("img[src=*astor]")

length || size() 返回的时jquery对象个数

$("img:odd").length

toArray() 返回一个有jquery对象中包含的htmlEelments数组

var content=$("img:odd").toArray() 这里content返回的htmlElements数组

把jquery当成数组

var content=$("img:odd");
for(var i=0;i<content.length;i++)
{
    console.log(content[i].TagName+"    "+content[i].src);    //这里的content[i]就是htmlElement数组了，$(content[i])就变成了Jquery对象了
}

add

add函数允许我们添加更多的项，常用的有add(htmlElement[]),add(selector),add(jquery)

实例：

$("img:odd").add("img:even").css("border",'thick double red');

var jq=$("img[src*=astor]");
$("img:even").add(jq).add("img:even").css("border",'thick double red');

var label=document.getElementsByTagName("label");
$("img:odd").add(label).css("border","thick double red");

slice()

用来获取特定的一组子元素

实例：

 $("img").slice(0,3).css("border","thick double red");   //获取0-2的元素
 
  $("img").slice(3).css("border","thick double red");   //获取3-结束

filter

filter可以将不满足指定条件的元素剔除，常用的方法有filter(jquery),filter(htmlElement),filter(function(index)),filter(selector)

实例

   //这里填入的参数selector
 $("label").filter("[for*=p]").css("background-color",'blue').css("font-size",'20px').css("border","2px solid red");
     
      $("img").filter(function (index) {     //index是每一个元素的索引，如果返回的是true就会选定，false就会剔除这个元素
        if(index==4)
        {
            return true;
        }
        else return false;
    }).css("border",'thick double red');
    
    
    var elem=document.getElementsByTagName("label")[1];    //只选择第二个label
    $("label").filter(elem).css("font-size",'30px')     //这里填入的参数是htmlElement对象

not

not方法是filter方法的补充，主要是删除匹配条件的元素，而filter则是保留满足匹配条件的元素，常用的方法有not(selector),not(htmlElement),not(jquery),not(function(index))

实例：

 $("label").not("[for*=p]").css("background-color",'red');    //选择for不带p的label元素

    $("label").not(function (index) {   //哪个元素返回true就删除，false保留
        if(index==0)
            return true;      //这里就会删除第一个label元素，保留后面的元素
        else
            return false;

    }).css("background-color","yellow");

has

选择拥有指定后代的选择器

实例：

    $("div.dcell").has("img[src*=astor]").css("border","thick double red");  //选择子代拥有img属性src带有astor的div.dcell元素
    
    var s=$("[for*=astor]");
    $("div.dcell").has(s).css("border","thick double red");   //参数为jquery对象

map

以一个函数为参数，map方法能够帮助我们灵活的处理一个jquery对象，从而得到满足需要的一个jquery对象。针对源jquery对象中的每一个元素都调用一次这个函数，而函数返回的HtmlElement对象将会变成一个jquery对象，参数是function(index,elem),其中`index是序号，elem是jquery对象中的每一个HTMLElelments对象，这里必须要有返回值，不然没有意义

实例：

$("div.dcell").map(function(index,elem){
    return elem.getElementsByTagName("img")[0];   //这里的elem是$(div.dcell)中的每一个HtmlElement对象，返回的是img元素
}).css("border",'thick double red');      //可以很清楚的看到这里返回的htmlElement对象变成了Jquery对象，因为调用了函数css


$("img").map(function(index,elem){
    if(index==1)
    return elem;   //返回的是第二个img的HtmlElement对象，但是经过map的包装就会变成jquery对象

}).css("border",'thick double red');      //可以很清楚的看到这里返回的htmlElement对象变成了Jquery对象，因为调用了函数css

is

is方法确定jquery对象中的某个或者某些元素是否满足测试条件，其中的形式有is(selector),is(HtmlElement),is(jquery),is(function(index))如果结果集中至少有一个元素匹配指定的条件，那么就返回true,否则false

实例：

console.log($("img").is("[src*=astor]"));//这里是判断img中的src属性有没有astor字段的，如果存在返回true

$("img").is(function(index){

})


var c=$("img").is(function (index) {    //函数中如果至少有一个返回true，那么就会返回true，index是索引
        return this.getAttribute('src')=='rose.png';   //判断属性
    });
    console.log(c);

end

当我们调用方法链来修改结果集的时候，jquery维护者一个历史结果集的查找，我们可以利用end回退到历史的结果集中,end用来扔掉当前的结果集，返回到上一层结果集

实例：

$("img").filter("[src*=astor]").end().css("border",'thick double red');   //这里回退到$("img")这个结果集中


$("div.dcell").find("img").filter(":odd").filter(":eq(0)").end().end().css("border",'thick double red'); //这里调用了两个end将结果集回退到$("div.dcell").find("img")中

addBack

得到当前结果集和上一个结果集的合集

实例

$("div.dcell").children("img").addBack().css("border",'thick double red');//这里得到的是$("div.dcell")和$("div.dcell").children("img")的合集，并且应用css

$("img").slice(0,3).filter("[src*=astor]").addBack().css("border",'thick double red');//$("img").slice(0,3)和$("img").slice(0,3).filter("[src*=astor]")的合集

//这里的选择器参数过滤的是原结果集，相当于$("img").slice(0,3).filter("[src*=daff]")，
$("img").slice(0,3).filter("[src*=astor]").addBack("[src*=daff]").css("border",'thick double red');

children

children是用来访问子元素的，形式有childern(),children(selector),其中第一个是用来得到结果集中所有的子元素，第二个是用来过滤得到的子元素，保留满足selector的子元素

实例：

$("div.dcell").children().css("border",'thick double red');//得到所有div.dcell的子元素，包括其中的img和input元素

$("div.dcell").children("img").css("border",'thick double red');//得到所有子元素中的img元素

find

find是用来得到结果集中的所有的后代元素，这里是后代元素，并不是只有子元素，还包括孙子。。。，形式有find(),find(selector),find(htmlElement),find(jquery),find(htmlElment[])，这里会自动去掉含有重复的元素，因此可以用来过滤元素

实例

$("div.dcell").find("img");   //找到div.dcell的后代元素img

var content=document.getElementsByTagName("input");
$("div.dcell").find(content).filter(":first").css("font-size",'1.5em');//找到div.dcell后代元素中的input元素

parent

选取结果集中的父元素，这里表示一层关系就是父元素，并不是祖先元素，形式有parent(),parent(selector)

实例：

$("img").parent();   //选取img的父元素

$("img").parent(":first");   //选取img父元素中的第一个元素

parents

选取祖先元素，包括父元素，形式有parents(),parents(selector)

实例：

$("img").parents().each(function(index,elem){    //选取所有的祖先元素
    console.log(elem.TagName+"   "+elem.id);
})


$("img").parents("div.dcell").css("border",'thick double red');   //选择所有的div.dcell元素

parentsUntil

选择祖先元素，知道找到这个当前祖先元素匹配参数选择器为止,parentsUntil(selector),parentsUntil(selector,selector)，其中带有两个参数选择器中的第二个参数是用来筛选所得到的结果集，第一个是用来定位直到这个元素为止

实例：

    $("img").parentsUntil("div.drow");//找img的祖先元素，直到div.drow为止，不包括div.drow
    
     $("img").parentsUntil("div.drow",":first").css("border",'thick double red');  //这里选择了结果集中的第一个元素应用了样式

closest

得到结果集中元素的祖先元素中匹配selector选择器最接近的那个祖先元素，形式为closest(selector),closest(selctor,context),closest(htmlElemtent),closest(jquery)

实例：


$("img").closest("div.drow").each(function (index,elem) {   //选择满足div.drow的祖先元素，这里的最接近就是辈分最接近，这里的两个class=drow的div都是最接近的，因为这俩个是同级的关系
        console.log(elem.tagName+"    "+elem.id);
    });
    
    
    var jq=$("#row1,#row2,form");   //传入jquery对象
    $("img").filter("[src*=astor]").closest(jq).each(function (index,elem) {   //这里选取的是最接近第一张图的祖先元素，当然是<div id="row1">
        console.log(elem.tagName+"   "+elem.id);
    })

offestParent

得到距离最近的祖先定位元素，使用fixed,absolute,relative定位的元素，形式为offestParent()

siblings

得到所有的兄弟元素，可选的selector用来过滤结果，形式为siblings(),siblings(selector)

实例：

    $("img").siblings().css("font-size",'1.4em');// 得到img的所有兄弟元素，这里是input
    
    $("img").siblings(":last");     //得到img所有兄弟元素中的最后一个元素

得到上一个兄弟元素，形式为prev(),prev(selector)，其中的selector是用来过滤结果的

实例：

    $("input").prev().css("border",'thick double red');   //这里得到input的上一个元素Label元素

prevAll

得到当前元素的所有的上面的兄弟元素，形式为prevALl(),prevAll(selector)

实例：

$("input").prevAll().css("border",'thick double red');   //得到input上面的所有的兄弟元素

$("input").prev("img").css("border",'thick double red');   //得到input上面的所有的img元素

prevUntil

这个和parentsUntil一样，直到匹配selector就结束了，不包括

实例：

$("input").prevUntil("i").css("border",'thick double red');

选择当前元素下面的一个兄弟元素，和prev一样

nextAll

选择当前元素下面的所有兄弟元素，和prevAll一样

nextUntil

和prevUntil一样

本人博客

最后编辑于：2017.12.06 22:35:27

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 218,607评论 6赞 507
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 93,239评论 3赞 395
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 164,960评论 0赞 355
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,750评论 1赞 294
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,764评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,604评论 1赞 305
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,347评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,253评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,702评论 1赞 315
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,893评论 3赞 336
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 40,015评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,734评论 5赞 346
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,352评论 3赞 330
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,934评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,052评论 1赞 270
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,216评论 3赞 371
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,969评论 2赞 355

JQuery 干货篇之选择元素

JQuery 干货篇之选择元素

实验的HTML+CSS的代码

选择器

JQuery对象的方法

把jquery当成数组

add

slice()

filter

not

has

map

is

end

addBack

children

find

parent

parents

parentsUntil

closest

offestParent

siblings

prev

prevAll

prevUntil

next

nextAll

nextUntil

本人博客

推荐阅读更多精彩内容