JavaWeb系列十六: jQuery初步入门

跟老韩-JavaScript开发利器之jQuery

    • [1.1 原理示意图](#1.1 原理示意图)
    • [1.2 快速入门](#1.2 快速入门)
    • [1.2 什么是jquery对象](#1.2 什么是jquery对象)
    • [1.3 dom对象转jQuery对象](#1.3 dom对象转jQuery对象)
    • [1.4 jQuery对象转dom对象](#1.4 jQuery对象转dom对象)
  1. jQuery是一个快速的, 简洁的javaScript库, 使用户能更方便地处理HTML, css, dom...
  2. 提供方法, events, 选择器, 并且方便地为网站提供AJAX交互
  3. 其宗旨是-WRITE LESS, DO MORE, 写更少的代码, 做更多的事情
  4. jQuery实现了浏览器的兼容问题

1.1 原理示意图

1.2 快速入门

  1. 下载: https://jquery.com/download/, jquery就是一个JS库. jQuery作者在原生的JavaScript基础上, 封装好的方法, 对象等.
  1. Download the compressed, production jQuery 3.6.4, 就是压缩过的


  2. Download the uncompressed, development jQuery 3.6.4, 是没有压缩过的

  1. 新建JavaScript项目
  1. 选择JavaScript


1.2 什么是jquery对象

  1. jQuery对象就是对DOM对象进行包装后产生的对象
  • 比如: $("#test").html() 意思是指: 获取id为test的元素内的html代码. 其中html()是jQuery里的方法
  • 这段代码等同于用DOM实现代码:
    document.getElementById("id").innerHTML;
  1. jQuery对象是jQuery独有的. 如果一个对象是jQuery对象, 那么它就可以使用jQuery里的方法: $("#id").html();
  2. 约定: 如果获取的是jQuery对象, 那么要在变量前面加上, 比如: var variable = jQuery对象; 如果是DOM对象, 则var variable = DOM对象
  • var $variable : jQuery 对象
  • var variable : DOM对象

1.3 dom对象转jQuery对象

  1. 对于一个DOM对象, 只需要用()把DOM对象包装起来, 就可以获得一个jQuery对象了. (DOM对象)
  2. DOM对象转换成jQuery对象后, 就可以使用jQuery的方法了
  3. 应用实例

1.4 jQuery对象转dom对象

  1. 两种转换方式将一个jQuery对象转换成DOM对象: [index]和.get(index);
  2. jQuery对象是一个数组对象, 可以通过[index]的方法, 来得到响应的DOM对象
  3. jQuery本身提供, 通过.get(index)方法, 得到对应的DOM对象
相关推荐
excel2 分钟前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组6 分钟前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架
世伟爱吗喽12 分钟前
threejs入门学习日记
前端·javascript·three.js
朝阳58125 分钟前
用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声,只需 50 行代码
前端·websocket·rust
F2E_Zhangmo25 分钟前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript
slim~44 分钟前
javaweb基础第一天总结(HTML-CSS)
前端·css·html
一支鱼1 小时前
leetcode常用解题方案总结
前端·算法·leetcode
小浣熊喜欢揍臭臭1 小时前
react+umi项目如何添加electron的功能
javascript·electron·react
惜.己1 小时前
针对nvm不能导致npm和node生效的解决办法
前端·npm·node.js
乖女子@@@1 小时前
React笔记_组件之间进行数据传递
javascript·笔记·react.js