JQuery core functions and static methods

Heimin 2021-05-03 13:57:46
jquery core functions static methods


jQuery Core function

  • from jQuery As you can see in the document ,jQuery Core function 3 Categories: 4 Subclass
  • jQuery(callback) When DOM After loading, execute the incoming callback function
<script> $(function () { alert("123"); });</script>

  • jQuery([sel,[context]]) Receive a message containing CSS The string of selectors , Then use this string to match a set of elements , And packaged as jQuery object
<script> $(function () { // utilize jquery Get all div, What you get is a jQuery object var $box = $("div"); console.log($box); // utilize js Native syntax takes all div, What you get is a js object var box = document.getElementsByTagName("div"); console.log(box); });</script>
  • Native JS Objects and jQuery Object to object conversion
<script> $(function () { var $box = $("#box");// $box.text(" The new data ");// jQuery Object cannot use native js Object method // $box.innerText = " The new data ";// take jQuery Object to native js object // Be careful : No eq(0),eq Function returns jQuery Type object ,get Function returns a primitive type object // var box = $box.get(0); var box = $box[0]; box.innerText = " The new data "; var box2 = document.getElementById("box");// Native js Object cannot be used jQuery Object method // box2.text(" The new data 2");// Native js Objects can only use native js Method // box2.innerText = " The new data 2";// Will be original js Object to jQuery object var $box2 = $(box); $box2.text(" The new data 2"); });</script>

Tips: To facilitate communication and reading between developers , In general, all jQuery Operation related variables are preceded by $


  • jQuery(html,[ownerDoc]) according to HTML Tag string , Dynamically create DOM Elements
<script> $(function () { var $eles = $("<p> I am a span</p><u> I am a u</u>"); // Whether it's jQuery Found or created , What we end up with is always jQuery object console.log($eles); // Will create the DOM Element added to body in $("body").append($eles); });</script>

jQuery object

  • jQuery What is the nature of the object ?
    • jQuery The essence of an object is a pseudo array
var $div = $("div");console.log($div);var arr = [1, 3, 5];console.log(arr);
  • What is a pseudo array ?
    • Yes 0 To length-1 Properties of
    • And there are length attribute
var obj = {0:"lnj", 1:"33", 2:"male", length: 3}

jQuery Static methods

  • What is a static method ?
    • Static methods correspond to object methods , Object methods are called with instance objects , Static methods are called by class names
 <script> window.onload = function () { function AClass(){} AClass.staticMethof = function(){ alert(' Static methods '); } AClass.prototype.instaceMethod = function(){ alert(' Example method '); } // Static methods are called directly with class names AClass.staticMethof(); // Instance methods must be called with instance objects of the class var instace = new AClass(); instace.instaceMethod(); }</script>
  • jQuery.holdReady(hold) To suspend or resume jQuery.ready() The event passed in true or false
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>04-jQuery Static methods </title> <script src=" Code /js/jquery-1.12.4.js"></script> <script> // Use $ Call directly , It's a static method $.holdReady(true); $(function () { $("#first").click(function () { alert(" I'm the pop-up window you want "); }); }); </script></head><body><button id="first"> Click test to pop up </button><button id="second"> Release delay </button><script> $("#second").click(function(){ $.holdReady(false); });</script></body></html>

  • $.each(object,[callback]) Traversing objects or arrays has the advantages of unifying the way of traversing objects and arrays, and the order of callback parameters is more in line with our mode of thinking
<script> $(function () { // 3.1 Traversal array var arr = [1, 3, 5, 7, 9]; // 3.1.1 Traversing arrays through native methods // The first callback function parameter is the traversal element // The second callback function parameter is the index of the current traversal // Return value : no return value var res = arr.forEach(function (ele, idx) { console.log(idx, ele); }); console.log(res); // 3.1.2 adopt jQuery Static methods traverse arrays // The first callback function parameter is the index of the current traversal // The second callback function parameter is the traversal element // Return value : Array traversed var $res2 = $.each(arr, function (idx, ele) { console.log(idx, ele); }); console.log($res2); // 3.2 Traversing objects var obj = {name: "lnj", age:"33", gender:"male"}; // 3.2.1js Objects have no forEach Method , So pass forin Method traverses the object for(var key in obj){ console.log(key, obj[key]); } // 3.2.2 adopt jQuery Static methods traverse objects $.each(obj,function (key, value) { console.log(key, value); }); }); </script>

  • $.map(arr|obj,callback) Traversing objects or arrays , The return value of the callback function is composed of a new array to return
 $(function () { // 4.1 Traversal array var arr = [1, 3, 5, 7, 9]; // 4.1.1 Traversing arrays through native methods // The first callback function parameter is the traversal element // The second callback function parameter is the index of the current traversal // The third callback function parameter is the array currently traversed // Return value : Collect the return values of the callback function to form a new array var res = arr.map(function (ele, idx, arr) { console.log(idx, ele, arr); return ele + idx; }); console.log(res); // 4.1.2 adopt jQuery Static methods traverse arrays // The first callback function parameter is the traversal element // The second callback function parameter is the index of the current traversal // Return value : Collect the return values of the callback function to form a new array var $res2 = $.map(arr, function (ele,idx) { console.log(idx, ele); return ele + idx; }); console.log($res2); // 4.2 Traversing objects var obj = {name: "lnj", age:"33", gender:"male"}; /* obj.map(function (ele, idx, obj) { // Report errors , Native JS No, map Method console.log(idx, ele, obj); }); */ var $res = $.map(obj, function (value, key) { console.log(key, value); return key + value; }); console.log($res); });

  • $.trim(str) Remove spaces at the beginning and end of a string .
<script> $(function () { var str = " lnj "; console.log("---"+str+"---"); var $res = $.trim(str); console.log("---"+$res+"---"); });</script>

  • $.isArray(obj)
  • Determine if it's an array
<script> $(function () { // object var obj = {name:"lnj",age: "33", gender:"male"}; // True array var arr = [1, 3, 5, 7, 9]; var $res = $.isArray(obj); console.log($res);// false var $res2 = $.isArray(arr); console.log($res2);// true });</script>

  • $.isFunction(obj) Determine if it's a function
<script> $(function () { var obj = {name:"lnj",age: "33", gender:"male"}; var arr = [1, 3, 5, 7, 9]; var fn = function () {} var $res = $.isFunction(obj); console.log($res);// false $res = $.isFunction(arr); console.log($res); $res = $.isFunction(fn); console.log($res); // This method verifies what we said before ,jQuery Framework is essentially an anonymous function $res = $.isFunction($); console.log($res); });</script>

  • $.isWindow(obj) Judge whether it is window object
<script> $(function () { var obj = window; var arr = [1, 3, 5, 7, 9]; var arrlike = {0:"zs", 1:"ls", length:2}; var $res = $.isWindow(obj); console.log($res); // true $res = $.isWindow(arr); console.log($res); // false $res = $.isWindow(arrlike); console.log($res); // false });</script>



版权声明
本文为[Heimin]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/05/20210503135636598g.html

  1. Why did gitlab choose vue.js?
  2. HTTP-RPC: 轻量跨平台REST服务
  3. 继全面采用Node.js以后,PayPal分享大幅度踩坑GraphQL心得 - Mark Stuart
  4. vue组件化开发实战之滚动/轮播的实现
  5. Http-rpc: lightweight cross platform rest Service
  6. Following the full adoption of node.js, PayPal shares a great deal of graphql experience mark Stuart
  7. Implementation of rolling / carousel in Vue component development
  8. CSS是什么?这一篇全解,绝对有你想要的
  9. What is CSS? This is a complete solution, there is absolutely what you want
  10. 04-HTML5常用标签-HTML5极速入门
  11. 04-html5 common tags
  12. WEB前端全套零基础视频教程+软件2021最新编程视频
  13. Web front end full set of zero basic video tutorial + software 2021 latest programming video
  14. 使用Node, Mongo, React, Redux实现Token认证
  15. Using node, Mongo, react and Redux to realize token authentication
  16. 体面编码之CSS和HTML
  17. CSS and HTML for decent coding
  18. 使用Playwright基于多浏览器进行javascript自动化测试的简单教程- Applitools
  19. A simple tutorial for JavaScript automatic testing based on multi browser using playwright - applitools
  20. Minimum distance to target element
  21. 浅谈 React 中的 XSS 攻击
  22. XSS attack in react
  23. 自学前端教程整理,附不容错过的前端100篇文章合集
  24. Self taught front-end tutorial collation, with a collection of 100 front-end articles that can not be missed
  25. 使用OpenTracing跟踪Go中的HTTP请求延迟
  26. Using opentracing to track HTTP request latency in go
  27. Encapsulating databinding allows you to write less than 10000 lines of code
  28. 03-HTML5标签-HTML5极速入门
  29. 03-html5 tag-html5 quick start
  30. LayUI - 极易上手拿来即用的前端 UI 框架
  31. Layui - easy to use front end UI framework
  32. Interpretation of lodash source code (1)
  33. Why is the first parameter of node family callback error?
  34. 报告:JavaScript 开发者达1380 万,C#超越 PHP,Rust 增长最快
  35. Report: Javascript developers reach 13.8 million, C surpasses PHP, and rust grows fastest
  36. 小白前端入门笔记(10),怎么设置网站内部的超链接?
  37. How to set up hyperlinks inside the website?
  38. Using node and socket to realize online chat room
  39. The core competitiveness of Vue: data bidirectional binding
  40. React configuration agent
  41. CSS layout
  42. Application scenario explanation of Vue dynamic component
  43. Redux learning notes 04 -- using multiple reducers to manage data
  44. After three months of typescript writing, what have I learned?
  45. Node family - what is a callback?
  46. React -- a simple implementation of render & create element
  47. JS learning simple usage of jquery
  48. Seamless love
  49. 小白前端入门笔记(12),设置哑链接
  50. Small white front-end entry notes (12), set dumb links
  51. Vue2. X opens composition API and TSX
  52. Interview record and thinking of social recruitment for one and a half years (Alibaba, Tencent, baidu offer)
  53. Flex learning notes
  54. The most essential closure article in the eastern hemisphere
  55. 2021-05-03 hot news
  56. Sword finger offer -- reverse order pair in array (JS Implementation)
  57. Working process of scaffold
  58. Use decorator mode to strengthen your fetch
  59. [JS] scope (Introduction)
  60. Employment information statistics network (interface document)