Jquery学习笔记

最新推荐文章于 2022-03-19 19:00:25 发布
最新推荐文章于 2022-03-19 19:00:25 发布
阅读量141 收藏 4
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jsupoker/article/details/109303155
版权

Jquery学习笔记

网页模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery学习</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
<div id="container">
    <div id="top">

    </div>
    <div id="center">
        <div class="box-container">
            <h1>用户注册</h1>
           <form name="myform">
               <input  class="inbox" type="text" placeholder="用户名"><br><br>
               <input  class="inbox" type="password" placeholder="密码"><br><br>
               <input  class="inbox" type="email" placeholder="邮箱"><br><br>
               <input  class="inbox" type="tel" placeholder="电话"><br><br>
           </form>
        </div>
    </div>
    <div id="bottom">

    </div>
</div>
</body>
</html>

Jquery选择器

$(function () {

   console.log($("#center").prop("tagName"))

   console.log($(".box").prop("tagName"))

   console.log($(".box.bnbox").prop("tagName"))

   console.log($(".box-container:first").prop("tagName"))

   console.log($("[name]").prop("tagName"))

   console.log($("[name='myform']").prop("tagName"))

   console.log($("div").css( "background-color","orchid").prop("tagName"))

})

在这里插入图片描述

Jquery事件

jQuery 事件处理方法是 jQuery 中的核心函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”（或“激发”）经常会被使用。 
 $("h1").click(function () {
        alert("点击了1次")
    })

在这里插入图片描述

 $("h1").dblclick(function () {
        alert("点击了2次")
    })

在这里插入图片描述

Jquery显示/隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery学习</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <div id="box">

    </div>
    <br>
<div style="text-align: center">
    <button id="show">显示</button>
    <button id="hide">隐藏</button>
    <button id="tog">显示/隐藏</button>

</div>
</body>
</html>

$(function () {
    $("#show").click(function () {
        $("#box").show()
    })
    
})
  show()：
	$("#hide").click(function () {
        $("#box").hide()
    })
  hide()：
 $("#tog").click(function () {
        $("#box").toggle()
    })
  toggle(speed,callback)：

在这里插入图片描述

Jquery淡入淡出

    <button id="fadein">FadeIn</button>
    <button id="fadeout">FadeOut</button>
    <button id="fadetog">FadeToggle</button>
    <button id="fadeto">FadeTo</button>
  fadeIn(speed,callback)：
$(function () {
    $("#fadein").click(function () {
        $("#box").fadeIn()
    })
   
})
  fadeOut(speed,callback)：
 	$("#fadeout").click(function () {
        $("#box").fadeOut()
    })
  fadeToggle(speed,callback)：
 $("#fadetog").click(function () {
        $("#box").fadeToggle()
    })
  fadeTo(speed,opacity,callback)：
    $("#fadeto").click(function () {
        $("#box").fadeTo(1000,1,function () {
            alert("ok")
        })
    })

在这里插入图片描述

Jquery滑动

	<button id="slidedown">slideDown</button>
    <button id="slideup">slideUp</button>
    <button id="slidetoggle">slideToggle</button>
  slideDown(speed,callback)：
    $("#slidedown").click(function () {
        $("#box").slideDown(1000)
    })
  slideUp(speed,callback)：
 	$("#slideup").click(function () {
        $("#box").slideUp(1000)
    })
  slideToggle(speed,callback)：
	 $("#slidetoggle").click(function () {
        $("#box").slideToggle(1000)
    })

在这里插入图片描述

Jquery动画

	<button id="startAnime">startAnime</button>
    <button id="reset">reset</button>
  animate({params},speed,callback)
   $("#startAnime").click(function () {
        $("#box").animate({width:"25%"},1000)
    })
    $("#reset").click(function () {
        $("#box").animate({width:"50%"},1000)
    })

在这里插入图片描述

  操作多个属性
    $("#startAnime").click(function () {
        $("#box").animate({
            width:"25%",
            opacity:"0.5",
        },1000)
    })
    $("#reset").click(function () {
        $("#box").animate({
            width:"50%",
            opacity:"1",
        },1000)
    })

在这里插入图片描述

  animate队列
    $("#startAnime").click(function () {
        $("#box").animate({width:"25%",},1000)
        $("#box").animate({height:"80%",},1000)
    })
    $("#reset").click(function () {
        $("#box").animate({width:"50%",height:"50%", opacity:"1",},1000)
    })

在这里插入图片描述

  stop(stopAll,goToEnd)
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

	 <button id="startAnime">startAnime</button>
    <button id="stop">stop</button>
    <button id="reset">reset</button>

   $("#startAnime").click(function () {
        $("#box").animate({width:"25%",},1000)
        $("#box").animate({height:"80%",},1000)
    })
    $("#stop").click(function () {
        $("#box").stop(true)
    })
    $("#reset").click(function () {
        $("#box").animate({width:"50%",height:"50%", opacity:"1",},1000)
    })

在这里插入图片描述

Jquery链式编程

通过 jQuery，可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法（在相同的元素上）

	$("#box")
            .animate({width:"25%",},1000)
            .animate({height:"80%",},1000)

jQuery获取/设置 内容和属性

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr() 方法用于获取属性值
prop()  如果有相应的属性，返回指定属性值,否则返回空串
		（适用于HTML元素本身就带有的固有属性，如checked,disabled ）

获取

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery学习</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/jq.js"></script>
</head>
<body>
    <div id="box">

    </div>
    <br>
<div style="text-align: center">
    <button id="startAnime">startAnime</button>
    <button id="stop">st<br></br>op</button>
    <button id="reset">reset</button>
    <br>
    <form>
        <input type="checkbox" value="菜单1">菜单1
        <input type="checkbox" value="菜单2">菜单2
        <input type="checkbox" value="菜单3">菜单3
        <input type="checkbox" value="菜单4">菜单4
        <input type="checkbox" value="菜单5">菜单5
    </form>
</div>
</body>
</html>

$(function () {
    $("#startAnime").click(function () {
       console.log( $("#startAnime").text())
    })
    $("#stop").click(function () {
        console.log($("#stop").html())
    })
    $("#reset").click(function () {
        console.log($(":checkbox:first").val())
    })
})

在这里插入图片描述

在这里插入图片描述
设置

<form>
        <input type="input" class="inp" value="菜单1">菜单1
        <input type="checkbox" value="菜单2">菜单2
        <input type="checkbox" value="菜单3">菜单3
        <input type="checkbox" value="菜单4">菜单4
        <input type="checkbox" value="菜单5">菜单5
    </form>

   $("#startAnime").click(function () {
       console.log( $("#startAnime").text("ABC"))
    })
    $("#stop").click(function () {
        console.log($("#stop").html("<br>vg"))
    })
    $("#reset").click(function () {
        console.log($(".inp").val("checked"))
    })

在这里插入图片描述

jQuery添加元素

append() - 在被选元素内部的结尾插入内容
prepend() - 在被选元素内部的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
芋头同学
关注
专栏目录
jQuery笔记
11-20
jQuery笔记
jQuery 笔记
最新发布
weixin_51644244的博客
07-06 960
框架：半成品软件Jquery就是封装好的js 本质上还是jsjQuery是一个快速、简洁的JavaScript**框架**，是继Prototype之后又一个优秀的**JavaScript代码库**（*或JavaScript框架*）。JQuery:封装好的代码库。有一些大牛（官方）嫌弃js用着不好，很多具有特殊功能的代码的集合。就把这些代码写在一个js文件中，名字就叫 jquery.js。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
jquery笔记
weixin_34235105的博客
03-16 72
$(document).ready(function(){ }); 这个代码在Dom结构绘制完 后 就马上加载 这个代码可以有多个 或者简写为 $(function(){}) Jquery选择器 $(p) 标签选择器 $(“[name=’myname’]”) 属性选择器，此处的name为标签中的name属性 ...
jQuery学习笔记
06-23
**jQuery学习笔记** jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript代码的编写，使得网页交互变得更加简单。这个资源包含了作者在自学jQuery过程中积累的笔记，以HTML页面的形式呈现，方便阅读和...
jquery学习笔记
05-16
《jQuery学习笔记详解》 jQuery，作为一款广泛应用于Web开发的JavaScript库，以其简洁的API、强大的功能和广泛的社区支持，极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。这篇学习笔记将深入探讨...
JQuery学习笔记
09-02
以下是对JQuery学习笔记的详细解析： 首先，JQuery的出现是为了弥补JavaScript在处理浏览器兼容性和控件操作上的不足。不同浏览器对JavaScript的实现存在差异，导致开发跨浏览器的网页应用变得复杂。为了统一这些...
jQuery学习笔记（一）
07-13
**jQuery学习笔记（一）** 在深入探讨jQuery之前，我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...
Jquery学习笔记分享
11-24
**jQuery学习笔记分享** 在Web开发中，jQuery是一个非常重要的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章：...
jquery 笔记
weixin_44519342的博客
03-19 63
jquery 笔记
Jquery学习笔记分享：优势应用及选择器详解
在这里，我们将分享一些 Jquery 学习笔记，希望能够帮助广大开发者更好地掌握和运用 JQuery。 在第一章中，我们首先了解了 JQuery 的概述。JQuery 的基本作用主要是简化 JavaScript 编程，提高开发效率，减少代码量...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值