jQuery基础知识

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
jQuery函数是通过jQuery或$进行调用 $()是一个对象 $ && jQuery是一个函数

jQuery获取文档中的相应节点
$(选择器)：能够通过选择器找到文档中符合条件的Element元素并保存在jQuery对象中
$(Element元素)：将一个Element元素转化为一个jQuery对象
$(html片段)：将html片段转化为ELement元素再封装成为一个jQuery对象
$(匿名函数)：该函数在文档加载完后执行

 jQuery函数的调用
jQuery核心函数：$/jQuery
调用
  以函数调用：$(params)
  以对象调用：$.each()
jQuery核心对象：$()
执行jQuery函数的返回值是一个jQuery对象
使用jQuery对象：$obj.xxx()

 jQuery与原生js的入口函数的区别
1.原生js与jQuery的入口函数的加载模式不同，原生js会先等到DOM元素加载完毕且节点的内容也加载完毕
jQuery会等待DOM元素加载完毕，但是不会等待节点的内容加载完毕

2.原生js如果写了多个入口函数，只会执行最后一个，jQuery写了多个入口函数，这些函数都不会被覆盖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 第一种写法
  $(document).ready(function () {
    alert('hello jQuery')
  })
  // 第二种写法
  jQuery(document).ready(function () {
    alert('hello jQuery')
  })
  // 第三种写法 (推荐写法)
  $(function () {
    alert('hello jQuery')
  })
  // 第四种写法
  jQuery(function () {
    alert('hello jQuery')
  })

1
2
3
4
5
6
7
核心函数的使用：$(param)
    当参数为函数时，DOM加载完毕后执行这个回调函数
    当参数为选择器字符串时，查找匹配的标签并封装为jQuery对象
    当参数为DOM对象时，把DOM对象封装成jQuery对象
    当参数为HTML标签字符串时，创建标签对象并封装成为jQuery对象
静态方法：each() 隐式遍历数组 trim() 去除两端空格...

1
2
3
4
5
6
7
8
9
10
11
12
13
// 第一个参数 事件类型 第二个参数(可选) 将要代理谁 第三个参数(可选) 传递给事件内部的参数 第四个参数 事件处理程序
// $('body').on('click', function (event) {
//   console.log(event);
// })
// button做代理
$('body').on('click','button', [1,2], function (event, a, b) {
  console.log(event, a, b);
})
// 事件解绑 移除代理 使用off
// $('body').off('click', 'button')
// 模拟事件执行 trigger 第一个参数 事件类型 第二个参数 数组参数(传递给形参)
$('button').trigger('click', [1, 2])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  1.$(document).ready() 在文档完全加载完成后执行函数
  2.click() 点击事件被触发时调用函数
  3.dbclick() 双击元素时触发dbclick事件
  4.mouseenter() 鼠标指针穿过元素时触发事件
  5.mouseleave() 鼠标离开元素时触发事件
  6.mousedown() 鼠标移动到元素上方并摁下鼠标键时触发事件
  7.mouseup() 释放鼠标键时触发事件
  8.hover() 模型光标悬停时触发事件
  9.blur() 失去焦点时触发事件
  10.focus() 获得焦点时触发事件
  11.keydown() 按下键盘时触发事件
  12.keyup() 释放键盘键时触发事件
  13.表单事件 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  append()：将元素插入被选中元素的结尾
  appendTO()：将元素插入被选中元素的结尾
  prepend()：将元素插入被选中元素的开头
  after()：在被选中元素后插入内容
  before()：在被选中元素前插入内容
  clone()：复制当前的被选中元素 参数为布尔值 false为浅复制 默认（只复制节点不复制内容）
  true为深复制（复制节点和内容）

  操控HTML元素与属性的方法
  操控属性
    attr()：获取或者修改属性值 第一个参数是想要获取的属性名 第二个参数是修改的属性值
    removeAttr()：删除属性值
  操控样式
    addClass()：添加类名
    removeClass()：删除类名
    toggleClass()：切换类名
  获取内容
    text()：获得选择的元素的文本内容
    html()：获得选择元素的所有内容
    val()：获得表单字段的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
  each()：遍历数组和对象
    $.each(obj, function (key, value){}）
    
  map()：将一个数组的元素换到另一个数组中
    var arr=$.map( [0,1,2], function(n){}）
    
  toArray()：把jQuery集合中的DOM元素合成一个数组
    $('li').toArray()
    
  marge()：合并两个数组
    $.merge( [0,1,2], [2,3,4] )
    
  type()：测试对象的数据类型
    $.type($)
    
  isEmptyObject()：判断是否为空对象
    jQuery.isEmptyObject({})
    
  isPlainObject()：判断是否为纯对象（由构造函数或字面量形式创建的）
    jQuery.isPlainObject({})
    
  isNumberic()：判断是否是一个数字
    $.isNumeric("8e5")
    
  param()：将表单数组或对象序列化
    var str = jQuery.param(obj);
    
  parseJSON()：解析json字符串为数组/对象
    var json = '{"name":"Tom", "age":12}'
    
  trim()：去除字符串两端空格
    '--'+$.trim(" hello, how are you? ")+'--'