关键词：
jQuery常用技术
1.jQuery获取元素
2.jQuery与js对象转换
3.jQuery中的遍历方式
4.jQuery中的事件绑定
1. jQuery介绍
1.1 jQuery概述
在JavaScript的使用过程中，存在很多问题，例如：兼容问题(咱不考虑)，元素获取方式单一(只能用基本的选择器)等等，因此就出现了很多第三方的封装库(将复杂的、麻烦的功能进行封装，提供给用户一种简单的、可直接调用的形式进行使用)，在众多的第三方库中脱颖而出的就是jQuery。
理念：写的少，做的多。（用更少的代码做更多的事情）
注意：jQuery中提供的函数或对象与js中的函数或对象是没有关系的。
2. jQuery基本使用
2.1 对象获取
2.1.1 基本选择器
//基本选择器
//使用js进行获取
var btns = document.getElementsByTagName("button");
var btns2 = document.getElementsByClassName("btn");
//使用jQuery的形式获取 jQuery的形式获取到的元素都是一组元素
//命名的时候为了和js的变量进行区分，通常jQuery的变量前面都会加上一个$
var $btns = $('button');
var $btns2 = $('.btn');
//典型错误：$ is not defined 该错误的出现意味着jQuery的文件未加载成功
console.log($btns);
console.log($btns2);
2.1.2 属性及伪类选择器
使用css2提供的属性选择器及css3提供的伪类选择器可以更快捷的选择元素
//css2/3中提供的选择器
//获取除了submit按钮之外的其他的input标签
var $inNodes = $('input:not([type="submit"])');
console.log($inNodes);
console.log("--------灵魂分割线----------");
var $btns3 = $('button:nth-of-type(2n+1)');
console.log($btns3);
//jQuery中提供的常用选择器
console.log($('button:eq(1)'));//=
console.log($('button:gt(1)'));//>
console.log($('button:lt(1)'));//<
2.1.3 获取对象-过滤选择器
jQuery中大多数的操作都是以函数的形式存在的，对于元素的获取同样提供了对应的函数
//jQuery中提供的常用过滤器
console.log($('button').eq(1));
console.log($('input[type="text"]').next());
console.log($('button').parent());
console.log($('button').parent().children('button:eq(0)'));
2.2 获取及修改元素的值
jQuery中获取到的元素都是以组的形式存在的，元素值的三种操作方式结合API详细了解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
<style>
div
height: 100px;width: 100px;
background-color: chartreuse;
</style>
<!-- 引入jquery -->
<script src="../js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="d1"></div>
<input type="text" id="i1" value="默认值">
<input type="text" id="i2">
</body>
<script>
//通过jquery选择器选择对应的jquery对象
//类似于java中的封装 Java中的类封装后不允许通过.属性进行操作 而是提供了对应属性操作的方法
//jquery对dom封装后 不能直接使用dom对象的属性(因为获取的不是dom对象而是jquery对象)
//jquery为常用属性额外定义的对应的方法 也定义的通用的属性操作方法
//对innerHTML 与innerTEXT提供的方法
var $d1 = $("#d1")
//方法如果传入参数就是修改 没有传入参数就是获取
$d1.html("修改内容")//等价于innerHTML属性的修改
console.log($d1.html())//没有设置属性就是获取操作
//对value属性的操作
var $i1 = $("#i1");
//jquery所有方法修改后返回的是当前jquery对象
var $t = $i1.val("修改后的值")
console.log($i1 == $t)
//通用属性操作 attr方法
//需要填入操作的属性名
//如果只填入属性名 就是获取指定属性的值 如果将值也填入就是修改
var $i2 = $("#i2");
console.log($i2.attr("type", "text"))
var $input = $("input");
//jquery内置迭代 如果当前jquery对象代表多个dom标签 那么会将所有标签同时操作
// $input.val("aaaa")
//由于返回值只能有一个 所以当前jquery对象代表对个标签获取值时 默认返回第一个dom对象的值
console.log($input.val())
</script>
</html>
2.3 获取及修改样式
多样式的修改语法与json的使用相同，其复合属性可使用"-"链接也可以首字母大写链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div
height: 100px;
width: 100px;
position: absolute;
left: 50px;
top: 20px;
background-color: chartreuse;
</style>
<!-- 引入jquery -->
<script src="../js/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="d1"></div>
<input type="text" id="i1" value="默认值">
<input type="text" id="i2">
</body>
<script>
//通过jquery选择器选择对应的jquery对象
//类似于java中的封装 Java中的类封装后不允许通过.属性进行操作 而是提供了对应属性操作的方法
//jquery对dom封装后 不能直接使用dom对象的属性(因为获取的不是dom对象而是jquery对象)
//虽然样式也是属性的异同也可以通过修改属性方法修改 但是很不方便
//jquery同样对常用样式额外提供了方法 并且提供了通用样式操作方法
var $d1=$("#d1");
//获取对应宽高数值
console.log($d1.width());
console.log($d1.height());
//样式通用方法
$d1.css("left","100px");
$d1.css("top",100);
console.log($d1.css("top"));
//但是在css样式设置时通常会设置多个样式
//jquery提供的css方法可以解析json格式数据 可以使用json形式填入多个样式修改
$d1.css("width":"200px","height":"200px","background-color":"red");
</script>
</html>
3. jQuery和js对象之间的转换
jQuery对象只能使用jQuery中提供的函数或属性，同样的jQuery中的属性或函数只能由jQuery对象调用.
JS对象只能使用JS中提供的函数或属性，同样的JS中的属性或函数只能由JS对象进行调用
3.1 jQuery对象转js对象
jQuery中提供了get(index)函数用于对象的转换，同时可以使用数组下标的形式进行转换
//获取元素使用jquery
var $btn = $('button');
//将jQuery对象转换为js对象
//var btn = $btn[0]; //利用数组本身的特性(下标)
var btn = $btn.get(0); //jQuery本身提供的一种转换函数
btn.onclick = function()
//将js对象转换为jQuery对象 this是js对象 $(js对象)
//console.log(this.innerHTML);
console.log($(this).html());
3.2 js对象转jQuery对象
js对象转jQuery对象只需要满足jQuery的格式要求即可，使用$()包裹js对象后就是jQuery对象
//js对象
var btn = document.getElementsByTagName("button")[0];
//$()包裹js对象即可转为jQuery对象
var $btn = $(btn);
$btn.css('background','red');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div
height: 100px;
width: 100px;
position: absolute;
left: 50px;
top: 20px;
background-color: chartreuse;
img
position: absolute;
img:nth-of-type(1)
height: 500px;
width: 500px;
border-radius: 500px;
img:nth-of-type(2)
left: 530px;
top: 150px;
height: 200px;
width:200px;
border-radius: 500px;
</style>
<!-- 引入jquery -->
<script src="../js/jquery-3.6.0.min.js"></script>
<script src="../js/jquery-rotate.js"></script>
</head>
<body>
<div id="d1"></div>
<input type="text" id="i1" value="默认值">
<input type="text" id="i2">
<img src="/img/cm1.jpg" alt="">
<img src="/img/cm1.jpg" alt="">
</body>
<script>
//通过jquery选择器选择对应的jquery对象
//类似于java中的封装 Java中的类封装后不允许通过.属性进行操作 而是提供了对应属性操作的方法
//jquery对dom封装后 不能直接使用dom对象的属性(因为获取的不是dom对象而是jquery对象)
//虽然样式也是属性的异同也可以通过修改属性方法修改 但是很不方便
//jquery同样对常用样式额外提供了方法 并且提供了通用样式操作方法
var $d1 = $("#d1");
//获取对应宽高数值
console.log($d1.width());
console.log($d1.height());
//样式通用方法
$d1.css("left", "100px");
$d1.css("top", 100);
console.log($d1.css("top"));
//但是在css样式设置时通常会设置多个样式
//jquery提供的css方法可以解析json格式数据 可以使用json形式填入多个样式修改
$d1.css( "width": "200px", "height": "200px", "background-color": "red" );
$d1.css( "left": 400, "top": 400 );
var i = 1;
setInterval(function ()
$("img:nth-of-type(1)").rotate(i += 1)
, 1)
var j = 1;
setInterval(function ()
$("img:nth-of-type(2)").rotate(j -= 1)
, 1)
</script>
</html>
4. jQuery中的遍历形式
数组、集合或json对象的遍历，jQuery中提供了新的更简洁的遍历形式
4.1 遍历节点
$(‘选择器’).each(function(index,element))，该写法是用于遍历获取到的元素对象
//目的：输出元素的内容 函数中不带参数
/* $('button').each(function()
console.log(this.innerHTML);
) */
//函数中带有一个参数,该参数代表下标
/* $('button').each(function(index)
console.log(index);
) */
//参数一：下标，参数二：对象
$('button').each(function(index,element)
console.log(index,element.innerHTML);
);
4.2 遍历数组或集合
$.each(data,function(key,value))，主要用于遍历数组或json对象等
//遍历指定的集合数据,参数一：代表要遍历的集合对象，参数二：函数
var arr = ["张飞","刘备","关羽"];
/* $.each(arr,function()
console.log(this);
) */
/* $.each(arr,function(index)
console.log(index);
) */
$.each(arr,function(index,element)
console.log(index,element);
)
var json = "name":'张飞',"age":13;
$.each(json,function(key,val)
console.log(key,val);
)
5. jQuery事件绑定
js中的所有事件都是以on开头的，在jQuery中是都不加on的
5.1 ready事件
ready事件是jQuery提供的当DOM元素加载完毕后执行的函数
ready和onload的区别：
1、onload事件是在页面的DOM结构及图片资源都加载完毕后执行的，而ready事件是在DOM结构加载完后执
2、onload事件只能使用一次，ready事件可使用多次
//onload是在页面结构都加载完毕(DOM树结构及图片资源)后才开始执行其中的代码
window.onload = function()
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function()
alert(this.innerHTML);
window.onload = function() //2个onolad无法同时执行，后面会覆盖前面的；
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function()
alert("hahaha");
$(document).ready(function()
$('button').click(function()
alert($(this).html());
)
)
$(function()
$('button').click(function()
alert($(this).html());
)
)
在js中是无法直接给一组元素绑定事件的，但是在jQuery中可以
$('button').click(function()
alert($(this).html())
)
$('button').click(show)
function show()
alert($(this).html())
5.2 焦点事件
当元素获取焦点及失去焦点时触发该事件，失去焦点blur，获取焦点focus
//焦点事件，当输入框获取到焦点时改变其背景颜色
$('input').focus(function()
$(this).css('background-color','pink')
)
//失去焦点事件，当输入框失去焦点时将背景变为白色
$('input').blur(function()
$(this).css(查看详情
leetcode刷题100天—237.删除链表中的节点（链表）—day01(代码片段)
前言：作者：神的孩子在歌唱大家好，我叫运智请编写一个函数，使其可以删除某个链表中给定的（非末尾）节点。传入函数的唯一参数为要被删除的节点。现有一个链表–head=[4,5,1,9]，它可以表示为:示例1：输入：head=[4,5,1, 查看详情
jquery：节点操作(代码片段)
jQuery中节点操作主要分为以下几种：查找节点。创建节点。插入节点。替换节点。复制节点。删除节点。一、查找节点示例：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,init... 查看详情
cgb2111-day01(代码片段)
...库的结构二,SQL语言--1,概述--2,SQL的分类三,数据库的常见操作--1,查询--2,新建--3,删库!!!四,表的常见操作--0,使用数据库--1,查询--2,创建--3,修改--4,删除--5,描述表结构--6,练习五,记录的常见操作--1,查询--2,插入--3,修改--4,删除六,总结:--... 查看详情
cgb2109-day01(代码片段)
...安装服务器端:存数据,管理数据2,安装客户端:连接服务器,操作服务器里的数据3,数据库的结构4,SQL语言1,概述2,分类:二,数据库的常见操作--1,创建库--2,查询库--4,删除库三,表的常见操作--1,使用指定的数据库--2,创建表--3,查看表--4,修... 查看详情
jquery对dom节点进行操作(删除节点)(代码片段)
1.定义和用法 remove()：用于从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素。 注意：remove()方法删除某个节点之后，该节点所包含的所有后代节点将同时被删除。该方法的返回值时一个指向已被删... 查看详情
cgb2108-day01(代码片段)
...,概述--2,安装--3,数据库结构二,SQL语言--1,概述--2,数据库的操作1,查询所有数据库2,创建数据库(不能同名)3,删除数据库--3,表的操作1,查询所有表2,创建表3,修改表4,删除表5,练习4,记录--1,查询所有记录--2,向表中插入记录--3,修改记录--4... 查看详情
cgb2106-day01(代码片段)
...据库--1,概述--2,Mysql数据库的安装--3,Mysql数据库的使用--4,操作数据库的语言二,常见的操作--1,数据库--2,表--!!!!3,记录一,数据库刘沛霞/皮皮霞:2250432165–1,概述用来存储数据和管理数据,最终形成类似于表格的样子,有行有列(字段)分... 查看详情
jquery对dom节点进行操作(包裹节点)(代码片段)
1.包裹节点 wrap():把匹配到的每一个元素用指定的HTML元素包裹起来 示例：把匹配到的每一个<p>标签用<div>包裹起来<body><scripttype="text/javascript">//入口函数$(document).ready(function()//遍历$("p").each(function(index) ... 查看详情
jquery6dom节点操作(代码片段)
学习要点：1.创建节点2.插入节点3.包裹节点4.节点操作DOM中有一个非常重要的功能，就是节点模型，也就是DOM中的“M”。页面中的元素结构就是通过这种节点模型来互相对应着的，通过这些节点关系，可以创建、插入、替换、克... 查看详情
day2：单链表的基本操作(代码片段)
...单链表的基本操作1、头文件2、初始化3、打印4、创建新节点5、尾插6、尾删7、头插8、头删9、插入10、删除11、查找12、销毁13、获取链表节点个数4、单链表的注意事项5、扩展6、源码目录目录顺序表单链表（不带附加头结点&#... 查看详情
jquery里面的dom操作（查找，创建，添加，删除节点）(代码片段)
一：创建元素节点（添加） 创建元素节点并且把节点作为元素的子节点添加到DOM树上 1.append():在元素下添加元素 用法：$("id").append("定义的节点");例如：varli1=$("<li>橘子</li>");&n... 查看详情
leetcode刷题100天—206.反转链表（链表）—day01(代码片段)
前言：作者：神的孩子在歌唱大家好，我叫运智给你单链表的头节点head，请你反转链表，并返回反转后的链表。示例1：输入：head=[1,2,3,4,5]输出： 查看详情
leetcode刷题100天—206.反转链表（链表）—day01(代码片段)
前言：作者：神的孩子在歌唱大家好，我叫运智给你单链表的头节点head，请你反转链表，并返回反转后的链表。示例1：输入：head=[1,2,3,4,5]输出： 查看详情
kubernetes（k8s）单matser集群架构的搭建（v1.20）(代码片段)
...作系统初始化配置部署etcd集群准备签发证书环境在master01节点上操作在node01节点上操作在node02节点上操作部署docker引擎部署Master组件在master01节点上操作部署WorkerNode组件在所有node节点上操作在master01节点上操作node01节点部署在mas... 查看详情
day01计算机基础和环境搭建(代码片段)
...项：机械将零件组合在一起，他们之间是无法进行协作。操作系统用于协调计算机的各个硬件，让硬件之间进行协同工作，以完成某个目标。常见的操作系统分 查看详情
越来越少人用jquery，但你就不学了吗？(代码片段)
如需要跟多资料请点击下方图片?（扫码加好友→备注66）JqueryDom操作? jQuery也提供了对HTML节点的操作，而且在原生js的基础之上进行了优化，使用起来更加方便。? 常用的从几个方面来操作，查找元素（选择器已经实现）；创建... 查看详情
jquery之常用dom操作(代码片段)
DOM操作分主要为三种,DOMCore,HTML-DOM和CSS-DOM查找节点查找元素节点主要通过jQuery的选择器来查找元素节点查找属性节点在查找到元素节点之后可以使用attr()来查找或设置对应节点的属性创建(子)节点使用$(html标签代码字符串)创建一... 查看详情