最近一段时间在学jQuery,对jQuery基础有了初步的认识,下面是一些学习的总结。
了解jQuery
什么是jQuery?
具体来说,jQuery是:
一个JS函数库: write less, do more
封装简化DOM操作(CRUD) / Ajax
为什么用它?
强大选择器: 方便快速查找DOM元素
隐式遍历(迭代): 一次操作多个元素
读写合一: 读数据/写数据用的是一个函数
链式调用: 可以通过.不断调用jQuery对象的方法
事件处理
DOM操作(CUD)
样式操作
动画
浏览器兼容
如何使用: How?
引入jQuery库
- 本地引入与CDN远程引入
- 测试版与生产版(压缩版)
使用jQuery
- 使用jQuery函数: $/jQuery
- 使用jQuery对象: x x x ( 执 行 xxx(执行 xxx(执行()得到的)
jQuery的2把利器
- jQuery函数: $/jQuery
-
jQuery向外暴露的就是jQuery函数, 可以直接使用
-
当成一般函数使用人: $(param)
<1>param是function: 相当于window.onload = function(文档加载完成的监听)
<2>param是选择器字符串: 查找所有匹配的DOM元素, 返回包含所有DOM元素的jQuery对象
<3>param是DOM元素: 将DOM元素对象包装为jQuery对象返回 $(this)
<4>param是标签字符串: 创建标签DOM元素对象并包装为jQuery对象返回 -
当成对象使用: $.xxx
<1>each(obj/arr, function(key, value){}) <2>trim(str)
2.jQuery对象
-
包含所有匹配的n个DOM元素的伪数组对象
-
执行$()返回的就是jQuery对象
-
基本行为:
<1>length/size(): 得到dom元素的个数 <2>each(function(index, domEle){}): 遍历所有dom元素 <3>index(): 得到当前dom元素在所有兄弟中的下标
3.下面以代码的形式说明jQuery的两把利器:
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
console.log(typeof $) //$是一个function
console.log($ === jQuery) //true $与jQuery等同
console.log($ === window.$) //true $是一个全局函数
console.log(typeof $()) //"object" 这个对象就是jQuery对象
$('button').click(function () {
alert(this.innerHTML)
})
</script>
最近在忙着考试,对于jQuery的学习进度有所疏忽╮(╯▽╰)╭。。。。。