js高级与easyUI框架

一、JavaScript高级

1.ajax请求
ajax：局部刷新技术
使用场景：分页数据的刷新，二级联动，验证用户名是否重复，地图局部刷新
核心对象： JavaScript 对象 XMLHttpRequest
原生js:ajax使用：

1.一个事件监听：onreadystatechangeonreadystatechange存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数
2.两个状态 status readystatusstatus ：200: "OK"  请求成功404: "NOT FOUND" 没有找到对应资源500:"Server Error" 服务器端错误readystatus：存有 XMLHttpRequest对象的请求状态。从 0 到 4 发生变化。0: 请求未初始化            未创建1: 服务器连接已建立      open()方法2: 请求已接收            send()方法3: 请求处理中           服务器处理中4: 请求已完成，且响应已就绪   响应完毕
3.三个方法 open send setRequestHeaderopen(method,url,async) 创建请求，并且规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POSTurl：文件在服务器上的位置async：true（异步），一定要选择true或 false（同步）send(string)    将请求发送到服务器。string：仅用于 POST 请求，字符串必须是服务器URL编码格式（列如：param1=value1&param2=value2）;setRequestHeader(header,value)   ,添加额外的请求头信息，post提交必须使用向请求添加 HTTP 头。header: 规定头的名称value: 规定头的值注意：该方法必须在open与send之间调用； 原因：1、open之后，open是创建一个请求，或者理解为请求的基本准备，如果没有请求，何来设置请求头信息；2、send之前，send是发送一个请求，请求会把当前请求的头信息进行发送，发送后设置头信息无效；post提交必须使用：xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
例子：

<script type="text/javascript">function check(name){var ajax;try {//如果是其它浏览器，这句代码可以成功,ajax对象就拿到了ajax  = new XMLHttpRequest(); } catch (e) {//如果是IE，上面肯定会报错，被抓取,就执行下面这句代码(IE支持)ajax = new ActiveXObject("Microsoft.XMLHTTP"); }//拿到前台的用户名var username=name.value;//开启访问请求ajax.open("GET","/getUsername?username="+username,true);//监听事件ajax.onreadystatechange =function(){if(ajax.readyState==4&&ajax.status==200){alert(ajax.responseText);//后台都以字符串形式传到前台if(ajax.responseText=="true"){document.getElementById("mySpan").innerHTML="<font color='red'>用户太受欢迎</font>";}else{document.getElementById("mySpan").innerHTML="<font color='green'>放心食用</font>";}}}//发送请求ajax.send();}</script>

二、json

json：一种特殊定义的用来，网络传输的字符串，它有着特殊的格式，且存在json对象，可以直接取值，使用方便
json格式：[{“name”:“sss”,“age”:18},{“name”:“mmm”,“age”:18}]
json字符串与json对象的转换：
json字符串—>json对象：
1.var jsonobj=json.eval("("+jsonstr+")")
2.var jsonobj=JSON.parse(jsonstr)注意此方式必须json字符串是标准字符串格式
json对象—>json字符串
var jsonstr=‘jsonobj’;
案列：原生js ajax和json模拟登陆
需求：利用原生js ajax和json模拟登陆
思路：前台通过元素拿到对应的用户名和密码，将用户名和密码通过ajax请求传递到后台，后台判断数据是否正确，将信息以json字符串的方式传递到前台，前台将json字符串转换为json对象，取出信息
注意事项：post请求需要添加请求头信息

ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

</head>
<body>用户名：<input type="text" id="username"  />密码：<input type="text" id="pwd"  /><input type="button" onclick="check()" value="登录"/><span id="mySpan"></span>
</body>
<script type="text/javascript">function check(){var ajax;try {//如果是其它浏览器，这句代码可以成功,ajax对象就拿到了ajax  = new XMLHttpRequest(); } catch (e) {//如果是IE，上面肯定会报错，被抓取,就执行下面这句代码(IE支持)ajax = new ActiveXObject("Microsoft.XMLHTTP"); }//拿到前台的用户名var username=document.getElementById("username").value;var pwd=document.getElementById("pwd").value;ajax.open("POST","/getUser",true);ajax.onreadystatechange =function(){if(ajax.readyState==4&&ajax.status==200){//后台都以字符串形式传到前台/*   if(ajax.responseText=="true"){document.getElementById("mySpan").innerHTML="<font color='red'>登录成功</font>";}else{document.getElementById("mySpan").innerHTML="<font color='green'>登录失败</font>";}}*/var jsonobj=eval("("+ajax.responseText+")");if(jsonobj.isEnable){document.getElementById("mySpan").innerHTML="<font color='red'>登录成功</font>";}else{document.getElementById("mySpan").innerHTML="<font color='green'>登录失败</font>";}}}//设置请求头信息ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");var parmet="username="+username+"&pwd="+pwd;alert(parmet);ajax.send(parmet);} </script>

三、jQuery框架

jQuery：基于JavaScript的前端框架
特点：标签选择器、插件多、链式语法
jQuery操作：

1.引入jQuery依赖的js

2.jQuery的语法
$===jQuery

3.jQuery对象与dom对象
Dom对象：document.getElementById(“id”)
jQuery对象：$(“#id”)
Dom对象与jQuery对象的转换
Dom---->jquery
$(domobj)
Jquery—>Dom
Jqueryobj[0]

4.jQuery的选择器
1.id选择器
$("#id")当id重复时以第一个id有效
2.类选择器
$(".class")标签中有class相同都会被选中
3.元素选择器
$(“div”)所有div都效果
4.所有元素选择器
$("*")
5.多元素选择器
$(“div input”)
6.层选择器
$("#父标签子标签") 对于父标签下的所有标签都有效

$("#book li")<ul id="book"><li>西游记</li><li class="history">水许传</li><li id="redDream">红楼梦</li><li class="history">三国<ul><li>魏</li><li>蜀</li><li>吴</li></ul></li></ul>

$("#book >li")在给定元素匹配所有子元素

<ul id="book"><li>西游记</li><li class="history">水许传</li><li id="redDream">红楼梦</li><li class="history"></li><ul><li>魏</li><li>蜀</li><li>吴</li></ul></ul>

7.$(“form+input”)表示form外面相邻的一个input

8. $(“form~input”)表示form同辈的所有input

5.jQuery里面的事件
jQuery事件写法：
1.注册事件KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲id”).click(func…(“#id”).on(‘click’,function(){})
3.取消事件KaTeX parse error: Expected 'EOF', got '#' at position 3: (“#̲id”).off(“click…(“#id”).unbind(“click”)

6.案例：jQuery ajax二级联动
需求：需要在省份的选择同时刷新出对应身份城市的选择
思路：需要使用ajax请求和jQuery发送请求，json对象传输
步骤：
后台：1.将省份和城市封装在两个对象，且各自有通过id查询到地址的方法，且城市的查询是通过省份的id 省份的id通过前台传来
2.将查询的数据，通过json对象传递到前台
前台：1.打开网页查询省份信息得到前台传来的省份数据
2.将省份的id通过jQuery的ajax请求传递到后台
3.得到城市数据显示出来

city:
省份：
servlet:

四、easyUI框架

esayui框架:基于jQuery的UI插件集合
特点：多插件，基于jQuery
easyUI操作：

1.引入easyUI依赖

<!-- easyui的样式主题文件 -->
<link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
<!-- easyui的系统图标-->
<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
<!-- easyui依赖的jquery库-->
<script type="text/javascript" src="/easyui/jquery.min.js"></script>
<!-- easyui的插件库-->
<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
<!-- easyui的汉化包 -->
<script type="text/javascript" src="/easyui/locale/easyui-lang-zh_CN.js"></script>

2.组件三要素
属性、方法、事件
使用easyUI需要实现某个功能的时候：
1.找到对应的组件，在标签注册相应的组件功能比如class=“easyui-tabs”
2.在找到相应的标签调用组件的方法或者属性

js高级jQuery框架easyUI框架相关推荐

php赋值 jq,使用js和jQuery如何实现指定赋值方法
下面我就为大家分享一篇js和jQuery以及easyui实现对下拉框的指定赋值方法,具有很好的参考价值,希望对大家有所帮助. js实现: 1. 通过让第i个option为selected实现选中第i个 ...
easyui下拉框option_js和jQuery以及easyui实现对下拉框的指定赋值实例分享
本文主要为大家分享一篇js和jQuery以及easyui实现对下拉框的指定赋值方法,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧,希望能帮助到大家. js实现: 1. 通过让第i个o ...
基于asp.net + easyui框架，js实现上传图片之前判断图片格式，同时实现预览，兼容各种浏览器+下载...
2019独角兽企业重金招聘Python工程师标准>>> 最近在做图片上传的一个前台页面,上传图片功能虽然很简单,但是需要我们学习的地方很多.在上传图片之前验证图片的格式,并同时实现预 ...
前端Js框架 UI框架汇总特性适用范围选择
身为一个资深后端工程师,面对层出不穷的前端框架,总让人眼花缭乱,做一个综合解析贴,从全局着眼,让我们明白各种前端框架的应用范围,为如何选择前端框架,从不同的维度提供一些线索,做为一个长期优化贴,欢迎指 ...
EasyUI框架入门学习
为什么80%的码农都做不了架构师?>>> 前言新项目的开发前端技术打算采用EasyUI框架(基于EasyUI较为丰富的UI组件库),项目组长将前端EasyUI这块的任务分配给 ...
基于asp.net + easyui框架，一步步学习easyui-datagrid——界面（一）
从这篇博客,我会一步步的为大家讲解,easyui框架中最常用的一个控件datagrid.在使用easyui框架时,datagrid是使用最多的控件,它不仅好用,关键是实用. 我为大家建立一个博客更新的 ...
ASP.NET MVC+EF框架+EasyUI实现权限管理系列(14)-主框架搭建
ASP.NET MVC+EF框架+EasyUI实现权限管理系列(14)-主框架搭建原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(14)-主框架搭建 ASP.NET MV ...
ASP.NET MVC+EF框架+EasyUI实现权限管理系列(17)-注册用户功能的细节处理(各种验证)...
原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(17)-注册用户功能的细节处理(各种验证) ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框 ...
初识一款开源简单好用的前端框架——easyUI
easyUI入门前言:关于前端框架正文:easyUI的使用番外:如何开发自己的前端框架前言:关于前端框架前端框架的本质:个人理解实际上就是一大堆封装好的css和js文件,再作为外部引用在界面 ...

js高级jQuery框架easyUI框架