鸩羽千夜

exercise.md

goer ... 2022-01-05 Jquery
  • Jquery
 大约 2 分钟
练习

[toc]

# js和jq练习

# 1. 选项卡

使用jq完成xuanxiangka.html的选项卡效果

<style type="text/css">
    *{padding:0;margin:0;}
    ul,li{list-style:none;}
    .list{height:30px;width:400px;border:1px solid #000;}
    .list li{float:left;width:100px;height:30px;line-height:30px;text-align:center;cursor:pointer;}
    .active{background-color:blue;color:#fff;}
    .content{height:350px;width:400px;border:1px solid #000;}
    .content .show{display:block;}
    .content ul{display:none;}
</style>

<ul class="list" id="list">
    <li class="active">新闻</li>
    <li>体育</li>
    <li>产品</li>
    <li>广告</li>
</ul>
<div class="content" id="content">
    <ul class="show">
        <li>新闻列表1</li>
        <li>新闻列表2</li>
        <li>新闻列表3</li>
        <li>新闻列表4</li>
    </ul>
    <ul>
        <li>体育列表1</li>
        <li>体育列表2</li>
        <li>体育列表3</li>
        <li>体育列表4</li>
    </ul>
    <ul>
        <li>产品列表1</li>
        <li>产品列表2</li>
        <li>产品列表3</li>
        <li>产品列表4</li>
    </ul>
    <ul>
        <li>广告列表1</li>
        <li>广告列表2</li>
        <li>广告列表3</li>
        <li>广告列表4</li>
    </ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
//<script src="jq库"></script>

$('#list li').click(function(){
  	var i=$(this).index();   //index()方法获取当前索引
	$(this).addClass('active').siblings().removeClass('active');
$('#content ul').eq(i).addClass('show').siblings().removeClass('show');
  })
1
2
3
4
5
6
7

# 2. 隔行换色

用jq来做

// ul下包含多个li
function showColor(){
    $('ul li:even').css('background-color','blue'); //偶数行
    $('ul li:odd').css('background-color','skyblue');//奇
}

$('ul li').mouseover(function(){
    $(this).css('background-color','white').sibings().css('background-color','green');
})
$('ul li').mouseout(function(){
  showColor();  
})
$('ul li').hover(funtion(){},function(){});
1
2
3
4
5
6
7
8
9
10
11
12
13

# 3. 计算器

使用js和JQ分别完成计算器的效果: 如果除数是0就使用红色字体输出'除数不能为0' 其他情况就使用#666颜色字体输出

<input type="number" value="" id="num1" />
<select name="" id="symbol">
    <option value="0" >加</option>
    <option value="1" >减</option>
    <option value="2" >乘</option>
    <option value="3" >除</option>
</select>
<input type="number" value="" id="num2" />
<input type="button" value="计算" id="count" />
<input type="button" value="jq计算" id="count1" />
结果为： <span id="res"></span>
1
2
3
4
5
6
7
8
9
10
11
12
// js
count.click(function(){
    // 拿到num的value值，判断如果为空就赋值0
    var num11 = num1.value = ''?num1.value:0;
    var num22 = num2.value = ''? num2.value:0;
    var result = eval(num11 + symbol.value +num22);
    if(result == 'Infinity'){
        res.innerHTML = '除数不能为0';
        res.style.color = 'red';
    }else{
        res.innerHTML = result;
        res.style.color = '#666';
    }
})

// jq

$('#count1').click(function(){
    var num11 = $('#num1').val() = ''?$('#num1').val():0;
    var num22 = $('#num2').val() = ''? $('#num2').val():0;
    var result = eval(num11 +$('#ssymbol').val()+num22);
    if(result == 'Infinity'){
        $('#res').innerHTML = '除数不能为0';
     	$('#res').style.color = 'red';
    }else{
     	$('#res').innerHTML = result;
     	$('#res').style.color = '#666';
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

vue