Blogger Information
Blog 19
fans 3
comment 0
visits 13101
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
4月3号 作业提交
蓝色天空
Original
720 people have browsed it

4月3号 作业提交 jquery 常用过滤器方法等

 

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style type="text/css">
	.gds {
    margin-bottom: 5px;
        overflow: hidden;

}
.ti {
    width: 100px;
    margin-right: 25px;
}
.ti, .gd, .gd div, .to, .gds li {

	  margin: 2px 0;
	      float: left;
    padding: 5px 15px;
    border-radius: 25px;

}

ul {
    list-style: none;
        margin: 0;
    padding: 0;
    font-size: 12px;
}
* {
    margin: 0;
    padding: 0;
}

.ti, .to {
    font-size: 16px;
    color: #000;
    text-align: center;
    line-height: 36px;
box-shadow: 0 3px 5px #bbb inset;
    background: #e7e7e7;
    
    margin-top: 7px;

    
}


.gd div, .dxjoq{
    
    width: 33px;
    height: 33px;
    border-radius: 33px;
    background: #fff;
    border: 1px #ccc solid;
    box-shadow: 1px 1px 2px #ccc;
    font-size: 22px;
    line-height: 33px;
    text-align: center;
    color: #8f8f8f;
    font-weight: 400;
    margin: 0 5px;
    cursor: pointer;
    
}
.gd div:hover, .dxjoq:hover{border: 1px #e84f31 solid}
.gd:hover, .to:hover {
	background-color:#FFD9EC;
	box-shadow: 0 3px 5px #d4bead inset}

table {
	border-bottom: 1px #cecece dashed;
	margin:auto;
	padding: 0;
	width: 920px;
}
.bg-green {background-color: lightgreen;}
.bg-pink {background-color:pink;}
 
</style>
</head>
<body><h2><img src='http://www.w3school.com.cn/i/eg_tulip.jpg' alt="上海花"></h2><span></span>
 <div class="tbn_c_s">
            <div class="lt_selector">
              <div class="gds">
                <div class="ti">万位</div>
                <div class="gd">
                  <div id="wei_1_0" name="lt_place_0">0</div>
                  <div id="wei_1_1" name="lt_place_0">1</div>
                  <div id="wei_1_2" name="lt_place_0">2</div>
                  <div id="wei_1_3" name="lt_place_0">3</div>
                  <div id="wei_1_4" name="lt_place_0">4</div>
                  <div id="wei_1_5" name="lt_place_0">5</div>
                  <div id="wei_1_6" name="lt_place_0">6</div>
                  <div id="wei_1_7" name="lt_place_0">7</div>
                  <div id="wei_1_8" name="lt_place_0">8</div>
                  <div id="wei_1_9" name="lt_place_0">9</div>
                </div>
                <div class="to">
                  <ul>
                    <li class="l"></li>
                    <li class="dxjoq" name="all">全</li>
                    <li class="dxjoq" name="big">大</li>
                    <li class="dxjoq" name="small">小</li>
                    <li class="dxjoq" name="odd">奇</li>
                    <li class="dxjoq" name="even">偶</li>
                    <li class="dxjoq" name="clean">清</li>
                    <li class="r"></li>
                  </ul>
                </div>
              </div>
              <div class="gds">
                <div class="ti">千位</div>
                <div class="gd">
                  <div id="wei_2_0" name="lt_place_1">0</div>
                  <div id="wei_2_1" name="lt_place_1">1</div>
                  <div id="wei_2_2" name="lt_place_1">2</div>
                  <div id="wei_2_3" name="lt_place_1">3</div>
                  <div id="wei_2_4" name="lt_place_1">4</div>
                  <div id="wei_2_5" name="lt_place_1">5</div>
                  <div id="wei_2_6" name="lt_place_1">6</div>
                  <div id="wei_2_7" name="lt_place_1">7</div>
                  <div id="wei_2_8" name="lt_place_1">8</div>
                  <div id="wei_2_9" name="lt_place_1">9</div>
                </div>
                <div class="to">
                  <ul>
                    <li class="l"></li>
                    <li class="dxjoq" name="all">全</li>
                    <li class="dxjoq" name="big">大</li>
                    <li class="dxjoq" name="small">小</li>
                    <li class="dxjoq" name="odd">奇</li>
                    <li class="dxjoq" name="even">偶</li>
                    <li class="dxjoq" name="clean">清</li>
                    <li class="r"></li>
                  </ul>
                </div>
              </div>
              <div class="gds">
                <div class="ti">百位</div>
                <div class="gd">
                  <div id="wei_3_0" name="lt_place_2">0</div>
                  <div id="wei_3_1" name="lt_place_2">1</div>
                  <div id="wei_3_2" name="lt_place_2">2</div>
                  <div id="wei_3_3" name="lt_place_2">3</div>
                  <div id="wei_3_4" name="lt_place_2">4</div>
                  <div id="wei_3_5" name="lt_place_2">5</div>
                  <div id="wei_3_6" name="lt_place_2">6</div>
                  <div id="wei_3_7" name="lt_place_2">7</div>
                  <div id="wei_3_8" name="lt_place_2">8</div>
                  <div id="wei_3_9" name="lt_place_2">9</div>
                </div>
                <div class="to">
                  <ul>
                    <li class="l"></li>
                    <li class="dxjoq" name="all">全</li>
                    <li class="dxjoq" name="big">大</li>
                    <li class="dxjoq" name="small">小</li>
                    <li class="dxjoq" name="odd">奇</li>
                    <li class="dxjoq" name="even">偶</li>
                    <li class="dxjoq" name="clean">清</li>
                    <li class="r"></li>
                  </ul>
                </div>
              </div>
              <div class="gds">
                <div class="ti">十位</div>
                <div class="gd">
                  <div id="wei_4_0" name="lt_place_3">0</div>
                  <div id="wei_4_1" name="lt_place_3">1</div>
                  <div id="wei_4_2" name="lt_place_3">2</div>
                  <div id="wei_4_3" name="lt_place_3">3</div>
                  <div id="wei_4_4" name="lt_place_3">4</div>
                  <div id="wei_4_5" name="lt_place_3">5</div>
                  <div id="wei_4_6" name="lt_place_3">6</div>
                  <div id="wei_4_7" name="lt_place_3">7</div>
                  <div id="wei_4_8" name="lt_place_3">8</div>
                  <div id="wei_4_9" name="lt_place_3">9</div>
                </div>
                <div class="to">
                  <ul>
                    <li class="l"></li>
                    <li class="dxjoq" name="all">全</li>
                    <li class="dxjoq" name="big">大</li>
                    <li class="dxjoq" name="small">小</li>
                    <li class="dxjoq" name="odd">奇</li>
                    <li class="dxjoq" name="even">偶</li>
                    <li class="dxjoq" name="clean">清</li>
                    <li class="r"></li>
                  </ul>
                </div>
              </div>
              <div class="gds">
                <div class="ti">个位</div>
                <div class="gd">
                  <div id="wei_5_0" name="lt_place_4">0</div>
                  <div id="wei_5_1" name="lt_place_4">1</div>
                  <div id="wei_5_2" name="lt_place_4">2</div>
                  <div id="wei_5_3" name="lt_place_4">3</div>
                  <div id="wei_5_4" name="lt_place_4">4</div>
                  <div id="wei_5_5" name="lt_place_4">5</div>
                  <div id="wei_5_6" name="lt_place_4">6</div>
                  <div id="wei_5_7" name="lt_place_4">7</div>
                  <div id="wei_5_8" name="lt_place_4">8</div>
                  <div id="wei_5_9" name="lt_place_4">9</div>
                </div>
                <div class="to">
                  <ul>
                    <li class="l"></li>
                    <li class="dxjoq" name="all">全</li>
                    <li class="dxjoq" name="big">大</li>
                    <li class="dxjoq" name="small">小</li>
                    <li class="dxjoq" name="odd"><a>奇</a></li>
                    <li class="dxjoq" name="even">偶</li>
                    <li class="dxjoq" name="clean">清</li>
                    <li class="r"></li>
                  </ul>
                </div>
              </div>
              <div class="c"></div>
            </div>
          </div>
           
          <form action='' mothod='post'></form>
          <table>
<caption>已开盘,距离投注截止快结束了!
</caption>
          	<tr>
          	<td>金额:<input type="text" name="text"></td>
          	<td>倍数 <select><option>1</option><option>2</option></select></td>
          	<td>模式<input type="radio" name="ms" checked>元 <input type="radio" name="ms">角<input type="radio" name="ms">分</td>
          	<td><button type='submit' name='submit'>添加注单</button></td>
          	<td><button type='reset' name='reset'>取消注单</button></td>
          </tr>
<tr >
	<td colspan="3"><textarea cols=100 rows=5></textarea>
    <td colspan='2' align='right'><button type="submit">随机一注</button><br><button type="submit">随机五注</button></td>
</tr>
      </table>
      </form>
      <script type="text/javascript" src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
      <!-- <script type="text/javascript" src='js/jquery-3.3.1.js'></script> -->
<script type="text/javascript">
	$('button:submit').css('background-color','red')
	$('input').css('background-color', 'lightgreen')

	$("[name='big']").css('color','red')
	$('ul').find('a').css('color','green')
	$(':empty').text('彩票投注站')
	$('li:odd').css('background-color','lightgreen')
	$('.gd div:even').css('background-color','lightgreen')
   $('.ti:odd').css('background-color','#FFEC8B')
  $('span:parent').addClass('bg-green')
  $('h2:has(img)').addClass('bg-pink')
  $('caption:contains("快结束")').addClass('bg-pink')
  $('.ti').slice(2).css('color','red')
    
</script>


 </body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post