JQuery零碎知识点归纳2

最新推荐文章于 2019-10-24 13:39:08 发布

秋恨雪

最新推荐文章于 2019-10-24 13:39:08 发布

阅读量691

点赞数

分类专栏： JS & JQuery 文章标签： JS Jquery 常用操作 HTML5 DOM

本文链接：https://blog.csdn.net/sinat_27706697/article/details/50081489

版权

JS & JQuery 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本人录制技术视频地址：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">
		$(function () { 
			$(':checkbox').click(function () {
				var array = Array(); //定义数组
				//这里的key是数组中序号,value是DOM对象!!!
				$(':checkbox:checked').each(function (key, value) { 
					//将满足条件的checkbox的值放入数组中
					array[key] = $(value).val(); 
				});
				$('#div1').text('');
				$('#div1').text('您选中的项是:' + array + ' 总共选中了 ' + array.length + '项');
			});
        });
	</script>
</head> 
<body>
    <input type="checkbox" name="hobby" value="足球" />足球 
    <input type="checkbox" name="hobby" value="篮球" />篮球 
    <input type="checkbox" name="hobby" value="羽毛球" />羽毛球 
    <input type="checkbox" name="hobby" value="乒乓球" />乒乓球 
    <input type="checkbox" name="hobby" value="排球" />排球<br /> 
    <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">
		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 () { 
			$('#comment').click(function () {
				var nickName = $('#nickName').val();
				var content = $('#content').val();
				var tr = $('<tr></tr>');
				var td1 = $('<td>' + nickName + '</td>'); var td2 = $('<td>' + content + '</td>');
				tr.append(td1); tr.append(td2); $('#table1').append(tr); $('#nickName').val(''); $('#content').val('');
			}); 
		});
	</script>
</head> 
<body>
	<table border="1" id="table1" width="400px"></table>
	昵称:<input type="text" id="nickName" value="" /><br/> 
	评论内容:<textarea id="content" cols="30" rows="5"></textarea> 
	<input type="button" id="comment" 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 () { 
			$('#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>

秋恨雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery零碎知识点归纳2

本人录制技术视频地址：https://edu.csdn.net/lecturer/1899 欢迎观看。一、评分控件效果图:代码:&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;&lt;/title&gt;&lt;sc
复制链接

扫一扫