jquery效果1.隐藏/显示 hide(),show(),toggle()
2.淡入/淡出 fadein(),fadeout(),fadetoggle(),fadeto()
fadeto(speed,opcity)这个不常用,但是效果好。opcity取0~1之间的值
3.滑动 slideup(),slidedown(),slidetoggle()
4.动画 animate() $().animate(参数,speed,callback);
注:动画的属性名称必须使用marginleft这种而不是margin-left
可以设置相对值。如:"left":"+=10px"
animate()可以设置队列动画,即动画的不同属性按顺序写,他就会按顺序执行
5.stop(stopall,gotoend)
该方法在动画执行完之前就可以结束动画。适用于所有 jquery 效果函数,包括滑动、淡入淡出和自定义动画。
stopall 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画
gotoend 参数规定是否立即完成当前动画。默认是 false。
6.jquery 链
$("#p1").css("color","red")
.slideup(2000)
.slidedown(2000);
jquery 会抛掉多余的空格,并当成一行长代码来执行上面的代码行。
注:以上方法都拥有回调函数, callback如果是匿名函数可以立即执行,函数名是toggle完了执行
jquery html返回内容
1.html(),text(),val()(这三种方法同样存在回调函数)
html或者text或者val(function(i,origvalue){})
回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。
区别:html()可以返回标签结构,其他两个只返回文本
2.attr()和prop的区别 (这种方法同样存在回调函数)
我觉得attr用与获取和设置自定义的属性。prop用于获取标签固有的属性
attr(function(i,origvalue){})
3.添加文本append(),prepend()。before(),after()
前两个是在所选元素里面的前后添加
后两个是在所选元素的外部的前后添加
4.删除元素/内容 remove(),empty()
前者删除被选元素及其子元素
后者删除被选元素的子元素
5.操作css addclass(”class1,class2,,,”),removeclass(),css() 注:css方法和animate()方法不同,css方法属性使用的是margin-left而不是marginleft
6.元素尺寸
width(),height(),innerwidth(),innerheight(),outerwidth(),outheight()
width(),height()==元素的宽高(不包括padding, margin,和border)
innerwidth(),innerheight()==元素的宽高+padding(不包括margin和border)
outerwidth(),outheight()==元素的宽高+padding+border(不包括margin)
jquery遍历jquery遍历
1.父 parent(),parents();
2.子 children(),find()
3.同胞 siblings(),pre(),next()
4.过滤 first(),last(),eq(),filter(),not()
$(“p”).filter(“.url”);返回带有类名 “url” 的所有
元素:
$(“p”).not(“.url”);返回不带有类名 “url” 的所有
元素:
**
jquery ajax**
语法:$.ajax({name:value, name:value, … })
ajax异步请求的五个步骤
第一步:
var xmlhttp;if (window.xmlhttprequest)
{ // ie7+, firefox, chrome, opera, safari 浏览器执行代码
xmlhttp=new xmlhttprequest();
}else{ // ie6, ie5 浏览器执行代码
xmlhttp=new activexobject("microsoft.xmlhttp");
}
第二步:设置参数
url:”“, type:”“, success: ,error:等
第三四步:
xmlhttp.open(“get”,”url”,true);
例如:”a.php?t=” +math.random()”
xmlhttp.send();
第五步:
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readystate==4 &&
xmlhttp.status==200)
{
document.getelementbyid(“myp”).innerhtml=xmlhttp.responsetext;
} }
get和post不一样: get是提交到地址栏。post是提交到后台php页面。 所以若是get方法,url请这样写:例如:”a.php?name=zhangsan&age=14”最后再来处理服务器给我们返回的数据
xmlhttp.responsetext; 获得字符串形式的响应数据。 xmlhttp.responsexml;
获得 xml形式的响应数据。
ajax处理php/xml/jsp等文件是一样的。主要看返回的数据是什么样子的,然后进行相应的处理
由于许多的js框架都在使用$作为简写的符号。如果使用多个框架将会使得jquery停止运行
解决办法:jquery noconflict() 方法1.创建自己的表示符号代替$
var jq = $.noconflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jquery 仍然在工作!");
});
});
2.在外边使用jquery表示,里边用$
$.noconflict();
jquery(document).ready(function($){
$("button").click(function(){
$("p").text("jquery 仍然在工作!");
});
});
jquery jsonp利用script标签的src属性没有域名的限制特点;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jsonp 实例</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script> </head><body><p id="box"></p><script>$.getjson("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
//data就是服务器返回给我们的数据,我们只需要对他进行处理即可
var html = '<ul>';
for(var i = 0; i < data.length; i++)
{
html += '<li>' + data[i] + '</li>';
}
html += '</ul>';
$('#box').html(html);
});
</script>
</body>
</html>
以上就是常用的jquery方法有哪些的详细内容。