当前位置: 首页 > news >正文

jQuery基础

文章目录

  • 前言
  • jQuery的简单介绍
    • jquery的概念
    • 语言特点
    • jQuery 安装
    • jQuery 语法
    • jQuery 事件方法语法
    • 基本选择器


前言

本文讲简单的介绍了jQuery的概念以及基本的使用方法,如果本文对你有所帮助请三连支持博主,你的支持是我更新的动力,先赞后看养成习惯。
在这里插入图片描述


以下是本篇文章正文内容

jQuery的简单介绍

在这里插入图片描述

jquery的概念

jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(框架)于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互

jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的CSS选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件

运行jQuery所需的条件很简单:一台计算机、一个智能电话或一个可以运行现代浏览器的设备。jQuery对浏览器的要求也相当自由


语言特点

  1. 快速获取文档元素

  2. 创建AJAX无刷新网页

  3. 提供对JavaScript语言的增强

  4. 增强的事件处理

  5. 更改网页内容


jQuery 安装

可以通过多种方法在网页中添加 jQuery。

jquery.com 下载 jQuery 库

从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

下载的jQuery有两种一种是未压缩的一个是已压缩的,未压缩的适合初学者以及框架的开发压缩的适合单纯的使用,压缩的相比未压缩的所占空间小,在下载所需版本时建议不要使用太高版本的。

jQuery 库是一个 JavaScript 文件,可以使用 HTML 的 <script> 标签引用它

<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

jQuery 语法

jQuery是一个升级的dom,它接受一个元素,然后返回一个新的对象。

$是著名的jQuery符号,是变量jQuery的别名。实际上,jQuery把所有功能全部封装在一个全局变量jQuery中

在声明时 使用$ 与jQuery 都是可以的


   window.jQuery; // jQuery(selector, context)
   window.$; // jQuery(selector, context)
   $ === jQuery; /
   typeof($); // 'function'


这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数,操作可能失败

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 
});

简写:

$(function(){
 
   // 开始写 jQuery 代码...
 
});

window.onload=function{}不同的是他可以使用多次, jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行,JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。
在这里插入图片描述


jQuery 事件方法语法

在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。

页面中指定一个点击事件:

省略了on

$("p").click(function(){
    // 动作触发后执行的代码!!
});

基本选择器

  1. $(“#x”) ID选择器
    类似于js当中的getElementById 会选择ID为x的元素,但是jq的所有选择器都会产生数组,只是
    ID具有唯一性

  2. $(“.x”) class选择器
    类似于js当中的getElementsByClassName 都会产生数组。

  3. $(‘x’) Element选择器
    类似于js当中的getElementsByTagName,会选择页面中所有标签名为x的元素

  4. $('') 星号选择器
    类似于css当中的
    选择器。选中所有元素为其添加样式

  5. $(‘#x, .x, p span’) 组合选择器
    在一个选择器当中,使用不同方法选择不同元素 不同方法之间用逗号隔开。


在这里插入图片描述

相关文章:

  • Stream API
  • Iceberg源码学习:flink读iceberg流程一
  • C++----IO流(参考C++ primer)
  • 利用内网穿透实现无固定IP调试支付回调
  • AI/DM相关conference ddl(更新中)
  • 大脑神经网络记忆原理图,记忆力机制的神经网络
  • MySQL安装与配置
  • tf.quantization
  • CleanMyMac X的免费版电脑系统瘦身工具
  • k8s 读书笔记 - 初始化容器 Init Conatiner
  • ES8(Java API Client)查询详解
  • 内置单片机的433无线模块高速连传典型运用
  • SpringBoot学习_day7
  • 【项目】小帽课堂(一)
  • [JavaScript]_[初级]_[不使用JQuery原生Ajax提交表单文件并监听进度]
  • Android路由框架AnnoRouter:使用Java接口来定义路由跳转
  • C# 免费离线人脸识别 2.0 Demo
  • HTTP传输编码增加了传输量,只为解决这一个问题 | 实用 HTTP
  • JavaScript/HTML5图表开发工具JavaScript Charts v3.19.6发布【附下载】
  • python学习笔记 - ThreadLocal
  • UEditor初始化失败(实例已存在,但视图未渲染出来,单页化)
  • vue中实现单选
  • 阿里云前端周刊 - 第 26 期
  • 技术胖1-4季视频复习— (看视频笔记)
  • 提醒我喝水chrome插件开发指南
  • 体验javascript之美-第五课 匿名函数自执行和闭包是一回事儿吗?
  • 用Python写一份独特的元宵节祝福
  • ​​​​​​​GitLab 之 GitLab-Runner 安装,配置与问题汇总
  • # Swust 12th acm 邀请赛# [ A ] A+B problem [题解]
  • #define用法
  • (C#)获取字符编码的类
  • (ZT)北大教授朱青生给学生的一封信:大学,更是一个科学的保证
  • (二)构建dubbo分布式平台-平台功能导图
  • (分类)KNN算法- 参数调优
  • (原創) 如何讓IE7按第二次Ctrl + Tab時,回到原來的索引標籤? (Web) (IE) (OS) (Windows)...
  • (轉貼)《OOD启思录》:61条面向对象设计的经验原则 (OO)
  • ***linux下安装xampp,XAMPP目录结构(阿里云安装xampp)
  • .bat批处理(三):变量声明、设置、拼接、截取
  • .gitattributes 文件
  • .NET Standard 的管理策略
  • .Net Web窗口页属性
  • .NET 使用 ILRepack 合并多个程序集(替代 ILMerge),避免引入额外的依赖
  • .net遍历html中全部的中文,ASP.NET中遍历页面的所有button控件
  • .Net的C#语言取月份数值对应的MonthName值
  • .net开发引用程序集提示没有强名称的解决办法
  • .NET命名规范和开发约定
  • .Net下C#针对Excel开发控件汇总(ClosedXML,EPPlus,NPOI)
  • @KafkaListener注解详解(一)| 常用参数详解
  • @modelattribute注解用postman测试怎么传参_接口测试之问题挖掘
  • @SuppressWarnings注解
  • [1]-基于图搜索的路径规划基础
  • [2013][note]通过石墨烯调谐用于开关、传感的动态可重构Fano超——
  • [2544]最短路 (两种算法)(HDU)
  • [ACTF2020 新生赛]Upload 1
  • [BUG]Datax写入数据到psql报不能序列化特殊字符