ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

jQuery学习笔记(1)

2022-05-19 10:01:14  阅读:136  来源: 互联网

标签:jQuery 调用 函数 DOM 对象 元素 笔记 学习


1.jQuery的简介(Write less,do more)

一个优秀的JS库,主要的作用是简化对DOM对象的查询工作(本身的名字就是JS Query(查询)的缩写),并且同时实现了链式调用和读写合一的功能;

其本质是一个封装起来的自调用函数,其中大部分的方法都放在了jQuery这个量上,然后暴露jQuery和$(两者相等)作为全局属性来方便被调用;

jQuery和$都是函数,在调用时根据这两个时根据传参的不同会有不同的效果,而且会返回这个函数的实例对象,无论是函数对象还是实例对象都被添加了各自的方法(函数对象的方法相当于构造函数的静态数据)

2.如何使用jQuery

引入:一般开发的时候使用未压缩的版本(后缀带min的是压缩版本)

(1.)直接复制代码到js文件中,然后再通过script标签引入;

(2.)通过CDN远程服务器引入(比如BootCDN)

(3.)如果有Node环境,可以直接下载jQuery模块

使用:(1.)$和jQuery这两个等同的函数对象

(2.)jQuery对象

------------------------------------------------------------------------------------------------------------------------------------------------------------------

jQuery核心函数部分

3.jQuery核心函数

(1.)作为函数调用

传参为函数时,DOM(文档)加载完毕后执行此函数,相当于window.onload()=function来绑定文档加载完成的监听

参数为选择器字符串(相比css的选择器会有所拓展)时,查找所有匹配的元素,会返回对应DOM元素的jQuery对象(内有数组形式);

参数为DOM元素时,将Dom对象封装为jQuery对象并返回;

参数为html标签时(得是带着尖括号的标签),创建标签对象并封装成jQuery对象,此时还没有在页面里面,如果想在网页中显示需要把它加入到文档中;

              

(2.)作为对象被调用方法                       

 一般是$.xxx(xxx)

比如$.each(数组或对象,回调函数)来实现对数组或者对象的遍历,每次遍历都会调用回调函数,并向它传参,第一个参数是下标,第二个是数值;

$.trim()向其传入字符串参数,消除两端的空格并返回;

具体功能查询文档;

4.关于this问题

(1.)JS原则上,谁调用函数谁就是函数中的this,但如果同时调用了某些改变this的方法如call()和apply(),this就会被改变;

(2.)在用jQuery对象绑定事件的回调函数时,函数中的this是被绑上事件的DOM元素,可以理解为在绑定事件时,jquery对象给其内部的DOM元素绑定了事件回调函数,所以时间触发时,是DOM对象调用的回调函数;

在遍历jquery对象时,函数中的this是DOM对象,可以这样理解比如$xxx.each(funcion())的形式,在each函数调用的那层jQuery对象是this,但在回调函数function中的this是DOM元素;

(3.)在调用某些方法时,this会发生变化(比如委派事件)

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

JQuery对象部分(即执行jQuery核心函数返回的对象)

jQuery内部是包含了DOM元素的伪数组(可能只有一个元素),可以用添加下标的方式来得到具体DOM元素;

JQuery对象的基本行为有:size()/length;[index]/get(index) (得到DOM元素);each()遍历传入回调函数,第一个参数是索引,第二个参数是DOM元素这时回调函数的this是DOM对象;index()得到在所在兄弟元素中的下标;

5.选择器

 

6.属性

 

7.css

8.事件

9.效果

10.文档

11.筛选

 

标签:jQuery,调用,函数,DOM,对象,元素,笔记,学习
来源: https://www.cnblogs.com/LIUZK12345/p/16282311.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有