jQuery初识、函数、对象

初识jQuery

官方地址：http://jquery.com/

what：一个优秀的JS函数库(封装了BOM、DOM(主要))

why：

HTML元素选取(选择器)

HTML元素操作

CSS操作

HTML事件处理

JS动画效果

链式调用

读写合一

浏览器兼容

易扩展插件

ajax封装

。。。

使用

1、引入jQuery库

2、使用jQuery

  使用jQuery核心函数($/jQuery)

jQuery库向外直接暴露的就是$/jQuery

当函数用：$(xxx)

当对象用：$.xxx()

  jQuery核心对象：执行$()返回的对象

得到jQuery对象：执行jQuery函数返回的就是jQuery对象

使用jQuery对象：$obj.xxx()

区别2种js库文件

 开发版(测试版，未压缩版)，生产版(压缩版)

区别2种引用JS库方式

 服务器本地库

 CDN远程库

  项目上线时，一般使用比较靠谱的CDN资源库，减轻服务器负担

区别jQuery的不同版本

 1.X：兼容蓝版本IE,文件更大

 2.X:部分IE8及以下不支持，文件小，执行效率更高

 3.X：完全不再支持IE8及以下版本，提供了新的API,提供不包括ajax/动画API的版本

jQuery的2把利器

1、jQuery函数：直接可用

作为一般函数调用：$(parm)

 1)、参数为函数：DOM加载完成后，执行回调函数$(function()){ }

 2)、参数为选择器字符串：查找所有匹配的标签，并封装成jQuery对象$('#btn').click(function){ }

 3)、参数为DOM对象：将DOM对象封装成jQuery对象alert($(this).html)

 4)、参数为html标签字符串：创建标签对象并封装成jQuery对象$('<input type="text" name="msg"/><br/>')

作为对象使用：$.xxx()

 1)、$.each():隐式遍历数组

 2)、$.trim():去除两端空格

2、jQuery对象：执行jQuery函数得到它

理解：执行jQuery核心函数返回的对象

 jQuery对象内部包含的是dom元素对象的伪数组(可能只有一个元素)

 jQuery对象拥有很多有用的属性和方法，能方便操作dom

属性/方法：

基本行为

  size()/length：包含的DOM元素个数$xxx.size(),$xxx.length

  [index]/get(index):得到对应位置的DOM元素$xxx[i].innerHTML,$xxx.get(i).innerHTML

  each()：遍历包含的所有DOM元素

$xxx.each(function(index,domEle){
console.log(index,domEle。innerHTML)
})
$xxx.each(function(){
console.log(this)
})

  index():得到所在兄弟元素的下标$('#xxx').index()

属性操作内部标签的属性或值

CSS操作标签样式

文档对标签进行增删改

筛选根据指定的规则过滤内部的标签

事件处理事件监听相关

效果实现动画效果

伪数组

object对象length属性数值下标属性

没有数组特别的方法：forEach(),push(),splice()