jQuery介绍
jQuery封装了JavaScript,是一个免费、开源的JavaScript函数库,极大地简化了JavaScript编程。
jQuery 和JavaScript 都负责操作网页并增强网页与用户之间的交互。不过,jQuery 简化了JavaScript 编程,更容易实现交互效果。
jQuery下载地址:
https://code.jquery.com
jQuery用法
jQuery 简介
jQuery入口函数:
可以看到,使用js获取label元素,需要先加载页面,然后再使用onload事件获取label元素。
jQuery 提供了一个函数来解决这个问题,它允许您比原生window.onload 更快地检索标签元素。
jQuery选择器
jquery选择器与css选择器具有相同的选择规则,可以快速选择标签元素并检索标签。
jQuery 选择器类型:
标签选择器根据标签名称选择标签。 ID选择器根据层次关系选择标签。标签成功选择:
您可以使用长度属性来确定标签是否选择成功。长度大于0表示选择成功,否则选择失败。
选择集过滤
过滤选择集是在一组选择标签中过滤所需的标签。
表示使用has(选择器名称)方法选择包含指定选择器的标签。
eq(index)方法,表示选择指定索引的标签
选择集转移
传输选择集使用选定的标签作为参考来检索传输的标签。
$('#box').prev(); 表示选择box元素的前一个ID的同级元素。
$('#box').prevAll(); 表示选择所有ID为box元素的兄弟元素。
$('#box').next(); 表示选择box元素的下一个ID的兄弟元素。
$('#box').nextAll(); 表示选择ID低于下一个box元素的所有兄弟元素。
$('#box').parent();表示选择的ID是box元素的父元素。
$('#box').children(); 表示选择所有ID为box元素的子元素。
$('#box').siblings(); 表示选择ID为box元素的其他兄弟元素。
$('#box').find('.myClass'); 表示选择id为box元素的class等于myClass的元素。
获取和设置元素内容
: 使用html方法获取和设置元素内容
使用:append方法将HTML内容附加到指定元素。
获取和设置元素属性
获取和更改标签样式:
使用CSS 方法设置标签样式属性
获取和设置标签属性:
这是通过prop 方法完成的
获取和设置元素的value 属性:
这是通过更简单、更方便的val 方法来完成的。
jQuery事件
一般活动:
click() 鼠标点击
Blur() 元素失去焦点
focus() 元素获得焦点
Mouseover() 鼠标进入(进入子元素时也会触发)
Mouseout() 鼠标离开(离开子元素时也会触发)
Ready() DOM加载完成
事件代理
活动代理:
事件代理的优点是通过使用父元素代理子元素上的事件来减少事件绑定的数量并提高性能。
事件代理使用场景:
使用场景:当多个相同的子元素绑定同一个事件时,可以使用事件代理。
事件代理方法:
事件代理是使用委托方法完成的
JavaScript对象
JavaScript 中的一切都是对象。字符串、值、数组、函数等都被视为对象。 JavaScript 还允许自定义对象,并且对象可以具有属性和方法。
有两种方法可以创建自定义JavaScript 对象:
通过顶层对象类型实例化对象
用对象字面量创建一个对象
JSON
(JavaScript Object Notation,JS对象表示法)是一种轻量级的数据交换格式。
数据以完全独立于编程语言的文本格式存储和表示,并提供简洁清晰的层次结构。
让JSON 成为理想的数据交换语言
JSON : 的优点
易于人类读写,易于机器解析生成,有效提高网络传输效率。
JSON 格式:
对象格式
数组格式
对象格式:
对于对象格式的JSON 数据,请使用成对的大括号({})。在大括号内输入多个键值对,格式为key:value。
数组格式:
对于数组格式的JSON 数据,请使用一对括号([]),并用逗号分隔括号内的数据。
JSON 本质上是一个字符串。在js 中使用JSON 数据可以将JSON 字符串转换为JavaScript 对象。
ajax
请求完成后,浏览器接收到大量的html、css、js、图片等数据。
阿贾克斯概述
Ajax 是异步JavaScript 和XML 的缩写,它允许JavaScript 发送异步http 请求并在后台进行通信以检索数据。 Ajax可以发送http请求。一旦后台数据被检索,页面显示数据就会被更新,只有当前页面需要与后台服务器通信时才需要记住。
阿贾克斯实施
jquery将其封装在方法$.ajax()中。
您可以直接使用该方法来执行Ajax请求。
ajax方法参数说明:
URL请求地址
type的请求方法,默认为“GET”,也常用“POST”
dataType 设置返回数据的格式。常用的格式是“json”
data 设置发送到服务器的数据。如果没有参数,则无需配置。
success 设置请求成功后的回调函数。
请求失败后错误设置回调函数
async 设置是否异步。默认值为“true”,通常不需要写入。
ajax 缩写:
$.ajax 可以这样省略:
$.get 或$.post 方法
$.get 和$.post 方法的参数说明:
$.get(url,数据,成功(数据,状态,xhr),dataType).error(func)$.post(url,数据,成功(数据,状态,xhr),dataType).error(func)
URL请求地址
data 设置发送到服务器的数据。如果没有参数,则无需配置。
success 设置请求成功后的回调函数。
数据请求结果数据
status 请求的状态信息(例如, '成功')
xhr底层发送http请求XMLHttpRequest对象
dataType 设置返回的数据格式
“XML”
“html”
'文本'
“json”
error代表错误异常处理
func 错误异常回调函数
版权声明:本文转载于今日头条,版权归作者所有。如有侵权,请联系本站编辑删除。