菜单 搜索
首页 前端知识 web前端-JavaScript笔记-jQuery部分

web前端-JavaScript笔记-jQuery部分

2024-04-29 12:04:39 前端知识 前端哥 787 60 我要收藏

jQuery的简单使用

引入jQuery

  1. 到https://jquery.com下载 Download the compressed, production jQuery 3.7.1
  2. 通过<script src=“”></script> 即可引入

其他

页面加载

// 入口函数:等待页面加载完毕之后再执行 == load
$(document).ready(function(){
    $("div").css("color","pink")
})
// DOMContentLoaded
$(function(){
    $("div").css("color","pink")
})
复制

$的含义

$是jQuery的顶级对象，也是jQuery的别称 $==jQuery
jQuery对象只能使用jQuery方法，不能使用原生JS的方法；原生也不能使用jQuery的方法
某些情况可以转换:$(dom对象) === jQuery对象

CSS选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.7.1.min.js"></script>
</head>
<body>
    <div>111</div>
    <div>222</div>
    <div>333</div>
    <div>444</div>
 
    <div class="box1">
        <ul>
            <li>1</li>
            <li>2</li>
            <li class="li3">3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
 
    <button>点击</button>
 
    <script>
        // $("选择器")
        $("div").css("color","yellow")
        // jQuery存在隐式迭代，会遍历选择器内部的元素
 
        // 筛选器：
        console.log($("li:first"))
        console.log($("li:last"))
        console.log($("li:eq(2)")) //相当于nth-child()
        console.log($("li:odd"))
        console.log($("li:even"))
        console.log($("ul").parent)
        console.log($(".box1").children()) //相当于子代选择器
        console.log($(".box").find("li")) 
        console.log($(".li3").siblings("li")); //查找兄弟节点，返回不包括自身的数组
    </script>
</body>
</html>
复制

CSS的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery-3.7.1.min.js"></script>
 
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: blanchedalmond;
        }
        .div_style2{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <div>111</div>
 
    <script>
        $("div").css({"color":"red","backgroundColor":"green"})
        // 添加class
        $("div").addClass("div_style2")
        // 移除class
        $("div").removeClass("div_style2")
        // 切换class
        $("div").toggleClass("div_style2")
    </script>
</body>
</html>
复制

jQuery效果

可以在 jQuery API 中文文档 查询更多

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../../../../文件/云计算/web前端/jquery-3.7.1.min.js"></script>
 
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: aquamarine;
        }
    </style>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
 
    <div class="box1"></div>
 
    <script>
        $("button:eq(0)").click(function(){
            $("div").show()
        })
        $("button:eq(1)").click(function(){
            $("div").hide()
        })
        $("button:eq(2)").click(function(){
            $("div").toggle()
        })
    </script>
</body>
</html>
复制

动画

animate(形参,speed,fun()),可以调整属性的位置
按钮点击div的显示隐藏即动画跳过
在这里插入图片描述

.stop()：停止所有在指定元素上正在运行的动画,可以传参
.finish()：停止目前正在运行的动画，立刻跳转到该动画的结果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.7.1.min.js"></script>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: bisque;
            opacity: 0;
        }
    </style>
</head>
<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>跳过</button>
    <div></div>
 
    <script>
        $("button:eq(0)").click(function(){
            $("div").stop().animate({
                opacity: .7,
                width:500,
                heigth:500
            },3000,function(){
                console.log("wan");
            })
        })
 
        $("button:eq(1)").click(function(){
            $("div").stop().animate({
                opacity: 0,
                width:300,
                heigth:300
            },3000,function(){
                console.log("wan");
            })
        })
 
        $("button:eq(2)").click(function(){
            $("div").finish()
        })
    </script>
</body>
</html>
复制

属性

prop

prop可以获取匹配元素的指定属性的属性值，也可以修改属性值
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.7.1.min.js"></script>
</head>
<body>
    <form action="" method="get">
        <input type="checkbox" name="hobby" value="1">1
        <input type="checkbox" name="hobby" value="2">2
        <input type="checkbox" name="hobby" value="3">3
        <input type="checkbox" name="hobby" value="4">4
    </form>
 
    <script>
    // prop:可以获取及修改对象的属性，无法获得自定义属性
    console.log($("input:eq(1)").prop("value"));
    $("input:eq(1)").prop("value","更改")
    console.log($("input:eq(1)").prop("value"))
    </script>
</body>
</html>
复制

attr

attr除了可以获取对象原本的属性外，还可以获取自定义属性

自定义属性
1.通过.setAttribute(“属性名”,“属性值”)来设置

<body>
	<form>
		<button>点击</button>
	</form>
	<script>
		const btn = document.querySelector("button")
		btn.setAttribute("tip","tiptip")
		console.log(btn);
	</script>
</body>
复制

在这里插入图片描述
2.通过data-属性名 = “属性值” 来设置

<body>
	<form>
		<button data-tip="tiptip2">点击</button>
	</form>
	<script>
		const btn = document.querySelector("button")
		console.log(btn);
	</script>
</body>
复制

在这里插入图片描述

转载请注明出处或者链接地址：https://www.qianduange.cn//article/6413.html
标签
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！