jQuery文档阅读笔记自整理——1.6w字笔记

最新推荐文章于 2022-12-15 17:02:02 发布

UndeFIned丶

最新推荐文章于 2022-12-15 17:02:02 发布

阅读量877

点赞数

分类专栏： JavaScript学习文章标签： jquery

Atuthor:Chen.orange

本文链接：https://blog.csdn.net/weixin_46313446/article/details/107243244

版权

这篇博客详细介绍了jQuery的基本用法，包括入口函数、冲突解决、核心函数、对象、静态和实例方法、事件处理、动画效果等。还探讨了jQuery的进阶内容，如apply和call方法、extend方法、DOM加载监听等，旨在帮助读者深入理解并掌握jQuery的使用技巧。

摘要由CSDN通过智能技术生成

一、jQuery 基本用法

1. 入口函数的写法

1：

$(document).ready(funciton () {
   
	// body
})

jQuery(docuement).ready(funciton () {
   
                        //body
})

3: 推荐

$(funciton () {
   
	// body
})

jQuery(funciton () {
   
	// body
})

2. jQuery 的冲突问题

比如 jQuery 的 $ 符号与其他框架冲突了，此时可以释放 $ 的使用权

// 1.释放$的使用权
        // 注意点: 释放操作必须在编写其它jQuery代码之前编写
        //         释放之后就不能再使用$,改为使用jQuery
        // jQuery原理.noConflict();
        // 2.自定义一个访问符号
        var c = jQuery.noConflict();
        c(function () {
   
            alert("hello lnj");
        });

3. 核心函数

$() :

可以接收一个函数
或者一个字符串、字符串选择器
或者一个字符串代码片段
或者一个 DOM 元素
返回的都是一个对象

4. 对象

什么是 jQuery 对象，它是一个伪数组，具有 length 属性

<body>
<div>div1</div>
<div>div2</div>
<div>div3</div>
 <script>
        $(function () {
   
            var $div = $("div");
            console.log($div);

            var arr = [1, 3, 5];
            console.log(arr);
        });
    </script>
</body>

5.静态方法和实例方法

定义一个类

直接添加给类的就是静态方法 -》直接通过类名调用
实例方法就是通过类的实例调用 -》创建一个实例（或者对象）

funciton AClass() {
   
    
}
AClass.staticMethod = funciton () {
   
    alert("111");
}

//调用
AClass.staticMethod();

AClass.prototype.instanceMethod = funciton () {
   
    alert("222");
}

var a = new AClass();
a.instanceMethod();

6. each 方法

原生的 forEach 方法：

第一个参数：遍历到的元素

第二个参数：当前遍历到的索引

注意：原生的 forEach 方法只能遍历数组，不能遍历伪数组

var arr = [1,2,3,4,5];
arr.forEach(funciton (value, index) {
   
	console.log(index,value); // 分别打印出索引号 和 值          
})

each 方法：

第一个参数：索引号

第一个参数：遍历到的元素

注意：可以遍历伪数组

var arr = [1,2,3,4,5];
$.each(arr,funciton (index,value) {
   
       console.log(inde,value);// 值与上面相同
})

7. map 方法

原生的 map 方法：

第一个参数：当前遍历到的元素

第二个参数：索引号

第三个参数：当前被遍历的数组

注意: 和原生的 forEach 一样，不能遍历伪数组

var arr = [1,2,4,5];
arr.map(funciton (value, index, array) {
   
	console.log(value, index);
	console.log(array);
})

jQuery 中的 map 方法：
第一个参数：要遍历的数组

第二个参数：每遍历一个元素之后执行的回调函数的参数

函数中的第一个参数：元素
第二个：索引
注意：它也可以遍历伪数组

var arr = [1, 3, 5, 7, 9];
var result = $.map(arr, function(value, index) {
   
	return value + index;
})

each 和 map 的区别：

each 返回值就是：

遍历谁就返回谁
each静态方法不支持在回调函数中对遍历的数组进行处理

map 返回值是：

遍历的数组形式返回
map静态方法可以在回调函数中通过return对遍历的数组进行处理, 然后生成一个新的数组返回

8. 其他静态方法

$.trim();

去除两端的空格
- 参数：需要出去空格的字符串
- 返回值：返回新字符串
注意：只会除去两边的空格，中间空格不会

$.trim("  myname is  ");//"myname is" 在控制台测试的

$.iswandow();

判断传入对象是否是 window 对象

$.isWindow(arr); // false

$.isWindow(window); // true

$.isArray()

判断是不是真数组, 返回布尔值

arr = [1,3,4,5];
$.isArray(arr); // true

…

9.holdReady 方法

作用：暂停 ready 执行

// $.holdReady(true); 作用: 暂停ready执行
$.holdReady(true);
$(document).ready(function () {
   
	alert("ready");
});

10.内容选择器

参数	作用
:empty	找到既没有文本也没有子元素的指定元素
:parent	找到有文本内容或有子元素的指定元素
:contains(text)	找到指定文本内容的指定元素
:has(selector)	找到包含指定子元素的指定元素

11. 属性节点

什么是属性？

对象身上保存的变量就是属性

如何操作属性：

对象.属性名 = 值
对象.属性名
对象[“属性名”] = 值
对象[“属性名称”]

什么是属性节点？

HTML 标签中添加的属性

如何操作属性节点？

DOM.setAttribute(“属性名称”, “值”)
DOM.setAttribute(“属性名称”)

属性和属性节点有什么区别？

任何对象都有属性，但是只有DOM对象才有属性节点

<body>
    <span name="aa"></span>

    <script>
        var span = document.getElementsByTagName("span")[0];
        span.setAttribute("name", "bb");
        console.log(span.getAttribute("name"));
    </script>
</body>

12.attr 方法

attr ( name | pro | key, value | fun )

获取或者设置属性节点的值
- 如果只传递一个参数，代表获取属性节点的值
- 如果传递两个参数，代表设置属性节点的值
- 注意：
  - 如果是获取：无论找到多少个元素，都只会返回第一个元素指定的属性节点的值
  - 如果是设置：找到多少个元素就会设置多少个元素，如果设置的属性节点不存在，系统会自动新增。

	<script>
        $(function () {
   
            /*
                1.attr(): 设置或者获取元素的属性节点值
            */

            // 传递一个参数, 返回第一个元素属性节点的值
            // console.log($("span").attr("class"));

            // 传递两个参数, 代表设置所有元素属性节点的值
            // 并且返回值就是方法调用者
            // console.log($("span").attr("class", "abc"));

            // 传递一个对象, 代表批量设置所有元素属性节点的值
            $("span").attr({
   
                "class": "123",
                "name": "888"
            });
        });
    </script>
</head>
<body>
<span class="span1" name="it666"></span>
<span class="span2" name="it222"></span>
</body>

removeAttr(name)

删除属性节点
删除多个节点用空格隔开

<body>
    <span class="span1" name="it666"></span>
    <span class="span2" name="lnj"></span>
    <script>
        $("span").attr("class", "1");
        $("span").attr("abc", "123");

        $("span").removeAttr("class name")

最低0.47元/天解锁文章

UndeFIned丶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery文档阅读笔记自整理——1.6w字笔记

文章目录一、jQuery 基本用法1. 入口函数的写法2. jQuery 的冲突问题3. 核心函数4. 对象5.静态方法和实例方法6. each 方法7. map 方法8. 其他静态方法$.trim();$.iswandow();$.isArray()9.holdReady 方法10.内容选择器11. 属性节点12.attr 方法attr ( name | pro | key, value | fun )13.prop 方法14. 操作类相关方法addClass( class | fn)removeCl
复制链接

扫一扫

专栏目录