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()