文章目录
如何使用jQuery
搜索框输入 cdn jquery
链接cdn jquery
点击自己需要的jquery版本,复制script标签即可
我一般是选择jquery.min.js
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
虽然已经是2021年了,但是jquery仍然是JavaScript应用非常广泛的库,学习jquery可以让我们学习一些封装的技巧。
window.jQuery()是我们提供的全局函数,jQuery的设计思想就是接受一个选择器,然后得到这些元素,然后返回一个对象可以操作这些元素。
核心思想:选择某个网页元素,然后对其进行某种操作。
构造函数jQuery()简写为$.
jQuery 如何获取元素
$(document) //选择整个文档对象
$('#myId') //选择ID为myId的网页元素
$('div.myClass') // 选择class为myClass的div元素
$('input[name=first]') // 选择name属性等于first的input元素
jQuery 的链式操作是怎样的
因为jquery的方法每次return this ,就是返回一个对象,所以可以持续操作。
$('div') //找到div元素
.find('h3') //选择其中的h3元素
.eq(2) //选择第3个h3元素
.html('Hello'); //将它的内容改为Hello
jQuery 如何创建元素
$('fatherDiv').append('<p>hi</p>'); //利用append在父元素fatherDiv中加入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链接