IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 如何使用jQuery -> 正文阅读

[JavaScript知识库]如何使用jQuery

如何使用jQuery

虽然已经是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 用到的设计模式

  1. jQuery()是一个函数,但是我们构造其对象时却不需要使用new。
  2. 重载。$(支持多种参数)
  3. 用闭包隐藏细节。
  4. setter/getter。 $div.text()既可以读,又可以写。
  5. $.fn 是 $.prototype的别名。
  6. 适配器模式。jQuery会针对不同的浏览器使用不同的代码。

参考

  1. 阮一峰的博客
  2. jQuery API中文文档
  3. 自己使用jQuery封装DOMgithub链接
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-09-08 10:37:59  更:2021-09-08 10:39:24 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 -2024/12/27 20:28:03-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码
数据统计