2021-08-04 jQuery基础整理 17-30 代码复制即可运行
2024-05-20 22:50:03
17. jQuery 操作样式方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>$(function () {//1.逐个设置$("div").css("width" , "100px");$("div").css("height" , "100px");$("div").css("background" , "red");//2.链式设置//注意点：链式操作如果大于三步建议分开$("div").css("width" , "100px").css("height" , "100px").css("background" , "blue");//3.批量设置//推荐$("div").css({width : "100px",height : "100px",background : "yellow"});//4.获取CSS样式值console.log($("div").css("width"));});
</script>
<body><div></div>
</body>
</html>
18. jQuery的尺寸和位置操作
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>*{margin: 0;padding: 0;}.father{width: 200px;height: 200px;background: red;border: 50px solid #000;margin-left: 50px;position: relative;}.son{width: 100px;height: 100px;background: blue;left: 50px;top: 50px;position:absolute;}
</style>
<script>$(function () {var btn = document.getElementsByTagName("button");//监听获取btn[0].onclick = function () {//获取元素的宽度alert($(".father").width());//获取元素距离窗口的偏移位// offset([coordinates])alert($(".son").offset().left);//获取元素距离地位元素的偏移位//注意：position()只能获取，不能设置// position()alert($(".son").position().left);}//监听设置btn[1].onclick = function () {//设置元素的宽度//$(".father").width("500px")$(".son").offset({left:10});}});
</script>
<body><div class="father"><div class="son"></div></div><button>获取</button><button>设置</button>
</body>
</html>
19.jQuery 的scrollTob方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>*{margin: 0;padding: 0;}.scroll{width: 200px;height: 200px;border: 1px solid #000;overflow: auto;}
</style>
<script>$(function () {var btn = document.getElementsByTagName("button");//监听获取btn[0].onclick = function () {//获取滚动的偏移位//alert($(".scroll").scrollTop());//获取网页滚动的偏移位//注意点：为了保证浏览器的兼容，需要按照如下写法alert($("html").scrollTop()+$("body").scrollTop());}btn[1].onclick = function () {//设置滚动的偏移位//$(".scroll").scrollTop(50);//设置网页滚动的偏移位//注意点：为了保证浏览器的兼容，需要按照如下写法alert($("html,body").scrollTop(500));}});
</script>
<body><div class="scroll">我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div</div><button>获取</button><button>设置</button><br><br><br><br><br>
</body>
</html>
20. jQuery事件绑定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>$(function () {/*jquery中有两种绑定事件方式1.eventName（fn）编码效率略高 部分事件jQuery没有实现 所以不能添加2.on（eventName，fn）编码效率略低 所有js事件都可以添加注意点可以添加多个相同或不同类型的事件，不会覆盖*/// $("button").click(function () {// alert("hello")// })// $("button").click(function () {// alert("0000")// })// $("button").mouseleave(function () {// alert("1111")// })// $("button").mouseenter(function () {// alert("2222")// })$("button").on("click",function () {alert("hello")})$("button").on("click",function () {alert("hello333")})$("button").on("mouseleave",function () {alert("hello4444")})$("button").on("mouseenter",function () {alert("hello66666")})});
</script>
<body><button>我是按钮</button>
</body>
</html>
21. jQuery事件解绑
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<script>$(function () {function text1() {alert("hello")}function text2() {alert("0000")}$("button").click(text1);$("button").click(text2);$("button").mouseleave(function () {alert("1111")})$("button").mouseenter(function () {alert("2222")})//off方法如果不传递参数，会移除所有事件//$("button").off();//off方法如果传递一个参数，会移除所有指定类型的事件//$("button").off("click");//off方法如果传递两个参数，会移除指定类型的指定事件$("button").off("click",text1);});
</script>
<body><button>我是按钮</button>
</body>
</html>
22. jQuery事件冒泡和默认行为
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>*{margin: 0;padding: 0;}.father{width: 200px;height: 200px;background: red;}.son{width: 100px;height: 100px;background: blue;}
</style>
<script>$(function () {/*1.什么是事件冒泡2.如何阻止事件冒泡3.什么是默认行为4.如何阻止默认行为*/// $(".son").click(function (event) {// alert("son");// //return false;// event.stopPropagation();// })// $(".father").click(function () {// alert("father")// })$("a").click(function (event) {alert("弹出注册框");// return false;event.preventDefault();})});
</script>
<body><div class="father"><div class="son"></div></div><a href="http://www.baidu.com">注册</a><form action="http://www.taobao.com"><input type="text"><input type="submit"></form>
</body>
</html>
23. jQuery自动事件触发
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>*{margin: 0;padding: 0;}.father{width: 200px;height: 200px;background: red;}.son{width: 100px;height: 100px;background: blue;}
</style>
<script>$(function () {$(".son").click(function (event) {alert("son");})$(".father").click(function () {alert("father")})// $(".father").trigger("click");//$(".father").triggerHandler("click");/*如果利用trigger自动触发事件，会触发事件冒泡*///$(".son").trigger("click");/*如果利用triggerHandler自动触发事件，不会触发事件冒泡*///$(".son").triggerHandler("click");$("input[type='submit']").click(function () {alert("submit")})/*如果利用trigger自动触发事件，会触发默认行为*/// $("input[type='submit']").trigger("click");/*如果利用triggerHandler自动触发事件，不会触发默认行为*///$("input[type='submit']").triggerHandler("click");//注意：要想触发a标签的默认行为 需要在a标签里在加一个标签$("span").click(function () {alert("a")})$("span").trigger("click");});
</script>
<body><div class="father"><div class="son"></div></div><a href="http://www.baidu.com"><span>注册</span></a><form action="http://www.taobao.com"><input type="text"><input type="submit"></form>
</body>
</html>
24. jQuery自定义事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>*{margin: 0;padding: 0;}.father{width: 200px;height: 200px;background: red;}.son{width: 100px;height: 100px;background: blue;}
</style>
<script>$(function () {// $(".son").click(function (event) {// alert("son");// })/*想要自定义事件必须满足两个条件1.事件必须是通过on来绑定的2.事件必须通过trigger来触发*/$(".son").on("myClick",function () {alert("aaa")})$(".son").trigger("myClick");});
</script>
<body><div class="father"><div class="son"></div></div><a href="http://www.baidu.com"><span>注册</span></a><form action="http://www.taobao.com"><input type="text"><input type="submit"></form>
</body>
</html>
25. jQuery事件命名空间
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>*{margin: 0;padding: 0;}.father{width: 200px;height: 200px;background: red;}.son{width: 100px;height: 100px;background: blue;}
</style>
<script>$(function () {/*想要事件的命名空间有效，必须满足两个条件1.事件是通过on绑定的2.通过trigger触发事件*/$(".son").on("click.zs",function () {alert("aaa")})$(".son").on("click.ls",function () {alert("bbb")})$(".son").trigger("click.zs");});
</script>
<body><div class="father"><div class="son"></div></div><a href="http://www.baidu.com"><span>注册</span></a><form action="http://www.taobao.com"><input type="text"><input type="submit"></form>
</body>
</html>
26. jQuery事件命名空间面试题
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>*{margin: 0;padding: 0;}.father{width: 200px;height: 200px;background: red;}.son{width: 100px;height: 100px;background: blue;}
</style>
<script>$(function () {$(".father").on("click.ls",function () {alert("aaa")})$(".father").on("click",function () {alert("ccc")})$(".son").on("click.ls",function () {alert("bbb")})/*利用trigger触发了元素带命名空间的事件那么父元素带相同命名空间的事件也会被触发而父元素没有没有命名空间的元素不会被触发*///$(".son").trigger("click.ls")/*利用trigger触发子元素不带命名空间的事件那么子元素所有相同类型的事件和父元素所有相同类型的事件都会被触发*/$(".son").trigger("click")});
</script>
<body><div class="father"><div class="son"></div></div><a href="http://www.baidu.com"><span>注册</span></a><form action="http://www.taobao.com"><input type="text"><input type="submit"></form>
</body>
</html>
27. jQuery事件委托
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>
</style>
<script>$(function () {/*1.什么是事件委托请别人帮忙做事情，然后将做完的结果反馈给我们*/$("button").click(function () {$("ul").append("<li>我是新增li</li>")})/*在jQuery中，如果通过核心函数找到的元素不止一个那么在添加事件的时候，jQuery会遍历所有找到的元素给所有找到的元素添加事件*/// $("ul>li").click(function () {// alert($(this).html())// })/*以下代码的含义，让ul帮li监听click事件之所以能够监听，是因为入口函数执行的时候ul就已经存在了，所以能够添加事件之所以this是li，是因为我们点击的是li，而li没有click事件所以事件冒泡传递给了ul，ul响应了事件，既然事件是从li传递过来的所以ul必然指定this是谁*/$("ul").delegate("li","click",function () {alert($(this).html())})});
</script>
<body>
<ul><li>我是第一个li</li><li>我是第二个li</li><li>我是第三个li</li>
</ul>
<button>新增li</button>
</body>
</html>
28. jQuery移入移出事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>*{margin: 0;padding: 0;}.father{width: 200px;height: 200px;background: red;}.son{width: 100px;height: 100px;background: blue;}
</style>
<script>$(function () {/*mouseover/mouseout 子元素被移入移除也会触发父元素的事件*/// $(".father").mouseover(function () {// console.log("father移入了");// })// $(".father").mouseout(function () {// console.log("father移出了");// })/*mouseenter/mouseleave 子元素被移入移除不会触发父元素的事件推荐使用*/// $(".father").mouseenter(function () {// console.log("father移入了");// })// $(".father").mouseleave(function () {// console.log("father移出了");// })// $(".father").hover(function () {// console.log("father移入了");// },function () {// console.log("father移出了");// })$(".father").hover(function () {console.log("father移入yichu了");})});
</script>
<body>
<div class="father"><div class="son"></div>
</div>
</body>
</html>
29. 电影排行榜（移入移出事件练习）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>*{margin: 0;padding: 0;}.box{width: 300px;height: 450px;margin: 50px auto;border: 1px solid #000;}.box>h1{font-size: 20px;line-height: 35px;color: deeppink;padding-left: 10px;border-bottom: 1px dashed #ccc;}ul>li{list-style: none;padding: 5px 10px;border: 1px dashed #ccc;}ul>li:nth-child(-n+3) span{background: deeppink;}ul>li>span{display: inline-block;width: 20px;height: 20px;background: #ccc;text-align: center;line-height: 20px;margin-right: 10px;}.content{overflow: hidden;margin-top: 5px;display: none;}.content>img{width: 80px;height: 120px;float: left;}.content>p{width: 180px;height: 120px;float: right;font-size: 12px;line-height: 20px;}.current .content{display: block;}
</style>
<script>$(function () {/*//1.监听li的移入事件$("li").mouseenter(function () {$(this).addClass("current")})//2.监听li的移出事件$("li").mouseleave(function () {$(this).removeClass("current")})*/$("li").hover(function () {$(this).addClass("current")},function () {$(this).removeClass("current")})});
</script>
<body>
<div class="box"><h1>电影排行榜</h1><ul><li><span>1</span>电影名称<div class="content"><img src="https://img0.baidu.com/it/u=3643222036,2137679457&fm=26&fmt=auto&gp=0.jpg"><p>痞性十足的冷锋（吴京饰）屡屡惹祸，有人说他是流氓，是痞子， 也有人说他是英雄，是传奇，在一次行动中冷锋违抗军令打死了恐怖分子，要被开除出队，却意外得到了神秘部队战狼的接纳，但本想换个地方继续惹祸的他却跳进了另外一个深渊，冷傲的战狼副队长，擦出暧昧火花的性感女队长（余男饰），心计颇深腹黑的毒枭，枉死的队友，雇佣兵跨过边境线入侵中国，一切都使他陷入了麻烦中。一切都在考验这个团队的毒瘤冷锋，他不知该何去何从。</p></div></li><li><span>2</span>电影名称<div class="content"><img src="https://img0.baidu.com/it/u=3643222036,2137679457&fm=26&fmt=auto&gp=0.jpg"><p>痞性十足的冷锋（吴京饰）屡屡惹祸，有人说他是流氓，是痞子， 也有人说他是英雄，是传奇，在一次行动中冷锋违抗军令打死了恐怖分子，要被开除出队，却意外得到了神秘部队战狼的接纳，但本想换个地方继续惹祸的他却跳进了另外一个深渊，冷傲的战狼副队长，擦出暧昧火花的性感女队长（余男饰），心计颇深腹黑的毒枭，枉死的队友，雇佣兵跨过边境线入侵中国，一切都使他陷入了麻烦中。一切都在考验这个团队的毒瘤冷锋，他不知该何去何从。</p></div></li><li><span>3</span>电影名称<div class="content"><img src="https://img0.baidu.com/it/u=3643222036,2137679457&fm=26&fmt=auto&gp=0.jpg"><p>痞性十足的冷锋（吴京饰）屡屡惹祸，有人说他是流氓，是痞子， 也有人说他是英雄，是传奇，在一次行动中冷锋违抗军令打死了恐怖分子，要被开除出队，却意外得到了神秘部队战狼的接纳，但本想换个地方继续惹祸的他却跳进了另外一个深渊，冷傲的战狼副队长，擦出暧昧火花的性感女队长（余男饰），心计颇深腹黑的毒枭，枉死的队友，雇佣兵跨过边境线入侵中国，一切都使他陷入了麻烦中。一切都在考验这个团队的毒瘤冷锋，他不知该何去何从。</p></div></li><li><span>4</span>电影名称<div class="content"><img src="https://img0.baidu.com/it/u=3643222036,2137679457&fm=26&fmt=auto&gp=0.jpg"><p>痞性十足的冷锋（吴京饰）屡屡惹祸，有人说他是流氓，是痞子， 也有人说他是英雄，是传奇，在一次行动中冷锋违抗军令打死了恐怖分子，要被开除出队，却意外得到了神秘部队战狼的接纳，但本想换个地方继续惹祸的他却跳进了另外一个深渊，冷傲的战狼副队长，擦出暧昧火花的性感女队长（余男饰），心计颇深腹黑的毒枭，枉死的队友，雇佣兵跨过边境线入侵中国，一切都使他陷入了麻烦中。一切都在考验这个团队的毒瘤冷锋，他不知该何去何从。</p></div></li><li><span>5</span>电影名称<div class="content"><img src="https://img0.baidu.com/it/u=3643222036,2137679457&fm=26&fmt=auto&gp=0.jpg"><p>痞性十足的冷锋（吴京饰）屡屡惹祸，有人说他是流氓，是痞子， 也有人说他是英雄，是传奇，在一次行动中冷锋违抗军令打死了恐怖分子，要被开除出队，却意外得到了神秘部队战狼的接纳，但本想换个地方继续惹祸的他却跳进了另外一个深渊，冷傲的战狼副队长，擦出暧昧火花的性感女队长（余男饰），心计颇深腹黑的毒枭，枉死的队友，雇佣兵跨过边境线入侵中国，一切都使他陷入了麻烦中。一切都在考验这个团队的毒瘤冷锋，他不知该何去何从。</p></div></li></ul>
</div>
</body>
</html>
30. tab选项卡
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>jQuery</title>
</head>
<script src="public/jquery-1.9.1.min.js"></script>
<style>*{margin: 0;padding: 0;}.box{width: 440px;height: 298px;border: 1px solid #000;margin: 50px auto;}.nav>li{list-style: none;width: 110px;height: 50px;background: orange;text-align: center;line-height: 50px;float: left;}.nav>.current{background: #ccc;}.content>li{list-style: none;display: none;}.content .show{display: block;}.content>li>img{width: 440px;height: 248px;}
</style>
<script>$(function () {/*//1.监听选项卡的移入事件$(".nav>li").mouseenter(function () {//1.1 修改被移入的选项卡的颜色$(this).addClass("current");//1.2获取当前移入选项卡的索引var index = $(this).index();//1.3根据索引找到对应的图片var li = $(".content>li").eq(index);//1.4显示找到的图片li.addClass("show")})//2.监听选项卡的移出事件$(".nav>li").mouseleave(function () {//1.1 修改被移入的选项卡的颜色$(this).removeClass("current");//1.2获取当前移出选项卡的索引var index = $(this).index();//1.3根据索引找到对应的图片var li = $(".content>li").eq(index);//1.4隐藏找到的图片li.removeClass("show")})*/$(".nav>li").mouseenter(function () {//1.1 修改被移入的选项卡的颜色$(this).addClass("current");//1.2还原其他兄弟选项卡的背景颜色$(this).siblings().removeClass("current");//1.3获取当前移入选项卡的索引var index = $(this).index();//1.4根据索引找到对应的图片var li = $(".content>li").eq(index);//隐藏非当前的其它图片li.siblings().removeClass("show");//1.5显示对应的图片li.addClass("show");})});
</script>
<body>
<div class="box"><ul class="nav"><li class="current">Css</li><li>jQuery</li><li>java</li><li>C++</li></ul><ul class="content"><li class="show"><img src="https://img1.baidu.com/it/u=253337507,2981296721&fm=26&fmt=auto&gp=0.jpg"></li><li><img src="https://img1.baidu.com/it/u=3694053003,1912698683&fm=26&fmt=auto&gp=0.jpg"></li><li><img src="https://img1.baidu.com/it/u=4268324981,3384091170&fm=26&fmt=auto&gp=0.jpg"></li><li><img src="https://img1.baidu.com/it/u=1977046168,368269341&fm=26&fmt=auto&gp=0.jpg"></li></ul>
</div>
</body>
</html>
2021-08-04 jQuery基础整理 17-30 代码复制即可运行相关推荐
- JavaScript基础整理（配代码及注释）
文章目录 1. 变量 1.1 变量基础 1.2 变量基础小案例 1.3 交换两个变量值 1.4 变量的数据类型 1.5 获取变量的数据类型 1.6 变量的语法扩展 1.7 布尔型Boolean 1.8 ...
- JQuery-学习笔记04【基础——JQuery基础案例】
Java后端 学习路线 笔记汇总表[黑马程序员] JQuery-学习笔记01[基础--JQuery基础]--[day01] JQuery-学习笔记02[基础--JQuery选择器] JQuery-学习 ...
- 17前端学习之JQuery基础(一):jQ介绍,jQ基本使用,jQ选择器,jQ样式操作,jQ动画效果
文章目录 一.Jquery介绍: 1. JavaScript 库: 2 jQuery的概念 3. jQuery的优点 二.jQuery 的基本使用: 1. jQuery 的下载 2. 体验jQuery ...
- jQuery基础知识整理
jQuery基础知识整理 jQuery简介 什么是jQuery(了解) jQuery简化JS代码 jQuery的核心思想:"写的更少,但做的更多"(write less,do mo ...
- GNSS数据下载网站整理，包括gamit、bernese更新文件地址[2021.08更新]
本人博客园同名原创文章,展示到CSDN供大家参考,转载请声明地址:https://www.cnblogs.com/ydh2017/p/6474654.html 从事GNSS研究的小伙伴大都离不开GNS ...
- 本博客导读(2021/08/09更新)
文章目录 1. 简介 1.1 博客精神 1.2 写作目的 1.3 技术方向 1.4 博主 1.5 版权说明 2 推荐内容 2.1 主要代表作 2.2 其他推荐内容 3. 程序类 3.1 C#程序设计 ...
- 【跃迁之路】【545天】程序员高效学习方法论探索系列（实验阶段302-2018.08.04）...
@(跃迁之路)专栏 [跃迁之路]奖励金计划正式开始 从2018.7.1起,[跃迁之路]奖励金计划正式起航,从今以后,每月1日,我会将自己个人上月收入的1%计入[跃迁之路]奖励金池,积累到足够金额后,将 ...
- java day44【JQuery 基础：概念，快速入门，JQuery对象和JS对象区别与转换，选择器，DOM操作，案例】...
第一章 JQuery 基础 1. 概念: 一个JavaScript框架.简化JS开发 * jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScr ...
- 2021-10-29 2021年资料员-通用基础(资料员)考试题及资料员-通用基础(资料员)免费试题
题库来源:安全生产模拟考试一点通公众号小程序 安全生产模拟考试一点通:2021年资料员-通用基础(资料员)考试题为正在备考资料员-通用基础(资料员)操作证的学员准备的理论考试专题,每个月更新的资料员- ...
最新文章
- dockerfile构建镜像的命令_编写Dockerfile的最佳实践
- html修改原生checkbox选中的颜色_[三分钟小文]前端性能优化-HTML、CSS、JS部分
- 百旺如何看是否清卡_【问吧】如何查看是否清卡成功，出现这些问题，如何处理？...
- 又到一年清明时，又是一年踏春季
- oracle 通过同义词创建视图
- 爬虫学习01 什么是爬虫 爬虫的分类
- 数据结构—C语言：校园导航系统（最短路径两种算法：深度搜素以及Dijkstra）
- 小程序开发特辑—小程序申请及开发环境搭建
- 红帽子linux硬盘安装教程,XP下硬盘安装RedHat Enterprise Linux 5.5图文教程
- 王峻涛访谈录（三）6688是干什么的？
- WLAN配置三层旁挂直接转发
- 服装ERP应用 四 从手工到Web 2 0时代的VIP客户管理
- 速算24点java_24点速算游戏 Java 代码
- 关于服务端工具gs_guc的部分解读
- Storm基础(完整版)
- Python语音基础操作--2.3声强与响度
- mysql ibd 数据文件恢复极速恢复工具 ibd recover tool
- php百度短网址dwz.cn接口
- 你好Python！再见Excel？
- jquery 实现点击图片居住放大缩小