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>运行实例 »
点击 "运行实例" 按钮查看在线实例
