jquery学习笔记

简介

官网下载:www.jquery.com

版本:1.x.x (兼容ie678,常用版), 2.x.x (不兼容ie678) , 3.x.x(只支持最新浏览器)

文件:jquery-1.x.x.js (可查看源码),jquery-1.x.x.min.js(压缩版)

引入:<script src="./jquery-1.12.4.js"></script>

对象:js对象与jquery对象不能通用

获取js对象:var do = document.getElementById("id");

获取jquery对象:var jo = $("#id")

js对象转jquery对象:var jo = $(do);

jquery对象转js对象:var do = jo[0];

1 选择器

1.1 基础选择器

(1) id选择器:$("#id")

(2) 样式选择器:$(".class")

(3) 标签选择器:$("div") // 指定标签名

1.2 层级选择器

(1) 后代选择器:$("基础 基础")

(2) 子选择器:$("基础 > 基础")

(3) 相邻兄弟选择器(下一个):$("基础 + 基础")

(4) 兄弟选择器(自己之后所有):$("基础 ~ 基础")

(5) 同级兄弟选择器:$("基础选择器1").siblings("基础选择器2") // 获取与选择器1同级的选择器2

1.3 属性选择器

(1) 属性名:$("基础[属性名]")

(2) 属性值(等):$("基础[属性名=]")

(3) 属性值(不等):$("基础[属性名!=]")

(4) 属性值(开头):$("基础[属性名^=]")

(5) 属性值(结尾):$("基础[属性名$=]")

(6) 属性值(包含):$("基础[属性名*=]")

(7) 属性值(复合):$("基础[属性名][属性名2=]") // $("a[target][href*=local]")

1.4 过滤选择器

(1) 获取集合第一个元素:$("div:first") // 获取第一个div

(2) 获取集合最后元素:$(".class:last") // 获取最后一个该样式的元素

(3) 获取不含样式的元素:$("div:not(.class)") // 获取指定样式以外的div元素

(4) 获取集合下标为偶数的元素:$(".class:even")

(5) 获取集合下标为奇数的元素:$(".class:odd")

(6) 获取集合索引大于值的元素:$(".class:gt(3)")

(7) 获取集合索引等于值的元素:$(".class:eq(3)")

(8) 获取集合索引小于值的元素:$(".class:lt(3)")

(9) 获取标题h1~h6的元素:$(":header")

1.5 表单选择器

(1) 获取可用元素:$("input:enabled")

(2) 获取不可用元素:$("input:disabled")

(3) 获取选中元素:$("input:checked")

(4) 获取选择元素:$("option:selected")

2 标签内容

2.1 文本内容

(1) 获取文本信息:$("选择器").text()  // 获取所有对象内容

(2) 设置文本信息:$("选择器").text("文本内容") // 设置所有对象内容

2.2 标签内容

(1) 获取标签信息:$("选择器").html() // 获取第一个元素的html

(2) 设置标签信息:$("选择器").html("<标签>标签内容</标签>") // 设置所有元素的html

2.3 表单内容

(1) 获取表单信息:$("选择器").val() // 获取表单元素值

(2) 设置表单信息:$("选择器").val("表单值") // 设置表单元素值

(3) 获取属性值:$("选择器").attr("属性名")

(4) 设置属性值:$("选择器").attr("属性名", "属性值")

(3) 获取属性状态:$("选择器").prop("checked | selected | disabled") // 返回true, false

(6) 删除属性:$("选择器").removeAttr("属性名") // 或取消checked selected disabled状态

3 样式

(1) 获取设置固定样式:$("选择器").css("样式属性" [, "样式值"]) // css("width","200px")

(2) 设置多个固定样式:$("选择器").css({"样式属性:值", ...}) // css({"width:200px",...})

(3) 添加样式(样式名):$("选择器").addClass("自定义样式名") 

(4) 删除样式(样式名):$("选择器").removeClass("自定义样式名") 

(5) 切换样式(样式名):$("选择器").toggleClass("自定义样式名") 

4 元素

(1) 创建元素对象:var jo = $("<div id=...>内容</div>");

(2) 添加到父元素内开头:父元素.prepend(jo);

(3) 添加到父元素内末尾:父元素.append(jo);

(4) 添加到元素之前:元素.before(jo);   jo.insertBefore(元素)

(5) 添加到元素之后:元素.after(jo);      jo.insertAfter(元素)

(6) 删除元素(自身):元素.remove();

(7) 清空元素内容:元素.empty(); // 清空内容及子元素

5 显示隐藏

5.1 缩小放大

(1) 放大显示:元素.show([s, [e], [fn] ]) // 向右下放大,透明色渐深

(2) 缩小隐藏:元素.hide([s, [e], [fn] ]) // 向左上缩小,透明色渐浅 

(3) 切换:元素.toggle([s, [e], [fn] ])

5.2 上下滑动 

(1) 下滑显示:元素.slideDown([s, [e], [fn] ]) // 向下显示

(2) 上滑隐藏:元素.slideUp([s, [e], [fn] ]) // 向上隐藏 

(3) 切换:元素.slideToggle([s, [e], [fn] ])

5.3 淡入淡出

(1) 淡入显示:元素.fadeIn([s, [e], [fn] ]) // 透明色渐深

(2) 淡出隐藏:元素.fadeOut([s, [e], [fn] ]) // 透明色渐浅 

(3) 切换:元素.fadeToggle([s, [e], [fn] ])

(4) 渐变:元素.fadeTo([s, o, [e], [fn] ]) // 渐变为透明度的值

注释:s(slow慢 normal正常 fast快 1000毫秒) e(切换效果 swing默认摆动, linear直线) fn(动画效果完成后执行函数,每个元素执行一次) o(0-1之间透明度)

6 遍历

6.1 常规循环

var jos = $("li");

for (var i=0; i<jos.length; i++) { ... jos[i].innerText }

6.2 jquery对象函数

var jos = $("li");

jos.each( function(index, element) { jos[index].innerText; element.innerText } ) 

6.3 jquery全局函数

var jos = $("li");

$.each( josfunction(index, element) { jos[index].innerText; element.innerText } ) 

6.4 遍历对象数组

var jos = $("li");

for( var e of jos ) { e.innerText }

7 事件

7.1 常用事件

(1) 失去光标:blur

(2) 获取光标:focus

(3) 表单值变更:change

(4) 单击:click

(5) 键压下:keydown

(6) 键放开:keyup

(7) 鼠标移入:mouseover

(8) 鼠标移出:mouseout

7.2 事件绑定

(1) 事件绑定:元素.on("click", function(){...})

(2) 事件函数绑定:元素.click(function(){...})

(3) 事件链式绑定:元素.click(function(){...}).change(function(){...})

(4) 鼠标移入移出同时绑定:元素.hover(function(){...}, function(){...})

(5) 事件解绑:元素.off("click")

(6) 页面加载事件:jquery(funciont(){...}) 或者 $(function(){...}) // window.onload只能执行一次,jquery加载写多个都可以执行。这两个加载事件可写在body之前

8 ajax

8.1 GET请求

$.get(url, 数据, 回调函数, 返回值类型)

$.get("/servlet/xxx","name=xx&age=18",function(res | data) {//形参名任意},"text | json"
)

 8.2 POST请求

$.post(url, 数据, 回调函数, 返回值类型)

$.post("/servlet/xxx","name=xx&age=18",function(res | data) {//形参名任意},"text | json"
)

8.3 ajax请求

get与post无法处理异常

$.ajax({url:"/servlet/xx",async:true | false, //是否异步type: "get | post",dataType:"text | json", //返回值类型data: "name=xx&age=18", //请求数据success: function(data) {...}, //形参名任意,处理成功回调函数error: function(data) {...} //形参名任意,处理失败回调函数
})

9 跨域

跨域问题只针对ajax请求,是浏览器做的同源限制

9.1 代理

解决跨域问题方案1:ajax提交到自己的后端服务器,后端服务器之间通信

9.2 cors

解决跨域问题方案2:需要浏览器与服务器通知支持

(1) 服务器端:

res.setHeader("Access-Control-Allow-Origin", "http://....8080") //设置允许资源共享的url

res.setHeader("Access-Control-Allow-Credentials", "true") // 客户端可携带cookie信息

(2) 浏览器端:

在ajax中添加:xhrFields: {withCredentials:true}, // 用来允许发送cookie 

9.3 jsonp

解决跨域问题方案3:用jsonp包裹json数据

(1) 服务器端:

String callback = req.getParameter("callback"); // 获取callback字符串

out.print(callback+"(" + json数据 + ")"); // 返回callback包裹的json

(2) 浏览器端:

ajax中添加:dataType:"jsonp",

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/179758.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习常用距离度量方法

机器学习常用距离度量方法 前言一、前期准备二、距离度量方法1. 欧氏距离2.曼哈顿距离3.切比雪夫距离4. 闵可夫斯基距离 总结 前言 机器学习中往往通过度量来研究不同样本或数据集之间的差异性&#xff0c;合适的度量方式可以显著提高算法的准确率&#xff0c;因此在接下来的内…

Unity工具脚本-检测资源文件夹是否有预制件是指定层级

效果&#xff1a; 先在菜单栏里面找到Tools/CheckPrefabLayers打开窗口 代码&#xff1a; using System.Collections; using System.Collections.Generic; using System.IO; using UnityEditor; using UnityEngine;public class CheckPrefabLayers : EditorWindow {public in…

【EI会议征稿】第三届航空航天工程与系统国际研讨会(ISAES 2024)

第三届航空航天工程与系统国际研讨会(ISAES 2024) 2024 3rd International Symposium on Aerospace Engineering and Systems 第三届航空航天工程与系统国际研讨会将于2024年3月22-24日在南京召开&#xff01;会议紧密聚焦“航空航天工程”领域的热点和难点问题&#xff0c;…

ChatGLM3简介

ChatGLM3简介和使用 ChatGLM3简介推理代码命令行加载 ChatGLM3 简介 ChatGLM3 是智谱AI和清华大学 KEG 实验室联合发布的新一代对话预训练模型。ChatGLM3-6B 是 ChatGLM3 系列中的开源模型&#xff0c;在保留了前两代模型对话流畅、部署门槛低等众多优秀特性的基础上&#xf…

MT8390(Genio 700)安卓核心板_MTK联发科工业AI主板Linux开发板

MT8390 (Genio 700) 安卓核心板是一款高性能边缘人工智能物联网平台&#xff0c;尺寸仅为45452.2mm。该平台提供高度响应的边缘处理、先进的多媒体功能、各种传感器和连接选项&#xff0c;同时支持多任务操作系统。 Genio 700处理器拥有PS APU性能&#xff0c;高效的芯片内人工…

【开题报告】基于机器学习的高速铁路动检数据异常检测算法

文献综述&#xff1a; 国内研究现状 我国铁路历来重视对轨道的检查和监测,并有完整的检查制度和严格检查标准。轨道检测基本分为静态检测和动态检测两大类静态检测主要是复测及限界检查、轨道静态检查、钢轨检查、春秋季检查和量具检查:动态检测则是以轨道检查车为主,并辅助车载…

Java NIO Selector

在 Java NIO&#xff08;New I/O&#xff09;中&#xff0c;Selector 是一种多路复用的机制&#xff0c;用于管理多个通道的 I/O 操作。通过使用 Selector&#xff0c;我们可以在一个线程中同时管理多个通道的读写操作&#xff0c;提高系统的效率和性能。 本篇博客将详细介绍 …

Pinia 和 Vuex 的对比,storeToRefs 的原理

目录 1&#xff0c;Pinia 介绍2&#xff0c;和 Vuex 的对比3&#xff0c;storeToRefs 源码分析 1&#xff0c;Pinia 介绍 官网简介 Pinia 使用上的问题&#xff0c;官方文档很详细&#xff0c;这里不做赘述。 Pinia 是 Vue 的专属状态管理库&#xff0c;支持vue2和vue3&#x…

c++day1

提示并输入一个字符串&#xff0c;统计该字符中大写、小写字母个数、数字个数、空格个数以及其他字符个数 要求使用C风格字符串完成 #include <iostream>using namespace std;int main() {string str;cout << "请输入一个含有大小写字母&#xff0c;空格&am…

C语言面试之旅:掌握基础,探索深度(面试实战之c语言关键词中篇)

劝人的话就像清晨的闹钟&#xff0c;只对别人有用&#xff0c;却永远叫不醒自己。 ----小新 一.预处理指令 &#xff08;1&#xff09;#define & typedef #define是C语言中定义的语法&#xff0c;是预处理指令&#xff0c;在预处理时进行简单而机械的字符串替换&…

java学习part19接口

113-面向对象(高级)-接口的使用_哔哩哔哩_bilibili 1.接口概念 个人认为是一种能力&#xff0c;某个类是否具有某种能力。一个类实现了一个接口就相当于学会了某些功能。 2.使用 接口里的属性都是全局常量public static final&#xff0c;即便不写也会自动加上。 3.多实现 4.接…

Day41 使用listwidget制作简易图片播放器

1.简介 使用QlistWidget实现简易图片播放器&#xff0c;可以打开一个图片序列&#xff0c;通过item的单击事件实现图片的切换&#xff0c;通过设置list的各种属性实现图片预览的显示&#xff0c;美化滚动条即可实现一个简易图片播放器。 2.效果 3.实现步骤&#xff1a; 1.初始…

【沐风老师】3DMAX拼图建模工具MaxPuzzle2D插件使用方法详解

MaxPuzzle2D拼图建模工具使用帮助 MaxPuzzle2D拼图建模工具&#xff0c;拼图建模“彩虹系列”插件&#xff0c;是一款用MAXScript脚本语言开发的3dMax拼图建模小工具&#xff0c;可以创建2D或3D的拼图图形阵列。这让需要拼图建模的设计师大大节省了时间。 MaxPuzzle2D工具界面&…

REST-Assured--JAVA REST服务自动化测试的Swiss Army Knife

什么是REST-Assured REST Assured是一套基于 Java 语言实现的开源 REST API 测试框架 Testing and validation of REST services in Java is harder than in dynamic languages such as Ruby and Groovy. REST Assured brings the simplicity of using these languages into t…

解决ssh使用public key远程登录服务器拒绝问题

目录 使用场景windows安装ssh客户端使用powershell ssh登录服务器生成密钥文件ubuntu ssh服务器配置使用vscode远程登录使用Xshell远程登录使用MobaXtem远程登录Server refused our key问题解决方案 使用场景 使用vscode远程ssh登录使用public key不需要输入密码,比较方便. w…

《Effective C++》条款24

若所有参数皆需类型转换&#xff0c;请为此采用non-member函数 如果想实现这样的一种运算符重载&#xff1a; class A { public:A(int x) :_x(x) {};const A operator*(const A& a){A ret(0);ret._x a._x * a._x;return ret;} private:int _x; }; A a(1); A b(2); A ret…

JSP forEach标签varStatus使用讲解(了解即可 基本用不到)

上文 JSP迭代标签之 forEach循环标签 基本使用讲解 我们讲了一下forEach标签 大多数时候会用的语法 但是varStatus 没有讲到 因为我觉得这个东西 做个了解就好了 如果你不感兴趣都可以不看 因为感觉开发中基本是用不到的 但是 官方有提供 我还是说一下 当前遍历的基本信息 包括…

易点天下携AIGC创新成果KreadoAI亮相数贸会,解锁电商文化出海新可能

11月27日&#xff0c;第二届全球数字贸易博览会&#xff08;以下简称“数贸会”&#xff09;在浙江杭州完美落幕。作为出海营销领域最早一批布局AIGC战略的营销科技公司&#xff0c;易点天下受邀与来自全球800余家境内外数字贸易企业同台参展&#xff0c;并分享了旗下AIGC数字营…

物理世界中的等距3D对抗样本

论文题目&#xff1a;Isometric 3D Adversarial Examples in the Physical World 会议&#xff1a;NIPS 2022 点云&#xff1a; 点云——表达目标空间分布和目标表面特性的海量点集合&#xff0c;点包含xyz坐标信息 能够包含颜色等其他信息 使用顶点、边和面的数据表征的三维…

openwrt配置SSL证书实现https加密访问

前言&#xff1a;目前来看这个用处不是很大&#xff0c;因为只能访问一个端口&#xff0c;且因为80和443都已经被运营商封了&#xff0c;所以访问时还是得带端口。以下以阿里云证书为例&#xff1a; 一、申请证书 这个很简单&#xff0c;不想去截图了&#xff0c;直接去申请你…