核心概念和知识点

什么是jQuery

  • jQuery 是对javascript的一种封装–js的函数库。
  • 用于客户端的开发,由美国人在2001年1月推出。

jQuery与javascript的区别

  1. 本质上的区别:jQuery是一个函数库,基于js语言编写出来的框架,实质上还是属于js。
  2. 代码书写不同,jq更简单。
  3. 使用方法不同:使用jQuery和javascript分别加载DOM,js只执行一次jq可以执行多次
  4. 获取class的方法不同。js没有默认的获取方式,jq可以通过$(".类名")来获取

jQuery的优势

  1. 轻量级
  2. 对浏览器的兼容性好
  3. 强大的选择器
  4. 完善的ajax
  5. 丰富的API文档和插件等

熟悉使用jQuery

  1. 获取相关的js文件

    • jquery-xxx.js 与 jquery-xxx.min.js区别:
      1. jquery-xxx.js:开发版本。给程序员看的,有良好的缩进和注释。体积大一些
      2. jquery-xxx.min.js:生产版本。没有缩进。体积小一些。程序加载更快
    • 引用 在页面上引用js文件
    • 基本使用语法:$(“选择器名”).操作
    • jQuery的文档就绪(加载)三种写法:
    1
    2
    3
    4
    /*方法1*/
    $(document).ready(function(){
    选择对象进行操作
    });
    1
    2
    3
    4
    /*方法2*/
    $().ready(function(){
    选择对象进行操作
    });
    1
    2
    3
    4
    /*方法3*/
    $(function(){ // 此方法最简洁
    选择对象进行操作
    });

window.onload和$(function)区别

  • window.onload 只能定义一次,如果定义多次,后边的会将前边的覆盖掉。
  • $(function)可以定义多次的。

jQuery对象与DOM对象的异同

什么是jQuery对象?

通过jQuery包装DOM(文档)对象后产生的对象,凡是在$(“”)中的都属于jQuery对象。

什么是DOM对象?

页面中元素的集合就是文档对象。

注意 🐟
1. jQuery对象与文档对象不能混合使用。
2. jQuery对象不能使用文档对象的属性及方法,同理文档对象也是。

注意 🐱
DOM(文档)对象与jQuery对象是可以相互转换的
js转jq:在dom对象的最外层用$()进行包裹即可。
jq转js:先获取jq对象:var jq=jq=(“选择器名”); $jq.get(索引);

jQuery库与其他库出现冲突问题(释放$的控制权)

  1. 方法一:在代码的第一行加入:jQuery.noConflict();释放了jQuery的含义,如果仍需使用,需把含义,如果仍需使用,需把改为jQuery。

  2. 方法二

    1
    2
    3
    4
    var $jq=jQuery.noConflict();   /*赋值为一个变量*/
    $jq(function(){
    正常使用
    });

jQuery 选择器

jQuery选择器与CSS选择器的区别

  1. jQuery与CSS是两种不同的语言,jQuery是一个js框架,CSS是层叠样式表,所以两者本质上是不同的。
  2. 两者有一定交集,都是被网页或浏览器解析的语言,而jQuery可以通过修改浏览器的dom对象来实现对CSS的修改或控制。

总结,jQuery选择器应用于js中,CSS选择器用于CSS中,只是两者有时使用相同的id标识来选择对象。
jQuery选择器包含了CSS 1, CSS 2, CSS 3 中的绝大多数选择器。

jQuery选择器的优点

  1. 写法简洁
  2. 继承了CSS选择器的风格,支持CSS1–CSS3选择器
  3. 完善的处理机制可以避免浏览器报错,比单纯的CSS功能更强大,还可兼容不同的浏览器。

jQuery选择器的分类

  • 基本选择器
  • 层次选择器
  • 过滤选择器
  • 表单选择器

基本选择器

选择器名 描述 示例
id选择器: #id 根据id获取元素 $(“#test”)
类选择器: .class 根据类名获取元素 $(“.test”)
元素选择器: element 根据元素名称获取元素 $(“p”)
所有元素选择器: * 获取所有元素 $(“*”)
并集选择器: s1,s2… 将选择的所有元素合并 $(“div, span”)

jQuery的层次选择器

选择器 语法 描述
后代选择器 $("A B ") 选择A元素内部的所有B元素
子选择器 $("A > B") 选择A元素内部的所有B子元素

jQuery的属性选择器

选择器 语法 描述
属性名称选择器 $(“A[属性名]”) 包含指定属性的选择器
属性选择器 $(“A[属性名=‘值’]”) 包含指定属性等于指定值的选择器
复合属性选择器 $(“A[属性名=‘值’][]…”) 包含多个属性条件的选择器

jQuery 过滤选择器

选择器 语法 描述
首元素选择器 :first 获得选择的元素中的第一个元素
尾元素选择器 :last 获得选择的元素中的最后一个元素<
非元素选择器 :not(selector) 不包括指定内容的元素
偶数选择器 :even 偶数,从 0 开始计数
奇数选择器 :odd 奇数,从 0 开始计数
等于索引选择器 :eq(index) 指定索引元素
大于索引选择器 :gt(index) 大于指定索引元素
小于索引选择器 :lt(index) 小于指定索引元素
标题选择器 :header 获得标题(h1~h6)元素,固定写法

jquery 表单过滤选择器

选择器 语法 描述
可用元素选择器 :enabled 获得可用元素
不可用元素选择器 :disabled 获得不可用元素
单选/复选框选中选择器 :checked 获得单选/复选框选中的元素
下拉框选中选择器 :selected 获得下拉框选中的元素

jQuery表单选择器

语法 描述
$(“:input”) 选取所有的<input>,<textarea>,<select>,<button>元素
$(“:text”) 选取所有的单行文本框
$(“:password”) 选取所有的密码框
$(“:radio”) 选取所有的单选框
$(“:checkbox”) 选取所有的多选框
$(“:submit”) 选取所有的提交按钮
$(“:button”) 选取所有的按钮
$(“:hidden”) 选取所有的不可见元素

jQuery DOM操作

jQuery节点添加与删除

语法 示例 描述
append() 对象1.append(对象2) 将对象2添加到对象1元素内部,并且在末尾
appendTo() 对象1.appendTo(对象2): 将对象1添加到对象2内部,并且在末尾
prepend() 对象1.prepend(对象2): 将对象2添加到对象1元素内部,并且在开头
prependTo() 对象1.prependTo(对象2): 将对象1添加到对象2内部,并且在开头
empty() 对象.empty(): 将对象的后代元素全部清空,但是保留当前对象以及其属性节点
after() 对象1.after(对象2) 将对象2添加到对象1后边。对象1和对象2是兄弟关系
before() 对象1.before(对象2) 将对象2添加到对象1前边。对象1和对象2是兄弟关系
insertAfter() 对象1.insertAfter(对象2) 将对象1添加到对象2后边。对象1和对象2是兄弟关系
insertBefore() 对象1.insertBefore(对象2) 将对象1添加到对象2前边。对象1和对象2是兄弟关系
remove() 对象.remove() 将对象删除掉

jQuery节点的复制、替换、包裹

示例 描述
对象A.clone() 复制A对象
对象A.replaceWith(对象B) 把"A对象"替换为"B对象"
对象A.replaceAll(对象B) 使用"A对象"替换"B对象"
标签A.wrap(标签B) B标签分别包裹住每一个A标签
标签A.wrapAll(标签B) B标签包裹住所有A标签
标签A.wrapInner(标签B) B标签分别包裹住A标签内的所有文本内容

jQuery 节点属性操作

示例 描述
attr(“属性名”) 获取属性值
attr(“属性名”,“属性值”) 设置属性值
removeAttr(“属性名”) 移除属性

jQuery 节点样式操作

示例 描述
addClass(样式名) 添加样式
removeClass(样式名) 删除样式
toggleClass(样式名) 切换样式
css(“样式名”,“属性”) 添加单个样式
css({“样式名1”:“属性1” , “样式名2”:“属性2”…}) 添加多个样式
hasClass(样式名) 判断样式是否存在

jQuery html(), text(), val()方法

示例 描述
html()方法 用于设置或获取某个元素中的html内容
text()方法 用于设置或获取某个元素中的文本内容
val()方法 用于设置或获取某个元素的值

遍历节点

示例 描述
children() 获取当前的元素的子元素集合(父亲找儿子)
find() 获取当前的元素的所有后代元素集合(祖宗找后代)
parent() 获取当前元素的父元素集合(儿子找父亲)
parents() 获取当前元素的所有前辈元素集合(后辈找前辈)
siblings() 获取当前元素的所有同级元素集合(同辈找同辈)
next() 获取当前元素的下一个同级元素
prev() 获取当前元素的上一个同级元素

jQuery CSS的DOM操作

示例 描述
css()方法 设置或获取元素的样式属性
height(),width() 设置或获取高度、宽度属性

jQuery中的事件与动画

jQuery中的遍历补充

  1. jQuery对象.each(callback)
    语法:jQuery对象.each(function(index,element){});

    • index:就是元素在集合中的索引
    • element:就是集合中的每一个元素对象
    • this:获取到的当前元素对象
    • callback:回调函数
  2. $.each(object, [callback])

  3. for…of:for(元素对象 of 容器对象)

jQuery中的事件绑定

  1. jQuery的标准绑定方式
    • jQuery对象.事件方法(回调函数);
    • 注意:如果调用事件方法,不传递回调函数,则会触发浏览器默认行为。
    • 补充: 表单对象.submit();//让表单提交
  2. on()或者bind()绑定事件和off()或者unbind()解除绑定
    • jQuery对象.on(“事件名称”,回调函数)
    • jQuery对象.off(“事件名称”)
    • 如果off方法不传递任何参数,则将组件上的所有事件全部解绑
  3. 事件切换1:toggle(fn1,fn2,…)方法:模拟鼠标连续点击事件,对里面的函数进行切换。
    • jQuery对象.toggle(fn1,fn2…)
    • 当单击jQuery对象对应的组件后,会执行fn1.第二次点击会执行fn2…
    • 注意:1.9版本之后 .toggle() 方法删除,jQuery Migrate(迁移)插件可以恢复此功能。
  4. 事件切换2:hover(enter,leave)方法:模拟鼠标悬停事件,鼠标移到元素上触发第一个enter()函数,鼠标移除触发leave()函数

jQuery中的动画

  1. 显示/隐藏:show() / hide()组合方法:toggle()
  2. 淡入/淡出:fadeIn() / fadeOut()组合方法:fadeToggle()
  3. 滑入/滑出:slideUp() / slideDown()组合方法:slideToggle()
  4. 自定义动画:animate()