核心概念和知识点

什么是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.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()