jQuery 《基础整合》 jQuery插件、jQueryAPI查询网站

article/2025/9/29 6:57:31

jQurey 的概念

jqurey 是一个快速简洁的JavaScript库 设计的总之能是 写更少的代码 做更多的事情

j 就是JavaScript 、Qurey 查询 意思就是查询js 把js 中的dom操作做了封装 我们可以快速的查询使用里面的功能
jQurey 封装了JavaScript常用的功能代码 优化了dom 的操作事件处理 动画设计和Ajax 交互

jQurey 的入口函数

     1 等着页面 DOM 加载完毕再去执行js代码$(document).ready(function(){$('div').hide();})2.等着页面 DOM 加载完毕再去执行js代码$(function(){$('div').hide()})

在这里插入图片描述

jquery对象和DOM对象

jQuery对象和DOM对象之间是可以相互转换的
因为js原生比jQuery更大 原生的一些属性和方法jQuery没有给我们封装 要使用这些方法和属性 需要吧jQuery对象转换为DOM对象才能使用

  • DOM 对象转换为jQuery对象
  • $('DOM’对象）
  • jQuery 对象转换为DOM
  • $(‘div’)[index] index是索引号
  • $(‘div’).get（index）index是索引号

jQuery 常用API

jQuery 基础选择器

原生JS 获取元素的方法很多很杂 且兼容情况不一致 因此jQuery给我们做了一些封装 获取元素统一标准

  • $( " 选择器"） 里面选择器直接写css选择器即可 但是要加引号
    在这里插入图片描述

jQuery 层级选择器

在这里插入图片描述

<body><div class="nav"> nav /div </div><div>   divvvvvv</div><ul><li> ul  li  </li><li>  ul  li </li><li> ul li</li></ul><ol><li>ol /li </li><li>ol /li </li><li>ol /li </li></ol><script>$(function(){console.log($('.div'));console.log($("ul li"));})</script>
</body>

在这里插入图片描述

隐式迭代

遍历内部DOM元素（伪数组形式储存）的过程叫做 隐式迭代
简单理解 在匹配到所有元素进行循环遍历 执行相应的方法 而不用我们在进行循环 简化我们的操作 方便调用

<body><div> surprise</div><div> surprise</div><div> surprise</div><div> surprise</div><ul><li>surprise 1</li><li>surprise 1</li><li>surprise 1</li><li>surprise 1</li></ul><script>$("div").css("background","pink")    $("ul li ").css("color",'red')  </script>
</body>

在这里插入图片描述

筛选选择器

在这里插入图片描述

<body><ul><li>ul li 1</li><li>ul li 2</li><li>ul li 3</li><li>ul li 4</li><li>ul li 5</li></ul><ol><li>ol li 1</li><li>ol li 2</li><li>ol li 3</li><li>ol li 4</li><li>ol li 5</li></ol><script>$(function(){$('ul li:first').css('color','red')$('ul li:eq(3)').css('color','red')  $('ol li:odd').css('color','red')$('ol li:even').css('color','blue')})</script>
</body>

在这里插入图片描述

jQuery 筛选方法

在这里插入图片描述

<body><div class="yey">yeye<div class="bab">babb<div class="erz">erz</div></div></div><div class="nav"><p> P </p><div><p>  sp</p></div></div><script>// 以下都是方法 都带括号$(function(){// 父级 parent（） 返回的是最近一级的父级console.log( $('.erz').parent());   // 子级 children（） 亲儿子级  类型子代选择器 ui> li// $('.nav').children('p').css('color','red')// 可以选择 所以的 子级 find（） 类似于后代选择器$('.nav').find('p').css('color','blue')})</script>
</body>

在这里插入图片描述
在这里插入图片描述

jquery 案例 下拉菜单 HTML+css+jquery

<script src="jQuery.min.js"></script><style>*{margin: 0;padding: 0;}li{list-style: none;}li {list-style-type: none;}        a {text-decoration: none;font-size: 14px;}        .nav {margin: 100px;            }.nav>li {position: relative;float: left;width: 80px;height: 40px;text-align: center;}        .nav li a {display: block;width: 100%;height: 100%;line-height: 40px;color: #333;}        .nav>li>a:hover {background-color: #eee;}        .nav ul {display: none;position: absolute;top: 40px;left: 0;width: 100%;border-left: 1px solid #FECC5B;border-right: 1px solid #FECC5B;}.nav ul li {border-bottom: 1px solid #FECC5B;}        .nav ul li a:hover {background-color: #FFF5DA;}</style>
</head>
<body><ul class="nav"><li><a href="#"> 李白</a><ul><li> <a href="#">刺客</a></li><li> <a href="#">打野</a></li><li> <a href="#">突进</a></li></ul></li><script>$(function(){// 鼠标经过$('.nav>li').mousemove(function(){// $(this) jQuery 当前元素 this不加引号// show（）显示元素 hide（）隐藏元素$(this).children('ul').show();})// 鼠标离开$('.nav>li').mouseout(function(){// $(this) jQuery 当前元素 this不加引号// show（）显示元素 hide（）隐藏元素$(this).children('ul').hide();})        })</script>
</body>

在这里插入图片描述

jQuery 排他思想

想要多选一 的效果
排他思想：当前元素设置样式 兄弟元素清楚样式

    <script src="jQuery.min.js"></script>
</head>
<body><button>按钮</button><button>按钮</button><button>按钮</button><button>按钮</button><button>按钮</button><button>按钮</button><script>$(function(){$("button").click(function(){$(this).css("background","skyblue");$(this).siblings("button").css("background","")})})</script>
</body>

在这里插入图片描述

链式编程

链式编程是为了节省代码量 使代码看起来更优雅

<body><button>按钮</button><button>按钮</button><button>按钮</button><button>按钮</button><button>按钮</button><button>按钮</button><script>$(function(){// $("button").click(function(){//     $(this).css("background","skyblue");//     $(this).siblings("button").css("background","")// })// 链式编程$(this).css("background","skyblue").sibling("button").css("background","")})

在这里插入图片描述

jQuery 样式操作 …操作CSS方法

jQuery 可以使用css方法 修改简单元素样式 也可以操作类 修改多个样式

  • 只写属性名 则返回的是属性值 $(this).css( " 属性名")
  • 参数 是 属性名 属性值 逗号分隔 是设置一组样式 属性必须加引号 如果是数字 可以不用加引号和单位 … $( this).css(“属性名”,“属性值”）
  • 参数可以是对象形式 方便设置多组样式 属性值和属性名 冒号隔开 非数字必须加引号
<style>div{width: 100px;height: 100px;margin: 100px auto;background-color: orange;}</style>
</head>
<body><div></div><script>$(function(){//只写属性名 则返回的是属性值console.log( $("div").css("width")); // 写属性名 和属性值  逗号隔开属性必须加引号// $("div").css("width","200px")// $("div").css("width",200)  //  属性值可以不用加引号// 参数可以是对象形式 方便设置多组样式 属性值和属性名 冒号隔开 非数字必须加引号$("div").css({width:200,height:200,backgroundColor:"skyblue"  // backgroundColor 使用驼峰命名法})})</script>
</body>

在这里插入图片描述
在这里插入图片描述

设置类样式方法

作用等同于以前的的classList 可以操作类样式 注意里面的参数不要会加点

  • 1 添加类
    $("div).addClass("类名”）
  • 2 移除类
    $('div).removeClass("类名”）
  • 3 切换类
    $('div).toggleClass("类名”）
 <style>div{width: 150px;height: 150px;background-color: orange;margin: 100px auto;transition: all 0.8s;}.nav{width: 200px;height: 200px;background-color: skyblue;transform: rotate(360deg);}</style>
</head>
<body><div ></div><script>$(function(){// 1 添加类  addClass（“ ”）// $("div").click(function(){//     $(this).addClass("nav")// })// 2 删除类 removeClass(" ")// $("div").click(function(){//     $(this).removeClass("nav")// })// 3 切换类 toggleClass(" ")$("div").click(function(){$(this).toggleClass("nav")})})</script>
</body>

jQuery 效果

jquery给我们封装了了很多动画效果

  • 显示和隐藏
    show（）显示
    hide（） 隐藏
    toggle（）切换
  • 滑动
    slideDown（）
    slideUp()
    slideToggle()
  • 淡入淡出
    fadeIn（）
    fadeOut()
    fadeToggle()
    fadeTo()
  • 自定义动画
    animate（）

显示和隐藏效果

显示语法规范

   show([speed,[easing],[fn]]

显示参数

  • 参数可以省略 无动画效果 直接显示
  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
  • easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
  • fn:在动画完成时执行的函数，每个元素执行一次。

隐藏语法规范

   hide([speed,[easing],[fn]])

显示参数

  • 参数可以省略 无动画效果 直接显示
  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
  • easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
  • fn:在动画完成时执行的函数，每个元素执行一次。
<script src="jQuery.min.js"></script><style>div{width: 150px;height: 200px;background-color: red;}</style>
</head>
<body><button>显示</button><button> 隐藏</button><button>切换</button><div></div><script>$(function(){// button 索引号为1 的 点击事件$("button").eq(1).click(function(){$("div").hide(1000,function(){//点击后 div 1000毫秒（1秒）隐藏  在执行回调函数alert(123)} )   })$("button").eq(0).click(function(){$("div").show(1000,function(){//点击后 div 1000毫秒（1秒）显示  在执行回调函数alert(456)} )   })$("button").eq(2).click(function(){$("div").toggle(1000,function(){//点击后 div 1000毫秒（1秒）切换 在执行回调函数alert(789)} )   })})</script>

在这里插入图片描述

滑动效果及事件切换

语法规范

 slideDown([speed],[easing],[fn])

显示参数

  • 参数可以省略 无动画效果 直接显示
  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
  • easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
  • fn:在动画完成时执行的函数，每个元素执行一次。
 <style>div{display: none;width: 150px;height: 300px;background-color: skyblue}</style>
</head>
<body><button>下拉滑动</button><button> 上拉滑动</button><button>切换滑动 </button><div></div><script>$(function(){$("button").eq(0).click(function(){$("div").slideDown(1000)  // 下滑动})$("button").eq(1).click(function(){$("div").slideUp(1000)  // 上拉滑动})$("button").eq(2).click(function(){$("div").slideToggle(1000) // 切换})})</script>

在这里插入图片描述

事件切换

       hover([over,]out)
  • over:鼠标移到元素上要触发的函数
  • out:鼠标移出元素要触发的函数
 $(".nav > li").hover(function(){  // 鼠标经过和离开$(this).children("ul").slideToggle()})  })

动画或效果队列

动画或效果一旦触发 就会执行 如果多次快速触发 就会造成多个动画或效果排队执行

停止排队

stop（） 用于停止动画 一定要加到动画前面 相当于停止上一次动画

$(".nav > li").hover(function(){  // 鼠标经过$(this).children("ul").stop().slideToggle() // stop 停止动画 必须加到动画前面})

淡入和淡出

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
语法：

   fadeTo([[speed],opacity,[easing],[fn]])
  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
  • opacity:一个0至1之间表示透明度的数字。
  • easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"
 <script src="jQuery.min.js"></script><style>div{display: none;width: 200px;height: 400px;background-color: pink;}</style>
</head>
<body><button>淡入</button><button>淡出 </button><button>切换</button><button>修改透明度</button><div></div><script>$(function(){$("button").eq(0).click(function(){$("div").fadeIn(1000)    // 淡入})$("button").eq(1).click(function(){$("div").fadeOut(1000)    //淡出})$("button").eq(2).click(function(){$("div").fadeToggle(1000)   // 切换})$("button").eq(0).click(function(){// 时间和透明度必须要写$("div").fadeTo(1000,0.5)    // 修改透明度})})</script>

在这里插入图片描述
淡入淡出 练习
高亮显示

在这里插入图片描述

<body><div class="nav"><ul><li><img src="images/01.jpg" alt=""></li><li><img src="images/02.jpg" alt=""></li><li><img src="images/03.jpg" alt=""></li><li><img src="images/04.jpg" alt=""></li><li><img src="images/05.jpg" alt=""></li><li><img src="images/06.jpg" alt=""></li></ul></div><script>$(function(){// 第一个function 是鼠标经过 第二个是鼠标离开$(".nav li").hover(function(){//siblings 查找兄弟节点不包括自己本身 除自己外其他兄弟节点透明降的到50%$(this).siblings().stop().fadeTo(200,0.5)    //停止动画排队},function(){$(this).siblings().stop().fadeTo(200,1);  }) })</script>
</body>

自定义动画

语法

  animate(params,[speed],[easing],[fn])

参数

  • params:一组包含作为动画属性和终值的样式属性和及其值的集合
  • speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
  • easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 “swing”.
  • fn:在动画完成时执行的函数，每个元素执行一次。

params 想要更改的样式呢属性 以对象形式传递 必须写 属性名可以不用带引号 注意：所有指定的属性必须用骆驼形式 其他参数可以省略

案例 自定义+淡入淡出

<script src="jQuery.min.js"></script><style>*{margin: 0;padding: 0;}li{list-style: none;}.nav{margin: 100px auto;width: 800px;height: 69px;background: url(images/bg.png)no-repeat;padding-left: 10px;}img{display: block;}.nav ul {overflow: hidden;}.nav ul li{position: relative;float: left;width: 69px;height: 69px;margin-right: 10px;}.nav .current{width: 224px;}.small{display: block;position: absolute;top: 0;left: 0;width: 69px;height: 69px;}.big{width: 224px;display: none;}.current .big{display: block;}.current .small {display: none;} </style>
</head>
<body><div class="nav"><ul><li class="current"> <a href="#"><img src="images/c.png" alt="" class="big"><img src="images/c1.jpg" alt="" class="small">  </a></li></ul></div><script>$(function() {// 鼠标经过某个小li 有两步操作：$(".nav li").mouseenter(function() {// 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入$(this).stop().animate({width: 224}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();// 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出$(this).siblings("li").stop().animate({width: 69}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();})});</script>
</body>

在这里插入图片描述

设置或获取元素固有属性值（prop）

元素固有属性就是元素本身自带的属性 比如< a > 元素里面的 href < input > 里边的 type
获取语法：

prop（“属性”）

设置属性语法：

prop（“属性”，“属性值”）

<body><a href="http://www.baidu.com"   title="固定属性">固定属性 prop</a><script>$(function(){// 获取固定属性 prop（ ）console.log($("a").prop("href")); $("a").prop("title","设置固定属性")

在这里插入图片描述
在这里插入图片描述

设置或获取元素自定义属性 attr（）

用户自己给元素添加的属性 称为自定义属性 比如 给div 添加index= “1”
获取属性语法：

attr （“属性”） // 类似于原生getAttribute()

设置属性语法：

 attr（“属性”，“属性值”） // 类似原生setAttribute()

<div index = "1">自定义属性 attr</div>//    自定义属性 attr（）console.log($("div").attr("index"));    //  获取自定义属性$("div").attr("index","8");  // 修改自定义属性})

在这里插入图片描述
在这里插入图片描述

数据缓存 data（）

data（） 方法可以在指定的元素上 存取数据 并不会修改DOM元素结构 一旦页面刷新 之前存放的数据将被移除
附加数据语法：

 data（“name”，“value“）  // 被选元素添加数据

获取数据语法：

data（“name”）    // 向被选元素 获取数据

同时还可以读取HTML5 自定义属性 date-index 得到的是数字型

  <span data-index="2"> 123</span>//    数据缓存 data（）$("span").data("uname","red")console.log($("span").data("uname"));console.log($("span").data("index")); // 获取H5自定义属性 得到的是数字型})

在这里插入图片描述

：checked 选择器

：checked 查找被选中的表单元素
全选按钮 案例

<body>      <div><input type="checkbox" name="" id="" class="all"> 全选</div><div><input type="checkbox" name="" id="" class="add"> 单选</div> <div><input type="checkbox" name="" id="" class="add"> 单选</div>  <div><input type="checkbox" name="" id="" class="add"> 单选</div> <div><input type="checkbox" name="" id="" class="add"> 单选</div> <div><input type="checkbox" name="" id="" class="all"> 全选</div><script>$(function(){$(".all").change(function(){// console.log($(this).prop("checked"));  打印检查 得到 true false// 核心思路：当全选按钮发生改变时 拿到全选按钮的状态 false 或true 判定是否选中// 然后把拿到的状态赋值给单选按钮 同时让另外一个全选按钮一起发生变化$(".add,.all").prop("checked",$(this).prop("checked") )});$(".add").change(function(){// 被选中的单选复选框的个数// console.log($(".add:checked").length); 打印查看//  $(".add").length) 是所有单选复选框的个数// :checked返回几个复选框被选中if($(".add:checked").length === $(".add").length){$(".all").prop("checked",true)}else{$(".all").prop("checked",false)}})})</script>
</body>

在这里插入图片描述在这里插入图片描述

jQuery 内容文本值

普通元素内容html() 相当于原生inner HTML
语法：

html()                 //  获取元素内容 包含标签
html( "内容")         // 设置元素内容

普通元素内容text()
语法：

text()                 //  获取元素内容 不包含标签
text( "内容")         // 设置元素内容

获取设置表单值 val()
语法：

val()                 //  获取表单值
val( "内容")         // 设置修改表单值

<body><div><span>132</span></div><input type="text" value="请输入"><script>$(function(){// 获取设置元素内容 HTML（）console.log($("div").html());  // <span>132</span> 带有标签 $("div").html("修改内容")// 获取设置元素文本内容 text（）console.log($("div").text());  // 只有内容 没有标签$("div").text("text修改内容")// 获取设置表单值 val()console.log($("input").val());  // 获取表单值$("input").val("请输入内容");  // 修改表单值})</script>
</body>

在这里插入图片描述
在这里插入图片描述

jQuery 元素操作

主要遍历、创建、添加、删除元素操作

遍历元素

jQuery 隐式迭代是对同一类元素做来了同样的操作 如果想对同一类元素做不同的操作 就需要遍历
语法1：

 $("div") .each(function( index,domEle ){xxx;}
  • each（）方法 遍历匹配每一个元素 主要用DOM 处理 each 每一个
  • 里面的回调函数有两个参数 index是每个元素的索引号 domEle 是每个DOM元素对象 不是jQuery对象
  • 想要使用 jQuery方法 需要给这个dom 元素转换为jQuery 对象$（domEle）
<body><div>1</div><div>2</div><div>3</div><script>$(function(){var num = 0var arr = ['red','blue','pink' ]// each() 方法遍历 元素$("div").each(function( i,domEle){// 回调函数的第一个参数一定索引号 可以是自己指定索引号名称console.log(i);// 回调函数的第二个参数 一定是dom元素对象console.log(domEle);$(domEle).css('backgroundColor',arr[i])num += ($(domEle).text())-0   // -0 隐式转换为数字型 也可以用parseInt})console.log(num);})</script>
</body>

在这里插入图片描述
语法2:

$.each(对象，function（ index，element）{xxx}
  • $.each () 方法可用于遍历任何对象 主要用于数据处理 比如数组 、对象
  • 里面有两个参数 index是索引号、element是遍历内容
 $.each(arr,function( i,exe){    // 遍历数组console.log(i);console.log(exe);})$.each({          // 遍历对象name:'Angle',age:'22'},function( i,exe){console.log(i);  //输出的是属性名console.log(exe); // 输出的是属性值})

在这里插入图片描述

创建 添加 删除 元素

  • 创建元素
    $("< li > 创建元素< / li>")
  • 添加元素 内部添加
    内部添加 element.append（“内容”） 内部添加 并且放到内容最后面
    内部添加 element.prepend（“内容”） 内部添加 并且放到内容最前面
  • 外部添加
    element.after（“内容”） 把内容放到目标元素后面
    element.before（“内容”）把内容放到目标元素前面
  • 删除元素
    element.remove（） 删除匹配的元素本身
    element.empty 删除匹配的元素集合所有的子节点
    element（“”） 清空匹配的元素内容

jQuery 尺寸

在这里插入图片描述

  • 参数为空 则是获取相应的值 返回的是数字型
  • 如果参数为数字 则是修改相应的值 可以不用写单位

jQuery 位置

位置主要有三个：offset（）、position（）、scrollTop()/scrollLeft()

  • offset ()设置或获取元素偏移
    offset（）方法 设置或返回被选元素相对于文档的偏移坐标 跟父级没有关系
    有两个属性 left 、top ,offset().top 用于获取距离文档顶部的距离,offset().left用于获取距离文档左侧的距离 可以设置元素偏移量offset（{top：10；left：10}）

  • position（）获取带有定位父级位置 （偏移）如果父级没有定位则以文档为准 这个方法只能获取不能设置偏移

  • scrollTop()/scrollLeft() 设置被卷去的头部和左侧

jQuery 事件处理

事件处理 on（）绑定事件
on（）方法在匹配元素上绑定一个或多个事件处理函数
语法：

element.on(events,[selector],fn )

events一个或多个用空格分割的事件类型
selector 元素的 子元素选择器
fn 回调函数 绑定在元素身上的侦听函数

.nav{background-color: purple;}</style>
</head>
<body><div></div><script>$(function(){// 事件处理 on（）// $("div").on({//     mouseover:function(){//         $(this).css("background", "red")//     },//     mouseout:function(){//         $(this).css("background", "pink")//     },//     click:function(){//         $(this).css("background", "green")//     }// })$("div").on("mouseover mouseout",function(){   // 添加类名  用空格隔开$(this).toggleClass("nav") })})</script>
</body>

事件解绑 off（）

在选择元素上移除一个或多个事件的事件处理函数。

off(events,[selector],[fn])

  • events:一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", “keydown.myPlugin”, 或者 “.myPlugin”.

  • selector:一个最初传递到.on()事件处理程序附加的选择器。

  • fn:事件处理程序函数以前附加事件上，或特殊值false.

  • $(“p”).off() 解绑P元素所有事件处理程序

  • $(“p”).off( “click” ) 解绑P元素上的点击事件

  • $(“ul”).off(“click”,“li”); 解绑事件委托

如果事件 只想触发一次 可以使用one（）来绑定事件

one(type,[data],fn)    绑定一个一次性的事件处理函数。

  • type:添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。

  • data:将要传递给事件处理函数的数据映射

  • fn:每当事件触发时执行的函数。

自动触发事件

element.click（） 第一种简写形式
element.trigger（“type” ） 第二种自动触发模式 type:一个事件对象或者要触发的事件类型

jquery 对象拷贝

如果想要把某个对象拷贝（合并）给另外一个对象使用 可以用$.extend()方法
语法：
$.extend([deep], target, object1, [objectN])

  • deep 如果设置为true 为深拷贝 默认false 浅拷贝
  • target ：要拷贝 的目标对象
  • object1：待拷贝的第一个对象的对象
  • 浅拷贝就是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象 修改目标对象会影响被拷贝对象
  • 深拷贝 把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性 会合并到一起

jQuery 插件

jQuery之家：http://www.htmleaf.com/
jQuery库：https://www.jq22.com/
使用步骤 ：
下载插件 引入相关文件 jQuery文件和插件文件
复制HTML css js 调用插件

jQuery API 查询网站

https://jquery.cuishifeng.cn/index.html
在这里插入图片描述


http://chatgpt.dhexx.cn/article/UlZF6V8U.shtml

相关文章

jQuery 下载与安装教程

jQuery 下载与安装教程

jQuery的简介&#xff1a; jQuery 是一个 JavaScript 函数库。 jQuery 是一个轻量级的"写的少&#xff0c;做的多"的 JavaScript 库。 jQuery 功能概述&#xff1a; HTML 元素选取&#xff1b; HTML 元素操作&#xff1b; CSS 操作&#xff1b; HTML 事件函数&#x…
阅读更多...
学习jQuery这一篇就够了

学习jQuery这一篇就够了

目录 第一章 jQuery简介1.1、jQuery简介1.2、jQuery官网1.3、jQuery版本介绍1.4、jQuery引入方式1.5、jQuery快速使用1.6、jQuery两把利器 第二章 jQuery核心函数2.1、选择器2.1.1、基本选择器2.1.1.1、标签选择器2.1.1.2、id选择器2.1.1.3、class选择器2.1.1.4、通配符选择器2…
阅读更多...
JQuery安装与下载教程

JQuery安装与下载教程

jQuery安装与下载 JQuery 是一个javaScript库&#xff0c;是一个轻量级的"写的少&#xff0c;做的多"的JavaScript库。jQuery 极大地简化javaScript编程 --juery相比js优点&#xff1a; jquery的onload加载事件速度更快&#xff0c;并且多个加载并行 【jq绑定事件…
阅读更多...
jQuery看这一篇就够啦，jQuery基础大全，可用于快速回顾知识，面试首选

jQuery看这一篇就够啦，jQuery基础大全，可用于快速回顾知识，面试首选

1 jQuery基本使用 1.1 入口函数 $(document).ready(function(){... // 此处是页面DOM加载完成的入口 });$(function () { ... // 此处是页面 DOM 加载完成的入口 -- 推荐 }) ; 1.2 jQuery 的顶级对象 $ $ 是 jQuery 的别称&#xff0c;在代码中可以使用 jQuery 代替 $…
阅读更多...
jQuery入门到精通全套完整版

jQuery入门到精通全套完整版

思维导图 p1/41p $是函数名 jQuery封装了javascript的方法调用&#xff0c;简化了javascript对HTML DOM操作 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210604153945566.png?x-oss-processimage/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ib…
阅读更多...
jQuery基础以及下载

jQuery基础以及下载

今天小编要给大家介绍一个新的知识点——jQuery&#xff0c;那什么是jQuery呢&#xff1f;我们为什么要学习jQuery呢&#xff1f;今天小编就给大家简单介绍一下 目录 一、了解jQuery 二、jQuery库的下载和引用 1.jQuery的下载 2.jQuery的引用 三、jQuery选择器 1.基本选择…
阅读更多...
JQuery 基础知识学习（详尽版）

JQuery 基础知识学习（详尽版）

JQuery 详尽的基础知识学习 jQuery 语法jQuery 选择器jQuery 选择器&#xff08;大全&#xff09;jQuery 事件ready()holdReady()on()off()one()其他事件案例01 jQuery CSS样式案例02 jQuery DOM遍历遍历父元素案例03 遍历同级元素案例04 遍历子元素案例05 first()last()eq(num…
阅读更多...
jQuery的知识汇总

jQuery的知识汇总

1.什么是jQuery? jQuery是JavaScript库&#xff0c;也即jQuery中是封装了很多的javaScript语句&#xff0c;函数。相当于Java的工具类&#xff0c;其也是一款跨主流浏览器的JavaScript库&#xff0c;简化了JavaScript对HTML,Dom的操作。大约是在2004年左右出现的。 所以我们…
阅读更多...
18道JQuery技术基础知识测试题

18道JQuery技术基础知识测试题

1、什么DOM对象&#xff08;&#xff09; A、是javascript访问页面元素的对象 B、html对象 C、C#对象 D、java对象 2、什么是jQuery对象&#xff08;&#xff09; A、jQuery库自身具有方法&#xff0c;获取页面元素的对象 B、C#对象 C、C对象 D、java对象 3、jQuery添加CSS样式…
阅读更多...
学习jQuery初级中级高级用法 | 一篇就够了

学习jQuery初级中级高级用法 | 一篇就够了

前言&#xff1a;本篇文章可以带你快速上手jQuery&#xff0c;本文包括jQuery各种常用以及高级用法&#xff0c;为后续学习可以做好铺垫&#xff0c;知识点非常全面。 目录 一、认识jQuery 1.1 举个例子 二、学习前的准备 2.1 第一步&#xff1a;下包 2.2 第二步&#xff…
阅读更多...
c引入静态链接库

c引入静态链接库

一、静态链接库项目 1、创建头文件library.h文件 #ifndef TESTC_LIB_LIBRARY_H #define TESTC_LIB_LIBRARY_Hvoid hello(void); void hello2(void);#endif //TESTC_LIB_LIBRARY_H 2、创建c文件library.c #include "library.h"#include <stdio.h>void hello…
阅读更多...
关于动态链接库和静态链接库

关于动态链接库和静态链接库

关于动态链接库和静态链接库 库是写好的现有的&#xff0c;成熟的&#xff0c;可以复用的代码。现实中每个程序都要依赖很多基础的底层库&#xff0c;不可能每个人的代码都从零开始&#xff0c;因此库的存在意义非同寻常。 本质上来说库是一种可执行代码的二进制形式&#xf…
阅读更多...
1.静态链接库的生成和使用

1.静态链接库的生成和使用

1.什么时静态链接库 静态库&#xff08;Static Library&#xff09;通常包含一堆程序员自定义的变量与函数&#xff0c;在编译期间由编译器和链接器将它集成到可执行文件中&#xff0c;也就是生成的.exe文件中 2.静态库的扩展名 在Windows下&#xff0c;静态库的扩展名是.li…
阅读更多...
基于vs2019的静态链接库的创建与使用（超详细）

基于vs2019的静态链接库的创建与使用（超详细）

文章目录 前言一、什么是静态链接库&#xff1f;二、静态链接库的建立与使用1、静态链接库的建立创建一个静态链接库项目创建一个头文件编写自己的静态库生成静态库 2、静态链接库的使用创建一个新项目写入自己定义的那个头文件重新打开vs时 总结 前言 在我们平时写代码的时候…
阅读更多...
C++的静态链接库和动态链接库

C++的静态链接库和动态链接库

在电脑上安装某个软件的时候&#xff0c;我们都能看到安装目录下有很多lib和dll文件&#xff0c;并且我相信&#xff0c;你在用某个软件工具的时候遇到过以下这个界面&#xff1a; 这个界面提示你如案件在运行过程中少了某一个文件&#xff0c;导致软件无法再进行运行下去。 再…
阅读更多...
静态链接库(Lib)和动态链接库(DLL)

静态链接库(Lib)和动态链接库(DLL)

序言&#xff1a;本文主要讲解静态链接库和动态链接库的区别&#xff0c;以及怎么样编译和引用两种库&#xff0c;怎么样从DLL中导出函数和导出C类。 一、静态链接库和动态链接库 1.静态链接库(.LIB)&#xff1a;函数和数据被编译进一个二进制文件。发布时&#xff0c;只需要发…
阅读更多...
C++静态链接库与动态链接库

C++静态链接库与动态链接库

C静态链接库与动态链接库 什么是库程序编译成可执行程序的步骤静态链接库与动态链接库的区别&#xff08;简易版&#xff09;&#xff1a;静态链接库调用实现动态链接库调用实现g&#xff08;gcc&#xff09;编译选项 什么是库 库是写好的、现有的、可复用的代码。库是一种可执…
阅读更多...
「C/C++」C/C++静态链接库与动态链接库

「C/C++」C/C++静态链接库与动态链接库

博客主页&#xff1a;何曾参静谧的博客 文章专栏&#xff1a;「C/C」C/C学习 目录 相关术语案例环境&#xff1a;Win10VS2019一、链接库介绍二、静态链接库&#xff08;Static Library&#xff09;2.1、静态库优缺点2.2、静态库的创建2.2.1、创建静态库项目2.2.2、添加.h头文件…
阅读更多...
C++封装静态链接库及使用

C++封装静态链接库及使用

一、为什么要把程序封装成库 有时我们需要把自己的程序交给第三方调用&#xff0c;但是又不想被别人看到自己的具体实现代码&#xff0c;就封装成库给别人使用。库有动态链接库和静态链接库&#xff0c;区别是动态链接库可以在程序运行时动态链接&#xff0c;而静态链接库相当于…
阅读更多...
C++ 创建静态链接库和动态链接库

C++ 创建静态链接库和动态链接库

上篇文章演示了如何使用C 编译的静态链接库和动态链接库&#xff0c;本篇文章主要介绍如何创建静态链接库和动态链接库&#xff0c;本文使用的工具是visual studio 2019 企业版&#xff0c;需要安装对应的Csdk&#xff0c;可以参考网上其他文章&#xff0c;本问不在赘述。 一、…
阅读更多...
推荐文章

Copyright @ 2022~2023