xml地图|网站地图|网站标签 [设为首页] [加入收藏]

一个标签选择弹框,jquery选择器认识到

来源:http://www.ccidsi.com 作者:最新解决方案 人气:150 发布时间:2019-05-07
摘要:一、预览   .class 选拔器---一种通过成分种类属性查找元素 jquery选取器从认知到使用初级篇,jquery选用器认知到   .class 选取器 ---1种通过成分种类属性查找成分 调用格式:  $(".class"

一、预览

图片 1

  1.   .class 选拔器 ---一种通过成分种类属性查找元素

jquery选取器从认知到使用初级篇,jquery选用器认知到

  1.   .class 选取器 ---1种通过成分种类属性查找成分

调用格式:
 $(".class") ----当中参数表示成分的css类外号称(类选取器)
<input class="abc" />-------$(".abc")

2.*慎选器 (取走全体的成分)
调用格式: $("*") 能够与任何因素构成使用
$("div *")-------采用包蕴在div里面包车型大巴具有因素;
例如 <div>
     <p class="a"></p>       
    <span><span>
      </div>
 <script type="text/javascript">
        $("div *").html("你好");
</script>
尤其注意,由于使用*选取器获取的是全体成分,因而,有个别浏览器将会相比较缓慢,那一个接纳器也须求谨慎使用。

三.sele1,sele贰,seleN选用器,也正是多选拔器
调用格式 :$(“sele1,sele二,seleN”)
          尤其注意:中间是用逗号隔绝的
比如说地点小编想选用div中的p成分那壹行的话
就能够$(".a, span").html("作者只想选你");

4.档案的次序选择器(老爹和儿子接纳器):ance desc选择器
调用格式:$("ance desc")
当中ance desc是选取空格隔开分离的三个参数。ance参数(ancestor祖先的简写)表示父成分;desc参数(descendant后代的简写)表示后代成分,即包罗子成分、孙成分等等。四个参数都足以经过采用器来赢得比方家族姓氏“div”,家族几代人里,都出名字里带“span”的,就足以用这些ance desc选用器把这几人给一定出来。

<div>
     <p class="a"><span></span></p>       
    <span><span>
      </div>

$("div span")------正是接近  div是老爹 ,span被他包裹 的保有小辈  在那边是能够取到四个span的因素的

5.parent > child选择器
调用格式:$(“parent > child”)

例如
<div>
     <p> <span></span></p>
     <span></span>---取的是以此因素
 </div>
$("div>span").html("小编是老爸的外甥不是她的儿子")
与ance desc选择器比较,parent > child接纳器的限制要小些,它所选择的靶子是子集成分,也就是三个家家中的子辈们,但不蕴含孙辈

6.prev next选择器 
调用格式:$(“prev next”) 那就叫做远亲比不上近邻了 便是调用你紧靠着你的下一家的因素

透过prev next选拔器就足以寻觅与“prev”成分紧邻的下一个“next”成分

$("div p").html("不管您又多少个p 小编只取你紧靠着你的第一个p成分")

7.prev ~ siblings选择器
调用格式
$(“prev ~ siblings”)
收获prev 成分后边全体周围的因素
$("div~p").html("不管您又多少个p 只如果同级其余p小编都取到")

八.:has(selector)过滤采用器
过滤选拔器的效率是得到采用器中带有钦定成分名称的上上下下因素
在div成分中,包涵了四个<span>成分,通过has选取器获取<div>成分中的<span>成分的语法是
$("div:has(span)");
 <div>改动包括"label"成分的背景观:</div>
        <ol>
            <li><p>我是P先生</p></li>
            <li><label>L妹纸正是自己</label></li>---------
            <li><p>作者也是P先生</p></li>                       那两行的样式爆发退换了
            <li><label>我也是L妹纸哦</label></li>------
            <li><p>P先生就是本人啊</p></li>
        </ol>
$("li:has('label')").css("background-color", "blue");-----注意了:冒号前面是一直不空格的
注意 供给加单引号;
玖.  :first过滤选拔器
该类型的选取器是依据某过滤规则进行成分的合营,书写时以“:”号开始,平时用于查找集结成分中的某一职分的单个成分。
在<ul>元素中,增多了四个<li>成分,通过jquery选拔器获取最终1个<li>成分的诀窍是:
$("li:last")--------获取最后三个<li>元素
 $(“li:first”)------获取第三个成分

  1. :eq(index)过滤选取器--这一个平常也会用到
    调用格式::eq(index)
    --假设想从一组标签成分数组中,灵活选择随机的3个标签成分
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li>选我</li>
    </ul>
    例如$("li:eq(3)").css("color","red");---选取 第四个li的元素
  1. :contains(text)过滤采纳器---依照文本内容来搜索三个或多少个因素
    eq(index)接纳器按索引查找成分比较,有时候大家恐怕希望根据文本内容来查找2个或八个要素,那么使用:contains(text)选取器会特别有利, 它的效劳是挑选蕴含钦定字符串的全部因素,它常常与其他因素结合使用,获取蕴含“text”字符串内容的全部成分对象。个中参数text表示页面中的文字。

调用格式::contains(text)
<div>更改包涵"jQuery"字符内容的背景象:</div>
         <li>强大的"jQuery"</li>
            <li>"javascript"也很实用</li>
            <li>"jQuery"前端必学</li>
            <li>"java"是一种开荒语言</li>
            <li>前端利器——"jQuery"</li>
$("li:contains('jQuery')").css("background", "green");

  1. :hidden过滤选用器
    过滤选用器的作用是得到全体不可知的要素,那一个不可知的成分中包含type属性值为hidden的成分

 <h三>展现隐藏成分的源委</h三>
        <input id="hidstr" type="hidden" value="笔者已隐藏起来"/>
<div></div>
 var $strHTML = $("input:hidden").val();
        $("div").html($strHTML);

  1. :visible过滤接纳器  与hidden过滤器相反
    :visible过滤接纳器获取的是全部可知的要素,也正是说,只要不将成分的display属性值设置为“none”,那么,都足以透过该选取器获取。

14.[attribute=value]品质选拔器----那个平日应用
[attribute=value]品质选用器的效应是收获与属性名和属性值毫无二致的任何因素,当中[]是专项使用于属性选取器的括号符,参数attribute表示属性名称,value参数表示属性值。
  <h3>改换"title"属性值为"蔬菜"的背景观</h3>
        <ul>
            <li title="蔬菜">茄子</li>
            <li title="水果">香蕉</li>
            <li title="蔬菜">芹菜</li>
            <li title="水果">苹果</li>
            <li title="水果">西瓜</li>
        </ul>
        
        <script type="text/javascript">
            $("li[title='蔬菜']").css("background-color", "green");
        </script>
只顾:属性值中的‘’单引号能够不写,由于属性名与属性值是等号,因而,它们之间不是带有关系,而是完全一样。

[attribute!=value]天性接纳器 这几个就不介绍了

  1. [attribute*=value]个性选取器
    介绍一个功用进一步有力的天性选拔器[attribute*=value],它能够获得属性值中蕴藏钦定内容的满贯成分,在那之中[]是专项使用于属性选拔器的括号符,参数attribute表示属性名称,value参数表示对应的属性值。
    <h三>改换"title"属性值包蕴"果"的背景观</h三>
            <ul>
                <li title="蔬菜">茄子</li>
                <li title="水果">香蕉</li>
                <li title="蔬菜">芹菜</li>
                <li title="草还丹">小西红柿</li>
                <li title="水果">西瓜</li>
            </ul>
            
            <script type="text/javascript">
                $("li[title*='果']").css("background-color", "green");
            </script>

  2. :first-child子成分过滤选用器
    :first过滤选用器能够获取内定父成分中的第多少个子成分,但该选用器再次来到的唯有3个因素,并不是2个集聚,而选用:first-child子成分过滤选择器则足以拿走每个父成分中回到的第3个子成分,它是多少个聚焦,常用多个聚众数据的抉择管理。
       <h叁>改动各种"蔬果"中率先行的背景色</h3>
            <ol>
                <li>芹菜</li>
                <li>茄子</li>
                <li>萝卜</li>
                <li>大白菜</li>
                <li>西红柿</li>
            </ol>
            <ol>
                <li>橘子</li>
                <li>香蕉</li>
                <li>葡萄</li>
                <li>苹果</li>
                <li>西瓜</li>
            </ol>
            
            <script type="text/javascript">
                $("li:first-child").css("background-color", "green");
            </script>

  3. :last-child子成分过滤选拔器  那几个就不介绍了
    子成分过滤采纳器的职能是得到各种父成分中回到的最后1个子成分,它也是三个成团,常用七个聚众数据的选项处理。

1八.  :input表单选用器
:input表单选用器能够完毕,它的意义是回来全体的表单成分,不唯有包罗富有<input>标志的表单成分,而且还包罗<textarea>、<select> 和 <button>标识的表单成分,由此,它选择的表单成分是最广的。
<h3>修改总体表单成分的背景象</h叁>
        <form id="frmTest" action="#">
        <input type="button" value="Input Button" /><br />
        <select>
            <option>Option</option>
            <option>oooo</option>
        </select><br />
        <textarea rows="3" cols="8"></textarea><br />
        <button>
            Button</button><br />
        </form>
        
        <script type="text/javascript">
            $("#frmTest :input").addClass("bg_blue");
只顾: :input前边是有一个空格的
addClass()方法的成效是为要素增加钦点的样式类小名号

19 . :text表单文本选取器
能够获得表单中全体单行的文件输入框成分,单行的文书输入框就像是一个不换行的字条工具
<h叁>修改多少个单行输入框成分的背景象</h叁>
        <form id="frmTest" action="#">
        <input type="text" id="Text壹" value="作者是小纸条"/><br />
        <textarea rows="3" cols="8"></textarea><br />
        <input type="text" id="Text二" value="我也是小纸条"/><br />
        <button>
            Button</button><br />
        </form>  

  1. :password表单密码选择器 ---这些看起来也很不错     
    果想要拿走密码输入文本框,能够运用:password选择器,它的效率是赢得表单中任何的密码输入文本框成分。
    <h三>修改几个密码输入框成分的背景象</h3>
            <form id="frmTest" action="#">
            <input type="text" id="Text一" value="单行文本输入框"/><br />
            <input type="password" id="Text贰" value="密码文本输入框"/><br />
            <textarea rows="三" cols="8">区域文本输入框</textarea><br />
            <input type="password" id="Text三" value="密码文本输入框"/><br />
            <button>
                Button</button><br />
            </form>
            
            <script type="text/javascript">
                $("#frmTest :password").addClass("bg_red");
            <script type="text/javascript">
                $("#frmTest :text").addClass("bg_blue");
    以此时候 是type=“text”的框被入选

二一  :radio单选开关选取器
表单中的单选开关常用于多项数据中仅选取这些,而利用:radio选取器可轻松到原子钟单中的全部单选开关成分。
  <h3>将表单中单选按键设为不可用</h三>
        <form id="frmTest" action="#">
        <input type="button" value="Input Button" /><br />
        <input id="Radio1" type="radio" />
        <label for="Radio1">
            男</label>
        <input id="Radio2" type="radio" />
        <label for="Radio2">
            女</label><br />
        <button>
            Button</button><br />
        </form>
        
        <script type="text/javascript">
            $("#frmTest :radio").attr("disabled","true");
        </script>

22 :checkbox复选框选拔器
表单中的复选框常用于多项数据的挑三拣肆,使用:checkbox选拔器可以便捷牢固并获取表单中的复选框成分。
     <h3>将表单的全体复选框设为不可用</h三>
        <form id="frmTest" action="#">
        <input type="button" value="Input Button" /><br />
        <input id="Checkbox1" type="checkbox" />
        <label for="Checkbox1">
            西红柿</label><br />
        <input id="Checkbox2" type="checkbox" />
        <label for="Checkbox2">
            茄子</label><br />
        <input id="Checkbox3" type="checkbox" />
        <label for="Checkbox3">
            黄瓜</label><br />
        <button>
            Button</button><br />
        </form>
        
        <script type="text/javascript">
            $("#frmTest :checkbox").attr("disabled","true");
        </script>
全部设为选中状态:$("#frmTest:checkbox").attr("checked","true")

23 :submit提交按键选拔器
常备状态下,3个表单中只允许有二个“type”属性值为“submit”的付出按键,使用:submit选取器可获取表单中的那几个提交开关成分。    
 <h三>修改表单中付出开关的背景象</h叁>
        <form id="frmTest" action="#">
        <input type="button" value="Input Button" /><br />
        <input type="submit" value="点笔者就交付了" /><br />
        <button>
            Button</button><br />
        </form>
        
        <script type="text/javascript">
            $("#frmTest input:submit").addClass("bg_red");
        </script>这年就相比特殊了: 需求加上input:submit 不然不可能定位 是不是缺少“input”, <button>开关经常也被以为是交由按键,为更加好界别,只要在:submit选拔器在此以前拉长“input”符号。

二四 :image图像域选择器

当多个<input>成分的“type”属性值设为“image”时,该因素正是多个图像域,使用:image选用器能够火速获得该类全体因素。比如,在表单中增加两连串型的图像成分,使用:image选拔器获取当中的壹种图像成分,并更换该因素的边框样式,
 <h三>修改表单中图像成分的背景观</h3>
        <form id="frmTest" action="#">
        <input type="image" src="" /><br />
        <br />
        <img alt="" src="" /><br />
        </form>
        
        <script type="text/javascript">
            $("#frmTest :image").addClass("bg_red");

二四 :button表单按键选拔器
表单中隐含众多品种的开关,而选用:button选取器能获取且不得不获取“type”属性值为“button”的<input>和<button>那两类日常开关元素。

二5 :checked选中状态选取器
有一部分因素存在选中状态,如复选框、单选按键成分,选中时“checked”属性值为“checked”,调用:checked能够得随处于选中状态的整整因素。

 <h三>将远在选中状态的要素设为不可用</h三>
        <form id="frmTest" action="#">
        <input id="Radio1" type="radio" checked="checked" />
        <label id="Label1" for="Radio1">
            苹果</label><br />
        <input id="Radio2" type="radio" />
        <label id="Label2" for="Radio2">
            桔子</label><br />
        <input id="Checkbox1" type="checkbox" checked="checked" />
        <label id="Label3" for="Checkbox1">
            荔枝</label><br />
        <input id="Checkbox2" type="checkbox" />
        <label id="Label4" for="Checkbox2">
            葡萄</label><br />
        <input id="Checkbox3" type="checkbox" checked="checked" />
        <label id="Label5" for="Checkbox3">
            香蕉</label><br />
        </form>
        
        <script type="text/javascript">
            $("#frmTest :checked").attr("disabled", true);
        </script>

二陆:selected选中状态选取器

与:checked选取器比较,:selected选用器只可以获取<select>下拉列表框中全部高居选中状态的<option>选项成分。
    <h三>获取处于选中状态成分的内容</h三>
        <form id="frmTest" action="#">
        <select id="Select1" multiple="multiple">
            <option value="0">苹果</option>
            <option value="1" selected="selected">桔子</option>
            <option value="2">荔枝</option>
            <option value="3" selected="selected">葡萄</option>
            <option value="4">香蕉</option>
        </select><br /><br />
        <div id="tip"></div>
        </form>
        
        <script type="text/javascript">
            var $txtOpt = $("#frmTest :selected").text();
            $("#tip").html("选中内容为:" $txtOpt);
        </script>

 怎样获得列表框成分中被入选成分的的值,代码为
B$("select option:selected").text();

 
二7.行使attr()方法调节成分的性质 --使花费最广的,一定要切记
attr()方法的法力是设置大概再次来到元素的性质,其中attr(属性名)格式是获取成分属性名的值,attr(属性名,属性值)格式则是设置成分属性名的值。
 <body>
        <h三>attr()方法设置成分属性</h三>
        <a href="" id="a一">点自个儿就变</a>
        <div>小编改造后的地址是:<span id="tip"></span></div>
        
        <script type="text/javascript">
            $("#a一").attr("href", "www.imooc.com");---那是设置属性href
            var $url = $("#a一").attr("href");----那是获得href的值
            $("#tip").html($url);
        </script>

 

操作成分的开始和结果
利用html()和text()方法操作成分的剧情,当四个主意的参数为空时,表示收获该因素的开始和结果,而只要格局中隐含参数,则意味将参数值设置为因素内容。
差别:html()方法能够得到成分的HTML内容,包蕴HTML格式代码

   text()方法只是收获成分中的文本内容,并不带有HTML格式代码

操作成分的体制
由此addClass()和css()方法能够方便地操作元素中的样式,前者括号中的参数为增日币素的样式名称,后者直接将样式的特性内容写在括号中。
 $("#content").css({"color":"#fff","background-color":"red"});

移除属性和体裁-----那么些也不利,使费用还相比较高
行使removeAttr(name)和removeClass(class)分别能够完结移除成分的性质和体制的功力,

$("#abc").removeAttr("href")   
 $("#content").removeClass();

利用append()方法向成分内扩展内容-----那个正是在分页的时候照旧是下拉菜单的时候利用广
append(content)方法的机能是向钦点的成分中加进内容,被追加的content参数,能够是字符、HTML成分标识,还足以是一个回去字符串内容的函数。
 function rethtml() {
                var $html = "<div id='test' title='hi'>笔者是调用函数创制的</div>"
                return $html;
            }
            $("body").append(rethtml());

应用appendTo()方法向被选成分内插入内容----这一个格式可不用和append的格式搞混了;
appendTo()方法也得以向钦点的要素内插入内容
$(content).appendTo(selector)
参数content表示要求插入的剧情,参数selector表示被选的成分,即把content内容插入selector成分内,暗中认可是在尾部
 <h叁>appendTo()方法插入内容</h3>
        <div>
            <span class="green">小乌龟</span>
        </div>
        
        <script type="text/javascript">
            var $html = "<span class='red'>小青蛙</span>"
            $($html).appendTo("div");
        </script>

应用before()和after()在要素前后插入内容
before()和after()方法能够在要素的前后插入内容,它们分别表示在壹切因素的先头和前面插入钦命的因素或内容
调用格式分别为
$(selector).before(content)和$(selector).after(content) 在那之中参数content表示插入的内容,该内容能够是因素或HTML字符串。
  <h3>after()方法在要素之后插入内容</h3>
        <span class="green">我们交个朋友呢!</span>
        
        <script type="text/javascript">
            var $html = "<span class='red'>兄弟。</span>"
            $("span").after($html);
注意和appendTo()的区别

选择clone()方法复制成分
调用clone()方法能够生成1个被选成分的别本,即复制了三个被选成分,包罗它的节点、文本和质量,
它的调用格式为:
$(selector).clone()
里面参数selector能够是贰个成分或HTML内容。
运用clone()方法复制元素时,不仅仅复制了该因素的文本和节点,还将它的“title”属性也多只复制过来了。
<h三>使用clone()方法复制成分</h3>
        <span class="red" title="hi">笔者是孙行者</span>
        
        <script type="text/javascript">
            $("body").append($(".red").clone());

replaceWith()和replaceAll()
replaceWith()和replaceAll()方法都得以用于替换来分或因素中的内容,但它们调用时,内容和被轮换到分所在的职位差别,分别为如下所示:
$(selector).replaceWith(content)和$(content).replaceAll(selector)----注意格式
 <span class="green" title="hi">小编是土冒</span>
        
        <script type="text/javascript">
            var $html = "<span class='red' title='hi'>作者是土豪</span>";
        $($html).replaceAll(".green");
        $(".green").replaceWith($html);-----效果没什么不一致的

行使wrap()和wrapInner()方法包裹成分和内容
wrap()和wrapInner()方法都能够展开成分的包装,但前者用于包裹成分自身,后者则用来包裹成分中的内容,它们的调用格式分别为:

$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)

参数selector为棉被服装进的因素,wrapper参数为包装成分的格式。
$(".red").wrapInner("<i></i>");
$(".red").wrap("<i></i>");

利用each()方法遍历成分----这些好用 
each()方法能够遍历内定的要素集合,在遍历时,通过回调函数重回遍历成分的连串号,它的调用格式为:

$(selector).each(function(index))
参数function为遍历时的回调函数,index为遍历成分的队列号,它从0开端。 <h三>使用each()方法遍历成分</h三>
        <span class="green">香蕉</span>
        <span class="green">桃子</span>
        <span class="green">葡萄</span>
        <span class="green">荔枝</span>
        
        <script type="text/javascript">
            $("span").each(function (index) {
                if (index == 1) {
                    $(this).attr("class", "red");
                }
            });

采纳remove()和empty()方法删除成分
remove()方法删除所选成分本人和子成分,该方法能够经过抬高过滤参数钦点需求删除的一点因素,而empty()方法则只删除所选成分的子元素的内容。
 $("span").empty()
 $("span").remove()

 使用attr方法,裁撤id号为test的复选框选中状态代码为:
D$("#test").attr("checked", false);

 

  1. .class 选用器 ---壹种通过成分体系属性查找成分 调用格式: $(".class") ----当中参数表...

二、代码

调用格式:
 $(".class") ----当中参数表示成分的css类外号称(类选取器)
<input class="abc" />-------$(".abc")

1.HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script type="text/javascript" src="./template-web.js"></script>
    <link rel="stylesheet" type="text/css" href="./chooseItem.css">
</head>
<body>
    <!-- 按钮触发模态框 -->
    <input type="text" class="form-control" data-toggle="modal" data-target="#myModal" id="showModal"/>
    <p>已选中的标签</p>
    <ol class="showItem"></ol>
    <!-- 模态框(Modal) -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        ×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        选择成员
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="choose"></div>
                    <ul id="myTab" class="nav nav-tabs">
                        <li class="active">
                            <a href="#apartment" data-toggle="tab">
                                 按部门选择
                            </a>
                        </li>
                        <li><a href="#self" data-toggle="tab">按人员选择</a></li>
                    </ul>
                    <div id="content-area"></div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="sure">
                        确定
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</body>
<script id="tem" type="text/html">
    <div id="myTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="apartment">
            <ul>
                <li><p class="dropdow">{{level}}<input type="checkbox" class="A" id="{{id}}" /><label class="checkbox_label" for="{{id}}" onclick="addItem($(this),$(this).parent().text())"></label></p>
                    <ul>
                        {{each childlevel as A}}
                            <li><p class="dropdow">{{A["level"]}}<input type="checkbox" class="A" id="{{A['id']}}"/><label class="checkbox_label" for="{{A['id']}}" onclick="addItem($(this),$(this).parent().text())"></label></p>
                                {{if A["childlevel"].length>0}}
                                    <ul>
                                        {{each A["childlevel"] as B}}
                                            <li><p class="dropdow">{{B["level"]}}<input type="checkbox" class="A" id="{{B['id']}}"/><label class="checkbox_label" for="{{B['id']}}" onclick="addItem($(this),$(this).parent().text())"></label></p>
                                                {{if B["childlevel"].length>0}}
                                                    <ul>
                                                        {{each B["childlevel"] as C}}
                                                            <li><p>{{C["level"]}}<input type="checkbox" class="A" id="{{C['id']}}"/><label class="checkbox_label" for="{{C['id']}}" onclick="addItem($(this),$(this).parent().text())"></label></p></li>
                                                        {{/each}}
                                                    </ul>
                                                {{/if}}
                                            </li>
                                        {{/each}}
                                    </ul>
                                {{/if}}
                            </li>
                        {{/each}}
                    </ul>
                </li>
            </ul>
        </div>
        <div class="tab-pane fade" id="self">
            <div class="side">
                <ul>
                    <li><p class="dropdow">{{level}}[]</p>
                        <ul>
                            {{each childlevel as A}}
                                <li><p class="dropdow">{{A["level"]}}{{A["staf"]}}</p>
                                    {{if A["childlevel"].length>0}}
                                        <ul>
                                            {{each A["childlevel"] as B}}
                                                <li><p class="dropdow">{{B["level"]}}{{B["staf"]}}</p>
                                                    {{if B["childlevel"].length>0}}
                                                        <ul>
                                                            {{each B["childlevel"] as C}}
                                                                <li><p class="dropdow">{{C["level"]}}{{C["staf"]}}</p></li>
                                                            {{/each}}
                                                        </ul>
                                                    {{/if}}
                                                </li>
                                            {{/each}}
                                        </ul>
                                    {{/if}}
                                </li>
                            {{/each}}
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="detail">

            </div>
        </div>
    </div>
</script>
<script type="text/javascript" src="http://www.ccidsi.com/uploads/allimg/190507/10100W054-1.jpg"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://www.ccidsi.com/uploads/allimg/190507/10100R394-2.jpg" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="chooseItem.js"></script>
<script type="text/javascript">
    $(function(){
        var data={
            level:"读书郎",
            id:"readboy",
            childlevel:[{
                level:"总经办",
                id:"all",
                childlevel:[],
                staf:[
                {
                    id:"Z1",
                    level:"总经办阿七"
                },
                {
                    id:"Z2",
                    level:"总经办阿哥"
                },
                {
                    id:"Z3",
                    level:"总经办阿龙"
                },
                {
                    id:"Z4",
                    level:"总经办阿东"
                },
                {
                    id:"Z5",
                    level:"总经办阿强"
                }]
            },{
                level:"市场营销",
                id:"market",
                childlevel:[{
                    level:"客户服务",
                    id:"service",
                    childlevel:[{
                        level:"400客服",
                        id:"service1",
                        childlevel:[],
                        staf:[
                            {
                                id:"K1",
                                level:"客服阿七"
                            },
                            {
                                id:"K2",
                                level:"客服阿哥"
                            },
                            {
                                id:"K3",
                                level:"客服阿龙"
                            },
                            {
                                id:"K4",
                                level:"客服阿东"
                            },
                            {
                                id:"Z5",
                                level:"客服阿强"
                            }]
                    }]
                },{
                    level:"推培部",
                    id:"teach",
                    childlevel:[{
                        level:"推培一部",
                        id:"teach1",
                        childlevel:[],
                        staf:[
                            {
                                id:"T1",
                                level:"推培一部阿七"
                            },
                            {
                                id:"T2",
                                level:"推培一部阿哥"
                            },
                            {
                                id:"T3",
                                level:"推培一部阿龙"
                            },
                            {
                                id:"T4",
                                level:"推培一部阿东"
                            },
                            {
                                id:"T5",
                                level:"推培一部阿强"
                            }]
                    },{
                        level:"推培二部",
                        id:"teach2",
                        childlevel:[],
                        staf:[
                            {
                                id:"TS1",
                                level:"推培二部阿七"
                            },
                            {
                                id:"TS2",
                                level:"推培二部阿哥"
                            },
                            {
                                id:"TS3",
                                level:"推培二部阿龙"
                            },
                            {
                                id:"TS4",
                                level:"推培二部阿东"
                            },
                            {
                                id:"TS5",
                                level:"推培二部阿强"
                            }]
                    }]
                },{
                    level:"渠道部",
                    id:"way",
                    childlevel:[{
                        level:"渠道一部",
                        id:"way1",
                        childlevel:[],
                        staf:[
                            {
                                id:"Q1",
                                level:"渠道一部阿七"
                            },
                            {
                                id:"Q2",
                                level:"渠道一部阿哥"
                            },
                            {
                                id:"Q3",
                                level:"渠道一部阿龙"
                            },
                            {
                                id:"Q4",
                                level:"渠道一部阿东"
                            },
                            {
                                id:"Q5",
                                level:"渠道一部阿强"
                            }]
                    },{
                        level:"渠道二部",
                        id:"way2",
                        childlevel:[],
                        staf:[
                            {
                                id:"QS1",
                                level:"渠道二部阿七"
                            },
                            {
                                id:"QS2",
                                level:"渠道二部阿哥"
                            },
                            {
                                id:"QS3",
                                level:"渠道二部阿龙"
                            },
                            {
                                id:"QS4",
                                level:"渠道二部阿东"
                            },
                            {
                                id:"QS5",
                                level:"渠道二部阿强"
                            }]
                    }]
                }]
            }]
        };
        var html=template('tem', data);
        $('#content-area').html(html);
        var CI=new ChooseItem();
        CI.usefor();
    })    
</script>
</html>

2.*挑选器 (取走全数的要素)
调用格式: $("*") 能够与其他因素构成使用
$("div *")-------选择包涵在div里面包车型客车全数因素;
例如 <div>
     <p class="a"></p>       
    <span><span>
      </div>
 <script type="text/javascript">
        $("div *").html("你好");
</script>
尤其注意,由于使用*选拔器获取的是总体要素,因此,有个别浏览器将会比较缓慢,那一个选拔器也急需审慎运用。

2.CSS部分

.form-control{
    width: 20%;
}
.modal-body{
    padding: 0px;
}
.modal-content{
    border-radius: 0px;
}
.choose{
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 15px;
    width: 95%;
    min-height: 50px;
    border: 1px solid #c9d0d9;
    border-radius: 4px;
}
.nav-tabs{
    border-top: 1px solid #c9d0d9;
    border-bottom: 1px solid #c9d0d9;
    padding-left: 15px;
}
.nav-tabs>li{
    margin-bottom: 0px;
}
/*点击后的样式*/
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover{
    color: #269bec;
    font-weight: 600;
    border: 0px;
    border-bottom:3px solid #269bec;
}
a{
    color: black;
}
.btn-primary{
    background-color: #269bec;
    border: 0px;
}
.btn{
    border-radius: 0px; 
}
.tab-content{
    height: 250px;
    overflow-y: scroll;
}
.tab-content::-webkit-scrollbar {/*滚动条整体样式*/
    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
}
.tab-content::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
}
.tab-content::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
}
.tab-pane{
    width: 100%;
    height: 100%;
}
ul{
    padding-left: 30px;
}
li{
    list-style: none;
    cursor: pointer;
}
#apartment input[type="checkbox"]{
    float: right;
    display: none;
}
.checkbox_label{
    float: right;

}
.checkbox_label:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 13px;
    height: 13px;
    border:1px solid #269bec;
}
input[type="checkbox"]:checked .checkbox_label:before {
    background-color:#269bec;
}
p{
    margin-right: 15px;
}

/*下拉菜单*/
#apartment .dropdown-menu{
    left: 3%;
    width:97%;
    border: 0px;
    box-shadow: 0 0 0 transparent;
}
#apartment ul li ul{
    display: none;
}


#self ul li ul{
    display: none;
}
#self{
    display: flex;
}
#self .side{
    flex: 0 0 35%;
    width: 35%;
    height: 100%;
    overflow-y: scroll;
}
#self .side::-webkit-scrollbar {/*滚动条整体样式*/
    width: 7px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 7px;
}
#self .side::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
}
#self .side::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
}
#self .detail{
    flex: 1;
    height: 100%;
}


#self .line{
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0px;
}
#self .A{
    float: right;
    display: none;
}
.choosebox{
    position: relative;
    margin: 2px;
    padding:2px;
    display: inline-block;
    border: 1px solid rgba(0,0,0,0.2);
    border-radius: 2px;
}
.choosebox .delete{
    display: block;
    position: absolute;
    top: -7px;
    right: -7px;
    width:15px;
    height: 15px;
    background-color: white;
    border:1px solid rgba(0,0,0,0.2);
    border-radius: 50%;
    text-align: center;
    line-height: 15px;
    font-size: 12px;
    cursor: pointer;
    z-index: 1;
}
.isExit{
    display: none;
}

3.sele1,sele二,seleN接纳器,也正是多选拔器
调用格式 :$(“sele1,sele2,seleN”)
          尤其注意:中间是用逗号隔离的
比如地点小编想采取div中的p成分那1行的话
就可以$(".a, span").html("小编只想选你");

3.JS部分

;(function($, window, document) {
    function ChooseItem(){
        this.Arr=[];//左边标签页的左边栏每个下拉菜单隐藏的右边框需要显示的数据
        this.showModal=$("#showModal");
        this.apDropDow=$("#apartment .dropdow");
        this.seDropDow=$("#self .dropdow");
        this.sure=$("#sure");
    };
    ChooseItem.prototype.usefor=function(){
        this.showModal.click(function(){//点击输入框清除所有checkbox选择状态
            $("input[type='checkbox']").attr("checked",false);
        });
        //左边标签页的下拉菜单功能
        this.apDropDow.click(function(){
            if($(this).parent().children("ul").is(':hidden')==true){
                $(this).parent().children("ul").css({"display":"block"});
            }else{
                $(this).parent().children("ul").css({"display":"none"});
            }
        })
        //右边标签页的下拉菜单功能
        this.seDropDow.click(function(){
            if($(this).parent().children("ul").is(':hidden')==true){
                $(this).parent().children("ul").css({"display":"block"});
            }else{
                $(this).parent().children("ul").css({"display":"none"});
            }
            if($(this).find("span").text()=="[]"||$(this).find("span").text()==""){
            }else{
                this.Arr=JSON.parse($(this).find("span").text());
                $("#self .detail").children().remove();//在右边栏生成列表之前,必须清除掉原来右边栏的checkbox
                //获取已选择的checkbox的长度
                var ChooseBoxLen=$(".isExit").length||0;
                for(var i=0;i<this.Arr.length;i  ){//在循环生成checkbox的同时,也要判断一下checkbox的选择状态
                    var h=$("<p class='line'>" this.Arr[i]["level"] "<input type='checkbox' class='A' id='" this.Arr[i]["id"] "'/><label class='checkbox_label' for='" this.Arr[i]["id"] "' onclick='addItem($(this),$(this).parent().text())'></label></p>");
                    var isChecked=false;//点击左边栏生成右边栏时判断checkbox的状态
                    for(var j=0;j<ChooseBoxLen;j  ){
                        if($(".choosebox").eq(j).find("span").eq(0).text()==this.Arr[i]["id"]){
                            isChecked=true;
                        }
                    }
                    h.find("input").attr("checked",isChecked);
                    $("#self .detail").append(h);
                }
            }
        })
        //确定按钮,点击确定按钮之后获取已选择的checkbox信息,将信息添加到弹框外面,然后清除弹框里面的操作数据
        this.sure.on("click",function(){
            for(var n=0;n<$(".choosebox").length;n  ){
                $(".showItem").append("<li>" $(".choosebox").eq(n).find("span").eq(1).text() "</li>");
            }
            $(".choose").empty();
            $(this).attr({"data-dismiss":"modal","aria-hidden":"true"})
        })
    };


    //在choose框添加项目
    window.addItem=function(obj,text){
        var chooseLen=$(".isExit").length;//判断选中框元素的个数
        var isExit=false;//判断选中的checkbox是否已经在选中框中
        for(var i=0;i<chooseLen;i  ){
            if($(".isExit").eq(i).text()==obj.parent().find("input").attr("id")){//只要有存在,那么就是true
                isExit=true;
            }
        }
        if(isExit){
            obj.parent().find("input").on("click",function(e){//如果已经存在的话,那么CheckBox就处于选中的状态
                e.preventDefault();
            })
        }else{
            var T=$("<p class='choosebox'>" obj.parent().find("input").attr("id") "" text "x</p>");//标签是一个占位符,里面存放的是选中的checkbox的id
            $(".choose").append(T);    
        }
    }
    //移除choose框的项目
    window.removeItem=function(obj){
        var ALen=$(".A").length;//判断checkbox的总数
        var chooseId=obj.parent().find("span").eq(0).text();//要删除的选项的id
        for(var m=0;m<ALen;m  ){
            if($(".A").eq(m).attr("id")==chooseId){
                obj.parent().remove();
                $(".A").eq(m).attr("checked",false);
            }
        }
    }
    ChooseItem.case = function() {
        return new ChooseItem();
    };
    if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {
        define(function() {
            return ChooseItem;
        });
    } else if (typeof module !== 'undefined' && module.exports) {
        module.exports = ChooseItem.case;
        module.exports.ChooseItem = ChooseItem;
    } else {
        window.ChooseItem = ChooseItem;
    }
})(jQuery,window,document);

肆.档次采纳器(老爹和儿子选拔器):ance desc采取器
调用格式:$("ance desc")
中间ance desc是利用空格隔开分离的四个参数。ance参数(ancestor祖先的简写)表示父元素;desc参数(descendant后代的简写)表示后代成分,即包蕴子成分、孙元素等等。八个参数都能够通过选用器来收获比方家族姓氏“div”,家族几代人里,都著名字里带“span”的,就足以用这几个ance desc选拔器把这多少人给一定出来。

三、分析

本条弹框的多寡渲染选取的是ArtTemplate来渲染的,具体用法参照如下地址:

本条小demo在编排进程中相遇了多少个小标题:

一.哪些让checkbox一向处于被点击状态

消除:最后依旧想到用e.preventDefault()来减轻

贰.什么修改checkbox的样式

缓慢解决:思路是那样的,创设<input type="checkbox" id="test"/>和<label for="test"></label>,然后隐藏掉<input/>,大家修改的实际上是label的体裁,checkbox的体裁是不能直接修改的。

#apartment input[type="checkbox"]{
    float: right;
    display: none;
}
.checkbox_label{
    float: right;
}
.checkbox_label:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 13px;
    height: 13px;
    border:1px solid #269bec;
}
input[type="checkbox"]:checked .checkbox_label:before {
    background-color:#269bec;
}

那段代码里面能够看出,点击后的checkbox样式是利用:checked伪类选取器和 选择器来赢获得如今被点击的checkbox的。

叁.哪些修改滚动条的体裁

.tab-content{
    height: 250px;
    overflow-y: scroll;
}
.tab-content::-webkit-scrollbar {/*滚动条整体样式*/
    width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
}
.tab-content::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.2);
}
.tab-content::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0;
    background: rgba(0,0,0,0.1);
}

肆.代码编写思路

1首先,数据最八只可以有多少个等第,种种品级/个人必需要有谈得来一定的id,那样在后头进行移除标签的时候才有利于移除。各类能够选中的选项都有一致的css样式类A,这样方便对具备能够选中的checkbox实行遍历;

贰在“按人口分选标签页”中,要兑现点击右边栏的美食指南,在右侧栏就涌出相应的新闻,那就必要在渲染的时候绑定各自的详实数据,我们来通过一张图看一下是怎么落到实处的

图片 2

在装有音讯的菜单项里面,藏入八个display为none的<span>标签,里面存放相应的多寡,然后在点击的时候,通过$(this)和其余选用器获取到那么些span的数量,然后嵌入左边栏中。记住,在历次得到span里面包车型客车数目放到左边栏在此之前,必须遍历那几个多少,看看最上边已经被增选的竹签个中是还是不是现身那些数据,然后设置其对应的点击状态;

三在采纳checkbox之后,最上边的已选用框中会出现那些数据,那时也须求对中选框中每一个标签举行绑定

图片 3

K1是客服阿七对应的id,大家把它藏到那些标签里面,获取的时候同样通过$(this)获取;

四删减标签的时候经过第3点绑定的id,遍历全数具备类A的checkbox,然后设置各自的checkbox状态。

<div>
     <p class="a"><span></span></p>       
    <span><span>
      </div>

四、github地址

 

$("div span")------便是接近  div是父亲 ,span被她包裹 的具有小辈  在此处是足以取到七个span的要素的

5.parent > child选择器
调用格式:$(“parent > child”)

例如
<div>
     <p> <span></span></p>
     <span></span>---取的是其一成分
 </div>
$("div>span").html("小编是阿爹的孙子不是她的外孙子")
与ance desc采纳器相比较,parent > child选用器的界定要小些,它所挑选的对象是子集成分,也正是三个家家中的子辈们,但不包含孙辈

6.prev next选择器 
调用格式:$(“prev next”) 这就叫做远亲不及近邻了 就是调用你紧靠着你的下一家的要素

由此prev next选拔器就足以查找与“prev”成分紧邻的下一个“next”成分

$("div p").html("不管您又多少个p 笔者只取你紧靠着你的首先个p成分")

7.prev ~ siblings选择器
调用格式
$(“prev ~ siblings”)
获取prev 成分前边全体邻座的要素
$("div~p").html("不管您又多少个p 只要是同级其余p作者都取到")

捌.:has(selector)过滤选用器
过滤选用器的意义是得到选择器中富含内定成分名称的全套成分
在div成分中,包括了3个<span>元素,通过has选取器获取<div>成分中的<span>元素的语法是
$("div:has(span)");
 <div>退换包罗"label"成分的背景观:</div>
        <ol>
            <li><p>我是P先生</p></li>
            <li><label>L妹纸便是自己</label></li>---------
            <li><p>作者也是P先生</p></li>                       那两行的体裁发生改造了
            <li><label>我也是L妹纸哦</label></li>------
            <li><p>P先生便是自己哦</p></li>
        </ol>
$("li:has('label')").css("background-color", "blue");-----注意了:冒号前面是不曾空格的
留神 须求加单引号;
玖.  :first过滤采取器
该项目标采取器是依靠某过滤规则举办元素的至极,书写时以“:”号开端,平日用于查找集合成分中的某一职位的单个成分。
在<ul>成分中,增添了八个<li>成分,通过jquery选用器获取最终一个<li>成分的秘诀是:
$("li:last")--------获取最终三个<li>成分
 $(“li:first”)------获取首个因素

十. :eq(index)过滤选择器--那几个平日也会用到
调用格式::eq(index)
--假诺想从一组标签成分数组中,灵活接纳随机的2个标签元素
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li>选我</li>
</ul>
例如$("li:eq(3)").css("color","red");---选取 第四个li的元素

11. :contains(text)过滤选取器---依照文本内容来找出3个或多个要素
eq(index)选用器按索引查找成分相比较,有时候大家也许希望根据文本内容来搜寻三个或多个成分,那么使用:contains(text)选拔器会特别有利于, 它的职能是选拔包括钦命字符串的上上下下要素,它一般与别的因素结合使用,获取包含“text”字符串内容的总体因素对象。当中参数text表示页面中的文字。

调用格式::contains(text)
<div>改造包罗"jQuery"字符内容的背景象:</div>
         <li>强大的"jQuery"</li>
            <li>"javascript"也很实用</li>
            <li>"jQuery"前端必学</li>
            <li>"java"是壹种开辟语言</li>
            <li>前端利器——"jQuery"</li>
$("li:contains('jQuery')").css("background", "green");

  1. :hidden过滤选取器
    过滤选取器的效率是收获全体不可知的成分,这几个不可知的元素中包含type属性值为hidden的因素

 <h叁>呈现隐藏成分的内容</h三>
        <input id="hidstr" type="hidden" value="我已隐藏起来"/>
<div></div>
 var $strHTML = $("input:hidden").val();
        $("div").html($strHTML);

  1. :visible过滤选用器  与hidden过滤器相反
    :visible过滤选用器获取的是整套凸现的要素,约等于说,只要不将成分的display属性值设置为“none”,那么,都能够经过该采取器获取。

本文由68399皇家赌场发布于最新解决方案,转载请注明出处:一个标签选择弹框,jquery选择器认识到

关键词: 68399皇家赌场 jquery 选择器

最火资讯