01-10jQuery框架

  • jQuery框架

jQuery框架

概念：jQuery是继prototype之后一个优秀的开源的JavaScript代码库（或JavaScript框架），它封装JavaScript常用的功能代码。

特点：

(1) 具有独特的链式语法，可以把多个操作写在一行代码里，更加简洁
(2) 拥有大量的选择器，不仅有高效灵活的css选择器【id,类，元素】，并且可对CSS选择器进行扩展
(3) 拥有便捷的插件扩展机制和丰富的插件（树形菜单、日期控件、图片切换插件、弹出窗口等）
(4) jQuery兼容各种主流浏览器，兼容性更强
(5) 很多API都方法化了

jQuery的核心思想：（write less，do more）写得更少，做得更多

基础语法：$(selector).action()

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

  • 美元符号定义 jQuery
  • 选择符（selector）“查询"和"查找” HTML 元素
  • jQuery 的 action() 执行对元素的操作

一、与JS比较

    <script>//js中的页面加载事件：当整个页面加载完成(节点，样式，图片等)之后才会执行里面的代码window.onload = function(){alert(111);}window.onload = function(){alert(222);}//jQuery页面加载事件：加载时机是节点加载完成就执行了$().ready(function(){alert(333);})jQuery(function(){alert(444);});//执行顺序 333 - 444 - 222/*1.jQuery页面加载事件一定都会执行，而js中的页面加载事件只会执行最后一个 2.jQuery页面加载事件优先执行 (这个需要看版本)*//*以后页面中会引入多个前端框架：如果有2个前端框架都定义了$。你再页面中用$符号是哪一个框架的*/</script>

二、jQuery版本介绍

jQuery是一个js框架，代码本质上就是js代码，使用时需要引入jQuery.js 注意需要先导包 ！！！

// 引人jQuery：使用script标签
<script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script>

三、 jQuery编程步骤

  1. 引入jQuery
// 引人jQuery：使用script标签
<script type="text/javascript" src="/js/jquery-1.11.2.min.js"></script>
  1. 编写jQuery入口函数即页面加载事件
$(function(){})       // 多个$(function(){})中的代码都会执行，多个window.onload只会执行最后一个
  1. 使用选择器定位到需要操作的节点
var $obj = $("body"); // 一般情况下为了避免dom对象与jquery对象混淆，可以将jquery对象的变量名用加上$前缀  即$obj 
注：$()即$函数，body：选择器（元素选择器）
  1. 调用jQuery的API进行后续操作

四、DOM对象与jQuery对象转换

  • DOM对象

getElementById()
getElementsByName()
getElementsByTagName()
window对象，document对象
parentNode获取的对象
即我们用传统的方法（javascript）获得的节点对象

  • jQeury对象

通过选择器和$函数获取的节点对象。实质就是通过jQuery包装DOM对象后产生的对象

  • 将Dom对象转换成jquery对象
$(dom对象)
例如：var $obj = $(obj);//------------------------------------------------------------
<div id="d1">易烊千玺</div>
var div1 = document.getElementById("d1");    //jQuery对象相当于对dom对象的封装，可以看成将dom对象的数组
//dom对象 转换成 jQuery对象 
var $div2 = $(div1);   // $(dom对象)
$div2.css("color","red"); // 调用jQuery方法设置样式
  • 将jQuery对象转换成dom对象：
var obj = $obj.get(0); 
var obj = $obj[0,1,2...];//------------------------------------------------------------
var $div = $("div"); // 获取jQuery对象
//jQuery对象 转换成 dom对象
var div1 = $div[0]     // 或者使用  $div.get(0)来获取对象 
div1.style.backgroundColor = "pink"; // 此时div1是通过下标获取到的，jQuery对象将dom对象放进了一个数组里面

注：dom对象与jQuery对象的方法和属性不能混淆，jQuery对象不能调用dom对象的属性和方法

五、jQuery选择器

  1. 基本选择器

Id选择器： id=“d1” 调用方法 #d1
类/class选择器: class=“c1” 调用方法.c1
元素选择器： p 调用方法 p

  1. 基本过滤选择器

:first - 第一个
:last - 最后一个
:eq(index) - 指定索引的

$("li:first").css("color","red"); // 第一个li
$("li:last").css("color","lime");
$("li:eq(1)").css("color","gray"); // 索引为1的li
  1. 属性选择器

[属性名] - 有指定属性的
[属性名=“属性值”] - 有指定属性和属性值的

 $("li[id]").css("color","yellow"); // 设置li标签下属性名为id的对象$("li[id='d2']").css("color","blue"); // 设置li标签下属性名为id=d2的对象
  1. 层次选择器
  • ul li 选择<ul>里面的所有<li>元素；
  • div > p 选择所有直接子元素是<div>的<p>元素；
  • h1 + p 选择紧跟在<h1>元素后紧挨着的<p>元素； 就是跟h1同级的第一个标签

六、jQuery事件绑定/注册

  1. Js事件绑定/注册
  • 直接绑定到元素中
<a href="javascript:void(0);" onclick="functionName();"/> // 点击后执行functionName()
  • dom对象.事件
document.getElementById("id").onclick=function(){  //点击后执行function中的方法//逻辑代码
}
  1. jQuery事件绑定/注册
  • 绑定事件
$obj.事件名称(function(){  //obj就是可能是任意对象  一般都是通过选择器来找到需要绑定事件的元素//逻辑代码
});
$obj.on("事件名称", function(){//逻辑代码
});
$obj.bind("事件名称", function(){//逻辑代码
});
  • 取消事件
$obj.off("事件名称");    // 通常用于移除通过 on() 方法添加的事件处理程序。
$obj.unbind("事件名称");   // 移除被选元素的事件处理程序  当事件发生时终止指定函数的运行。
注意：如果取消事件时不写时间名称，表示取消所有事件

七、jQuery的DOM操作

  1. 文本操作

1.1 API

html()： 设置或者获取双标签中的的html文本
text()：设置或者获取双标签中的纯文本
val()：设置和获取有value属性的标签的value属性值
有value属性值的元素【大多数单标签都有】：input【按钮，文本框等】、select中option等
没有value属性值的元素【大多数双标签没有】：div、hn、span、a、p等

// 需求：当鼠标进入div显示红色的"有敌军潜入"，鼠标移开div还原<div style="height: 150px;width: 150px;background-color: green" id="d1"></div>
<script type="text/javascript" src="/jquery-1.11.2.min.js"></script>
<script type="text/javascript">$(function(){$("#d1").mouseover(function(){$(this).html("<span style='color:red'>有敌军潜入</span>");});$("#d1").mouseout(function(){$(this).text("");});});
</script>
  1. 属性和样式操作

2.1 API

操作样式：css()，addClass()，removeClass()

.css() // 直接设置样式 
.css("width",200).css("height",300).addClass() // 向第一个 <p> 元素添加一个类名 这样就方便在head里面设置样式，然后通过类名设置样式，这样可以解决.多个css，防止记不住属性名
$("button").click(function(){$("p:first").addClass("intro");
});.removeClass() // 从所有的 <p> 元素移除 "intro" 类：
$("button").click(function(){$("p").removeClass("intro");
});

操作属性：
attr()：操作【设置或获取】非boolean属性值的属性
prop()：操作【设置或获取】boolean属性值的属性（checked单选框复选框，selected下拉框）
data()：h5出的API，可以自定义属性data-属性名=“属性值”，然后用data(“属性名”)获取可以自动转换。一般用于传递数据
注意：要自动转换的话属性值必须是标准格式就是双引号，不能使用单引号
removeAttr()：移除指定属性值

// 需求：鼠标移动到元素上改变背景颜色，点击改变属性和样式<a href="javascript:;">File</a>
<a href="javascript:;">Edit</a> 
<script type="text/javascript" src="/jquery-1.11.2.min.js"></script>
<script type="text/javascript">$(function(){var $as = $("a");//jQuery对象for(var i = 0 ; i < $as.length ; i++){var a = $as[i];//dom对象//$(a)  将dom对象转换成jQuery对象，才能使用方法$(a).mouseover(function(){$(this).css('backgroundColor','skyblue');});$(a).mouseout(function(){$(this).css('backgroundColor','white');});$(a).click(function(){alert("当前元素的跳转地址为：" + $(this).attr('href'));$(this).addClass('c1');});}});
</script>

2.2 data()与其他API区别

概念：自定义数据属性，也就是data-自定义属性。

注意事项：

(1) 使用data获取属性值有个前提，属性名必须是data-xxx。使用data()获取属性的语法格式：jQuery对象.data(“xxx”)
(2) 使用attr()获取属性的语法格式：jquery对象.attr(“属性名”)

<input type="text" id="d1" data-person='{"id":1,"name":"tom","address":"四川成都"}'  // 自动将json格式的字符串转换成json对象data-name="赵子龙" data-age="22" data-sex="true" /><script type="text/javascript">$(function(){console.log($('#d1').attr('data-person'));//获取出来都是字符串console.log($('#d1').attr('data-name'));//获取出来都是字符串console.log($('#d1').attr('data-age'));//获取出来都是字符串console.log($('#d1').attr('data-sex'));//获取出来都是字符串console.log("====================================");//获取出来出来的值，会自动转换成相应的类型。能转就转，不能转就以字符串的形式存在console.log($('#d1').data('person'));console.log($('#d1').data('name'));console.log($('#d1').data('age'));console.log($('#d1').data('sex'));});
</script>
  1. 元素操作

3.3 API

追加：append()
删除：remove()，删除会将当前元素和里面的所有内容删除掉
清空：empty()，清空会保留当前元素

JSON

概念：JSON 是用于存储和传输数据的格式。 通常用于服务端向网页传递数据 。

  • JSON 是一种轻量级的数据交换格式。
  • JSON是独立的语言。
  • JSON 易于理解。
// json对象var obj1 = {"id":1,"name":"jack","age":20}//alert(obj1.name);var obj2 = {"id":1,"name":"jack","address":{"street":"陕西街","no":"125号"}}// alert(obj2.address.street);var obj3 = [{"id":1,"name":"jack","age":20},{"id":2,"name":"tom","age":30}]//alert(obj3[1].name);//json格式的字符串var str = ' {"id":1,"name":"jack","age":20}';//转json对象：要求必须是标准格式 -   也就是外面是单引号，里面属性是双引号,数字不用alert(JSON.parse(str).name);//data-*是html5出来的属性，为了传递数据 - 自动将json格式的字符串转成json对象//1.申明的时候必须用data-*  2.获取的时候：data(*)console.log($("div").data("obj"));

八、 jQuery遍历

场景：例如有多个input按钮，获取每个按钮的value值

第一种：传统的遍历方式

var $obj = $("input:button");
for(var i = 0 ; i < $obj.length ; i++){alert($($obj[i]).val());//注意$obj[i]是一个dom对象
}

第二种：jQuery提供的each函数

//$obj：jquery集合对象，index遍历元素的下标（从0开始），obj表示每一个节点
$obj.each(function(this){  // this表示每个对象alert($(this).val());
});

九、 jQuery发异步请求

方法1：

<input type="button" value="添加数据"/>
$(function(){$("input").click(function(){$.get("url",data,callback,type);$.get("https://www.fastmock.site/mock/d2846dc5a7b17c3f5711971f6ccd25ce/jquery/user/add",{"name":'tom'},function(data){console.log(data);},"json")

方法2：

$(function(){$("input").click(function(){$.ajax({url: "https://www.fastmock.site/mock/d2846dc5a7b17c3f5711971f6ccd25ce/jquery/user/add",                  //请求地址type: "GET",                       //请求方式data: "eid=1&ename=tom",         //请求参数：格式1：key=value  格式2：json格式success: function (result) {    //请求成功后的回调函数，result是服务器返回的数据  console.log(result);},dataType: "json"                 //如果是json，服务器返回值就是json对象，直接使用//如果不指定dataType，就是普通文本});})
});

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

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

相关文章

【极光系列】springboot集成redis

【极光系列】springboot集成redis

【极光系列】springboot集成redis tips&#xff1a;主要用于快速搭建环境以及部署项目入门 gitee地址 直接下载源码可用 https://gitee.com/shawsongyue/aurora.git模块&#xff1a;aurora_rediswindow安装redis安装步骤 1.下载资源包 直接下载解压&#xff1a;https://pa…
阅读更多...
汇编和c++初学，c++字符串加整型，导致的字符串偏移

汇编和c++初学，c++字符串加整型，导致的字符串偏移

从汇编角度分析"helloworld"1 “helloworld”1对应 mov dword ptr [a],1 mov eax,dword ptr [a] add eax,offset string "helloworld" (03CCCBCh)eax地址偏移加了1&#xff0c; lea ecx,[test]最终取的内存偏移地址&#xf…
阅读更多...
【遥感专题系列】影像信息提取之——面向对象的影像分类技术

【遥感专题系列】影像信息提取之——面向对象的影像分类技术

“同物异谱&#xff0c;同谱异物”会对影像分类产生的影响&#xff0c;加上高分辨率影像的光谱信息不是很丰富&#xff0c;还有经常伴有光谱相互影响的现象&#xff0c;这对基于像素的分类方法提出了一种挑战&#xff0c;面向对象的影像分类技术可以一定程度减少上述影响。 本…
阅读更多...
（三）SQL优化与索引使用

（三）SQL优化与索引使用

示例 CREATE TABLE `employees` (`id` int(11) NOT NULL AUTO_INCREMENT,`name` varchar(24) NOT NULL DEFAULT COMMENT 姓名,`age` int(11) NOT NULL DEFAULT 0 COMMENT 年龄,`position` varchar(20) NOT NULL DEFAULT COMMENT 职位,`hire_time` timestamp NOT NULL DEFAUL…
阅读更多...
Go-gin-example 第二部分 jwt验证

Go-gin-example 第二部分 jwt验证

文章目录 使用 JWT 进行身份校验jwt知识点补充认识JWTTOKEN是什么jwt的使用场景jwt的组成headerpayloadsignature 下载依赖包编写 jwt 工具包jwt中间件编写如何获取token 编写获取token的Apimodels逻辑编写路由逻辑编写修改路由逻辑 验证token将中间件接入Gin功能验证模块 续接…
阅读更多...
交友脱单盲盒源码，纸条广场，支持单独抽取/连抽/同城

交友脱单盲盒源码，纸条广场，支持单独抽取/连抽/同城

源码介绍 交友脱单盲盒源码&#xff0c;纸条广场&#xff0c;单独抽取/连抽/同城。 盲 盒交友脱单系统源码包含了学校、爱好、城市、地区、星座等 等信息&#xff0c;具有首页轮转广告和页面美化功能。 首页提供了两款 连抽和高质量底部连抽的选项&#xff0c;并且可以在后台…
阅读更多...
如何通过ISPC使用Xe（核显）进行计算

如何通过ISPC使用Xe（核显）进行计算

我一直以为 ISPC 的 Xe 是只包含独立显卡的&#xff0c;比如 A770 这些&#xff0c;没想到看了眼文档是可以使用核显的&#xff0c;但只能在 Linux 和 Windows 上&#xff0c;macOS 不行&#xff0c;就想试试看。 写本文是因为 ISPC 已经出现了三四个版本的大改&#xff0c;但…
阅读更多...
基于SSM的网上挂号系统的设计与实现

基于SSM的网上挂号系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…
阅读更多...
每日一练：LeeCode-102、二又树的层序遍历【二叉树】

每日一练：LeeCode-102、二又树的层序遍历【二叉树】

本文是力扣LeeCode-102、二又树的层序遍历 学习与理解过程&#xff0c;本文仅做学习之用&#xff0c;对本题感兴趣的小伙伴可以出门左拐LeeCode。 给你二叉树的根节点 root &#xff0c;返回其节点值的 层序遍历 。 &#xff08;即逐层地&#xff0c;从左到右访问所有节点&…
阅读更多...
蓝桥杯备赛

蓝桥杯备赛

洛谷做题打卡day2 嵌套循环yyds&#xff01; 很多前辈的题解都很长且包括诸如s[i-1][j-1]一直到s[i1][j1]这般冗长的搜索&#xff0c;其实…我觉得直接用循环就好了嘛 两次debug然后AC&#xff0c;嵌套了find函数看起来会稍微简洁一些&#xff0c;其实这题思路不难的——不外…
阅读更多...
友元函数与友元类

友元函数与友元类

友元函数与友元类 实验介绍 私有成员只能在类的成员函数内部访问，如果想在别处访问对象的私有成员，只能通过类提供的接口（成员函数）间接地进行。声明为友元函数或友元类后就可以直接访问类中所有成员，但同时也破坏了类的封装性。 为什么在模板篇中讲解友元函数和友元类…
阅读更多...
类型“{}”上不存在属性“xxx”。ts(2339)-解决方案集锦

类型“{}”上不存在属性“xxx”。ts(2339)-解决方案集锦

类型“{}”上不存在属性“xxx”。ts(2339)-解决方案集锦 文章目录 类型“{}”上不存在属性“xxx”。ts(2339)-解决方案集锦一、方案一&#xff08;优先尝试&#xff09;二、方案二&#xff08;优先尝试&#xff09;三、方案三这该是多么痛苦的一篇笔记啊&#xff01;&#xff0…
阅读更多...
【设计模式-3.3】结构型——享元模式

【设计模式-3.3】结构型——享元模式

说明&#xff1a;说明&#xff1a;本文介绍设计模式中结构型设计模式中的&#xff0c;享元模式&#xff1b; 游戏地图 在一些闯关类的游戏&#xff0c;如超级玛丽、坦克大战里面&#xff0c;游戏的背景每一个关卡都不相同&#xff0c;但仔细观察可以发现&#xff0c;其都是用…
阅读更多...
【二叉树遍历和练习】

【二叉树遍历和练习】

文章目录 一、二叉树前中后遍历二、获取节点个数三.获取叶子节点个数四.获取第k层节点个数五.求二叉树的高度&#xff0c;时间复杂度O&#xff08;N&#xff09;六.检测值为value的元素是否存在七. 检查两颗树是否相同八.判断一棵二叉树是不是平衡二叉树九.一个二叉树的根节点 …
阅读更多...
Hutool sqlserver 数据库简单操作-Db

Hutool sqlserver 数据库简单操作-Db

项目中主数据库是mysql的&#xff0c;使用mybatis处理非常舒服。项目中还会极少量涉及一个sqlserver数据源的读取操作&#xff0c;虽然mybatis是支持多数据源的&#xff0c;但是感觉用起来不那么顺手偏重一些了。 最初我的想法是涉及sqlserver的库的操作直接使用jdbc来实现就好…
阅读更多...
java基于Spring Boot的灾害应急救援评估调度平台

java基于Spring Boot的灾害应急救援评估调度平台

灾害应急救援平台的目的是让使用者可以更方便的将人、设备和场景更立体的连接在一起。能让用户以更科幻的方式使用产品&#xff0c;体验高科技时代带给人们的方便&#xff0c;同时也能让用户体会到与以往常规产品不同的体验风格。&#xff08;1&#xff09;鉴于该系统是一款面向…
阅读更多...
深入理解和应用C++ std::shared_ptr别名构造函数

深入理解和应用C++ std::shared_ptr别名构造函数

深入理解和应用C std::shared_ptr别名构造函数 引言 在现代C中&#xff0c;智能指针是一个极为重要的工具&#xff0c;尤其std::shared_ptr以其自动内存管理、引用计数和多线程安全性等特性深受开发者喜爱。其中一个不太常用但功能强大的构造方式是别名构造函数&#xff0c;它…
阅读更多...
C++ 设计模式之外观模式

C++ 设计模式之外观模式

【声明】本题目来源于卡码网&#xff08;题目页面 (kamacoder.com)&#xff09; 【提示&#xff1a;如果不想看文字介绍&#xff0c;可以直接跳转到C编码部分】 【简介】什么是外观模式 外观模式Facade Pattern , 也被称为“⻔⾯模式”&#xff0c;是⼀种结构型设计模式&#…
阅读更多...
WordPress如何修改旧文章的发布日期让其变成新文章发布？

WordPress如何修改旧文章的发布日期让其变成新文章发布？

我们个人网站发展一段时间后&#xff0c;可能就不懂得发布什么内容了&#xff0c;这个时候可以考虑翻看以前的旧文章&#xff0c;必要时对其进行适当修改&#xff0c;然后修改它的发布日期变成当前日期重新发布&#xff0c;这样就会变成新文章重新出现在我们首页的文章列表中。…
阅读更多...
libbpf-tips

libbpf-tips

使用 libbpf 编写 BPF 应用程序进阶技巧 本文地址&#xff1a;https://www.ebpf.top/post/top_and_tricks_for_bpf_libbpf 原文地址&#xff1a;https://www.pingcap.com/blog/tips-and-tricks-for-writing-linux-bpf-applications-with-libbpf/ 2020 年初&#xff0c;当使用…
阅读更多...
最新文章

Copyright @ 2022~2023