JQuery核心函数和静态方法

黑敏 2021-05-03 13:57:11
函数 Jquery 静态 核心 和静


jQuery核心函数

  • 从jQuery文档中可以看出,jQuery核心函数一共3大类4小类
  • jQuery(callback)当DOM加载完成后执行传入的回调函数
<script> $(function () { alert("123"); });</script>

  • jQuery([sel,[context]])接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素,并包装成jQuery对象
<script> $(function () { // 利用jquery获取所有div,得到的是一个jQuery对象 var $box = $("div"); console.log($box); // 利用js原生语法获取所有div,得到的是一个js对象 var box = document.getElementsByTagName("div"); console.log(box); });</script>
  • 原生JS对象和jQuery对象相互转换
<script> $(function () { var $box = $("#box");// $box.text("新的数据");// jQuery对象不能使用原生js对象的方法// $box.innerText = "新的数据";// 将jQuery对象转换为原生js对象// 注意: 不是eq(0),eq函数返回的是jQuery类型对象,get函数返回的是原生类型对象// var box = $box.get(0); var box = $box[0]; box.innerText = "新的数据"; var box2 = document.getElementById("box");// 原生js对象不能使用jQuery对象的方法// box2.text("新的数据2");// 原生js对象只能使用原生的js方法// box2.innerText = "新的数据2";// 将原生js对象转换为jQuery对象 var $box2 = $(box); $box2.text("新的数据2"); });</script>

Tips:为了方便开发者之间沟通和阅读,一般情况下所有jQuery操作相关的变量前面加上$


  • jQuery(html,[ownerDoc])根据 HTML 标记字符串,动态创建DOM 元素
<script> $(function () { var $eles = $("<p>我是span</p><u>我是u</u>"); // 无论是jQuery找到的还是创建的,我们最终拿到的永远都是jQuery对象 console.log($eles); // 将创建好的DOM元素添加到body中 $("body").append($eles); });</script>

jQuery对象

  • jQuery对象的本质是什么?
    • jQuery对象的本质是一个伪数组
var $div = $("div");console.log($div);var arr = [1, 3, 5];console.log(arr);
  • 什么是伪数组?
    • 有0到length-1的属性
    • 并且有length属性
var obj = {0:"lnj", 1:"33", 2:"male", length: 3}

jQuery静态方法

  • 什么是静态方法?
    • 静态方法对应的是对象方法,对象方法用实例对象调用,而静态方法用类名调用
 <script> window.onload = function () { function AClass(){} AClass.staticMethof = function(){ alert('静态方法'); } AClass.prototype.instaceMethod = function(){ alert('实例方法'); } //静态方法用类名直接调用 AClass.staticMethof(); //实例方法必须用类的实例对象调用 var instace = new AClass(); instace.instaceMethod(); }</script>
  • jQuery.holdReady(hold)暂停或者恢复jQuery.ready()事件传入true或false
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>04-jQuery静态方法</title> <script src="代码/js/jquery-1.12.4.js"></script> <script> // 使用$直接调用,是静态方法 $.holdReady(true); $(function () { $("#first").click(function () { alert("我是你想要的弹窗"); }); }); </script></head><body><button id="first">点击测试弹出</button><button id="second">解除延迟</button><script> $("#second").click(function(){ $.holdReady(false); });</script></body></html>

  • $.each(object,[callback])遍历对象或数组优点统一遍历对象和数组的方式回调参数的顺序更符合我们的思维模式
<script> $(function () { // 3.1遍历数组 var arr = [1, 3, 5, 7, 9]; // 3.1.1通过原生方法遍历数组 // 第一个回调函数参数是遍历到的元素 // 第二个回调函数参数是当前遍历的索引 // 返回值: 没有返回值 var res = arr.forEach(function (ele, idx) { console.log(idx, ele); }); console.log(res); // 3.1.2通过jQuery静态方法遍历数组 // 第一个回调函数参数是当前遍历的索引 // 第二个回调函数参数是遍历到的元素 // 返回值: 被遍历的数组 var $res2 = $.each(arr, function (idx, ele) { console.log(idx, ele); }); console.log($res2); // 3.2遍历对象 var obj = {name: "lnj", age:"33", gender:"male"}; // 3.2.1js对象没有forEach方法,所以通过forin方法遍历对象 for(var key in obj){ console.log(key, obj[key]); } // 3.2.2通过jQuery静态方法遍历对象 $.each(obj,function (key, value) { console.log(key, value); }); }); </script>

  • $.map(arr|obj,callback)遍历对象或数组,将回调函数的返回值组成一个新的数组返回
 $(function () { // 4.1遍历数组 var arr = [1, 3, 5, 7, 9]; // 4.1.1通过原生方法遍历数组 // 第一个回调函数参数是遍历到的元素 // 第二个回调函数参数是当前遍历的索引 // 第三个回调函数参数是当前被遍历的数组 // 返回值: 将回调函数返回值收集起来组成一个新的数组 var res = arr.map(function (ele, idx, arr) { console.log(idx, ele, arr); return ele + idx; }); console.log(res); // 4.1.2通过jQuery静态方法遍历数组 // 第一个回调函数参数是遍历到的元素 // 第二个回调函数参数是当前遍历的索引 // 返回值: 将回调函数返回值收集起来组成一个新的数组 var $res2 = $.map(arr, function (ele,idx) { console.log(idx, ele); return ele + idx; }); console.log($res2); // 4.2遍历对象 var obj = {name: "lnj", age:"33", gender:"male"}; /* obj.map(function (ele, idx, obj) { // 报错,原生JS没有map方法 console.log(idx, ele, obj); }); */ var $res = $.map(obj, function (value, key) { console.log(key, value); return key + value; }); console.log($res); });

  • $.trim(str)去掉字符串起始和结尾的空格。
<script> $(function () { var str = " lnj "; console.log("---"+str+"---"); var $res = $.trim(str); console.log("---"+$res+"---"); });</script>

  • $.isArray(obj)
  • 判断是否是数组
<script> $(function () { // 对象 var obj = {name:"lnj",age: "33", gender:"male"}; // 真数组 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)判断是否是函数
<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); // 通过该方法验证了我们前面所说的,jQuery框架本质是一个匿名函数 $res = $.isFunction($); console.log($res); });</script>

  • $.isWindow(obj)判断是否是window对象
<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>



版权声明
本文为[黑敏]所创,转载请带上原文链接,感谢
https://www.seoxiehui.cn/article-318187-1.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)