美文网首页
jQuery选择器&根据值设置select下拉框的默认值

jQuery选择器&根据值设置select下拉框的默认值

作者: Tn299 | 来源:发表于2019-09-26 18:42 被阅读0次

选择器是是jQuery的基础，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器。熟悉地使用选择器，不但能简化代码，而且能够事半功倍。

jQuery选择器的类型

1. 通过CSS选择器选取元素

  1. 基本选择器
  2. 层次选择器
  3. 属性选择器

2. 通过过滤选择器选择元素

  1. 基本过滤选择器
  2. 可见性过滤选择器

基本选择器

jQuery的基本选择器与CSS基本选择器相同，主要由元素标签选择器、class（类选择器）id选择器和多个选择器组成。jQuery基本选择器的详细说明如下表：


image.png
例： image.png
代码： 
<title>图书简介</title>
<link rel="stylesheet" href="css/bookStyle.css">
<script type="text/jscript" src="jquery-3.4.1.js"></script>
<script type="text/jscript">
  $(document).ready(function(e) {
    $("#mybtn1").click(function(){
           $("h1").css("color","blue");
        });
    $("#mybtn2").click(function(){
           $(".price").css({
              "background":"green","padding":"5px"
           }) ;
        });
    $("#mybtn3").click(function(){
           $("#author").css("color","red")
        });
    $("#mybtn4").click(function(){
           $("#author,h1,.price").css("color","yellow")
        });
    $("#mybtn5").click(function(){
           $("*").css("font-weight","bold");
        });
});
</script>
</head>

<body>
<div id="book">
    <div class="imgLeft"><img src="images/store.jpg" alt="岛上书店"></div>
    <div class="textRight">
        <h1>岛上书店【荐书联盟推荐】[The Storied Life of A.J.Fikry]</h1>
        <p class="intro">自营图书几十万畅销品种阶梯满减，抽奖赢魅蓝note3、JDRead阅读器！</p>
        <p id="author">[美] 加·泽文（Gabrielle Zevin） 著；孙仲旭，李玉瑶 译</p>
        <div class="price">
            <div id="jdPrice">京东价： <span>￥24.10</span> [6.9折] <p>[定价：<span>￥35.00</span>]</p> (降价通知)</div>
            <p id="mobilePrice">促销信息：<span>手机专享价</span> <span>￥9.90</span></p>
            <dl>
                <dt>以下促销可在购物车任选其一</dt>
                <dd><span>加价购</span> 满99.00元另加6.18元即可在购物车换购热销商品</dd>
                <dd><span>满减</span> 满100.00减20.00，满200.00减60.00，满300.00减100.00</dd>
            </dl>
            <p id="ticket">领 券：<span>105-6</span>  <span>200-16</span></p>
        </div>
    </div>
</div>
<div style="text-align:center">
    <button id="mybtn1">改变标题的颜色【标签选择器】</button>
    <button id="mybtn2">改变价格区域的颜色【类选择器】</button>
    <br/>
    <button id="mybtn3">改变作者信息的颜色【id选择器】</button>
    <button id="mybtn4">同时改变三个信息的颜色【并集选择器】</button>
    <button id="mybtn5">所有信息的字符加粗【*选择器】</button>
</div>

层次选择器

image.png

siblings()

用于选取每个匹配元素的所有同辈元素（不包括自己），并以jQuery对象的形式返回，此处即是选择除当前单击菜单项之外的其他同级菜单项。

可以使用this来调用，而"~"不能使用this

toggle()

toggle()方法则用于切换元素的可见状态，如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。
例：当在浏览器中显示该页面时，全部菜单展开后的效果如下图：

单击“上海市”菜单，则“上海市”菜单下的所有子菜单全部折叠；再次单击折叠之后的“上海市”菜单，则“上海市”菜单下的所有子菜单全部展开。


image.png

代码：

<title>无标题文档</title>
<script type="text/jscript" src="jquery-3.4.1.js"></script>
<script type="text/jscript">
   $(document).ready(function(e) {
     $("dt").click(function(){
            $(this).siblings("dd").toggle();
         });
});
</script>
</head>

<body>
<dl>
  <dt>北京市</dt>
  <dd>昌平区</dd>
  <dd>房山区</dd>
  <dd>海淀区</dd>
  <dd>大兴区</dd>
</dl>
<dl>
  <dt>上海市</dt>
  <dd>黄浦区</dd>
  <dd>长宁区</dd>
  <dd>宝山区</dd>
  <dd>闸北区</dd>
  <dd>闵行区</dd>
</dl>
<dl>
  <dt>重庆市</dt>
  <dd>江北区</dd>
  <dd>渡中区</dd>
  <dd>大渡口区</dd>
  <dd>南岸区</dd>
</dl>
</body>

属性选择器

属性选择器通过HTML元素的属性来选择元素


image.png

例：


image.png
代码： 
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京东快报</title>
    <link rel="stylesheet" href="css/newStyle.css">
    <script type="text/jscript" src="jquery-3.4.1.js"></script>
    <script type="text/jscript">
        $(document).ready(function(){
            $("#mybtn").click(function(){
                window.location.reload();//刷新页面 
            }); 
            $("#mybtn1").click(function(){
                $("#news a[class]").css("background","#ccc")    
            });
            $("#mybtn2").click(function(){
                $("#news a[class='hot']").css("background","#ccc")  
            });
            $("#mybtn3").click(function(){
                $("#news a[class!='hot']").css("background","#ccc") 
            });
            $("#mybtn4").click(function(){
                $("#news a[href^='www']").css("background","#ccc")  
            });
            $("#mybtn5").click(function(){
                $("#news a[href$='html']").css("background","#ccc") 
            });
            $("#mybtn6").click(function(){
                $("#news a[href*='news']").css("background","#ccc") 
            });
        });
    </script>
</head>
<body>
<div id="news">
    <header>京东快报<a href="#" class="more">更多 > </a></header>
    <ul>
        <li><a href="sale.jd.com/act/h7mf8.html" class="hot"><span>[618]</span>志玲姐姐：墨镜300减30</a></li>
        <li><a href="www.jd.com/news.aspx?id=29257"><span>[公告]</span>京东无锡馆正式启动</a></li>
        <li><a href="sale.jd.com/act/k2ad45v.html"><span>[特惠]</span>99元抢平板！品牌配件199-100</a></li>
        <li><a href="www.jd.com/news.aspx?id=29252"><span>[公告]</span>节能领跑京东先行</a></li>
        <li><a href="sale.jd.com/act/ugk2937w.html" class="last"><span>[特惠]</span>高洁丝实力撩货，领券五折</a></li>
    </ul>

</div>
<br>
<div style="text-align:center">
        <input type="button" id="mybtn1" value="是否包含某属性"></input>
        <input type="button" id="mybtn2" value="属性的值"></input>
        <input type="button" id="mybtn3" value="属性的值不等于"></input>
        <br>
        <input type="button" id="mybtn4" value="属性的值以指定值开头"></input>
        <input type="button" id="mybtn5" value="属性值以指定值结尾"></input>
        <input type="button" id="mybtn6" value="属性值包含指定值"></input>
        <br>
        <input type="button" id="mybtn" value="刷新"></input>
</div>
</body>

根据值设置select下拉框的默认值

attr

attr():设置或返回被选元素的属性值。

例： image.png
代码： 
<title>任务5：根据值设置select下拉框的默认值</title>
<script type="text/jscript" src="jquery-3.4.1.js"></script>
<script type="text/jscript">
    $(document).ready(function(){
        $("#btn1").click(function(){
            $("#myselect option[value='上海市']").attr("selected","selected")  
        });
        $("#btn2").click(function(){
            $("#myselect option[value='重庆市']").attr("selected","selected")  
        });
    });
</script>
</head>

<body>
<div style="text-align:center">
  请选择参选城市：
  <select id="myselect">
    <option value="天津市" selected="selected">天津市</option>
    <option value="上海市">上海市</option>  
    <option value="北京市">北京市</option>
    <option value="重庆市">重庆市</option>
  </select>
</div>
<div style="text-align:center">
   <input type="button" id="btn1" value="上海" />
   <input type="button" id="btn2" value="重庆" />
</div>
</body>

相关文章

网友评论

      本文标题：jQuery选择器&根据值设置select下拉框的默认值

      本文链接：https://www.haomeiwen.com/subject/ioqcuctx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|jQuery选择器&根据值设置select下拉框的默认值|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！