【jQuery】学习一下JS库——jQuery

最新推荐文章于 2024-07-24 11:09:48 发布
最新推荐文章于 2024-07-24 11:09:48 发布
阅读量164 收藏 1
点赞数
文章标签： jquery js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41619240/article/details/109551704
版权

【jQuery】学习一下JS库——jQuery

jQuery

$ == jQuery
顶级对象

$(function(){
    //页面加载完成才执行这里的代码
});

要求掌握：

  • DOM对象和jQuery对象
  • jQuery的使用方法
    • 选择器、样式、动画、属性、元素的创建、增、删、改、查
  • jQuery事件的注册、绑定、委托、解绑

一、jQuery对象

01. 基本概念，区分DOM对象和jQuery对象

  • 用原生JS获取来的对象就是DOM对象

  • jQuery方法获取的元素就是 jQuery对象

    • jQuery对象本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储）

  • 【注意】jQuery对象只能使用 jQuery方法，D0M对象则使用原生的 JavaScipt属性和方法

02. 两个对象之间的转换

  • DOM对象转换为jquery对象：

    • $(DOM对象)

  • jQuery对象转换为DOM对象：

    • $("element")[index]、$(element).get(index)

      伪数组里面的元素即为DOM对象，所以用数组的方法取出ＤＯＭ对象

二、jQuery的使用方法

关于隐式迭代！！！

  • 遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代
  • 简单理解∶给匹配到的所有元素进行循环遍历，执行相应的方法，而不用手动进行循环

01. 选择器法的方法

（1）$("selector");

  • CSS选择器方法：*、tagname、id、class、并集选择器、交集选择器、层级选择器

    使用方法同：CSS选择器、querySelector

  • 筛选选择器：:first、:last、:eq(index)、:odd、:even

    • 特殊：表单里的:checked（筛选被选中的表单元素）
（2）筛选方法
语法描述
.parent()查找父级
.children("selector")查找匹配的子级【亲儿子】
.find("selector")查找匹配选择器的【后代】
.siblings("selector")查找指定的兄弟节点，不包括自己本身，括号为空则为所有兄弟节点（伪数组形式）
.nextAll([expr])查找当前元素之后所有的同级元素
.prevAll([expr])查找当前元素之前所有的同级元素
.hasClass("className")检查当前的元素是否含有某个特定的类，如果有，则返回true
.eq(index)查找父元素中指定索引号所在的子元素， 父元素是jQuery对象（伪数组）
（3）获取祖先元素

  • parent()：返回父亲元素

  • parents()：返回一个数组，包含所有祖先元素

  • parents("选择器")：返回指定祖先元素

02. 样式的操作

（1）操作样式

  • 获取样式属性值

    • $("element").css("属性名");

      属性名必须加引号

      $("div").css("color");

  • 设置样式属性

    • $("element").css("属性名"，"属性值");

      属性值是数字可以不用单位和引号

    $("div").css("color","red");
$("div").css("fontSize",20);

  • 设置多组样式属性

    • $("element").css({"属性名":"属性值","属性名":"属性值"});

      将参数设置为对象形式，属性名和属性值是键值对的形式，属性与属性之间是用逗号隔开

      $("div").css({
 color:"red",
 width:200,
 backgroundColor:"blue"
});
（2）操作类

【注意】className不用添加 .

  • 添加类

    • $("element").addClass("className")

  • 删除类

    • $("element").removeClass("className")

  • 切换类（没有就添加，有就删除）

    • $("element").toggleClass("className")
$(".father").addClass("big");
$(".father").removeClass("big");
$(".father").toggleClass("big");

03. 事件控制

  • 触发事件

    • $("element").事件
      • 事件：click、mouseover、…（不添加on）

  • $("element").hover(function(){},functino(){});

    • 鼠标经过、离开复合事件（类似于CSS中:hover）
    • 两个函数参数，第一个函数是鼠标经过触发，第二个函数是鼠标离开触发
    • 只写一个函数，则鼠标经过、离开都会触发相同的函数内部事件

  • 表单事件change：表单发生变化时触发

  • 获得当前元素的索引号

    • $(this).index()

04. 动画效果的实现

（1）元素显示与隐藏效果

  • .show([speed,[easing],[funcition]])

    • 参数可省略
    • speed：动画速度，“fase，normal，slow”，或者是“具体时间”，单位是毫秒
    • easing：动画类型
    • function：回调函数

  • .hide([speed),[easing],[funcition]

    $("btn").click(function(){
    $("target").show("fast");	
    $("target").show(1000);
    $("target").show(1000,function(){
         
     });
});
（2）元素滑动效果
  • slideUp()、slideDown()、slideToggle()
（3）淡入淡出效果

  • fadeIn、fadeOut、fadeToggle

  • fadeTo：调整透明度（必须有速度和透明度）

    $("div").fadeTo(1000,0.5);
（3）动画队列

  • 基本概念：动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。

  • 所以需要停止动画

    • stop()：结束上一次动画，必须写在动画前面

  • animate(params,[speed],[ease],[fn])

    • params：需要更改的样式属性，以对象形式传递，不可省略，复合属性采用驼峰命名法
    • 其它参数可省略
    $("div").animate({
    left: 200,
    top: 400
},2000);

05. 属性的获取与设置

（1）固有属性
  • 获取属性：prop("固有属性")
  • 设置属性：prop("固有属性"，“属性值”)
（2）自定义属性
  • 获取属性：attr("自定义属性")
  • 设置属性：attr("自定义属性"，“属性值”)
  • 移除属性：removeAttr("自定义属性")
（3）数据缓存 data()

这个里面的数据是存放在元素的内存（缓存）里面的

  • 设置属性：data("属性名"，“属性值)

    这个属性在DOM结构上是看不到的

  • 获取属性：data("属性名")

    可以获取data()设置的属性

    还可以获取H5新增自定义属性data-属性名,使用时不需要加data-

06. 元素内容

（1）获取元素内容
  • $("div").html()：同innerHTML
  • $("div").text()：同innerText
  • $("div").val()：同value
（2）设置元素内容
  • $("element").html("内容")
  • $("element").text("内容")
  • $("element").val("内容")
  • toFixed(2)：可以保留两位小数，使用后变为字符串类型

四、操作

01. 遍历

  • each(function(index,domEle){})
    • 遍历匹配的每一个元素，主要用DOM处理
    • index是每个元素的索引号，domEle是每个DOM元素对象，不是jQuery对象
    • 所以要使用jquery方法，就需要将这个dom元素转换为jquery对象：$(domEle)
  • $.each(obj,function(index,element){})
    • 可用于遍历任何对象，主要用于数据处理，比如数组、对象
    • 函数有两个参数：index是每个元素的索引号，elemnet是遍历的内容

02. 创建

  • $("<标签名></标签名>")

    $("<p>这是动态创建的P元素</p>");

03. 增加

  • $("parent").append(child)：添加子元素child到父元素parent内部末尾

  • $("parent").prepend(child)：添加子元素child到父元素parent内部首位

  • $("parent").after("sibling")：添加元素sibling到parent元素的后面

04. 删除

  • $("element").remove()：删除匹配的元素
  • $("element").empty()：删除匹配元素内部的子节点
  • $("element").html("")：直接设置为空

五、事件

01. 注册事件

（1）绑定单个事件

与原生基本一致，比如 click、mouseover、 mouseout、bur、 focus、 change、 keydown、 keyup、 resize、scroll

$("element").click(function(){
  //事件处理程序  
});
（2）绑定多个事件——on

  • 语法结构：

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

    • events：一个或多个用空格分隔的事件类型，如"cick"或" keydown
    • selector：元素的子元素选择器，用于事件委托
    • fn：回调函数，即绑定在元素身上的侦听函数

  • 可以为同一个元素绑定多个事件

    $("div").on({
	mouseenter:function(){
         //事件处理程序  
    },
	click:function(){
        //事件处理程序  
    }
});

  • 如果事件处理程序相同，则

    $("div").on("mouseenter mouseleave",function(){
	$(this).toggle("");
});

  • 事件委托

    $(".father").on("click",".son",function(){
	//事件绑定在 .father 上，但触发的对象是 .son
});

  • 动态创建元素的绑定事件

    • on可以给未来动态创建的元素绑定事件

02. 解绑事件

  • off(event,[selector])

    $(".father").off("click");

$(".father").off("click",".son")

  • 关于one事件：只触发一次事件

    • one(event,[selector])
    $(".father").one("click");

$(".father").one("click",".son");

03. 自动触发事件

  • trigger("event")

  • triggerHandler("event")：不会触发元素的默认行为

    $(".father").trigger("click");

04. 事件对象

  • 阻止默认行为

    $("div").preventDefault();

// 或者
return false;

  • 阻止冒泡

    $("div").stopPropagation();

六、其它方法

01. 对象拷贝

  • 把某个对象拷贝（合并）给另外一个对象使用：$.extend([deep], target, objectl, [objectN])

    • deep：默认为 false 浅拷贝，如果设为true为深拷贝，
      • 浅拷贝：把原对象的复杂数据类型的地址拷贝给目标对象，此时原对象和目标对象的复杂数据类型指向同一个对象
      • 深拷贝：把原对象的所有数据完全复制一份并合并到目标对象
    • target：要拷贝的目标对象
    • object1：待拷贝到第一个对象的对象

    浅拷贝会覆盖目标对象的已有数据

    深拷贝会合并目标对象的不冲突的已有数据，冲突的数据仍会覆盖

Composition55555
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery学习——jQuery效果
WLkkjm的博客
04-13 231
一、jQuery学习——jQuery效果 1.显示和隐藏效果：hide()和show() <1>hide()方法:是把指定元素隐藏; show()方法:是把指定元素显示出来. <2>效果练习：实现jquery动画效果隐藏与显示 ●代码如下： <!DOCTYPE html> <html lang="en"...
jQuery学习笔记——jQuery选择器
vikeyyyy的博客
08-20 402
jQuery选择器之基本选择器 jQuery选择器——id选择器 $( "#id" ) id选择器也是基本的选择器，jQuery内部使用JavaScript函数document.getElementById()来处理ID的获取。原生语法的支持总是非常高效的，所以在操作DOM的获取上，如果能采用id的话尽然考虑用这个选择器。 id是唯一的，每个id值在一个页面中只...
jQuery看这一篇就够啦，jQuery基础大全，可用于快速回顾知识，面试首选
a2868221132的博客
03-27 5222
jQuery看这一篇就够啦，jQuery基础大全，可用于快速回顾知识，面试首选
JS compositionend事件解决自动补全输入框中文输入法问题
小菜鸟正洋洋的博客
03-29 2936
资料参考自：https://www.cnblogs.com/jesse007/p/5627167.html $("#fund").on({ //输入法完成时触发 compositionend:function(){ addInput(); }, keydown:function () { ...
利用compositionstart/end事件监听输入法事件
蔡武坤的博客
07-15 6076
var flag = false; document.querySelector('input').oninput = function() { setTimeout(() =&gt; { if (!flag) console.log(this.value); }, 0); }; document.querySelector('input').onkeyup = function(...
小议JavaScript库——Dojo、jQuery和PrototypeJS的比较.pdf
01-03
JavaScript 库比较 —— Dojo、jQuery 和 PrototypeJS 在当今的 Web 开发中，JavaScript 库扮演着越来越重要的角色。这些库提供了许多有用的功能，可以帮助开发者快速构建 Web 应用程序。本文将对 Dojo、jQuery 和 ...
jquery引用文件——jquery.js
11-25
jQuery，作为一个广泛使用的JavaScript库，自2006年发布以来，就以其简洁的API和强大的功能深受开发者喜爱。本文将深入探讨jQuery的核心原理，以及如何在实际项目中有效地引用和使用jQuery.js文件。 一、jQuery简介...
浅谈JavaScript库——jQuery,ExtJs的对比研究.pdf
01-02
"浅谈JavaScript库——jQuery,ExtJs的对比研究.pdf" 本文简要介绍了目前流行的JavaScript库，并对其中较为流行的两个库jQuery和ExtJs进行了较详细的介绍和对比研究。本文首先简要介绍了JavaScript库的概念和特点，...
jquery点击图片放大插件——即插即用.zip
03-26
jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。通过使用jQuery，开发者可以编写更少的代码实现更多的功能，提高了开发效率和代码可维护性。 二、jQuery插件机制 ...
简单易用的倒计时插件——jQuery.downCount.js.zip
09-21
jQuery.downCount.js是一款基于JavaScript库jQuery的倒计时插件，它允许开发者轻松地在网页上添加一个动态更新的倒计时计时器。通过简单的配置，你可以自定义倒计时的结束时间，插件会自动计算并显示剩余的时间。 #...
jQuery事件扩展机制
oudizuo的专栏
11-25 1804
当原生DOM事件无法满足开发需要时，可以通过jQuery的事件扩展机制来满足我们的需要。在jQuery.event.special域下添加自定义事件。 以textchange事件为例。该事件的定义为，在文本框中输入时，文本真正变化实时的获取文本改变的信号textchange。 先看实现代码： /////// (function(){ if(!jQuery || !$){
JQuery问题笔记一
weixin_53648675的博客
11-30 264
js正则 <script> var url = 'https://www.netword.com/DirectPayment.aspx?InvoiceID=40476a99cac06fc&GatewayCode=bluesnapgoogle'; function getURLParameter(name, source) { return decodeURIComponent((new RegExp('[?|&amp;|#]' + name + '=' + '([^
Next.js静态导出与动态路由优化
天涯学馆
07-20 1053
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 412
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
【React 】开发环境搭建详细指南
最新发布
lph159的博客
07-24 845
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 1002
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE中的重点*
qq_61132537的博客
07-22 904
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
JavaScript库之王——锋利的jQuery
jQuery是继Prototype之后又一个优秀的JavaScript库，由John Resig创建于2006年1月。它简化了遍历HTML文档、操作DOM、处理事件、执行动画和Ajax的操作。 jQuery独特而又优雅的代码风格改变了JavaScript程序员编写程序...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值