jQuery学习笔记(1)

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()向其传入字符串参数,消除两端的空格并返回;

$.type(obj)判断数据类型

$.isArray(obj)判断是否为数组

$.isFunction(obj)判断是否为函数

$.parseJSON(json)将json字符串转为js对象/数组

具体功能查询文档;

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元素;

伪数组是指用[数字]来给对象添加DOM对象(用"."添加对象属性,字符串不用加" ",默认转变为字符串,键名不能是变量和数字,用[ ]中括号添加属性,键名可以是变量,字符串(需要特地加" "来和变量区分)和数字)

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

5.选择器

(1.)基本选择器

id选择器('#id')

类选择器('.class')

标签选择器('div')

通配选择器('*')

并集选择器("xxx,ccc")

交集选择器("xxxccc")

(2.)层次选择器

后代选择器("ul span")

子代选择器("ul>span")

兄弟选择器(".box>li")选中当前元素的同级的下一某元素

兄弟姐妹选择器(".box~li")选中当前元素后面的同级的所有具体元素

(3.)过滤选择器(指在已匹配的元素中进一步进行筛选)

选择第一个:first

选择最后一个:last

选择所有不为...的:not(...)

选择奇偶数下标元素 :even(偶数下标) :odd(奇数下标)

选择某个下标元素 :eq(索引)

选择大于给定索引值的元素 :gt(索引)

选择小于给定索引值的元素 :lt(索引)

值的注意的是gt和lt的筛选是动态的,即比如某些元素先被gt筛选了,这时再用lt筛选,基于的是gt筛选后的元素而不是一开始的元素,即多个选择器不是同时执行的而是顺序执行;

选择内容为xxx的元素 :contains("xxx")

选择隐藏或者可见的元素 :hidden和:visable

选择有xxx属性的元素 :[xxx]或者宣布择xxx属性为aaa的元素 :[xxx=aaa]

等等其他选择器,详见文档

(4.)表单选择器

分为两部分,一个是找表单,二是根据表单对象属性进行筛选;

比如:text找到text表单,再来一个:disabled属性来找不可选中的文本输入框;

详见文档表单选择器部分;

6.属性

 attr()如果传属性的name,会返回属性值;

传属性名和属性值,会修改属性,但这是覆盖,比如设置了一个类名,会把原来的类名覆盖掉;

prop()大体与attr()类似,但prop()主要是处理属性值为布尔值的属性.attr()处理属性值为非布尔值的属性;

removeAttr(name)删除属性;

addClass(类名)传入类名给元素添加class,不会覆盖;

removeClass(类名)删除元素的某个属性

html()取内部文本,如果有参就是设置文本;

val()得到输入框的值,如果有参就是设置值;

7.css

 

8.事件

9.效果

10.文档

11.筛选