首页 > web前端 > js教程 > 常用的jquery方法有哪些

常用的jquery方法有哪些

一个新手
发布: 2017-09-18 09:49:52
原创
2403 人浏览过

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 = &#39;<ul>&#39;;    
    for(var i = 0; i < data.length; i++)
    {
        html += &#39;<li>&#39; + data[i] + &#39;</li>&#39;;
    }
    html += &#39;</ul>&#39;;

    $(&#39;#box&#39;).html(html); 
});
</script>
</body>
</html>
登录后复制

以上是常用的jquery方法有哪些的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板