IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JQuery笔记学习 -> 正文阅读

[JavaScript知识库]JQuery笔记学习

一、JQuery3.3.1
1、概述
?简介:jquery是一个优秀的javascript的轻量级框架,兼容css3和各大浏览器,提供了dom、events、animate、ajax等简易的操作。并且 jquery的插件非常丰富,大多数功能都有相应的插件解决方案。

Jquery就是1个js文件,只不过它对JS进行了简化。

Jquery由美国人John Resig在2006年创建。

官网:http://jquery.com/

分为1.X、2.X、3.X三个大版本,提供的方法基本一致,只不过2.X 3.X不再兼容IE 6、7、8之类的低版本浏览器。

宗旨:Write less, do more.?? ?写得少,做得多。
特性:jQuery 是一个 JavaScript 函数库。

jQuery 库包含以下特性:

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
引入:

<script src="jquery-3.3.1.min.js></script>?? ??? ?该标签如果用来引包,里面不允许写任何js语句!
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? alert("hello world.");
</script>
注:使用jQuery要先引入包、jquery-3.3.1.min.js去注释、缩短了变量等长度、比较小、所以引用这个min.js包

?

2、入口函数
$()或jQuery() 称之为jq选择器环境,在里面加上引号填写相关选择器即可,就可以获取匹配的元素。

?

js:window.οnlοad=function(...){}
jq:$(document).ready(function(){...});
$(function(){...});
1.?? ?两者功能都一致,都可以让获取元素的行为发生在渲染元素之后;
2.?? ?JS入口只允许存在一个,书写多个的话,后面的会覆盖前面的;
3.?? ?JQ入口允许存在多个,且并行存在,都会生效;
4.?? ?JS入口需要等待页面上所有资源加载完毕,而JQ入口只需要等待页面上标签渲染完毕即可,JQ入口速度更快。

3、事件
js:js对象.onclick = function(){...}
jq:jquery对象.click(function(){...})
注意:jq中的事件类型统一不要加on
演示:

js代码:

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? // 注意 : JS 的代码都是写在 = 后面. ? jquery 的代码基本上都是写在 () 里面.
? ? // jquery 入口函数 :
? ? $(function () {
?
? ? ? ? // JS 代码 :
? ? ? ? var btn = document.getElementById("btn");
? ? ? ? btn.onclick = function () {
? ? ? ? ? ? alert("按钮被点击了...");
? ? ? ? }
? ? });
</script>
jQuery代码:

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? // 注意 : JS 的代码都是写在 = 后面. ? jquery 的代码基本上都是写在 () 里面.
? ? // jquery 入口函数 :
? ? jQuery(function () {
?
? ? ? ? // jquery 代码 :
? ? ? ? $("#btn").click(function () {
? ? ? ? ? ? alert("按钮被点击了...");
? ? ? ? });
? ? });
</script>
? <input type="button" value="按钮" id = "btn"/>


4、整体操作
1、在jq里面,通过$()返回的数组,允许开发者整体操纵
2、选择数组中的其中一个元素:js对象[下标] ? ? ? ? ? jq对象.eq(下标)?
html代码:

<body>
<input type="button" value="按钮1111" />
<input type="button" value="按钮2222" />
</body>
js代码:

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? // jquery 入口函数 :
? ? $(function () {
?
? ? ? ? // JS 代码为两个按钮绑定事件 (JS代码不可以进行整体绑定)
? ? ? ? // JS 中 document.getElementsByTagName 该方法返回的是一个数组, 只能取出对应的元素才可以绑定.
? ? ? ? var inputs = document.getElementsByTagName("input");
? ? ? ? inputs[0].onclick = function () {
? ? ? ? ? ? alert("按钮1111被点击了...");
? ? ? ? }
?
? ? ? ? inputs[1].onclick = function () {
? ? ? ? ? ? alert("按钮2222被点击了...");
? ? ? ? }
? ? });
</script>
jQuery代码:

A、JQuery整体操作绑定

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? // jquery 入口函数 :
? ? $(function () {
?
? ? ? ? // jquery 书写 :
? ? ? ? $("input").click(function () {
? ? ? ? ? ? alert("按钮被点击了...");
? ? ? ? });
? ? });
</script>


B、单个标签实现事件绑定

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? // jquery 入口函数 :
? ? $(function () {
?
? ? ? ? // jquery 书写 :
? ? ? ? $("input").eq(0).click(function () {
? ? ? ? ? ? alert("按钮1111被点击了...");
? ? ? ? });
?
? ? ? ? $("input").eq(1).click(function () {
? ? ? ? ? ? alert("按钮2222被点击了...");
? ? ? ? });
? ? });
</script>


5、对象互转
说明:

jquery本质上虽然也是js,但是使用jquery的属性和方法必须保证对象是通过jquery的方式获取的,使用js获取的对象是js对象,使用jquery方式获取的对象是jquery对象。如果想交替使用,那么必须对象互转。

格式:

js对象转换成jq对象:$(js对象)
jq对象转换成js对象:jq对象[索引] 或 jq对象.get(索引)
演示:

html代码:

<body>
? ? <input type="button" value="按钮" id="btn" />
</body>
js转jQuery对象

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? // jquery 入口函数 :
? ? $(function () {
?
? ? ? ? // JS 对象转 jquery 对象
? ? ? ? var btn = document.getElementById("btn");
? ? ? ? // JS 对象调用 jquery 的方法. (行不通)
? ? ? ? /*btn.click(function () {
? ? ? ? ? ? alert("按钮被点击了...");
? ? ? ? });*/
?
? ? ? ? // 需求 : 将 JS 对象转成 jquery 对象. 给点钱就行了.
? ? ? ? $(btn).click(function () {
? ? ? ? ? ? alert("按钮被点击了...");
? ? ? ? });
? ? });
</script>
jQuery转js对象

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? // jquery 入口函数 :
? ? $(function () {
?
? ? ? ? // jquery 对象 转 JS 对象
? ? ? ? /*$("#btn").onclick = function () {
? ? ? ? ? ? alert("按钮被点击了...");
? ? ? ? }*/
:jq对象[索引] 或 jq对象.get(索引)
? ? ? ? // 方式一 : [下标]
? ? ? ? /*$("#btn")[0].onclick = function () {
? ? ? ? ? ? alert("按钮被点击了...");
? ? ? ? }*/
?
? ? ? ? // 方式二 : get(下标)
? ? ? ? $("#btn").get(0).onclick = function () {
? ? ? ? ? ? alert("按钮被点击了...");
? ? ? ? }
? ? });
</script>


6、控制css
6.1、单属性访问:

jq对象.css('width');
6.2、单属性修改:

jq对象.css('width','100px');
6.3、多属性修改:

jq对象.css({'width':'100px','height':'100px'});?? ?
可一次修改多个css属性
演示:

html代码:

<body>
? ? <div id="box"></div>
</body>
js代码:

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? $(function () {
?
? ? ? ? // JS 控制样式 : style
? ? ? ? var box = document.getElementById("box");
?
? ? ? ? box.style.width = "100px";
? ? ? ? box.style.height = "100px";
? ? ? ? box.style.backgroundColor = "pink";
? ? });
</script>
jQuery代码:

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? $(function () {
?
? ? ? ? // jquery 控制样式 : css
? ? ? ? $("#box").css({
? ? ? ? ? ? width: "100px",
? ? ? ? ? ? height: "100px",
? ? ? ? ? ? backgroundColor: "skyblue"
? ? ? ? });
? ? ? ??
? ? ? ? // 单个属性 :
? ? ? ? $("#box").css("backgroundColor", "red");
? ? });
</script>


7、控制标签属性
7.1、单属性访问:

jq对象.attr('class'); ? ? ? ? ?
7.2、单属性修改:

jq对象.attr('class ','myClass'); ?
7.3、多属性修改:

jq对象.attr({'class':'myClass','id':'myId'}); ? ?? ?
可一次修改多个attr属性
演示:

html代码:

<body>
? ? <div id="box" class="test" title="bbb"></div>
</body>
js代码:浏览器F12/开发者模式查看

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? $(function () {
?
? ? ? ? // 需求 : 修改 box 标签的class 与 title 属性数值
? ? ? ? var box = document.getElementById("box");
?
? ? ? ? box.className = "bbb";
? ? ? ? box.title = "这里什么都没有";
? ? });
</script>


jQuery代码:

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? $(function () {
?
? ? ? ? // 需求 : 修改 box 标签的class 与 title 属性数值
? ? ? ? $("#box").attr("class", "aaa");
? ? ? ? $("#box").attr("title", "这里什么都没有");
? ? });
</script>


7.4、删除属性:

jq对象.removeAttr('class '); ?
演示:

html代码:

<body>
? ? <input type="checkbox" id="ck">
? ? <input type="button" value="Click" id="btn">
</body>
jQuery代码:

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? $(function () {
?
? ? ? ? // 需求 : 点击按钮, 删除 checkbox 标签的 id 属性
? ? ? ? $("#btn").click(function () {
? ? ? ? ? ? $("#ck").removeAttr("id");
? ? ? ? });
?
? ? });
</script>


注意:

获取属性我们也可以使用prop(),他跟attr()是互补的,一般来说,我们都是使用attr()来获取标签属性,但是有的时候也会有获取不到的情况,这个时候可以使用prop()的形式来获取,比如表单元素的checked属性。

jq对象.prop();
具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()

演示:

<script src="../js/jquery-3.3.1.min.js"></script>
<script>
? ? $(function () {
?
? ? ? ? // 需求 : 点击click按钮, 查看 checkbox 选项框的 checked 属性数值
? ? ? ? $("#btn").click(function () {
? ? ? ? ? ? // attr 可以获取属性, 但是 `选项框` 的 checked 属性还是获取不到.
? ? ? ? ? ? var result = $("#ck").attr("checked");
? ? ? ? ? ? alert("result = " + result);
?
? ? ? ? ? ? // prop 属性的缩写.
? ? ? ? ? ? result = $("#ck").prop("checked");
? ? ? ? ? ? alert("result = " + result);
? ? ? ? });
? ? });
</script>


?

8、案例一:是否接受协议
图片演示如下:

8.1、说明:

按钮的本身是disabled禁用的状态
当复选框被勾选上的时候,按钮变成启用的状态,其次样式产生了变化
按钮样式的变化都已经通过特定的class名字书写好样式了,只要对按钮的class名字进行修改即可

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章           查看所有文章
加:2021-07-28 16:32:28  更:2021-07-28 16:32:32 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年3日历 -2024/3/29 12:44:14-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码