如何使用jQuery
虽然已经是2021年了,但是jquery仍然是JavaScript应用非常广泛的库,学习jquery可以让我们学习一些封装的技巧。 window.jQuery()是我们提供的全局函数,jQuery的设计思想就是接受一个选择器,然后得到这些元素,然后返回一个对象可以操作这些元素。 核心思想:选择某个网页元素,然后对其进行某种操作。 构造函数jQuery()简写为$.
jQuery 如何获取元素
$(document)
$('#myId')
$('div.myClass')
$('input[name=first]')
jQuery 的链式操作是怎样的
因为jquery的方法每次return this ,就是返回一个对象,所以可以持续操作。
$('div')
.find('h3')
.eq(2)
.html('Hello');
jQuery 如何创建元素
$('fatherDiv').append('<p>hi</p>');
jQuery 如何移动元素
第一种方法是使用.insertAfter(),把div元素移动p元素后面:
$('div').insertAfter($('p'));
第二种方法是使用.after(),把p元素加到div元素前面:
$('p').after($('div'));
jQuery 如何修改元素的属性
.html() 取出或设置html内容
.text() 取出或设置text内容
.attr() 取出或设置某个属性的值
.width() 取出或设置某个元素的宽度
.height() 取出或设置某个元素的高度
.val() 取出某个表单元素的值
jQuery一些方法
$.trim() 去除字符串两端的空格。
$.each() 遍历一个数组或对象。
$.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中,则返回-1。
$.grep() 返回数组中符合某种标准的元素。
$.extend() 将多个对象,合并到第一个对象。
$.makeArray() 将对象转化为数组。
$.type() 判断对象的类别(函数对象、日期对象、数组对象、正则对象等等)。
$.isArray() 判断某个参数是否为数组。
$.isEmptyObject() 判断某个对象是否为空(不含有任何属性)。
$.isFunction() 判断某个参数是否为函数。
$.isPlainObject() 判断某个参数是否为用"{}"或"new Object"建立的对象。
$.support() 判断浏览器是否支持某个特性。
jQuery 用到的设计模式
- jQuery()是一个函数,但是我们构造其对象时却不需要使用new。
- 重载。$(支持多种参数)
- 用闭包隐藏细节。
- setter/getter。 $div.text()既可以读,又可以写。
- $.fn 是 $.prototype的别名。
- 适配器模式。jQuery会针对不同的浏览器使用不同的代码。
参考
- 阮一峰的博客
- jQuery API中文文档
- 自己使用jQuery封装DOMgithub链接
|