JQuery使用方法简介（三）

最新推荐文章于 2024-07-24 16:20:17 发布
最新推荐文章于 2024-07-24 16:20:17 发布
阅读量143 收藏
点赞数 3
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62697897/article/details/127366301
版权

目录

一、DOM

1、获取div的html内容       div.html()

2、获取div的文本内容       div.text()

3、获取inp的value的值     inp.val()

4、创建元素          $("<p></p>")        

5、拼接元素： p放到div中        div.append(p)

6、拼接元素： p放到div中        p.appendTo(div)

7、a.prepend(b)

8、a.prependTo(b)

9、把b插入到a后面          a.after(b)

10、把b插入到a前面        a.before(b)

11、把a插入到b后面        a.insertAfter(b)

12、把a插入到b前面        a.insertBefore(b)

13、用b替换a元素           a.replaceWith(b)

14、用a替换b          a.replaceAll(b)

15、删除a元素        a.remove()

16、清空a的子元素        a.empty()

二、事件

1、绑定单击事件

2、绑定鼠标移入事件

3、$('#div1').on('click',function{ });

4、$('#div1').off();

5、注意：敲重点

三、动画

1、简单动画

2、任意动画

3、jquery动画拓展库jQuery.easing

一、DOM

1、获取div的html内容       div.html()

2、获取div的文本内容       div.text()

3、获取inp的value的值     inp.val()

4、创建元素      $("<p></p>")

5、拼接元素： p放到div中        div.append(p)

6、拼接元素： p放到div中        p.appendTo(div)

7、a.prepend(b)

   <1>插入到最前面

   <2>a是父级，b是子级

8、a.prependTo(b)

   <1>插入到最前面

   <2>a是子级，b是父级

9、把b插入到a后面          a.after(b)

10、把b插入到a前面        a.before(b)

11、把a插入到b后面        a.insertAfter(b)

12、把a插入到b前面        a.insertBefore(b)

13、用b替换a元素           a.replaceWith(b)

14、用a替换b          a.replaceAll(b)

15、删除a元素        a.remove()

16、清空a的子元素        a.empty()

二、事件

1、绑定单击事件

   $('#div1').click(function{ });

2、绑定鼠标移入事件

   $('#div1').mousemove(function(){ });

3、$('#div1').on('click',function{ });

   <1>绑定事件

   <2>可同时添加多个事件

     eg: $('#div1').on({
             a: fun1,
             b: fun2
          });

4、$('#div1').off();

   <1>删除事件

   <2>全部删除

   <3>如果删除某一个事件括号传入指定值

5、注意：敲重点

   <1>mouseover  mouseout  与  mouseenter  mouseleave的区别：

      1）over与out会造成多次无效的触发

      2）enter与leave鼠标移入不会进行触发，建议使用enter与leave

   <2>复合方法

      1）ready

      2）hover(fn1,fn2)

   <3>事件对象

      1）默认传参的e  (这个是变量名，啥都可以，见名知意)

      2）pageX        ===clientX

      3）pageY        ===clientY

      4）点击元素：traget

      5）绑定元素：currentTarget

      6）获取时间戳：timeStamp

      7）类型：type

   <4>注意：JQ不支持滚轮事件

   <5>阻止冒泡：e.stopPropagation()

   <6>阻止默认：preventDefault()

   <7>既阻止冒泡，也阻止默认：return    false

三、动画

1、简单动画

（1）显示：show()

（2）隐藏：hide()

（3）显示或隐藏：toggle()

（4）向下展开：slideDown()

（5）向上收起：slideUp()

（6）展开或收起：slideToggle

（7）淡入：fadeln()

（8）淡出：fadeOut()

（9）渐变到一定程度：fadeTo()

（10）淡入或淡出：fadeToggle()

   注意：上面小括号可以传递两个参数 

   1. 事件  

   2. 回调函数   时间

      <1>毫秒

      <2>有默认的三个值

         1)show

         2)normal

         3)fast

2、任意动画

(1)原生jq动画，不支持颜色

   d.animate({
       left：'50px',
       top:  '50px'
   },2000)

(2)具有累加累减的功能：left: "+=100px"

(3)同步动画：同时改变的

(4)列队动画

   <1>回调：d.animate({},fn(){})

   <2>连缀：d.animate().animate().animate()

(5)动画控制

   <1>暂停：stop()

   <2>延迟：delay()

   <3>结束：finish()

3、jquery动画拓展库jQuery.easing

具体案例代码：

<!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>jq</title>
    <style>
        section{
            width: 100px;
            height: 100px;
            background-color: gold;
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <span>ul  item1</span>
        </li>
        <li>ul  item2</li>
        <li class="yes">ul  item3</li>
        <li>ul  item4</li>
        <li>ul  item5</li>
    </ul>
    <ol>
        <li>ol item1</li>
        <li class="yes">ol item2</li>
        <li>ol item3</li>
        <li>ol item4</li>
        <li>ol item5</li>
    </ol>
    <p></p>
    <button>点我</button>
    <section></section>
 
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
    // var p = document.getElementsByTagName("p")[0];
    // p.innerHTML = "上山打老虎"
    // p.style.color = "red";
    // $("p").html("上山打老虎")
    //       .css("color","red")


    // dom与jq可以互换
    // var  dOK = document.getElementById("ok");
    // console.log($(dOK));
    // console.log($("#ok")[0]);

    // window.onload = function(){
    //     dom0方法，只能实现一次
    // }
    
    // $(document).ready(function(){
    //     dom2方法，可以实现多次，还可以简写
    // })

    // $(function(){
    //     上面ready方法的简写
    // })

    // onload方法与ready方法的区别是什么？

    $("ol  li:nth-of-type(2)").css({
        color: "red",
        fontSize: 26
        // 'font-size': 26
    }).attr("id","ok").toggleClass("yes")

    $("ul      li:eq(3)").css({
        color: "green"
    })


    // 非破坏性操作：方法返回自身（this指向原来的jq对象）
    // 破坏性操作：this指向新的jq对象
    // var a = $("ul  li").filter(".yes").end().css({
    //     color: "pink"
    // }).html()
    // console.log(a);

    // $("p").html("<a href='###'>123123</a>")

    // $("ul").remove()
    $("p").click(function(){
        console.log(111)
    }).hover(function(){
        console.log(222)
    }, function(){
        console.log(333)
    })

    $("button").click(function(){
        // $("section").hide()
        // $("section").fadeToggle(3000,function(){
        //     // 动画执行结束后，执行这个方法
        //     alert("动画结束了")
        // })

        // 使用回调
        // $("section").animate({
        //     width: 200,
        //     // height: 200
        // },300,function(){
        //     // alert("ok")
        //     $("section").animate({
        //         height: 200
        //     }, 300)
        // })
        $("section").animate({width: 200},300)
                    .animate({height: 300},300)
    })
</script>
</html>

运行结果：

点击按钮前：                                                         点击按钮后：

                    

傻乎乎的小不点
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery的基本使用方法
qq_52990325的博客
07-30 9948
jQuery基本使用
jQuery的常用方法
Java721的博客
08-18 250
jQuery操作DOM 开发工具 Hbuilder官网 jQuery下官网 新建项目并引入js文件 01-jQuery选择器 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery选择器</title> </head> <body> <h3>jQuery选择器</h3> <div
jquery变量var的使用
热门推荐
悦分享
11-11 1万+
变量var的使用 js的变量没有类型 var $li = $('#' + file.id), $percent = $li.find('.progress span'); //console.log("percentage:", percentage); ...
jQuery学习笔记
qq_30166465的博客
11-11 253
建议搭配b站动力节点的jQuery课程食用
jQuery简介及使用
qi341500的博客
10-03 1116
1、JavaScript库 2、jQuery简介 3、jQuery优点 4、jQuery的下载及使用 5、jQuery的入口函数 6、jQuery的顶级对象$
jquery自定义简介弹框
04-13
jquery+css+html 自定义弹框 代码简洁易懂 三个js方法搞定，使用了html代码显示弹框 css控制弹框样式 随着页面移动显示在中间位置 jquery+js 控制弹框操作 可操作点击确认取消 实现自定义方法。文件解压之后可直接...
jquery.validate 使用
03-23
本文将深入探讨jQuery Validate的使用方法，以及如何结合实际项目进行应用。 一、jQuery Validate插件简介 jQuery Validate是一款由Jörn Zaefferer开发的jQuery插件，主要用于表单验证。它提供了丰富的验证规则和...
强大的jQuery省市区城市三级联动插件
06-10
### 一、jQuery简介 jQuery是一款轻量级的JavaScript库，其核心理念是“Write Less, Do More”。它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务，极大地提高了前端开发效率。jQuery的语法设计使得开发者...
jQuery三级树状菜单代码.zip
09-23
3. **jQuery核心库（jquery-1.11.2.min.js）**：这是jQuery的核心文件，提供了JavaScript函数和方法，使得我们可以使用jQuery API来操作DOM元素和触发事件。 4. **树状菜单插件（jquery.treemenu.js）**：此文件是...
Next.js静态导出与动态路由优化
天涯学馆
07-20 1046
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
【React 】开发环境搭建详细指南
lph159的博客
07-24 562
无论你是刚刚开始学习 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 974
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 885
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 979
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
vue如何解决跨域？
FENGZXCjjjjj的博客
07-21 489
在Vue.js项目中，当你的前端应用尝试从与自身不同源的服务器（协议、域名、端口中的任一不同）加载资源时，可能会遇到跨域（CORS, Cross-Origin Resource Sharing）问题。
thinkphp8结合layui2.9 图片上传验证
quweiie的专栏
07-21 277
thinkphp8图片上传的验证
Angular由一个bug说起之八：实践中遇到的一个数据颗粒度的问题
最新发布
KenkoTech的博客
07-24 292
之所以使用这种比较直接的方式是因为项目中的数据类型已经确定，而且对数字的处理逻辑没有统一在一个文件中。这是大型项目经常遇到的问题，起到相同作用的代码因为一些小的差别而分别写在管理各自功能的文件里。文件存入数据库，这样我们就可以统一维护一个表，不管是前端来处理数据还是后端来处理都能遵守相同的规则。针对这篇文章提到的数字缩写的问题，可以有两种处理方案。来展示数据的功能，这些数据根据不同的类型和单位会为其加上前缀、后缀或者省略小数。
typescript中type和interface有什么区别，如何选择？
闻人放歌的三寸青草园圃
07-23 103
【代码】typescript中type和interface有什么区别，如何选择？
【Vue3】响应式数据
又言又语
07-20 476
查看联系方式
jQuery Ajax：异步交互与load方法详解
jQuery提供了一套易于使用的接口来封装Ajax操作，包括`.ajax()`方法作为底层基础，其上封装了更简洁的接口，如`.load()`、`.get()`和`.post()`。`.load()`方法是其中一个常用的方法，用于加载外部HTML内容到指定元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值