jQuery复习整理（1）

jQuery是一个JavaScript库

方便地处理HTML，事件，动画等处理

HTML：HTML文档中的DOM节点，如添加删除等

事件：通过jQuery对页面的时间进行处理

动画：通过jQuery实现淡入，淡出，滑动等动画

另外可以兼容很多浏览器。

引入jQ

<script src=“../../../vendeor/jquery-3.3.1.js”></script>

这个引入放到最下面不会影响加载堵塞。

或者使用CDN（内容分发网络，节点服务器就近）如bootCDN找到jQuery，把地址加入scr中

使用CDN除了不浪费我们自己服务器。也加快了用户下载速度。

$jQuery全局变量别名 window.jQuery === window.$

其他jQ的属性，方法，函数等等，都定义在jQuery全局变量内。

$.xxx 调用Jq本身的属性和方法

$(xxx) 调用Jq本身的一些选择，返回Jq对象，xxx是查询表达式，或者dom元素

$(domObject)->jQuery Object

$(xxx).get(0)->Dom Object

$(xxx)[0]->Dom Object

jQuery对象：原生Dom封装，和原生Dom不一样，他们之间相互转化，jQuery对象包含了很多方法，方便操作DOM元素

任何元素用$()包裹住就是jQuery对象

jQuery对线换成Dom对线只要get(0)

jQ可以使用链式语法.....，写起来爽，不用每一次Dom搜索。因为会返回jQuery对象

页面加载完毕$(document).ready(function(){...}) 判断dom元素加载完毕没有，不会等图片内容框架的加载。

我们需要页面加载完毕才执行

jQuery选择器，返回0,1或者多个jQ元素集合，被封装到类数组，jQuery对象集合或者jQuery元素集合

集合内元素顺序在页面上顺序一样

选择器：http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp

Dom对象，即Dom元素，就是浏览器网络页面渲染出来的元素

jQuery对象是也对一组，0,1,多个jQuery对象的包装

检测：DOMObject.nodeType

            jQueryObject.jquery                 返回版本号

如果不是就是都是undefined，就是看他的属性是啥

转换：var jqueryObj = $(domObj);

var domObj = jqueryObj.get([inde]);

创建HTML元素：例子 var div =$('<div>Hello</div>');返回一个jQ对象，这个jQ对象和我们从页面选择的jQ对象是一样的

但是页面中是没有的，通过appendTo放到页面上div.appendTo('body') 就是追加到Body最后

添加属性：var link1 = $('<a>',{

            key1:value1,

            key2:value2})

需要声明空元素，如果有元素就无效了

或者

var link2 = $('<a>哈哈<a>').attr({键值对})

一旦有jquery对象集合，无论是选择出来的，还是创建出来的，都可以对集合操作

$('xxx').length 当我们吧jQ对象转换成dom对象就要用判长

提取元素：[index]返回Dom元素        get([index])返回dom元素或者元素集合   不加返回全部

eq(index)返回jquery对象 可以不传，但是什么都不会返回

方法，first()和last()第一个元素和最后一个元素

toArray()jQ对象之间转换成Dom元素数组 和不加参数的get一样     

jqqpi文档http://jquery.cuishifeng.cn/    查阅文档

通过关系查找jQuery对象:var element = $('#info').parents();所有的parents

可以传参parents('div')

大多数选择器，不如jQ方法快

.children()

返回文本节点.contents()

find()最常用的方法之一 比如$('#box').find('p') 通过选择器删选后代元素

children([selector])和contents()直接子元素都可以加选择器参数，没有孙子一说

find(selector)包括儿子和孙子

parent(selector)            返回直接父元素

parents([selector])           返回所有父元素

parentsUntil([selector])    获取到某一个层级，就停住了

closest(selector)元素本身开始逐级向上，进行匹配，返回最近的匹配，会先检测当前元素是否匹配

next([selector])      nextAll([selector])     nextUntil([selector])

近邻同辈，下一个            后面所有，所有同辈                      同辈直到匹配

prev([selector])        prevAll([selector])                prevUntil([selector])

往前查找 和next一样

siblings([selector])      元素集合，往前往后都要 不包含本身 没有单数形式

add(selector)比如       $('.item1').add('.item2').add('item3')

还有重载方式，略

删除元素

.not(selector)过滤元素

.filter()删选出not的补集

has()保留特定后代

slice(start[,end])返回区间左闭又开

map(callback)  转换元素

将一个Jq对象换成另一个Jq对象

$('div').map(function(index,domElement){

        return this.id;

})) ,返回三个字符串 就是id

可以返回null或者undefined选择返回那些

each(iterator)遍历 返回false就停止 break    返回true就是continue

is(selector)如果至少有一个元素符合给定参数，就返回true

end()回到最近的破坏性操作之前，任何对jQuery对象进行改变的操作 如果不是破坏性就是空对象

addBack([selector])进行破坏性操作，把原来的元素包含进来他就会让上一组的添加到dom中来

元素特性和属性：特性attributes 属性properties 

特性都是字符串，属性字符串，布尔，数字，对象

特性：console.log(checkbox.getAttribute('tabindex'))

console.log(checkbox.tabIndex)

check这种比较特殊一般用属性，特性获取不到

特性和属性会动态链接：如果attribute本来就在DOM对象中就存在，那么特性和属性就会同步

如果本身在DOM对象存在，但是类型为Boolean就不会同步 属性是布尔，特性没有

如果不是DOM内建属性，就不会同步

图片的属性和特性 同步，但是不一样

操作元素的特性：attribute特性和property属性，都会被翻译成属性，不用特意区分。

获取特性的值：attr(name)            获取第一个元素

设置特性的值：attr(name,value)             attr(attributes)就是比如img.attr({key1:value1，key2:value2....})

可以设置函数为值，可以加一些操作和判断

删除:removeAttr(name) 删除多个 用空格隔开

操作元素的属性：prop，和attr一样，我这里偷懒了o(╥﹏╥)o 布尔设置用prop      另外删除只能一个一个删

在元素中存取数据：data([name]) 不加，返回所有数据

设置数据的值：data(name,value) data(object)

删除removeData([data])        删除多个用数组(data1 data2 data3)    

判断是否有数据：jQuery.hasData(element)    element是dom对象

修改元素样式

addClass(names)增加类 空格隔开

removeClass(names)移除类

hasClass(names)    return 布尔值

toggleClass(names][,switch])  切换某各类  switch表示是否切换 ture的时候切换

css(name,value)   逗号分隔 函数为value第一个参数index，第二个参数是value，当前的值 return就是返回的

获取的value是有单位的parseInt(value,10)就可以转换像素

没有value就是获取值  name可以是数组['height','width']这类

操作尺寸，和位置

width(value)

height(value)

获取到的是没有单位的，元素本身，不包括内边距，边框和外边距

innerHeight(value)

innerWidth(value)

outerWidth(value)

outerHeight(value)

inner包含内边距，不包含边框和外边距

outer包换内边距和边框，不一定包换边距

offset(coordinates)返回对象集合中第一个元素相对于文档（document）的偏移位置，返回对象包含了两个整形的属性top和left，只对可见元素有效

position()相对于父级元素的距离，如果找不到就是浏览器文档的距离

scrollLeft(value)

scrollTop(value)           相对滚动条的位置  不加value就是查看 加了就是设置

获取或者设置元素内容

html()

html(content)                                       设置和获取html的值

text()

text(content)                                        设置和获取文本

移动和插入元素

.append(content[,content,...,content])       后面加

.prepend(content[,content,...,content])       前面加

.before(content[,content,...,content])       前面加(外部）

.after(content[,content,...,content])       后面加（外部）

反方法.appenTo(target)      .prepenTo(target)   .insertBefore(target)  .insertAfter(target)   

wrap(wrapper)    wrapAll(wrapper)    wrapInner(wrapper)  把内容包裹进去 

后面是标签或者是jq对象

remove([selector])  移除元素，删除了绑定的数据和附加的事件

detach   和上面一样，保存了绑定的数据和附加的事件

empty() 元素的内容删掉，元素还要

复制元素

clone([Even[,deepEven]])   第一个是否复制本身的事件和数据，第二个，后代也拖着跑

replaceWith(content)

replaceAll(target)

val()  设置值或者获取值