jquery使用的代码案例

最新推荐文章于 2023-03-23 13:15:35 发布

全栈开发crud师

最新推荐文章于 2023-03-23 13:15:35 发布

阅读量455

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/Sunraiseprice/article/details/120932940

版权

前端专栏收录该内容

48 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery的使用</title>
		<script src="js/jquery-1.12.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			table {
				margin-top: 15px;
				width: 500px;
				border: solid 1px black;
				border-collapse: collapse;
			}

			table .xh {
				width: 52px;

			}

			table .content {
				width: 300px;
			}
		</style>
	</head>
	<body>
		<input type="text" name="请输入你要访问的网址" id="wz" value="" />
		<button class="dj" type="button">点击</button>
		<p>如果你点我我就会消失，你再也找不到我了</p>
		<button type="button" id="cx">我不同意我要找到你</button>

		<div id="xiaohua">
			<table border="" cellspacing="" cellpadding="" id="biaoge">
				<tr>
					<th class="xh">序号</th>
					<th>内容</th>
					<th>更新时间</th>
				</tr>
				<!-- <tr>
					<td id="xh"></td>
					<td class="content" id="content"></td>
					<td id="gxsj"></td>
				</tr> -->
			</table>
		</div>

	</body>
	<script type="text/javascript">
		$('.dj').click(function() {
			// 获取网址通过id获取
			var wzurl = $('#wz').val();
			// console.log(wzurl);
			// console.log('nihao');
			// console.log(window.location.href);
			if (wzurl == 'haha') {
				console.log('haha');
				window.location.href = 'https://image.baidu.com/search/index?tn=baiduimage&ct=201326592&lm=-1&cl=2&ie=gb18030&word=%C3%C0%C5%AE&fr=ala&ala=1&alatpl=normal&pos=0&dyTabStr=MCwzLDIsMSw0LDUsOCw3LDYsOQ%3D%3D';
			} else {
				window.location.href = 'https://' + wzurl;
			}

		})
		$('p').click(function() {
			$(this).hide();
		})
		$("#cx").click(function() {
			console.log('你为什么还不出现');
			$('p').show();
		})
		var apiKey = 'BrX5C6q3261b57e8041aeb0f77bb0ee29023377e8620309'
		$(document).ready(function() {
			//文档就绪事件 
			$.ajax({
				// url:"http://api.apishop.net/common/joke/getJokesByRandom",
				url: "xiaohua.json",
				type: "get",
				data: {
					'apiKey': apiKey,
					'pageSize': '20'
				},
				dataType: "json",
				success: function(res) {
					var temp = '';
					console.log(res.result);
					var list = res.result;
					for (var $i = 0; $i < list.length; $i++) {
						temp +=
							'<tr>' +
							'<td>' + list[$i].id + '</td>' +
							'<td>' + list[$i].content + '</td>' +
							'<td>' + list[$i].updateTime + '</td>' +
							'</tr>';
					}
					console.log(temp);
					$('#biaoge').append(temp);
					// alert("操作成功")
					// $('#biaoge').append(
					// 	'<tr>' + '你好世界' + '</tr>'
					// )
					// $('#xh').html(res.result[0].id);
					// $('#content').html(res.result[0].content);
					// $('#gxsj').html(res.result[0].updateTime);
					// for(i=0;i<res.result.length;i++){
					// 	$('#xh').html(res.result[i].id);
					// 	$('#content').html(res.result[i].content);
					// 	$('#gxsj').html(res.result[i].updateTime);
					// }

				},
				error: function(res) {
					alert("操作失败")
				}
			});
		});
	</script>
</html>

全栈开发crud师

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
jquery使用的代码案例

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>jquery的使用</title> <script src="js/jquery-1.12.1.min.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> t
复制链接

扫一扫