jQuery基础知识

1.jQuery基础

概念：一个JS的库，是对ES，DOM，BOM的浅封装，让用户更便捷的操作

2.jQuery函数

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写了多个入口函数，这些函数都不会被覆盖

jQuery入口函数的四种写法：

// 第一种写法
  $(document).ready(function () {
    alert('hello jQuery')
  })
  // 第二种写法
  jQuery(document).ready(function () {
    alert('hello jQuery')
  })
  // 第三种写法 (推荐写法)
  $(function () {
    alert('hello jQuery')
  })
  // 第四种写法
  jQuery(function () {
    alert('hello jQuery')
  })

3.jQuery对象

概念：jQuery对象是一个类数组对象，jQuery方法都是对类数组中的元素进行批量操作的
注意：jQuery对象可以调用jQuery原型中的方法，但是普通的Element元素并不能调用，Element元素想要调用jQuery方法，只能使用$()将其转化为jQuery实例

4.核心函数和核心对象的使用

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

5.jQuery选择器

概念：jQuery的选择器和CSS中的选择器基本一致，能够通过选择器匹配相对应的标签并封装成为一个jQuery实例，以此进行实现事件

6.jQuery事件

1. on(event,[selector],[data],fn)
2. off(event,[selector],fn)
3. one(event,[selector],fn)
4. trigger(event,[data])
   jQuery的事件绑定还支持快捷绑定
5. click([data],fn)

事件解绑：
$obj.unbind() 无参数时表示解绑全部事件 第一个参数表示事件类型 第二个参数表示事件名称
注意：有on绑定的事件只能通过off进行解绑

事件代理：

// 第一个参数 事件类型 第二个参数(可选) 将要代理谁 第三个参数(可选) 传递给事件内部的参数 第四个参数 事件处理程序
// $('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])

7.事件类型

  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.表单事件 

8.jQuery中的DOM操作

  append()：将元素插入被选中元素的结尾
  appendTO()：将元素插入被选中元素的结尾
  prepend()：将元素插入被选中元素的开头
  after()：在被选中元素后插入内容
  before()：在被选中元素前插入内容
  clone()：复制当前的被选中元素 参数为布尔值 false为浅复制 默认（只复制节点不复制内容）
  true为深复制（复制节点和内容）

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

9.jQuery的静态方法

  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? ")+'--'

最后

以上就是雪白大米为你收集整理的jQuery基础知识的全部内容，希望文章能够帮你解决jQuery基础知识所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。