浅析jQuery设计模式

ChiLi
143 阅读3分钟

特殊函数jQuery

  • jQuery(选择器)用于获取对应元素，但它却不返回这些元素
  • 而是返回一个对象，称jQuery构造出来的对象
  • 这个对象可以操作对应的元素
  • jQuery 是一个不需要加 new 的构造函数
  • 口头约定 jQuery 对象代指 jQuery 函数构造出来的对象

  1. 选择网页元素

选择某个网页元素，然后对其进行某种操作

  • 一般是将一个选择表达式放进构造函数 jQuery() ,得到可以操作被选中元素的 jQuery 对象
  • 表达式的值一般为：
$(document) //选择整个文档对象

$('#myId') //选择ID为myId的网页元素

$('div.myClass') // 选择class为myClass的div元素

$('input[name=first]') // 选择name属性等于first的input元素

  1. 改变结果集 (查操作)

  • jQuery 提供强大的 api ,对结果集进行操作筛选
  • 与结果集有关系的元素也可操作
$('div').has('p'); // 选择包含p元素的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').parent(); //选择div元素的父元素
$('div').children(); //选择div的所有子元素

  1. 链式操作

  • 最终选中网页元素以后，可以对它进行一系列操作，并且所有操作可以连接在一起，以链条的形式写出来
  • 每一步的 jQuery 操作，返回的都是一个 jQuery 对象，所以不同操作可以连在一起
$('div') //找到div元素

   .find('h3') //选择其中的h3元素

   .eq(2) //选择第3个h3元素

   .html('Hello'); //将它的内容改为Hello

  1. 重载之元素的取值与赋值(改、查)

  • $(支持多种参数)
  • 使用同一个函数，来完成取值（getter）和赋值（setter）
  • "取值器"与"赋值器"合一。到底是取值还是赋值，由函数的参数决定
  • 结果集包含多个元素，那么赋值的时候，将对其中所有的元素赋值；取值的时候，则是只取出第一个元素的值
  • 但是 .text() 例外，它取出所有元素的 text 内容
$('h1').html(); //html()没有参数，表示取出h1的值
$('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值

  1. 元素的移动(改操作)

  • 提供两种方法操作元素在网页中的位置移动
  • 直接移动该元素 or 通过移动其他元素的位置达到相同的效果
//例如：需求：将p元素插入div元素中
1.使用.append(),在div元素中插入p元素
$('div').append($('p'))
2.使用.appendTo(),将p元素插入到div元素中
$('p').appendTo($('div')
  • 两种方法效果一样，不同的是操作视角不同，返回的元素也不同
  • 第一种返回div元素 第二种返回p元素
  • 使用这种模式的操作方法，一共有四对：
  .insertAfter()和.after()：在现存元素的外部，从后面插入元素
  .insertBefore()和.before()：在现存元素的外部，从前面插入元素
  .appendTo()和.append()：在现存元素的内部，从后面插入元素
  .prependTo()和.prepend()：在现存元素的内部，从前面插入元素

  1. 元素的创建、删除、清空、复制(增删)

  • 创建：将新元素传入jQuery的构造函数
  • 删除：.remove()和.detach()
  • 两者区别：前者不保留被删除元素的事件，后者保留，有利于重新插入文档时使用。
  • 清空：不等于删除 .empty()

  1. 用闭包隐藏细节

  2. 适配器：jQuery针对不同浏览器使用不同的代码

参考文献： 阮一峰的jQuery设计思想

avatar
文章
阅读
粉丝