成交型网站模板,广汉网站建设ghxhwl,网站备案 动态ip,机票网站建设公司好一、jQuery简介及使用详解
1.1 jQuery简介 写更少的代码#xff0c;做更多的事#xff1b;jQuery可以做#xff1a;HTML 元素选取 #xff0c; HTML 元素操作 #xff0c;CSS 操作 #xff0c;HTML 事件函数 #xff0c;JavaScript 特效和动画 #xff0c;HTML DOM 遍… 一、jQuery简介及使用详解
1.1 jQuery简介 写更少的代码做更多的事jQuery可以做HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改
1.2 jQuery的使用
jQuery就是一个封装了很多函数的js文件并不会与其他的js文件发生冲突。可以直接到jQuery的官网下载jQuery脚本文件然后放入本地服务器并在网页中通过script 标签进行引入
① 第一种引入方式直接路径引入
headscript srcjquery-3.7.1.min.js/script
/head注意
script标签的src属性中要根据jQuery文件所在的目录引入如果jQuery文件和当前的HTML文件放在同一个目录下即可直接写jQuery的文件名如果jQuery文件和HTML文件不在同一个目录下我们可以使用相对路径和绝对路径的方式引入jQuery。
在HTML5中script标签上可以不用添加 typetext/javascript 属性因为JavaScript是HTML5以及所有现代浏览器中的默认脚本语言。 jQuery官网地址 jQueryhttps://jquery.com/
打开官网即可看到jQuery的下载按钮点击进入下载页面。有两个版本的jQuery可以下载Production version - 用于实际的网站中是已经被精简和压缩过的jQuery文件。Development version - 用于测试和开发中是未压缩的jQuery文件可以方便阅读源码。 .min.js 这是压缩的版本。 .js就是JavaScript的外部脚本文件。 ② 第二种引入方式使用第三方CDN 1.3查看jQuery版本
在浏览器中打开已经引用jQuery的网页然后按F12打开 开发者工具 选择“Console”控制台在控制台中输入以下命令
$.fn.jquery输入命令后按回车即可显示当前jQuery的版本号。 二、jQuery简介及使用详解
在项目中引用jQuery 2.1基本语法
jQuery的核心方法在jQuery中封装了一系列的方法。
核心方法 jquery();
简化格式 $(); $代替jQuery这个方法名。
$(参数)参数可以是选择器还可以直接就是一个函数。
script$(selector).action();
/script说明 工厂函数 $() 将DOM对象转化为jQuery对象 选择器 selector获取需要操作的DOM 元素 用法基本上和css一致 方法 action()jQuery中提供的方法其中包括绑定事件处理的方法 $等同于jQuery 2.1 jQuery 的顶级对象 $
$ 是 jQuery 的别称在代码中可以使用 jQuery 代替 $但一般为了方便通常都直接使用 $ 。$ 是jQuery 的顶级对象 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象就可以调用jQuery 的方法。
2.2jQuery对象 DOM对象
$(#title).html();
// 等同于
document.getELementById(title).innerHTML;DOM对象和jQuery对象分别拥有一套独立的方法不能混用想混用先转换
DOM对象转jQuery对象
DOM 对象转换为 jQuery 对象 $(DOM对象)
var a document.getElementById(name); // a是DOM对象
var b $(a); // b是jQuery对象jQuery对象转DOM对象两种方式
$(div) [index] index 是索引号
$(div) .get(index) index 是索引号var a $(#name); // a是jQuery对象
var b jqObject.get(0); // b是DOM对象2.2选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等查找或选择HTML 元素。 它基于已经存在的CSS选择器除此之外它还有一些自定义的选择器。 jQuery 中所有选择器都以美元符号开头$()。
基本选择器包括标签选择器、类选择器、ID选择器、并集选择器、交集选择器和全局选择器 html
headtitlejquery使用/titlescript typetext/javascript srcjquery/jquery-3.7.1.min.js/script
/head
bodyp中国/pp武汉/pp classjy加油/pp idwan祖国万岁/ph3 classjy祖国万岁/h3script$(h3.jy).css(color,red); // 交集选择器既是h3标签又拥有.jy的元素/script
/body
/html
层次选择器 属性选择器 过滤选择器 2.3事件 事件注册
element.事件(function(){})$(div).click(function(){ 事件处理程序 })其他事件和原生基本一致。 比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scroll 等 鼠标事件 键盘事件 方法描述执行时机keydown()触发或将函数绑定到指定元素的keydown事件按下按键时keyup()触发或将函数绑定到指定元素的keyup事件释放按键时
input
h3/h3script srcjs/jquery-3.4.1.min.js/script
script$(input).keyup( function(){var str $(this).val(); // 获取框中的值$(h3).text( str ); // 将h3元素中的文本内容更改为str} );
/script表单事件
方法描述执行时机focus()触发或将函数绑定到指定元素的focus事件获得焦点blur()触发或将函数绑定到指定元素的blur事件失去焦点
form actionp帐号: input ida value请输入帐号... /pp电话: input idb /p
/formscript srcjs/jquery-3.4.1.min.js/script
script// 获得焦点激活/点击一下$(#a).focus(function(){$(this).val();});// 失去焦点未激活/未点击$(#a).blur(function(){$(this).val(请输入帐号...);});
/script事件处理
事件处理 on() 动态绑定事件对DOM元素绑定事件的另一种写法。
绑定一个事件
$(.del).on(click, function() {alert(hello);
})绑定多个事件
$(.del).on(click mouseover, function() {alert(hello);
})events:一个或多个用空格分隔的事件类型如click或keydown 。selector: 元素的子元素选择器 。fn:回调函数 即绑定在元素身上的侦听函数。
可以绑定多个事件多个处理事件处理程序
$(div).on({mouseover: function(){}, mouseout: function(){},click: function(){}
});如果事件处理程序相同
$(div).on(mouseover mouseout, function() {$(this).toggleClass(current);
});可以事件委派操作 。事件委派的定义就是把原来加给子元素身上的事件绑定在父元素身上就是把事件委派给父元素。
$(ul).on(click, li, function() {alert(hello world!);
});动态创建的元素click() 没有办法绑定事件 on() 可以给动态生成的元素绑定事件$(div).append($(p我是动态创建的p/p));$(“div).on(click,”p”, function(){alert(俺可以给动态生成的元素绑定事件)
});事件处理 off() 解绑事件
off() 方法可以移除通过 on() 方法添加的事件处理程序。
$(p).off() // 解绑p元素所有事件处理程序$(p).off( click) // 解绑p元素上面的点击事件 后面的 foo 是侦听函数名$(ul).off(click, li); // 解绑事件委托如果有的事件只想触发一次 可以使用 one() 来绑定事件。
自动触发事件 trigger()
有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件不必鼠标点击触发。
element.click() // 第一种简写形式element.trigger(type) // 第二种自动触发模式$(p).on(click, function () {alert(hi~);
});
$(p).trigger(click); // 此时自动触发点击事件不需要鼠标点击element.triggerHandler(type) // 第三种自动触发模式
triggerHandler模式不会触发元素的默认行为这是和前面两种的区别。事件对象
事件被触发就会有事件对象的产生。
element.on(events,[selector],function(event) {})阻止默认行为event.preventDefault() 或者 return false 阻止冒泡 event.stopPropagation() 元素的隐藏和显示
改变元素的宽高带动画效果
show( speed )显示hide( speed )隐藏toggle( speed )等价于showhide : 显示的隐藏隐藏的显示
可选的 speed 参数规定隐藏/显示的速度可以取以下值“slow”、“fast” 或毫秒
stylediv{width: 200px;height: 200px;background-color: black;}
/style
bodybutton idbtn1显示/buttonbutton idbtn2隐藏/buttonbutton idbtn3切换/buttondiv/divscript srcjs/jquery-3.4.1.min.js/scriptscript$(#btn2).click(function(){// fast:快速的// slow:缓慢的// 毫秒自定义$(div).hide(2000); });$(#btn1).click(function(){$(div).show(slow);});$(#btn3).click(function(){$(div).toggle(1000);});/script
/body2.4jQuery的方法 设置或获取元素固有属性值 prop()
获取属性语法
prop(属性)1
设置属性语法
prop(属性, 属性值) DOM和CSS的操作
属性函数
attr( 属性 ) 获得元素的属性值 attr( 属性 , 新值 ) 修改元素的属性值attr( 样式参数 ) 样式参数可以写成json格式
bodybutton idbtn1点我试试/buttonhrimg srcimg/1.jpg title图片1 width300script srcjs/jquery-3.4.1.min.js/scriptscript$(#btn1).click(function(){$(img).attr(src,img/2.jpg);$(img).attr(title,高清无码);$(img).attr( {width:200,height:200} );});/script
/bodyval() 获得表单元素中的value值 val(x) 修改表单元素中的value值html() 获得元素中的内容标签文本 html(x) 修改元素中的内容标签文本text() 获得元素中的文本 text(x) 修改元素中的文本
button试试/button
hr
input idusernamedivh1i中国加油/i/h1
/divscript srcjs/jquery-3.4.1.min.js/script
script$(button).click(function(){//alert($(input).val()); // input框中的值//$(input).val(哈哈哈); // 修改input框中的值 //alert( $(div).html() ); // 获得div中的内容包含标签信息//alert( $(div).text() ); // 获得div中的内容不包含标签信息只包含文本内容$(div).text(祖国万岁); // 修改div中的内容全部内容都覆盖});
/script样式函数
css(属性) 获得该属性值css(属性,值) 设置属性的值css( { json} ) 设置多个属性的值
使用css()的方法可以设置和获取对象的样式。 css() 方法设置或返回被选元素的一个或多个样式属性。
stylediv{width: 150px;height: 150px;background-color: #000;}
/style
bodybutton试试/buttonhrdiv/divscript srcjs/jquery-3.4.1.min.js/scriptscript$(button).click(function(){//var w $(div).css(width); // 获取css属性width的值//1.一个键值对//$(div).css(background-color,pink);//2.链式编程//$(div).css(background-color,pink).css(border-radius,50%);//3.json为参数$(div).css({opacity:0.4,background:orange,borderRadius:50%} );});/script
/bodywidth() 获得元素的宽度width( number ) 修改元素的宽度height() 获得元素的高度height( number ) 修改元素的高度
stylediv{width: 150px;height: 150px;background-color: #000;}
/style
bodybutton试试/buttonhrdiv/divscript srcjs/jquery-3.4.1.min.js/scriptscript$(button).click(function(){var w $(div).width(); // 无参获取宽度var h $(div).height(); // 无参获取高度// alert(宽:wpx高:hpx);$(div).width(300); // 传参修改宽度$(div).height(300); // 传参修改高度});/script
/body类样式函数
addClass() 为元素添加类样式removeClass() 将元素的类样式移除toggleClass() 样式的切换有-无无-有 stylediv{width: 100px;height: 100px;background-color: #000;} .a{background: palevioletred;border-radius: 50%;} .b{border:5px dashed darkcyan;opacity: 0.6;}.cn{background: #000;color:#FFF; font-family: 楷体;}
/style
bodybutton idbtn1试试/buttonbutton idbtn2取消透明度/buttonbutton idbtn3样式切换/buttonhrdiv/divh1中华人民共和国万岁/h1script srcjs/jquery-3.4.1.min.js/scriptscript$(#btn1).click(function(){// $(div).addClass(a);$(div).addClass(a b);});$(#btn2).click(function(){$(div).removeClass(b);});$(#btn3).click(function(){$(h1).toggleClass(cn);});/script
/bodyaddClass( ) - 为jQuery对象添加一个或多个class - 可以接收一个回调函数作为参数, 回调函数中有两个参数1.当前元素的索引2.当前元素的类名 在回调函数中this 就是当前的元素但this是一个DOM对象不能调用jQuery对象的方法
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgetitledocument/titlescript srchttps://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js/scriptstyle.box1{width: 200px;height: 200px;background-color: #bfa;}.box2{border: 10px red solid;}.box3{background-color: orange;}/stylescript$(function(){// 为按钮绑定响应函数$(#btn).click(function(){// // 为box1添加class// // addClass()可以为元素添加一个或多个class// $(.box1).addClass([box2,box3])//可以使用数组的形式添加多个class// // 与box2 box3相同// // 具有隐式迭代的特点可以为所有的box1类添加class// addClass可以接收一个回调函数作为参数$(.box1).addClass(function(index,className){// alert(index -- className)// 在回调函数中this 就是当前的元素alert(this);//[object HTMLDivElement]// 说明this是一个DOM对象不能调用jQuery对象的方法if(index % 2 0){// 添加box2// this.classList.add(box2) //this是一个DOM对象$(this).addClass(box2)//将this 转换为jQuery对象可以调用jQuery对象的方法}else{// 添加box3// this.classList.add(box3)$(this).addClass(box3)}})})})/script
/head
body button idbtn点我一下/buttonhrdiv classbox1/divdiv classbox1/divdiv classbox1/div/body
addClass 的回调函数的返回值会成为当前元素的class headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgetitledocument/titlescript srchttps://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js/scriptstyle.box1{width: 200px;height: 200px;background-color: #bfa;}.box2{border: 10px red solid;}.box3{background-color: orange;}/stylescript$(function(){// 为按钮绑定响应函数$(#btn).click(function(){$(.box1).addClass(function(index){// 回调函数的返回值会成为当前元素的class// return [box2,box3]if(index % 2 0){return box2}else{return box3}})})})/script
/head
body button idbtn点我一下/buttonhrdiv classbox1/divdiv classbox1/divdiv classbox1/div/body 节点操作
创建节点 工厂函数$()用于获取或创建节点插入节点 插入子节点 替换节点 replaceWith()replaceAll()复制节点 clone()删除节点 remove()删除整个节点empty()清空节点内容
通过 jQuery可以很容易地添加新元素/内容。 添加新的 HTML 内容四个 jQuery 方法 append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容
input button idtest测试/buttonulli三国演义/lili水浒传/lili西游记/li
/ulscript srcjs/jquery-3.4.1.min.js/script
script$(#test).click(function(){var bookname $(input).val();var newli $(libookname/li); //通过工厂函数创建新的li节点/*添加子节点*///$(ul).append(newli); // newli添加到ul后面//newli.appendTo(ul); // newli添加到ul后面//$(ul).prepend(newli); // newli添加到ul前面//newli.prependTo(ul);/*添加同辈节点*///$(li:last).after( newli ); // newli添加到最后的li的后面//newli.insertAfter(li:last);//$(li:last).before(newli); //newli添加到最后的li的前面//newli.insertBefore(li:last);/*替换节点*///$(li:eq(1)).replaceWith(newli); // 将第二个li替换成newli//newli.replaceAll( li:eq(1) );/*复制节点*///$(li:first).clone().insertAfter(li:last); // 复制第一个li并插入到最后一个li的后面/*删除节点*///$(li:eq(1)).empty(); // 清空了节点上的文本节点并没有消失$(li:eq(1)).remove(); //删除节点});
/script实现动态表格
步骤①创建一个表格 ②编写数据 ③在页面加载完成之后初始化表格 ④将表单中的数据加到表格 ⑤为每一行增加一个删除按钮
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle typetext/css.c1 {background-color: #00FFFF;}.c2 {background-color: burlywood;}thead {background-color: fuchsia;}/stylescript srcjs/jquery-3.5.1.js typetext/javascript charsetutf-8/scriptscriptlet stuArr [{sid: 1,sname: 残念,ssex: 1,sscore: 60},{sid: 2,sname: 白茶,ssex: 0,sscore: 90},{sid: 3,sname: 八碗,ssex: 1,sscore: 100}];$(function(){$(#btnAdd).click(function(){let trObj $(tr/tr);let sidTd $(td/td).html($(#sid).val());let snameTd $(td/td).html($(#sname).val());let ssexTd $(td/td).html($(.radioCls:checked).val());let sscoreTd $(td/td).html($(#sscore).val());let delTd $(td/td);let delBtn $(input).attr(type,button).val(删除);delTd.append(delBtn);trObj.append(sidTd).append(snameTd).append(ssexTd).append(sscoreTd).append(delTd);$(#tabData).append(trObj);delBtn.click(function(){if(confirm(是否删除$(this).parent().parent().find(td:eq(1)).text())){$(this).parent().parent().remove();$(#tabData tr).removeClass(c1);$(#tabData tr).removeClass(c2);$(#tabData tr:even).addClass(c1);$(#tabData tr:odd).addClass(c2);}});$(#tabData tr:even).addClass(c1);$(#tabData tr:odd).addClass(c2);});$.each(stuArr,function(i,jsonObj){//在jQuery中如何创建一个tr标签对象let trObj $(tr);let sidTd $(td).html(jsonObj.sid);let snameTd $(td).html(jsonObj.sname);let ssexTd $(td).html(jsonObj.ssex);let sscoreTd $(td).html(jsonObj.sscore);let delTd $(td/td);let delBtn $(input/).attr(type,button).val(删除);delTd.append(delBtn);trObj.append(sidTd).append(snameTd).append(ssexTd).append(sscoreTd).append(delTd);$(#tabData).append(trObj);delBtn.click(function(){if(confirm(是否删除$(this).parent().parent().find(td:eq(1)).text())){$(this).parent().parent().remove();$(#tabData tr).removeClass(c1);$(#tabData tr).removeClass(c2);$(#tabData tr:even).addClass(c1);$(#tabData tr:odd).addClass(c2);}});});$(#tabData tr:even).addClass(c1);$(#tabData tr:odd).addClass(c2);})/script/headbodytable width60% border1px cellpadding3px cellspacing0pxtheadtrth编号/thth姓名/thth性别/thth积分/thth删除/th/tr/theadtbody idtabData/tbody/tablehrform编号input typetext namesid idsid value /br姓名input typetext namesname idsname value /br性别input typeradio namessex value1 idssex /男 nbsp;nbsp;input typeradio namessex value0 idssex /女br积分input typetext namesscore idsscore value /brinput typebutton idbtnAdd namebtnAdd value保存 //form/body
/html 遍历节点
祖先元素
用于向上遍历 DOM 树
parent() 返回被选元素的直接父元素仅上一级parents() 返回被选元素的所有祖先元素它一路向上直到文档的根元素可以选择辈分
pbutton测试/button/p
ullia/lilibb/b/lilic/li
/ulscript srcjs/jquery-3.4.1.min.js/script
script$(button).click(function(){//var x $(b).parent().html(); // 找爸爸//var x $(b).parents(ul).html(); // 找祖宗 ul//var x $(b).parents(body).html(); // 找祖宗 bodyalert( x );});
/script同辈元素
next() 获取紧邻匹配元素之后的元素prev() 获取紧邻匹配元素之前的元素siblings( [selector] ) 获取位于匹配元素前面和后面的所有同辈元素 button测试/button
pp1/p
ullia/lilibb/b/lilic/li
/ul
pp2/p
p idxp3/pscript srcjs/jquery-3.4.1.min.js/script
script$(button).click(function(){//var x $(ul).next().text(); // 紧邻的下一个元素//var x $(ul).prev().text(); // 紧邻的上一个元素//var x $(ul).siblings(#x).text(); // 所有的兄弟中idx的var arr $(ul).siblings(); // ul的所有兄弟,1个button3个p2个scriptfor(var i 0 ;i arr.length ;i){alert(arr[i]);}});
/script后代元素
children( [selector] ) 方法返回被选元素的所有直接子元素
button测试/button
ulli盘古/lili蚩尤/lili刑天p共工/p/lih3祝融/h3
/ulscript srcjs/jquery-3.4.1.min.js/script
script$(button).click(function(){//var x $(ul).find(p).text(); // 在ul中查找p元素忽略层级//var x $(ul).find(h3).text(); // 在ul中查找h3元素忽略层级var x $(ul).find().text(); // find()没有传参返回空值alert(x);});
/script元素的过滤
first()过滤第一个元素last()过滤最后一个元素eq(index)过滤到下标为index的元素not()除了什么之外的元素is()返回布尔判断是不是这种元素
button测试/button
ulli盘古/lili蚩尤/lili刑天/li
/ulscript srcjs/jquery-3.4.1.min.js/script
script$(button).click(function(){//var x $(li).first().text(); // 第一个li//var x $(li).last().text(); // 最后一个li//var x $(li).eq(1).text(); // 下标为1的li//var x $(li).not(li:eq(1)).text(); // 除了下标为1的其余所有livar x $(li).parent().is(ul); // 返回布尔型li的父节点是不是ulalert(x);});
/scriptjQuery对象复制
clone( ) 用来复制jQuery对象 - 只会复制元素本身不会复制元素的事件 - 在clone( )中传入一个参数true,表示不仅复制元素本身还包括其事件、数据等
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgetitledocument/titlescript srchttps://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js/scriptscript/* 点击按钮使得孙悟空添加到 list2 中*/$(function(){$(#list li:nth-child(1)).click(function(){alert(孙悟空)})// clone( )用来复制jQuery对象// var $swk $(#list li:nth-child(1)).clone()// 只会复制元素本身不会复制元素的事件所以在list2中添加的孙悟空不会有点击出现“孙悟空的事件var $swk $(#list li:nth-child(1)).clone(true)// 在clone()中传入一个参数true,表示不仅复制元素本身还包括其事件、数据等var $list2 $(#list2)$(#btn).click(function(){$list2.append($swk)})})/script
/head
body button idbtn点我/buttonhrul idlistli孙悟空/lili猪八戒/li/ulul idlist2li沙和尚/lili唐僧/li/ul
/body jQuery中封装的Ajax的使用详解 1.第一种 $.ajax()
$.ajax() 是 jQuery 中 AJAX 请求的核心方法所有的其他方法都是在内部使用此方法。
语法 $.ajax( { name:value, name:value, ... } ) $.ajax({ 参数1参数2···})
$.ajax({type:“请求方式”,url:“请求地址”data:“请求参数”dataType:服务器返回的数据类型success:fundction(data){ //成功且完整响应自动调用的函数},error: function(){ //出现错误自动调用的函数}
}) dataType用来指定服务器返回来的数据类型可选值有如下
xml表示服务器返回的是xml内容
html表示服务器返回的是html文本内容
script表示服务器返回的是script文本内容
json表示服务器返回的是json内容重点
jsonp表示使用jsonp形式调用函数早期我们用它来解决跨域问题
text表示服务器返回的是纯文本字符串
如果不指定JQuery将自动根据http包mime信息返回responseXML或responseText并作为回调函数参数传递
说明对于json和jsonp的区别本小白暂时没有深入了解目前只知道jsonp可以跨域读取数据有待进一步学习~ async 异步方式默认为true即异步方式。当设置为false时为同步方式。
异步方式ajax执行后会继续执行ajax后面的脚本直到服务器端返回数据后触发ajax里的success方法这时候执行的是两个线程。同步方式在没有返回值之前同步请求将锁住浏览器用户其它操作必须等待请求完成才可以执行。 html
headtitleTitle/titlescript typetext/javascript srcjs/jquery-3.3.1.min.js/scriptscriptfunction doAjax(){$.ajax({url:bmiAjax,type:POST,data:name$(#name).val()height$(#height).val()weight$(#weight).val(),success:function (data) {alert(data);//这个是响应服务器的处理结果$(#result).text(data);},error:function () {alert(error);},dataType:json})}/script
/head
body姓名: input typetextidname namename/br/体重kginput typetext idweight nameweight/br/身高(米)input typetext idheight nameheight/br/input typebutton value计算BMIonclickdoAjax()div idresult/div
/body
/html
实例1
实现在页面上输入一个地址点击获取经纬度弹出该地址的经纬度。
script srchttps://cdn.bootcss.com/jquery/3.4.1/jquery.js/script
script typetext/javascriptfunction showAdress(){var str document.getElementById(text).value; $.ajax({url: https://restapi.amap.com/v3/geocode/geo,dataType: json,type: get,data: { address: str, key: 7486e10d3ca83a934438176cf941df0c, },success:function(res){alert(res.geocodes[0].formatted_address经纬度res.geocodes[0].location);console.log(res); //在console中查看数据},error:function(){alert(failed!);},});}
/scripthtml部分 divform nameformspan输入地址/spaninput idtext classtextbox typetext/input classbutton typebutton value获取经纬度 onclickshowAdress()//form
/div实例2
将http://hebutgo.com:8080/maps/getMapsList接口中的result字段绘制成表格。
打印之前先让我们看看这个接口中的result是什么 data.json
{result:[{申请人省份:0,counts:1553},{申请人省份:上海市,counts:637},{申请人省份:云南省,counts:81},{申请人省份:内蒙古自治区,counts:52},{申请人省份:北京市,counts:1186},{申请人省份:吉林省,counts:90},{申请人省份:四川省,counts:443},{申请人省份:天津市,counts:249},{申请人省份:宁夏回族自治区,counts:15},{申请人省份:安徽省,counts:1633},{申请人省份:山东省,counts:780},{申请人省份:山西省,counts:60},{申请人省份:广东省,counts:1575},{申请人省份:广西壮族自治区,counts:367},{申请人省份:新疆维吾尔自治区,counts:48},{申请人省份:江苏省,counts:1889},{申请人省份:江西省,counts:90},{申请人省份:河北省,counts:164},{申请人省份:河南省,counts:261},{申请人省份:浙江省,counts:905},{申请人省份:海南省,counts:20},{申请人省份:湖北省,counts:439},{申请人省份:湖南省,counts:211},{申请人省份:甘肃省,counts:71},{申请人省份:福建省,counts:277},{申请人省份:西藏自治区,counts:5},{申请人省份:贵州省,counts:108},{申请人省份:辽宁省,counts:199},{申请人省份:重庆市,counts:193},{申请人省份:陕西省,counts:270},{申请人省份:青海省,counts:15},{申请人省份:香港,counts:1},{申请人省份:黑龙江省,counts:215},],reason:,status:success}分析 1.可以看到接口中有三个数据result数组、reason、status由于三项数据共同构成了我们要请求的json所以为get请求data为默认即可result数组通过data.result得到。 2.为了将result数组中的数据以表格形式打印使用$.each(data.result,function(index,obj){}) 方法实现依次读取。
ps
此处的data.result是本例中的目标数组each方法使用时此处填入所要遍历的数组即可index表示的是数组的下标从0开始累加即当前遍历到了该数组的哪个位置如果不需要输出所读取的数组元素下标的话这个下标值的命名随意因为函数中无需使用
如果data.result数组中的元素也为一个json 如{“申请人省份”:“上海市”,“counts”:637}本例中此时obj表示的是就是这个数组可以通过obj[‘申请人省份’]、obj[‘counts’]等读取json中的元素。 代码 js部分 script typetext/javascript srchttp://code.jquery.com/jquery-latest.js/scriptscript typetext/javascriptfunction printtable(){$.ajax({url:http://hebutgo.com:8080/maps/getMapsList,type:get,datatype:json,success:function(res){console.log(res); //在console中查看数据$.each(res.result,function(index,obj){$(#table).append( trtdobj[申请人省份]/tdtdobj[counts]/tdtr);});}})}/scripthtml部分
div classmaintable idtabletrth申请人省份/thth数量/th/tr/tableinput typebutton valuePRINT onclickprinttable()/
/divstyle typetext/css.main{width: 500px;margin:0 auto;text-align: center;}#table{display: inline-block;vertical-align: top;border-collapse:collapse;}tr td{width:200px;border: 1px solid gray;}
/style$.ajax({url: https://api.example.com/data, // 请求的 URLtype: GET, // 请求方法GET、POST 等dataType: json, // 预期服务器返回的数据类型success: function(data, textStatus, jqXHR) {// 请求成功时的回调函数console.log(成功获取数据: , data);},error: function(jqXHR, textStatus, errorThrown) {// 请求失败时的回调函数console.log(请求失败: , textStatus, errorThrown);}
});在这个例子中我们发送一个 GET 请求到指定的 URL并期望服务器返回 JSON 格式的数据。如果请求成功success 回调函数将被触发并接收返回的数据作为参数。如果请求失败error 回调函数将被触发并接收关于错误的信息。 script typetext/javascriptfunction login1(){$.ajax({//${pageContext.request.contextPath}用于取后端方法的绝对路径的项目名url: ${pageContext.request.contextPath}/user/returnJson,type: GET,data:{name: James}, //必须是字符串格式contentType:application/json, //指定内容格式dataType:json,success: function(daa) { //括号里的daa是服务器返回的数据console.log(daa);document.getElementById(myDiv).innerTextdaa[name];}});}/script2.第二种 $.get(“请求地址”“请求参数”回调函数, 返回的数据类型) 请求参数以形式js对象形式传入可以避免不必要的字符拼接形式传入数据的麻烦
head
script
function f1(fid) {if(confirm(是否删除)){$.get(DeleteServlet,{id:fid},function (data) {console.log(data);if (ok data){$(#suc).slideUp(3000);setTimeout(function () {$(#suc).slideDown(2000);},2000);setTimeout(function () {location.hrefshow.html;},7000);}else{alert(删除失败)}},text)}}/script
/head
body
!-- 让a标签失去跳转功能点击触发事件f1fid里面并传入参数 --
a href\javascript:void(0)\ onclickf1(e.fid)删除/a
/body
scriptfunction doAjax(){$.get(bmiAjax,{name:ycy,height:1.75,weight:58},function (data) {alert(data);},json)}
/script $.get(https://api.example.com/users, function(data) {// 在这里处理返回的数据console.log(data);// 假设 data 是一个用户列表的数组我们可以遍历它$.each(data, function(index, user) {console.log(用户ID:, user.id);console.log(用户名:, user.username);});
});向 https://api.example.com/users 发送了一个 GET 请求并在请求成功时调用了一个匿名函数来处理返回的数据。我们假设服务器返回的是一个 JSON 格式的用户列表因此我们可以在回调函数中遍历这个列表并打印出每个用户的 ID 和用户名。
如果你需要向服务器发送额外的数据你可以将数据作为第二个参数传递给 $.get() 方法。例如
$.get(https://api.example.com/users, { id: 123 }, function(data) {console.log(data); // 处理返回的用户数据
});我们向服务器发送了一个包含 id: 123 的 GET 请求以获取具有特定 ID 的用户的信息。
$.get() 方法提供了简化的 Ajax GET 请求功能但在处理复杂的请求或需要更多配置选项时使用 $.ajax() 方法可能更为合适。此外对于涉及敏感数据的请求务必确保使用 HTTPS 来保护数据的传输安全。 $.post(“请求地址”“请求参数”回调函数, 返回的数据类型) 1.若不涉及文件上传要拿表单中的数据可以直接将表单序列化 $(#form1).serialize()
可以把表单的所有参数都获取到并以namevalueagevalue2的形式拼接起来
$(#form1).serialize()需要都哪个表单绑定起来。
script$(#btn).click(function(){alter($(form1).serialize());
})
/script
headmeta charsetUTF-8title登录页面/title!--要求1.登录成功跳转展示所有数据页面2.登录失败显示登录失败信息--script srcjquery.js/scriptscriptfunction f() {var formS $(form).serialize();// console.log(formS);$.ajax({type:post,url:LoginServlet,data:formS ,dataType:text,success:function (data) {console.log(data);if (okdata){location.hrefshow.html;}else{$(#sp).text(登录失败);}},error:function (e) {console.log(e);}})}/script
/head
body
h3 aligncenter登录页面/h3
hr
formtable aligncentertrtd用户名/tdtdinput typetext nameuname/td/trtrtd密码/tdtdinput typepassword namepwd/td/trtrtd colspan2 styletext-align: centerspan idsp/span/td/trtr aligncentertd colspan2input typebutton value登录 onclickf()/td/tr/table
/form
/body $.post(https://api.example.com/login, {username: myusername,password: mypassword
}, function(response) {// 在这里处理返回的数据console.log(response);if (response.success) {alert(登录成功);} else {alert(登录失败 response.message);}
}, json);我们向 https://api.example.com/login 发送了一个 POST 请求包含了用户名和密码数据。我们指定了预期返回的数据类型为 JSON并在请求成功时调用了一个匿名函数来处理返回的数据。在回调函数中我们检查了返回的响应对象根据 success 属性显示相应的提示信息。 使用 POST 请求发送敏感数据时如用户名和密码务必确保通过 HTTPS 进行通信以保护数据的传输安全。此外对于涉及用户输入的数据应该进行适当的验证和清理以防止潜在的安全漏洞如 SQL 注入或跨站脚本攻击XSS。 2.涉及文件上传的form表单必须发post请求后端还是要MultipartConfig且需要做如下操作 将表单数据化里面要一个DOM对象 将 contentType:falseprocessData:false,
head
script srcjuqery.js/script
scriptfunction alter() {var formData new FormData($(form)[0]);$.ajax({type:post,url:AlterServlet,data:formData,contentType:false,processData:false,dataType:text,success:function (data) {console.log(data);if (ok data){location.hrefshow.html;}else {alert(修改失败);}}})}/script
/head
body
h2 aligncenter stylecolor: black修改花的信息/h2
hr
formtable aligncentertrtd编号/tdtdinput typetext namefid readonly /td/trtrtd名称/tdtdinput typetext namefname /td/trtrtd价格/tdtdinput typetext nameprice /td/trtrtd产地/tdtdinput typetext namemade_in /td/trtrtd描述/tdtdinput typetext namedescribe /td/trtrtd图片/tdtdinput typefile namephoto/td/trtrtd colspan2 styletext-align: centerinput typebutton value修改 onclickalter()/td/tr/table
/form
/body
回调函数主要是用来处理服务器对我们的响应结果。
返回的数据类型这个参数用来设置服务器返回来的数据类型可以是xml, html, script, json, text。 3.第三种 $.getJSON(请求地址, 请求参数, 回调函数)
通过HTTP GET请求请求载入JSON数据请求方式和回调数据类型是固定的$.get()和$.post()都是四个参数而这个只要三个参数即可 请求方式是GET数据返回是JSON格式 用该方法记得写thead tbody, i代表循环中对象的索引e代表循环中拿出的对象data用于接收后端响应回来的数据
$(function () {$.getJSON(QueryServlet,function (data) {$(data).each(function (i,e) {console.log(e);var $1 $(tr align\center\\n tde.fid/td\n tde.fname/td\n tde.price/td\n tde.made_in/td\n tde.describe/td\n tdimg src\upload/e.photo\ alt\\/td\n td\n a href\javascript:void(0)\ onclickf1(e.fid)删除/a\n a href\updata.html?fide.fid\变更/a\n /td\n /tr);$(tbody).append($1);$1.mouseover(function () {$(this).css(background-color,palevioletred)});$1.mouseout(function () {$(this).css(background-color,white)})});});});
这种方式要求服务器返回的数据类型得是json格式的。
scriptfunction doAjax(){$.getJSON(bmiAjax,{name:ycy,height:1.75,weight:58},function (data) {alert(data);})}
/script
4.第四种
这种方式是发送ajax请求获取一个js文件。 $.getScript(请求地址, 回调函数) 5. 注意
a标签这种跳转的同时需要把数据传过去的直接后面拼接数据
a hreflogin.html?id1password123跳转/a 四、jQuery load() 方法
jQuery 的 load() 方法是一个简单而强大的 Ajax 函数用于从服务器加载数据并把返回的数据放入被选元素中。这个方法通常用于将 HTML 片段加载到指定的元素中而无需使用 $.ajax() 或其他更复杂的 Ajax 方法。 以下是 load() 方法的基本语法
$(selector).load(URL, [data], [callback]);selector: 一个 jQuery 选择器指定要加载数据的元素。 URL: 要请求的 URL。 data (可选): 发送到服务器的数据以键值对的形式表示。这通常是一个对象或查询字符串。 callback (可选): 请求完成时的回调函数。这个函数接收返回的 HTML 内容作为参数。
面是一个简单的例子展示如何使用 load() 方法将一个页面的内容加载到一个 div 元素中
!DOCTYPE html
html langen
headmeta charsetUTF-8titlejQuery load() 示例/titlescript srchttps://code.jquery.com/jquery-3.6.0.min.js/script
/head
bodybutton idload-button加载内容/button
div idcontent/divscript
$(document).ready(function() {$(#load-button).click(function() {$(#content).load(content.html);});
});
/script/body
/html在这个例子中当用户点击 “加载内容” 按钮时load() 方法会向 content.html 发送一个 GET 请求并将返回的 HTML 内容加载到 ID 为 content 的 div 元素中。
如果你需要向服务器发送额外的数据你可以传递一个对象作为 data 参数
$(#content).load(content.php, { param1: value1, param2: value2 });在这个例子中content.php 会接收到 param1 和 param2 这两个参数并可以根据这些参数返回不同的内容。
此外你还可以提供一个回调函数来处理加载完成后的逻辑
$(#content).load(content.html, function(response, status, xhr) {if (status error) {var msg 抱歉无法加载内容: ;$(this).html(msg xhr.status xhr.statusText);}
});在这个回调函数中response 参数包含请求返回的内容status 参数包含请求的状态“success”, “error”, “notmodified”, “timeout”, 或 “abort”而 xhr 参数包含 XMLHttpRequest 对象你可以用它来获取更多关于请求的信息。 oad() 方法默认使用 GET 请求来加载数据。如果你需要发送 POST 请求或其他类型的请求你可能需要使用 $.ajax() 方法因为它提供了更多的配置选项。此外对于安全性敏感的数据传输确保使用 HTTPS。 iframe标签模仿实现Ajax效果
AJAX 可以用于创建快速动态的网页。
AJAX 是一种在无需重新加载整个网页的情况下能够更新部分网页的技术。
编写一个 ajax-frame.html浏览器打开
!DOCTYPE html
html
head langenmeta charsetUTF-8titlekuangshen/title
/head
bodyscript typetext/javascriptfunction LoadPage(){var targetUrl document.getElementById(url).value;console.log(targetUrl);document.getElementById(iframePosition).src targetUrl;}/scriptdivp请输入要加载的地址/ppinput idurl typetext valuehttps://www.bilibili.com//input typebutton value提交 onclickLoadPage()/p
/divdivh3加载页面位置/h3iframe idiframePosition stylewidth: 100%;height: 500px;/iframe
/div/body
/html~~~~~~~~~~~~~~~~ 入口函数表示页面输载入事件ready(函数)
$(document).ready(function(){... // 此处是页面DOM加载完成的入口
});$(function () { ... // 此处是页面 DOM 加载完成的入口 -- 推荐
}) ; script typetext/javascript
$(document).ready(function(){alert(msg);
});
/script
//简化版script typetext/javascript
$(function(){
alert(msg);
});
/script jQuery 元素操作
1 遍历元素
$(div).each(function (index, domEle) { xxx; })1. each() 方法遍历匹配的每一个元素。主要用DOM处理。 each 每一个
2. 里面的回调函数有2个参数 index 是每个元素的索引号; demEle 是每个DOM元素对象不是jquery对象
3. 所以要想使用jquery方法需要给这个dom元素转换为jquery对象 $(domEle)$.each(object, function (index, element) { xxx; })1. $.each()方法可用于遍历任何对象。主要用于数据处理比如数组对象
2. 里面的函数有2个参数 index 是每个元素的索引号; element 遍历内容2 创建元素
$(li/li); jQuery核心函数 引入jQuery库其实就是向网页中添加了一个新的函数$jQuery - $ 是jQuery中的核心函数jQuery的所有功能都是通过该函数来进行的 - 核心函数的功能两种作用 1. 将它作为对象使用此时是一个工具类 - 在核心函数中jQuery为我们提供了多个工具方法 jQuery.isArray( ) 检查是不是数组 jQuery.isFunction( ) 检查是不是函数 jQuery.isNumeric( ) 检查是不是数值 2. 将它作为函数调用根据不同参数的不同可以发挥不同的作用 jQuery( 函数 ) 将一个函数作为$的参数 - 这个函数会在文档加载完毕之后执行 - 相当于document.addEventListener(DOMContentLoaded,function(){ }) jQuery( 选择器 ) 将选择器字符串作为参数 - jQuery 自动去网页中查找元素 - 作用类似于 document.querySelectorAll( ...) - 注意通过jQuery核心函数查询的结果并不是原生的DOM对象 而是一个经过jQuery包装过的新的对象这个对象我们称其为jQUery对象 jQuery对象不能直接调用原生DOM对象的方法 通常我们为jQuery对象命名时会使用$开头为了区分 $对象和DOM原生对象)
jQuery( DOM对象) 将DOM对象作为参数 - 可以将DOM对象转换为jQuery对象从而使用jQuery对象的方法 jQuery( HTML代码 ) 将HTML代码作为参数 - 会根据html 代码来创建元素
注意在jQuery中我们设置变量时使用var 因为一般使用jQuery说明比较旧的项目考虑兼容性同时也尽量避免使用箭头函数 1. 将jQuey作为对象工具类调用的例子 script srchttps://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js/scriptscriptconsole.log(jQuery $);//truefunction fn(){}var num 10// jQuery.isFunction( ) 检查是不是函数console.log($.isFunction(num));//falseconsole.log($.isFunction(fn));//true// 可以使用typeof检查类型console.log(typeof fn function);//true/script 2. 将其作为函数调用的例子
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgetitledocument/titlescript srchttps://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.js/scriptscript// 将一个函数作为$的参数// $(function(){// alert(核心函数~~)// })// alert(核心函数外~~)// 将选择器字符串作为参数$(function(){// 通过jQuery核心函数查询的结果可以直接调用click因为其是jQUery对象 $(#btn01).click(function(){// alert(你点我干嘛)var btn document.getElementById(btn01)// 所以为了区分 jQUery对象和DOM原生对象// 我们一般为 jQUery对象 命名时会为其加上一个$ var $btn2 $(#btn01)// 将DOM对象作为参数传进去可以将DOM对象转换为jQuery对象alert($(btn))//[object Object]alert(btn);//[object HTMLButtonElement]alert($btn2);//[object Object]var $h1 $(h1我是一个标题/h1)//会根据html代码创建元素alert($h1)//[object Object]是一个jQuery对象$(div).append($h1)//把创建的h1加入到div中})}) /script
/head
body div/divbutton idbtn01 typebutton点我一下/button
/body 四、jQuery对象 jQuery对象 - 通过jQuery核心函数获得到的对象就是jQuery对象 - jQuery对象是jQuery中定义的对象可以将其理解为DOM对象的升级 在jQuery对象中为我们提供了很多简单易用的方法来帮助我们简化DOM操作 - jQuery对象本质上是一个DOM对象的数组类数组 可以通过索引获取jQuery 对象中的DOM对象注意获取的是DOM对象 - 当我们修改jQuery对象它会自动修改jQuery对象中的所有元素 这一特点称为jQuery的隐式迭代 - 通常情况下jQuery对象的方法的返回值依然是一个jQuery对象 所以我们可以调用一个方法后继续调用其他的jQuery对象的方法 这一特性称为jQuery对象的 链式调用
