初识 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()
来源: http://www.bubuko.com/infodetail-2968852.html