jQuery 框架学习笔记(基础)

news/2024/7/10 23:07:00 标签: jquery, 学习, 笔记

What

jQuery 是一种快速、简洁跨游览器的 JavaScript 函数库,其宗旨是“Write less, Do more”,它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。

注意:jQuery 不是将所有的 JS 封装,只是有选择性的封装

特点:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的css选择器,并且可对 css 选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

Why

各种游览器获取异步对象的方式不尽相同(AJAX),而 jQuery 能屏蔽掉这些不兼容的东西以达到一种统一。这就是使用它的理由之一:兼容能力

回顾 JavaScript 上,它定位 HTML 控件的方式有三种:

  1. 通过 ID 属性:document.getElementById()
  2. 通过 NAME 属性:document.getElementsByName()
  3. 通过标签名:document.getElementByTagName()

明显可见,JavaScript 的方法名有够长的,不易书写...... 发现规律:

  • 传入参数是以“#”开头的字符串 = ID 属性
  • 传入参数不以“#”开头且也没有前缀修饰的字符串 = 标签名属性(剩下那个就不用说了吧)

How

jQuery 对象与 JavaScript 对象之间的关系
jQueryJavaScript
对象  =数组this 代表当前对象
转为 JavaScript / jQuery其数组索引的结果就是 JavaScript 对象$(JS 对象 )

注意:jQuery 和 JavaScript 都只能去调用各自的 API

jQuery提供定位 HTML 控件的九个选择器

选择器名称描述
基本选择器直接定位 id、类修修饰器、标签
层次选择器有父子,兄弟关系的标签
增强基本选择器大于、小于、等于、奇偶数的标签
内容选择器定义内容为 XXX、内容中是否有标签器、含有子元素或者文本的标签
可见性选择器可见或不可见的标签
属性选择器与属性的值相关
子元素选择器匹配父标签下的子标签
表单选择器匹配表单对应的控件属性
表单对象属性选择器匹配表单属性具体的值

jQuery API

DOM 分类

DOM-HTML

DOM 操作 html 标签中的内容,如:

document.creteElement("img")

DOM-CSS

DOM 操作 css 样式,如:

imgElement.style.visbility = "hidden"

核心 DOM

该 DOM 不只操作 JS 语言,如:

dom4j 解析 xml 标签

追加
append()追加到父元素之后
prepend()追加到父元素之前
after()追加到兄弟元素之后
before()追加到兄弟元素之前

查询层次关系
children()只查询子节点,但不含后代节点
next()下一个相邻兄弟节点
prev()上一个相邻兄弟节点
siblings()所有兄弟节点
css 样式
addClass()增加已存在的样式
removeClass()删除已存在的样式
hasClass()判断标签是否有指定的样式,true 表示有样式,false 表示无样式
toggleClass()如果标签有样式就删除,否则增加样式
动画效果

show()

显示对象
hide()隐藏对象
fadeIn()淡入显示对象
fadeOut()淡出隐藏对象
slideUp()向上滑动
slideDown()向下滑动
slideToggle()上下切换滑动,速度快点
迭代
each()是jQuery中专用于迭代数组的方法,参数为一个处理函数,this表示当前需要迭代的js对象

更多 DOM API 就不列举了

JavaScript 一大特性就是事件驱动,当用户用了执行了某些动作以后,JavaScript 就会响应事件,在事件的方法上,我们就可以对用户的动作“回馈”一些信息给用户!

jQuery也对 JavaScript 事件进行了封装,我们看一下以下的API:

  • window.onload:在浏览器加载 web 页面时触发,可以写多次 onload 事件,但后者覆盖前者

  • ready:在浏览器加载 web 页面时触发,可以写多次 ready 事件,不会后者覆盖前者,依次从上向下执行,我们常用$(函数)简化

(注意!ready 和 onload 同时存在时,二者都会触发执行,ready 快于 onload)

  • change:当内容改变时触发

  • focus:焦点获取

  • select:选中所有的文本值

  • keyup/keydown/keypress:演示在IE和Firefox中获取event(事件)对象的不同

  • mousemove:在指定区域中不断移动触发

  • mouseover:鼠标移入时触发

  • mouseout:鼠标移出时触发

  • submit:在提交表单时触发,true 表示提交到后台,false 表示不提交到后台

  • click:单击触发

  • dblclick:双击触发

  • blur:焦点失去

鼠标 / 键盘事件

属性描述
altKey返回当事件被触发时,"ALT"是否被按下。
button返回当事件被触发时,哪个鼠标按钮被点击。
clientX返回当事件被触发时,鼠标指针的水平坐标。
clientY返回当事件被触发时,鼠标指针的垂直坐标。
ctrlKey返回当事件被触发时,"CTRL"键是否被按下。
metaKey返回当事件被触发时,"meta"键是否被按下。
relatedTarget返回与事件的目标节点相关的节点。
screenX返回当某个事件被触发时,鼠标指针的水平坐标。
screenY返回当某个事件被触发时,鼠标指针的垂直坐标。
shiftKey返回当事件被触发时,"SHIFT"键是否被按下。

我们在开始使用JavaScript学习AJAX的时候,创建异步对象时,需要根据不同的浏览器来创建不同的对象….装载XML文件的时候,也有兼容性的问题。

Jquery就很好地屏蔽了浏览器不同的问题,不需要考虑浏览器兼容的问题,这是非常非常方便我们开发的。以下是 jQuery 在 AJAX 技术中常用的 API

  • $.ajax([options])

  • load(url, [data], [callback])

  • $.get(url, [data], [fn], [type])

  • $post(url, [data], [callback], [type])

  • serialize()

就不作解析了,看看总结吧!

  1. load() 方法是使用 jQuery 的对象来进行调用的,得到服务器的结果自动会把结果嵌套到所在的标签中。

  2. get() 方法不是使用 jQuery 对象来调用,因此需要手动把结果放在想要放的位置

  3. post() 方法是用来把参数带过去给服务器的,因此我们需要在 Servlet 上手动设置编码。用法与 get() 方法一样

  4. serialize() 是非常好用的一个方法,不需要我们手动去拼接参数,会自动把 form 表单的参数封装成 JSON 格式的数据

  5. 至于 $.ajax() 方法,实际上就是集合了 get() 和 post() 方法


http://www.niftyadmin.cn/n/5032666.html

相关文章

全国职业技能大赛云计算--高职组赛题卷①(容器云)

全国职业技能大赛云计算--高职组赛题卷①(容器云) 第二场次题目:容器云平台部署与运维任务1 Docker CE及私有仓库安装任务(5分)任务2 基于容器的web应用系统部署任务(15分)任务3 基于容器的持续…

pbjs生成的decode方法decode对象的问题

前端使用了pbjs编译proto文件, 使用编译后的encode方法序列化并post到服务器 contentType设置为application/x-protobuf(也尝试过使用application/octet-stream) 服务端接收到的二进制数据长这样, b\n\x03xxx\x12\x03p2p \xfb\xb2((\x81\xb6(B\t\xe7\x9a\x84\xe8\x90\xa8\xe8\…

Windows11系统C盘用户文件夹下用户文件夹为中文,解决方案

说明: 1. 博主电脑为Windows11操作系统,亲测有效,修改后无任何影响,软件都可以正常运行! 2. Windows10系统还不知道可不可行,因为Windows11的计算机管理中没有本地用户和组,博主在csdn上看到很…

高速DSP系统设计参考指南(一)高速DSP设计面临的挑战

(一)高速DSP设计面临的挑战 1. 概述2. 一般挑战3. DSP音频系统的挑战4. 视频系统的挑战5. DSP通信系统面临的挑战 资料参考来自TI官网和网络。 1. 概述 DSP芯片,也称数字信号处理器,是一种具有特殊结构的微处理器。DSP芯片的内部…

QT:使用行编辑器、文本编辑器、单选按钮、水平布局、垂直布局做一个小项目

widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QLineEdit> //行编辑器 #include <QTextEdit> //文本编辑器 #include <QRadioButton> //单选按钮class Widget : public QWidget {Q_OBJECTpublic:Widget(QWidget *pare…

【微信小程序】关于页面中引入背景的两种方式

| 布局设计思路 <view class"about"> <view class"pubilcTitle"><view class"en"></view><view class"cn"></view><view class"line"></view> </view> <view cl…

udp的简单整理

最近思考udp处理的一些细节&#xff0c;根据公开课&#xff0c;反复思考&#xff0c;终于有所理解&#xff0c;做整理备用。 0&#xff1a;简单汇总 1&#xff1a;udp是基于报文传输的&#xff0c;接收方收取数据时要一次性读完。 2&#xff1a;借助udp进行发包&#xff0c;…

Ubuntu 20.04中docker-compose部署Nightingale

lsb_release -r可以看到操作系统版本是20.04&#xff0c;uname -r可以看到内核版本是5.5.19。 sudo apt install -y docker-compose安装docker-compose。 完成之后如下图&#xff1a; cd /opt/n9e/docker/进入到/opt/n9e/docker/里边。 docker-compose up -d进行部署。 …