What are the commonly used jquery methods?-JS Tutorial-php.cn

What are the commonly used jquery methods?

一个新手

Release： 2017-09-18 09:49:52

Original

2411 people have browsed it

jquery effect

1.隐藏/显示  hide（），show（），toggle（）
2.淡入/淡出  fadeIn（），fadeOut（），fadeToggle（），fadeTo（）

Copy after login

fadeTo（speed，opcity）这个不常用，但是效果好。opcity取0~1之间的值

Copy after login

3.滑动  slideUp（），slideDown（），slideToggle（）
4.动画  animate（）       $().animate(参数,speed,callback);

Copy after login

注：动画的属性名称必须使用marginLeft这种而不是margin-left
可以设置相对值。如："left":"+=10px"
animate()可以设置队列动画，即动画的不同属性按顺序写，他就会按顺序执行

Copy after login

5.stop（stopAll,goToEnd）
Copy after login

 该方法在动画执行完之前就可以结束动画。适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。
    stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画
    goToEnd 参数规定是否立即完成当前动画。默认是 false。

Copy after login

6.jquery chain

$("#p1").css("color","red")
 .slideUp(2000)
 .slideDown(2000);
jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行。

Copy after login

Note: The above methods all have callback functions. If the callback is an anonymous function, it can be executed immediately. The function name is toggle and the execution is completed.

jquery HTML

Return content

1.html(),text(),val()(这三种方法同样存在回调函数)

Copy after login

html或者text或者val（function（i，origvalue）{}）
回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。
区别：html（）可以返回标签结构，其他两个只返回文本

Copy after login

2.attr()和prop的区别 (这种方法同样存在回调函数)

Copy after login

我觉得attr用与获取和设置自定义的属性。prop用于获取标签固有的属性
attr（function（i，origvalue）{}）

Copy after login

3.添加文本append（），prepend（）。before（），after（）

Copy after login

前两个是在所选元素里面的前后添加
后两个是在所选元素的外部的前后添加

Copy after login

4.删除元素/内容    remove（），empty（）

Copy after login

前者删除被选元素及其子元素
后者删除被选元素的子元素

Copy after login

5.操作css       addClass（”class1,class2,,,”）,removeClass(),css()    注：css方法和animate（）方法不同，css方法属性使用的是margin-left而不是marginLeft
6.元素尺寸

Copy after login

width（），height（），innerWidth（），innerHeight（），outerWidth（），outHeight（）
width()，height（）==元素的宽高（不包括padding， margin，和border）
innerWidth（），innerHeight（）==元素的宽高+padding（不包括margin和border）
outerWidth（），outHeight（）==元素的宽高+padding+border（不包括margin）

Copy after login

jquery traversal

1.父   parent（），parents（）； 
2.子   children（），find（） 
3.同胞 siblings（）,pre（）,next（） 
4.过滤  first（），last（），eq（），filter（），not（） 
  $(“p”).filter(“.url”);返回带有类名 “url” 的所有
元素： 
  $(“p”).not(“.url”);返回不带有类名 “url” 的所有
元素：
**

Copy after login

jquery Ajax

Syntax: $.ajax({name:value, name:value, … })
Ajax asynchronous request five Steps
Step one:

var xmlhttp;if (window.XMLHttpRequest)
{    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}else{    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

Copy after login

Step two: Set parameters

url：”“， type:”“， success: ，error：等

Copy after login

Step three and four:

xmlhttp.open(“GET”,”url”,true); 
  例如：”a.php?t=” +Math.random()” 
   xmlhttp.send();

Copy after login

Step 5:

xmlhttp.onreadystatechange=function() { 
      if (xmlhttp.readyState==4 &&
xmlhttp.status==200) 
      { 
          document.getElementById(“myp”).innerHTML=xmlhttp.responseText; 
      } }

Copy after login

get is different from post: get is submitted to the address bar. Post is submitted to the background php page. So if it is a get method, please write the url like this: For example: "a.php?name=zhangsan&age=14"

Finally, we will process the data returned by the server

xmlhttp.responseText; 获得字符串形式的响应数据。 xmlhttp.responseXML;  
获得 XML形式的响应数据。

Copy after login

ajax handles php/xml/jsp and other files the same way. Mainly depends on what the returned data looks like, and then handles it accordingly

Because many js frameworks use $ as the abbreviation symbol. If you use multiple frameworks, jquery will stop running.

Solution: jQuery noConflict() method

1. Create your own representation symbol instead of $

var jq = $.noConflict();
jq(document).ready(function(){
  jq("button").click(function(){
    jq("p").text("jQuery 仍然在工作!");
  });
});

Copy after login

2. Use jQuery to express it outside, and use $

$.noConflict();
jQuery(document).ready(function($){
  $("button").click(function(){
    $("p").text("jQuery 仍然在工作!");
  });
});

Copy after login

jquery JSONP

The src attribute of the script tag does not have the restriction feature of the domain name;

<!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>

Copy after login

The above is the detailed content of What are the commonly used jquery methods?. For more information, please follow other related articles on the PHP Chinese website!