您的位置：首页 > Web前端 > JQuery

JQuery零碎知识点归纳2

2015-11-28 10:10 627 查看

本人录制技术视频地址：https://edu.csdn.net/lecturer/1899 欢迎观看。

一、评分控件
效果图:

代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript"> $(function () {
$('td').css('cursor', 'pointer').mouseover(function () {
//方法一:(思路:将自己及前面的设置为★,自己后面的设置为☆)
$(this).text('★').prevAll().text('★').end().nextAll().text('☆');
//方法二:(思路:先将所有的设置为★,再将自己后面的设置为☆)
// $('td').text('★');
// $(this).nextAll().text('☆');
});
});
</script>
</head>
<body>
<table border="0" >
<tr>
<td> ☆ </td>
<td> ☆ </td>
<td> ☆ </td>
<td> ☆ </td>
<td> ☆ </td>
</tr>
</table>
</body>
</html>
二、高亮显示
效果图：

代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#u li').mouseover(function () {
$(this).css('background', 'red').siblings().css('background', 'white'); });
});
</script>
</head>
<body>
<ul id="u">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
三、修改所有被点击的td的背景色
效果图：

代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("table tr").click(function () { //相对于选中的行,将所有的td的背景颜色设置为红色
$("td", $(this)).css("background", "red"); //直接将选中行的tr的背景色设置为红色 $(this).css("background", "red");
});
});
</script>
</head>
<body>
<table>
<tr><td>aa</td><td>aa</td><td>aa</td></tr>
<tr><td>aa</td><td>aa</td><td>aa</td></tr>
<tr><td>aa</td><td>aa</td><td>aa</td></tr>
</table>
</body>
</html>
四、网页开关灯效果
效果图：

代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.dark{ background-color:Black;}
</style>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#btn1').click(function () {
if ($(this).val() == '关灯') {
$(this).val('开灯'); $('body').addClass('dark');
}
else {
$(this).val('关灯');
$('body').removeClass('dark');
}
});
});
</script>
</head>
<body>
<input type="button" name="name" value="关灯" id="btn1"/>
</body>
</html>
五、checkbox选择项的处理
效果图：

代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var sites = { "cnbeta": "http://www.cnbeta.com", "qiushibaike": "http://www.qiushibaike.com", "cnblogs": "http://www.cnblogs.com" };
//对于json,在JQuery中就用$.each对其进行遍历
$(function () {
$('#create').click(function () {
$.each(sites, function (key, value) {
var tr = $('<tr></tr>');
var td = $('<td></td>');
td.html('<a href=' + value + '>' + key + '</a>'); tr.append(td);
td = $('<td></td>'); td.text(value); tr.append(td); $('#tab1').append(tr);
});
});
})
</script>
</head>
<body>
<table border="1" id="tab1"></table>
<input type="button" id="create" value="产生" />
</body>
</html>
七、动态产生指定个数的文本框
效果图：

代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#create').click(function () {
var num = parseInt($('#txt1').val());
$('#div1').text('');
for (var i = 0; i < num; i++) {
if (i % 3 == 0) {
$('#div1').append('<br/>');
}
var $txt = $('<input type="text" value="Thank You" style="text-align:center"/>');
$('#div1').append($txt);
}
});
});
</script>
</head>
<body>
<input type="text" name="name" value="" id="txt1" />
<input type="button" name="name" value="产生" id="create"/>
<div id="div1"></div>
</body>
</html>
八、无刷新评论
效果图：

代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#Calc').click(function () {
var num1 = $('#num1').val();
var num2 = $('#num2').val();
if (!isNaN(num1) && !isNaN(num2)) {
$('#result').val(Number(num1) + Number(num2)); }
else {
alert('您输入的数字有误!');
}
});
});
</script>
</head>
<body>
<input type="text" id="num1" value="" />+ <input type="text" id="num2" value="" />
<input type="button" id="Calc" value="=" />
<input type="text" id="result" value="" />
</body>
</html>
十、全选、全不选、反选
效果图：

代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#allOrNone').click(function () {
//点击“选择状态”,实现全选与全不选
$(':checkbox').prop('checked', $(this).prop('checked'));
});

//当改变了上面选择项的选中状态后,“选择状态”的状态也跟着改变
$(':checkbox[id!=allOrNone]').click(function () {
optionStateChanged();
});

//选项改变抽象的方法
function optionStateChanged() {
var state = true;
$(':checkbox[id!=allOrNone]').each(function () {
if (!$(this).prop('checked')) {
state = false;
return false;
//break; 不可以使用break;
}
});
//如果有一个没有被选中,则将“选择状态”的状态也设置为没有选中状态
$('#allOrNone').prop('checked', state);
}

//反选
$('#chooseReverse').click(function () {
//进行选项的反选工作
$(':checkbox[id!=allOrNone]').each(function () {
$(this).prop('checked', !$(this).prop('checked'));
});
//单独考虑选项改变的操作
optionStateChanged();
});
});
</script>
</head>
<body>
<input type="checkbox" value="1" />足球
<input type="checkbox" value="2" />足球
<input type="checkbox" value="3" />足球
<input type="checkbox" value="4" />足球
<input type="checkbox" value="5" />足球<br />
<input type="checkbox" name="name" value="" id="allOrNone"/>选择状态
<input type="button" name="name" value="反选" id="chooseReverse"/>
</body>
</html>
十一、注册倒计时
效果图：

代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var leftTime = 9;
var interval=setInterval(function () {
if (leftTime > 0) {
$('#btn').val('还剩' + leftTime + '秒'); leftTime--;
}
else {
$('#btn').val('同意'); $('#btn').attr('disabled', false); clearInterval(interval);
}
},
1000);
});
</script>
</head>
<body>
<input type="button" id="btn" value="还剩10秒" disabled="disabled"/>
</body>
</html>
十二、事件冒泡
效果图：

代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('table,tr,td,p').click(function (e) {
alert($(this).html());
e.stopPropagation();
//stopPropagation阻止了"事件冒泡",只显示Fuck,但不阻止其后面的内容的执行
alert('OK');
});
//阻止转向连接地址或者阻止表单的提交
$('a').click(function (e) {
alert('禁止转向');
//return false; //阻止了地址转向,但后面的代码也执行不了了
e.preventDefault();
alert('123');
});
});
</script>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<table>
<tr>
<td>
<p> Good </p>
</td>
</tr>
</table>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JS Jquery 常用操作 HTML5 DOM

相关文章推荐

新的分享

章节导航