初识jQuery——jQuery基础

最近一段时间在学jQuery，对jQuery基础有了初步的认识，下面是一些学习的总结。

了解jQuery

什么是jQuery?

具体来说，jQuery是：
一个JS函数库: write less, do more
封装简化DOM操作(CRUD) / Ajax

为什么用它?

强大选择器: 方便快速查找DOM元素
隐式遍历(迭代): 一次操作多个元素
读写合一: 读数据/写数据用的是一个函数
链式调用: 可以通过.不断调用jQuery对象的方法
事件处理
DOM操作(CUD)
样式操作
动画
浏览器兼容

如何使用: How?

引入jQuery库

• 本地引入与CDN远程引入
• 测试版与生产版(压缩版)

使用jQuery

• 使用jQuery函数: $/jQuery
• 使用jQuery对象: $xxx(执行$()得到的)

jQuery的2把利器

1. 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的学习进度有所疏忽╮(╯▽╰)╭。。。。。