期 末 复 习 的 10 道 jQuery 小练习
1.使用jquery修改div元素的背景色(随意颜色)
<body>
<div>
</div>
<script>
/*
1.使用jquery修改div元素的背景色(随意颜色)
*
* */
$('div').css('background',"#d90000")
</script>
</body>
2. 使用jquery修改div的子元素p的内容为"我是子元素"
<body>
<div>
<p>我是文字</p>
</div>
<p>
我是文字
</p>
<script>
/*
使用jquery修改div的子元素p的内容为"我是子元素"
* */
$('div p').html('我是子元素')
</script>
</body>
3. 使用jquery修改第二个p元素的背景色为"orange"
<body>
<div>
<p>我是第一个p元素</p>
<p>我是第二个p元素</p>
<p>我是第三个p元素</p>
</div>
<script>
/*
使用jquery修改第二个p元素的背景色为"orange"
* */
$('p').eq(1).css('background','orange')
</script>
</body>
4. 使用jquery克隆方法.请克隆p元素并且修改"克隆的p元素"内容为"我是克隆体",并添加到"被克隆p元素"的后面
考察clone()和text()方法
<body>
<div>
<p>我是源元素</p>
</div>
<script>
/*
使用jquery克隆方法.请克隆p元素并且修改"克隆的p元素"内容为"我是克隆体",并添加到"被克隆p元素"的后面
考察clone()和text()方法
* */
var p = $('div p').clone().text('我是克隆体')
$('div').append(p)
</script>
</body>
5. 请使用jquery来自动选中页面中的多选框
考察prop()的用法
<body>
<p><input type="checkbox">多选框1</p>
<p><input type="checkbox">多选框2</p>
<p><input type="checkbox">多选框3</p>
<script>
/*
请使用jquery来自动选中页面中的多选框
考察prop()的用法
* */
$('input[type=checkbox]').prop('checked',true)
</script>
</body>
6. 删除列表元素中最后一个li元素
考察jquery中的remove()方法
<body>
<ul>
<li>元素01</li>
<li>元素02</li>
<li>元素03</li>
<li>元素04</li>
<li>元素05</li
</ul>
<script>
/*
删除列表元素中最后一个li元素
考察jquery中的remove()方法
* */
$('ul li:last').remove()
</script>
</body>
7. 点击当前的p标签,弹出相对应的元素下标
(点击第一个p元素,弹出0,点击第二个p元素,弹出1........)
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<script>
/*
点击当前的p标签,弹出相对应的元素下标
(点击第一个p元素,弹出0,点击第二个p元素,弹出1........)
*
* */
$('p').click(function(){
alert($(this).index())
})
</script>
</body>
8. 要求: 点击id为btn的按钮,
1.判断id为username的输入是否为空,如果为空,则弹出你输入的不能为空.
2.判断id为password的输入的个数是否小于6位,如果小于6位,则弹出你输入的长度不可以少于6位
<body>
<p>
<input type="text" id="username"/>
</p>
<p>
<input type="password" id="password"/>
</p>
<p>
<button id="btn" type="button">提交</button>
</p>
<script>
// 要求: 点击id为btn的按钮,
// 1.判断id为username的输入是否为空,如果为空,则弹出你输入的不能为空.
// 2.判断id为password的输入的个数是否小于6位,如果小于6位,则弹出你输入的长度不可以少于6位
$('#btn').click(function(){
if($('#username').val().length==0){
alert('输入不能为空')
}else if($('#password').val().length<6){
alert('长度不可以少于6位')
}
})
</script>
</body>
9. 要求:利用,jquery中的animate()方法.点击id为btn的按钮,实现类名为box的元素,向左移动500px
<style>
.box{
width:100px;
height:100px;
position:absolute;
top: 50px;
left: 10px;
border: 1px solid #666;
}
</style>
</head>
<body>
<div class="box"></div>
<button id="btn">按钮</button>
<script>
// 要求:利用,jquery中的animate()方法.点击id为btn的按钮,实现类名为box的元素,向左移动500px
$('#btn').click(function(){
$('.box').stop().animate({
"left":500+'px'
})
})
</script>
</body>
10. 要求:利用jquery中的选择器,至少写三种方法,让p元素的字体颜色变成红色
<body>
<p>我是一段文字</p>
<script>
/*
要求:利用jquery中的选择器,至少写三种方法,让p元素的字体颜色变成红色
* */
$('p').css('background','red');
$('p:first').css('background','red');
$('p:last').css('background','red');
</script>
</body>
(答案不唯一)