jq实操知识一
程序员文章站
2022-04-10 23:41:33
...
一、基础操作例子
1.jq点击事件
1.jq点击获取元素$("#idname" / ".classname" / "标签名")
serialize()收集选中元素数据
text()替换元素文字内容
console.log(form)在控制台console查看获取到的数据
2.jq点击添加属性
attr("class","hcolor")添加名为hcolor的css类
3.jq点击隐藏
hide()隐藏元素
代码：
该页面为test1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test1</title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
.hcolor{
color:red;
}
</style>
</head>
<body>
<h1 id="h1">我是h1</h1>
<form id="form">
<input type="text" id="user" value="123" name="username"/>
<input type="text" id="pass" value="123456" name="password"/>
<button id="btn1" type="button">获取数据</button>
<button id="btn2" type="button">添加属性</button>
<button id="btn3" type="button">隐藏元素</button>
</form>
</body>
</html>
<script type="text/javascript">
$(function(){
$('#btn1').click(function(){
var form = $('form').serialize();
console.log(form);
$("h1").text(form);
});
$('#btn2').click(function(){
$("h1").attr("class","hcolor");
});
$('#btn3').click(function(){
$("h1").hide();
});
})
</script>
图示：
二、两个页面传值
在test1页面增加
<button id="btn4" type="button">页面跳转传值</button>
$('#btn4').click(function(){
window.location.href="test2.html?id=1&name=1&idd=1&namee=1"
});
以下为test2.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h1>我是h1</h1>
<h2>我是h2</h2>
<h3>我是h3</h3>
<button type="button">点我</button>
<p>h1变为原始test1传过来的值</p>
<p>h2变为经过处理的值</p>
<p>h3变为我取第三个值代替原来只值</p>
</form>
<script type="text/javascript">
$(function(){
$('button').click(function(){
// 定义a存传过来的东西
var a = location.search;
console.log(a);
// 定义c存经过函数change处理的数据
var c = change(a);
console.log(c);
// 定义一个变量t，存经过处理的数据，并循环输出值
var t=""
for(var i in c){
t+=c[i]+",";
}
$("h1").text(a);
$("h2").html(t)
$("h3").html(t[2]);
});
});
function change(url){
var Request = new Object();
if(url.indexOf("?") != -1) {
var str = url.substr(1)
strs = str.split("&");
for(var i = 0; i < strs.length; i++){
Request[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return Request;
}
</script>
</body>
</html>
图示
这里是跳转成功的页面
点击后
三、前后端交互取值之本地取值
直接代码有注释，这是test3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<button id="btn1" type="button">点我</button>
<p>我是工具人</p>
</body>
</html>
<script type="text/javascript">
$(function(){
$("button").click(function(){
$.ajax({
// 这里post可以提交可以拿值，get不好，会暴露数据
method:"post",
dataType:"json",
// 取这个php中的数据
url:"index.php",
//success取数据，存在ret，一步步打印有助于看清楚每个变量里面是什么
//成功取出来之后可以进行一些操作，例如test1中的
success: function(ret){
// 打印整个数组（嵌套一层）
console.log(ret);
// 打印第一个数组中a的值
console.log(ret[0].a);
// 定义一个空变量
var t="";
// 循环
for(var i in ret){
t+=ret[i].a+",";
}
// 输出，给工具人
$("p").html(t);
}
});
});
})
</script>
php页面代码，这是index.php
<?php
$a = [
['a'=>'123'],['a'=>'12156'],['a'=>'561'],['a'=>'12s'],['a'=>'12d'],['a'=>'12f'],['a'=>'1f2']
];
echo json_encode($a);
图示
四、前后端交互取值之动态取值
下面是test4.html，直接看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test4</title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<table id="table" border="1">
<tr>
<th>状态</th>
<th>账号</th>
</tr>
</table>
<button id="btn1" type="button">点我</button>
<p>我是工具人</p>
</body>
</html>
<script type="text/javascript">
$(function(){
$("button").click(function(){
$.ajax({
// 这里post可以提交可以拿值，get不好，会暴露数据
method:"post",
dataType:"json",
// 取这个php中的数据
url:"http://demo1.qianniucaixin.net/x-admin/api/aliyun/vod_list.php",
//success取数据，存在ret，一步步打印有助于看清楚每个变量里面是什么
//成功取出来之后可以进行一些操作，例如test1中的
success: function(ret){
//取出来数据并打印 ，这里帮助我们清楚查看到取得那些数据
console.log(ret);
console.log(ret.VideoList);
console.log(ret.VideoList.Video);
console.log(ret.VideoList.Video[0].Status);
//需求是取出Status和VideoId
// 定义一个变量，方便下面写，不然要写很多
var result=ret.VideoList.Video;
//定义一个变量，存取出来的东西
var c="";
// 这是表头，动态取了很多组数，我们给他放在一个表格里
var title="<tr><th>状态</th><th>账号</th></tr>"
// 循环取值，注意这里用到上面的result啦
for(var i in result){
//下面这种展示出来不美观，后面放图了。然后我们用三元运算符美化一下
// var a='<tr><td>'+ result[i].Status +'</td><td>'+ result[i].VideoId + '</td></tr>';
// 如果status等于normal就显示正常，不然就显示不正常
var a='<tr><td>'+ (result[i].Status=='Normal'?'正常':'不正常') +'</td><td>'+ result[i].VideoId + '</td></tr>';
c+=a;//不难理解，每取出一个我们就加上，c才能越变越多
}
// 最后的结果要带上表头哦
c=title+c;
// 把数据放在table里
$("table").html(c);
}
});
});
})
</script>
图示
五、美化
上面的界面太丑了，我们需要一些ui框架来美化一下，layui可以实现
前提是你已经把喜欢的样式文件放在到自己的项目文件中，在该页面引入，table加上对应样式类名，就可以实现了。
<html>
<head>
<meta charset="utf-8">
<title>test4</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="./css/font.css">
<link rel="stylesheet" href="./css/xadmin.css">
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="./lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
</head>
<body>
<table id="table" border="1" class="layui-table">
<tr>
<th>状态</th>
<th>账号</th>
</tr>
</table>
<button id="btn1" type="button">点我</button>
<p>我是工具人</p>
</body>
</html>
图示
六、前后端交互之前端传值给后端，并返回数据
不知道后端怎么写的判断和，我调的后端小哥写好的接口
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test6</title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style type="text/css">
.hcolor{
color:red;
}
</style>
</head>
<body>
<h1 id="h1">我是h1</h1>
<form id="form">
<input type="text" id="user" value="123" name="username"/>
<input type="text" id="pass" value="123456" name="password"/>
</form>
<button id="btn1" type="button">提交</button>
</body>
</html>
<script type="text/javascript">
$(function(){
$('#btn1').click(function(){
// 收集form表单内容
var form = $('form').serialize();
// 利用ajax传给后端，后端判断username和password
$.ajax({
method:"post",
data:form,
dataType:"json",
url:"http://demo1.qianniucaixin.net/index.php",
//传过去后成功后回调一些操作
success: function(ret){
// 后端判断可以，返回给前端成功登陆放在h1
$("h1").text(ret);
// h1变颜色
$("h1").attr("class","hcolor");
// form表单隐藏
$("form").hide();
}
});
});
})
</script>
图示
七、环境
1.下载phpstudy，安装好，第一个和第四个至少开一个。
2.点击网站，创建网站，编写一个自己的域名，物理路径是我安装软件的路径，其他不用管
3.点击管理，查看根目录，我们写的文件都放在这里面哦，如果引入了新的css和js也要拖进来
4.随便什么编辑器，把项目拖进去，运行时在浏览器打开
http://liumeijiao/test6.html就可以看到结果了。
5.最最常见的错误
识别不了$，去看看zaihead中引入了jq没，不行换一个
报Uncaught SyntaxError: Unexpected token ‘.’ ，那就是大、小括号对不上，一个个去查
取不到值，那就是ret（）括号里面的东西没写对，console.log()一步步打印，看看对象取错了没
两个页面传值哪里有一个含参数函数调用，自己不太熟，多注意看看