JQuery 干货篇之挑选元素

2019年8月31日 110次阅读 来源: 爱撒谎的男孩

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">
                    <img src="astor.png"/><label for="astor">Astor:</label>
                    <input name="astor" value="0" required>
                </div>
                <div class="dcell">
                    <img src="daffodil.png"/><label for="daffodil">Daffodil:</label>
                    <input name="daffodil" value="0" required>
                </div>
                <div class="dcell">
                    <img src="rose.png"/><label for="rose">Rose:</label>
                    <input name="rose" value="0" required>
                </div>
            </div>
            <div id="row2" class="drow">
                <div class="dcell">
                    <img src="peony.png"/><label for="peony">Peony:</label>
                    <input name="peony" value="0" required>
                </div>
                <div class="dcell">
                    <img src="primula.png"/><label for="primula">Primula:</label>
                    <input name="primula" value="0" required>
                </div>
                <div class="dcell">
                    <img src="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(),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');

next

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

nextAll

挑选当前元素下面的一切兄弟元素，和prevAll一样

nextUntil

和prevUntil一样

本人博客

    原文作者：爱撒谎的男孩
    原文地址: https://segmentfault.com/a/1190000009133593
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞