前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jQuery学习---核心函数和静态方法

jQuery学习---核心函数和静态方法

作者头像
syy
发布2020-05-21 09:57:02
1.1K0
发布2020-05-21 09:57:02
举报
文章被收录于专栏:多选参数

1. jQuery核心函数

1.1 jQuery([selector,[context]])

jQuery([selector,[context]]) 接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组元素,并包装成 jQuery 对象

· selector:用来查找的字符串

· context:作为待查找的 DOM 元素集、文档或 jQuery 对象。

代码语言:javascript
复制
1$("div > p"); //找到所有 p 元素,并且这些元素都必须是 div 元素的子元素。
2$(document.body).css( "background", "black" ); //设置页面背景色。
1.2 jQuery(html,[ownerDocument])

根据提供的原始 HTML 标记字符串,动态创建由 jQuery 对象包装的 DOM 元素。同时设置一系列的属性、事件等。

· html:用于动态创建 DOM 元素的HTML标记字符串

· ownerDocument:创建 DOM 元素所在的文档

代码语言:javascript
复制
1$("<div><p>Hello · 多选参数</p></div>").appendTo("body"); //动态创建一个 div 元素(以及其中的所有内容),并将它追加到 body 元素中
1.3 jQuery(callback)

允许你绑定一个在 DOM 文档载入完成后执行的函数。

· 函数的作用如同 $(document).ready() 一样,只不过用这个函数时,需要把页面中所有需要在 DOM 加载完成时执行的 $() 操作符都包装到其中来。

代码语言:javascript
复制
1$(function(){ //当DOM加载完成后,执行其中的函数。
2  // 文档就绪
3});

2. jQuery对象

在 JQuery 库中,可以通过本身自带的方法获取页面 DOM 元素的对象叫做 JQuery 对象。对象用 var 开头定义。

代码语言:javascript
复制
1var tDiv = $(“#divTmp”) //使用JQ获取元素后,就是JQuery对象了

3. jQuery静态方法

3.1 静态方法

· 静态方法对应的是对象方法,对象方法用实例对象调用,而静态方法用类名调用

代码语言:javascript
复制
 1window.onload = function () {
 2     function AClass(){}
 3     AClass.staticMethof = function(){
 4     alert('静态方法');
 5     }
 6     AClass.prototype.instaceMethod = function(){
 7     alert('实例方法');
 8     } 
 9     AClass.staticMethof(); //静态方法用类名直接调用
10
11     var instace = new AClass();
12     instace.instaceMethod(); // 实例方法必须用类的实例对象调用
13  }
3.2 jQuery.holdReady(hold)

暂停或恢复.ready() 事件的执行。

· hold 指示是否暂停或恢复被请求的 ready 事件

代码语言:javascript
复制
1$.holdReady(true);
2$.getScript("myplugin.js", function() {
3     $.holdReady(false);
4});
5// 延迟就绪事件,直到已加载的插件
3.3 jQuery.each(callback)

通用例遍方法,可用于例遍对象和数组。

· object: 需要例遍的对象或数组。

· callback: 每个成员/元素执行的回调函数。

代码语言:javascript
复制
1$.each( [0,1,2], function(i, n){
2  alert( "Item #" + i + ": " + n ); // 例遍数组,同时使用元素索引和内容。
3});
3.4 jQuery.map(arr|obj,callback)

将一个数组中的元素转换到另一个数组中。

· array: 待转换数组。

· callback Array: 为每个数组元素调用,而且会给这个转换函数传递一个表示被转换的元素作为参数。函数可返回任何值。

代码语言:javascript
复制
1$.map( [0,1,2], function(n){
2  return n + 4; //将原数组中每个元素加 4 转换为一个新数组。
3});
3.5 jQuery.trim(str)

去掉字符串起始和结尾的空格。

· str:需要处理的字符串

代码语言:javascript
复制
1$.trim("  hello, 多选参数!  ");  // 去掉字符串起始和结尾的空格。
3.6 jQuery.isArray(obj)

测试对象是否为数组。

· obj:用于测试是否为数组的对象

代码语言:javascript
复制
1var arr = [2, 4, 6, 8, 10];
2var $res = $.isArray(arr);
3console.log($res);    // 打印结果为 true
3.7 jQuery.isFunction(obj)

测试对象是否为函数。

· obj: 用于测试是否为函数的对象

代码语言:javascript
复制
1var git = function () {};
2$res = $.isFunction(git);
3console.log($res); // 打印结果为 true
3.8 jQuery.isWindow(obj)

测试对象是否是窗口(有可能是 Frame)。

· obj: 用于测试是否为窗口的对象。

代码语言:javascript
复制
 1<!DOCTYPE html>
 2<html>
 3<head>
 4  <script src="http://code.jquery.com/jquery-1.5.2.js"></script>
 5</head>
 6<body>
 7
 8<script>
 9$res = $.isWindow(window);
10console.log($res); // 打印结果为 true
11</script>
12
13</body>
14</html>

接下来就到选择器了,大家一起努力,哪里有不合适的还恳请大家留言指出,一定改正!

To be continued 。。。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-05-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 多选参数 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.1 jQuery([selector,[context]])
  • 1.2 jQuery(html,[ownerDocument])
  • 1.3 jQuery(callback)
  • 2. jQuery对象
  • 3. jQuery静态方法
    • 3.1 静态方法
      • 3.2 jQuery.holdReady(hold)
        • 3.3 jQuery.each(callback)
          • 3.4 jQuery.map(arr|obj,callback)
            • 3.5 jQuery.trim(str)
              • 3.6 jQuery.isArray(obj)
                • 3.7 jQuery.isFunction(obj)
                  • 3.8 jQuery.isWindow(obj)
                  领券
                  问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档