2019JAVA中ajax不高亮_jq Ajax 2019-11-14

1.ajax的异步请求之load

局部方法//用于局部加载

load()

$("#box").load("index.json");//可以加载json数据

$("#box").load("index.txt")可以加载文本或者别的数据;

//用于头部和脚部加载

/*$("#header").load("vew/header.html",function(data){

//console.log(data)

//$("h1").css("background","red");

});

$("#footer").load("footer.html");

load是一个post的请求

load()方法的参数有三个

第一个请求的url

第二个：发送的数据 json格式｛｝

第三个参数：回调函数

回调函数中有三个参数，分别是

function(res,type,xhr){

console.log(res);//成功响应的数据

console.log(type);//状态码

console.log(xhr);//deffered对象(类似于js中的promise对象)

}

$.get()//get请求

$.get(url, [data], [callback], [type])

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

$.post()//post请求

jQuery.post(url, [data], [callback], [type])

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

type:返回内容格式，xml, html, script, json, text, _default。

$.getJSON()获取json数据

jQuery.getJSON(url, [data], [callback])

url:待载入页面的URL地址

data:待发送 Key/value 参数。

callback:载入成功时回调函数。

$.getScript();获取script数据

jQuery.getScript(url, [callback])

url:待载入 JS 文件地址。

callback:成功载入后回调函数。

3ajax

$.ajax({

url:"url",

type:"get/post",

dataType:"json/jsonp/text/xml/html/script",

data:{},

success:function(data, textStatus, jqXHR){},

error:funciton(XMLHttpRequest, textStatus, errorThrown){};

jsonpCallback:"fn"

});

//获取数据

function box(res){

console.log(res);

}

$.ajax({

type: "get",//数据发送的方式(post 或者 get)

url: "/admin/index",//要发送的后台地址

data: {val1:"1",val2:"2"},//要发送的数据(参数)格式为{'val1':"1","val2":"2"}

dataType: "json",//后台处理后返回的数据格式

success: function (data) {//ajax请求成功后触发的方法

alert('请求成功');

},

error: function (msg) {//ajax请求失败后触发的方法

alert(msg);//弹出错误信息

}

});

});

7.jquery样式操作2

addClass() 为元素添加一个样式类

removeClass() 删除样式类

8，属性操作

attr("属性")：获取属性值

attr(“属性”，“属性值”)：设置属性值 可以添加自定义属性，也可以设置原属性

attr({}),设置多个属性

prop("checked")/prop("checked",true/false)：获取或设置返回值为boolean的属性

注意，attr不能操作返回值为boolean类型的属性，如checked / selected

9,内容操作

如果括号中没有参数，表示获取内容，有参数，表示设置内容

操作html标签

html(“

”)

text()

操作表单元素

val()

0.文档操作(dom操作)

append();向每个匹配的元素内部追加内容。这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。

appendTo()实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

prepend()向每个匹配的元素内部前置内容。这是向所有匹配元素内部的开始处插入内容的最佳方式。

prependTo()实际上，使用这个方法是颠倒了常规的$(A).prepend(B)的操作，即不是把B前置到A中，而是把A前置到B中。

before()在每个匹配的元素之前插入内容。

insertBefore()实际上，使用这个方法是颠倒了常规的$(A).before(B)的操作，即不是把B插入到A前面，而是把A插入到B前面。

after()在每个匹配的元素之后插入内容。

insertAfter()

remove()从DOM中删除所有匹配的元素

empty()删除匹配的元素集合中所有的子节点。

clone()克隆匹配的DOM元素并且选中这些克隆的副本。

11表单选择器

：text

: button

:radio

:checked 找到被选中的单选或复选按钮

:radio:checked 找到被选中的单选按钮

:lelected 找到被选中的下拉列表

：input 找到所有的表单项

12.基本动画

基本动画

show() 显示 参数1.执行时间，毫秒值 参数2：动画执行方式 linear swing 参数3：动画完成后的回调函数

hide() 隐藏

toggle() 切换

上拉/下拉

slideDown() 高度变化的动态改变

slideUp()这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。

slideToggle()通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。

淡入/淡出

fadeIn()通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

fadeOut()通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

fadeToggle()通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

改变透明度

fadeTo(time,opacity)

自定义动画

animate() 参数1，json｛attr:target｝ 参数2：执行时间 毫秒 参数3：回调函数

stop()没有参数 停止当前正在运行的动画 (其余动画正常运行)

stop(true) 一个参数true，表示停止该元素的所有动画

stop(true,true) 两个参数true,表示停止该元素的所有动画，但当前正在运行的动画会强制执行达到目标值

mouseover()和mouseenter的区别：前者会冒泡，后者不会产生冒泡

one():为元素绑定一次事件

obj.one("事件",function(){})

事件切换：

$().hover(function{

触发移入事件()

},function(){

触发移出事件

})

15.scrollTop()获取页面滚走的距离

$(window).scroll(function(){

console.log($("body,html").scrollTop());//body无doctype声明时使用

$("body,html")

})

$("body,html").scrollTop(0)；//传递参数时，为设置页面滚走的距离

16.offset方法和position()方法

offset()获取相对于文档顶部和左侧的偏移量，结果是一个对象，有两个属性，left和top

position()获取离该元素最近的具有定位的元素的偏移，结果是一个对象，有两个属性，left和top

17jquery插件

//全局定义插件

$.extend({

sayHello:function(a){

alert(a)

}

})

//调用：

$.sayHello("Hello")

//局部插件定义：必需通过jquery选择器调用

$.fn.extend({

sayHello:function(a){

alert(a)

},

eat:function(a){

alert(a)

}

})

//调用局部插件

$("body").eat("吃饭")

对象合并

var obj = $.extend({name:"Tom",age:23},{name:"Tom",age:54},{phone:123})