js和jQuery以及ajax的小练习
今天学习了通过鼠标的点击事件然后让边框变颜色,还有怎么设置一个点击浏览器的输入框然后显示一个边框,还学习了通过ajak来获取post和get的值,通过它如何调用这个函数。
第一部分:
通过鼠标的点击让我们的边框变颜色,通过手在input标签里面敲击键盘让浏览器的consloe显示他的元素,html部分代码就不写主要写js部分因为是主要部分,
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function () {
$("#input").focus(function () {
$("#input_out").css("borderColor", "#19b955"); //修改边框的颜色
});
$("#input").blur(function () {
$("#input_out").css("borderColor", "#bbb");
});
$("#input").focus()
function suggest_so(res) {
console.log(res)
} $("#input").keyup(function () {
var searchCon = $("#input").val();
});
</script>
第二部分:
第二部分主要是学习通过keyup的监听事件,当你敲击键盘的时候在浏览器里面的console会显示你在浏览器里面所输出的数组以及在浏览器的页面显示一个列表出来,这一部分的代码是靠前面的。
function cbFun(data) {
var result = data.s; // json js数组操作
$("#searchResult").empty()
for (var i = 0; i < result.length;i++) {
$("#searchResult").append("<li>"+result[i]+"</li>")
}
if(result.length == 0){
$(".drop").hide()
} else {
$(".drop").show()
}
}
整体的代码
<script>
function cbFun(data) {
// console.log(data);
// console.log(data.g);
// console.log(data.g[0]);
// console.log(data.g[0].q);
var result = data.s; // json js数组操作
$("#searchResult").empty()
for (var i = 0; i < result.length;i++) {
$("#searchResult").append("<li>"+result[i]+"</li>")
}
if(result.length == 0){
$(".drop").hide()
} else {
$(".drop").show()
}
}
$(document).ready(function () {
$("#input").focus(function () {
$("#input_out").css("borderColor", "#19b955"); //修改边框的颜色
});
$("#input").blur(function () {
$("#input_out").css("borderColor", "#bbb");
});
$("#input").focus()
function suggest_so(res) {
console.log(res)
} $("#input").keyup(function () {
var searchCon = $("#input").val(); // 不要看
var scriptElement = document.createElement('script');
scriptElement.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?json=1&cb=cbFun&wd=' + searchCon;
document.body.appendChild(scriptElement);
})
});
</script>
第三部分:
这部分主要是学习,get和post的区别,以及使用ajax是如何实现get和post一些敏感数据显示在网页上。
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script> // GET
$.ajax({
type:"get",
url:"http://localhost:3000/aaa?id=123&password=456"
}).then(function(res){
console.log(res)
console.log(res.user)
$("#getAccount").text(res.user)
$("#getAccount_1").text(res.password)
console.log(res.password)
// 网络正常 200 400左右的问题 500以上的问题都是服务器后台的
},function(res){ // 网络正常
}) // POST
$.ajax({
type:"post",
url:"http://localhost:3000/bbb",
data:{
"id":"123123121",
"password":"123232323232" } }).then(function(res){
console.log(res)
console.log(res.user)
console.log(res.password)
$("#getAccount_2").text(res.user)
$("#getAccount_3").text(res.password) // 网络正常 200 400左右的问题 500以上的问题都是服务器后台的
},function(res){
// 网络正常
})
js和jQuery以及ajax的小练习的更多相关文章
- [转]网页实时聊天之js和jQuery实现ajax长轮询 PHP
网页实时聊天之js和jQuery实现ajax长轮询 众所周知,HTTP协议是无状态的,所以一次的请求都是一个单独的事件,和前后都没有联系.所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的 ...
- 网页实时聊天之js和jQuery实现ajax长轮询
众所周知,HTTP协议是无状态的,所以一次的请求都是一个单独的事件,和前后都没有联系.所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的长时间联系,从而源源不段地获取信息. 一直以来的方式 ...
- 原生js,jquery通过ajax获得后台json数据动态新增页面元素
一.原生js通过ajax获取json数据 因为IE浏览器对ajax对象的创建和其他浏览器不同,为了兼容全部浏览器,我用下面的代码: function createXMLHttpRequest(){ t ...
- js、jQuery、ajax面试题
1.javascript的typeof返回哪些数据类型. 答案:string,boolean,number,undefined,function,object 2.例举3种强制类型转换和2种隐式类型转 ...
- Js和Jquery实现ajax长轮询
众所周知,HTTP协议是无状态的,所以一次的请求都是一个单独的事件,和前后都没有联系.所以我们在解决网页实时聊天时就遇到一个问题,如何保证与服务器的长时间联系,从而源源不段地获取信息. 一直以来的方式 ...
- 关于JS、JQuery、CSS的小知识点
1.将字符串转换成json列表格式如下: var getaddress = appcan.libuser.getAddress(); var address=JSON.parse(getaddress ...
- 原生js仿jquery一些常用方法
原生js仿jquery一些常用方法 下面小编就为大家带来一篇原生js仿jquery一些常用方法(必看篇).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 最近迷上了原 ...
- javascript、jquery、AJAX总结 标签: javascriptjqueryajax 2016-01-23 10:25 2415人阅读
其实在学习之前,就已经用上了js,jquery和ajax,不过当时不清楚这些的区别,就全都当成js来看,然后别人一说jquery,ajax都觉得好像很高级,等到自己学习的时候,倒是对这些更清楚了一点, ...
- JS原生ajax与Jquery插件ajax深入学习
序言: 近来随着项目的上线实施,稍微有点空闲,闲暇之时偶然发现之前写的关于javascript原生xmlHttpRequest ajax方法以及后来jquery插件ajax方法,于是就行了一些总结,因 ...
随机推荐
- frp 配置多个 web 项目,无需购买域名 (访问内网可视化界面,jupyter noterbook, visdom, tensorboard)
frp 配置多个 web 项目,无需购买域名 简单配置,参考 前言: 网上也有很多教程包括官方文档,都需要购买域名,并且把 frpc.ini 中 [web]节配置的 custom_domains 的 ...
- 2019-4-12-WPF-类型的构造函数执行符合指定的绑定约束的调用时引发了异常
title author date CreateTime categories WPF 类型的构造函数执行符合指定的绑定约束的调用时引发了异常 lindexi 2019-04-12 08:52:35 ...
- xpdf -Portable Document Format(PDF)文件阅读器
总览 xpdf [选项] [PDF文件 [page]] 描述 Xpdf是一个 Portable Document Format(PDF) 文件阅读软件.(PDF文件也经常被称为Acrobat 文件,这 ...
- 74HC595点亮8个LED灯
一.原理介绍 595有两个寄存器,都是8位的,如下所示: 595是串入并出带有锁存功能移位寄存器,它的使用方法简单: - - 在正常使用时 /SCLR接高电平,/G接低电平. - - 从SER每输 ...
- DEV插件下的控件Grid和Gridlookupedit控件的结合使用
创建GridlookupEtid控件 设置其对应属性: 设置属性 this.gridLookUpEdit1.Properties.TextEditStyle = DevExpress.XtraEdit ...
- 论文学习——《Good View Hunting: Learning Photo Composition from Dense View Pairs》
论文链接:http://www.zijunwei.org/papers/cvpr18-photo-composition.pdf 代码及数据集链接:https://www3.cs.stonybrook ...
- python 进程与线程 精要
程序与进程 程序并不能单独运行,只有将程序装载到内存中,系统为它分配资源才能运行,而这种执行的程序就称之为进程. 程序和进程的区别就在于:程序是指令的集合,它是进程运行的静态描述文本:进程是程序的一次 ...
- jq-demo-阻止冒泡,阻止默认行为
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 整理delphi及整理原则
回看delphi使用的人也不多,但一直觉得这门语言挺好的,所以一直在用,在很多方面也给了很多帮助和启示 加上delphi的学习文件也确实比较少,故收集起来也不容易.今日,重新整理一下delphi ,一 ...
- 图片转换为base64
明天中秋了,先祝大家中秋快乐!哈哈,最近见有人在群里问怎么把图片转换成base64格式,之前刚好写过就把代码贴出来. 主要用到canvas中的toDataURL方法 <!DOCTYPE html ...