关于jQuery、AJAX、JSON（一）
1.jQuery对象 DOM对象的相互转换：
//DOM转jQuery:
//转化后才可以使用jQuery的方法；
var obj=document.getElementById("div");
var $obj=$(obj);
$obj.html("今天天气不错");
//jQuery转DOM:
var $obj=$("#div");
var obj=$obj.get(0);
obj.innerHtml="今天有你"；
2.获取css里面的style：
console.log(getComputedStyle(a).opacity);
3.clone（）分离的行为复制不过来
clone（true）可以全部复制过来
多练习 you can run more than you think
4.浏览器解析过程
浏览器解析服务器返回内容
生成DOM树
渲染最后画面
5.window.onload与 $(document).ready(function(){})
前者只能一个页面有一个
后者可以有多个
前者必须要在整个页面加载完毕时执行
后者是DOM树加载完毕之后执行
6.多个库并存jquery交出控制权$符号的使用
jQuery.noConflict();
$(function($){})这里面可以使用jQuery；
7.事件绑定 $().bind('click',fun(){});
事件冒泡：子节点的事件会影响到父节点
防止事件冒泡：e.stopPropagation();
===============================================================
8.jQuery 类数组操作：
属性：length：当前对象所封装的数据长度和元素个数；
方法: 1.$obj.each(function(i){
this是DOM元素
});
2.eq（index）也是DOM元素
3.get（）DOM元素
4.index（obj）获取指定obj在当前数组中的索引；（obj可以是DOM对象也可以是jQuery对象）
======================================================================
9.jQuery的插件和帮助:
官方插件网站:http://plugins.jquery.com
http://www.oschina.net 开源中国社区
10.三种常用插件jQueryUI my97DatePickerBeta formValidator
==========================================================================
jQuery 再次学习：
jQuery--js库 对js进行封装
1.lQuery--自己练习对js进行封装
2.学习jQuery--选择器 动画 方法
3.jQuery 插件
4.制作插件
制作库：
lQuery--
//lQuery 对象
var LQObject = function (){
this.data = [];
}
LQObject.prototype={
}
//$对象：
用于根据选择器获取页面元素，并将获得的元素放到LQObject中
2.方法的连缀调用：return this
=========================================================================
制作插件：
1.添加全局函数：属于jQuery 通过$/jQuery直接调用的函数是全局函数如：$.each(arry,function(i,value){})
jQuery.myfun=function(){} 通过 $.extend({键值对})整合
2.解决各个插件命名冲突:命名空间
jQuery.liuPlug={
myfun:function(){}
},
}
3.对象函数：属于具体某一jQuery对象调用的函数:
jQuery.fn.changeBgColor = function(color) {
$(this).css("background-color", color)
}
4.参数传递问题：4.1简单参数（写几个传几个必须写）
4.2参数映射：通过json对象的方式传递参数，参数具体信息由json对象封装
4.3参数默认值:使参数映射更灵活，默认值可以不必传递参数，如果传递则覆盖默认值
合并对象的方法
4.4带回调函数的参数
===========================================================================
AJAX的学习：
Asynchronous Javascript and Xml
实质是使用XMLHttpRequest对象异步的向服务器发送请求
核心：XMLHttpRequest对象 callback函数
判断浏览器
if(window.XMLHttpRequest){
}
else{}
=====================================================================
<%response.getWriter().write("好使");%>
请求消息头
<form enctype=""></form>类型
text/plain
application/x-www-form-urlencoded(默认)文本 特殊字符
multipart/form-data(文件上传)
AJAX post方法时要更改 Content-type的值
setRequestHeader（“Content-Type”，“application/x-www-form-urlencoded”）
AJAX：
1.创建对象：。。。
2.方法：open（method,url asyn）
send(body) get方法：body为空 post方法：body：key=value&key1=value1
setRequestHeader（“Content-Type”，“application/x-www-form-urlencoded”）post方法 时重新设置请求消息头
3.属性：onreadystatechange
readyState:0 尚未初始化1初始化完成正在发送请求2请求完成3正在接收相应数据4接收数据成功
status：由服务器返回的状态：200 请求成功 404：资源未找到 500：服务器内部错误
4.responseText
5.异步处理方法：
创建对象 创建请求 设置回调函数 发送请求
//创建XHR对象
function creatXhr() {
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
return xhr;
}
function getServerText() {
//1.获取xhr对象
var xhr = creatXhr();
//2.创建请求
xhr.open("get", "testAJAX.html", true);
//3.设置回调函数
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
$("#showText").html(xhr.responseText);
}
}
//4.发送请求
xhr.send(null);
}
</script>
</head>
<body>
<button id="btn">创建xhr对象</button>
<div id="showText"></div>
<a href="javascript:getServerText();">提交数据</a>
</body>
6.responseXml 按标签名获取文本内容不能用innerHTML 要用dom firstChild nodeValue
if（获取的标签.length>0）{继续操作}
7.firebug 调试
==============================================================
8.通过jQuery调用AJAX：$.get("url?name="+username,null,callback)；
$.ajax({type:"post",url:"".data:"",datatype:"",success:callback})
9.浏览器缓存问题Cache：加时间戳方法：
function conUrl（url）{
var timestamp=（new Date（））.valueOf();
if(url.indexOf("?")>0){
url=url+&t=+timestamp;
} else{
url=url+"?="+timestamp;
}
}
10.中文乱码:页面端：1.encodeURI（参数）服务器端：new String(old.getBytes("iso8859-1","utf-8")) 2.两次encodeURI 服务器端 decode（“”“utf-8”）；
11.跨域访问页面:
function conUrl（url）{
if(url.substring(0,7)=="http://"){
url.replace("?","&")
url="Proxy?url="+url;
}
return url;
}
=============================================================
json:本地获取不了 只能http访问
转载于:https://www.cnblogs.com/liuguofu/p/9412110.html
关于jQuery、AJAX、JSON（一）相关推荐
- ajax+php+jq+面向对象,php+jquery+ajax+json的一个最简单实例
html页面: $(function(){ $("#send").click(function(){ var cont = $("input").seriali ...
- struts2 ajax html,Struts2+Jquery+Ajax+Json
现在使用Json来封装并且传递数据的情形是越来越多了,可怎么样在Struts2中来使用Jquery+Ajax+Json来协同工作呢?在网上查了下就那几个例子被转过来转过去的,还有很多例子根本行不通,这 ...
- EF 4.1+MVC3+Jquery Ajax+Json.Net+JqueryUI+IUnitOfWork+Repository 学习DEMO（暂停更新）
学习项目进行中,持续更新. SyntaxHighlighter貌似在2011wlw里报错,无法着色. EF记得在我搞Linq2Sql不久就放出声音出来了,说有多么多么好. 记得早先版本里尝鲜的时候我一 ...
- 13. jquery ajax json 学习
1. 新浪博客上的一个例子,原作者 http://blog.sina.com.cn/s/blog_6ce9e8870101de3t.html index.html <html> <h ...
- Jquery ajax json 不执行success的原因
溺水的鱼 最近在看jQuery的API文档,在使用到jQuery的ajax时,如果指定了dataType为json,老是不执行success回调,而是执行了error回调函数,极度郁闷.后面改为1.2 ...
- jquery ajax json转换出错Invalid JSON
ajax中json转换采用jQuery.parseJSON(json), 1.4版本后的jQuery.parseJSON(json)传入一个畸形的JSON字符串会抛出一个异常. 比如下面的都是畸形的J ...
- jquery ajax json传递数组,jQuery ajax 传递JSON数组到Spring Controller
jQuery ajax传递单个JSON对象到后台很容易,这里记录的是传递多个JSON对象组成的JSON数组到java 后台,并说明java如何解析JSON数组. 1.js代码 var relation ...
- jquery ajax json文件,jQuery ajax读取本地json文件
jQuery ajax读取本地json文件 json文件 { "first":[ {"name":"张三","sex": ...
- 基于Jquery+Ajax+Json+高效分页
摘要 分页我相信大家存储过程分页已经很熟悉了,ajax更是耳熟能详了,更别说我们的json,等等. 如果说您没用过这些东东的话,我相信看完这篇博文会对您有帮助的,,如果有任何问题不懂或者有bug没问题 ...
- jquery ajax json 数据的遍历
需求:进行ajax请求后,后台传递回来以下json数据 { "data":[ {"id":"1","name":&quo ...
最新文章
- 普通平键的主要尺寸有_餐厅放多大尺寸的餐桌合适？这几种尺寸，适合所有户型...
- 【Matlab】求解积分方程的数值解
- 谷歌提出 RNN 版 Transformer，或为长文本建模的当前最优解
- python 网页爬虫作业调度_第3次作业-MOOC学习笔记：Python网络爬虫与信息提取
- 奇虎360WEB平台部招贤纳士之服务端开发
- python_16(bootstrap)
- d3 v5 api arrays
- CSS3秘笈复习：第十一章
- 如何在腾讯云服务器部署web项目
- 让zotero支持markdown笔记
- 判断字符串是否为纯英文或纯中文
- 对校招生培养工作的建议_对我校招生工作的一些粗浅想法（精）
- 利用kali hydra 暴力破解Windows7（hydra的基本用法）会继续更新
- 兔云资讯_游戏研发工程师面试更新_20200801
- 华华跟奕奕玩游戏(数学期望递推式)
- [附源码]Python计算机毕业设计_旅游系统
- 隐私计算之全同态加密
- 网站收录链接分析之网站排名查询
- Backlight 背光
- Android手机QQ的UI自动化实践，死磕原理