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.筛选
