JavaScript知识点8
2024-05-15 13:13:25
文章目录
- 1.事件绑定
- 2.事件
- 3.查找3个div
- 4.使用hover
- 5.百度一下
- 6.jQuery动画函数--显示隐藏动画
- 7.精简显示品牌
- 8.框架/js库
- 篇章
1.事件绑定
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-1.11.3.js"></script>
</head>
<body><h1>事件绑定</h1>
<button id="btn1">发射子弹</button>
<button id="btn2">获得奖励</button>
<button id="btn3">失去奖励</button>
<script>$("#btn1").on('click',function () {console.log('发射子弹......');})//当我点击第二个按钮时 alert 发射跟踪导弹function shoot() {alert('发射跟踪导弹');}$("#btn2").on('click',function () {$("#btn1").on('click',shoot)})$("#btn3").on('click',function () {$("#btn3").on('click',shoot)})//事件绑定//标准的事件绑定//dom:元素.addEventListener('事件名',处理函数) jq--> on// 元素.removeEventListener('事件名',处理函数) off//jq-> $元素.on('事件名',处理函数)// $元素.off('事件名',处理函数)//简写的事件绑定//$元素.事件名(function(){//// })
</script>
</body>
</html>
2.事件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-1.11.3.js"></script>
<!-- 当窗口中的所有内容加载完才执行的--><script>// $(document).ready(function () {// $('button').click(function () {// alert(111);// })// })$(function(){$('button').click(function () {alert(111);});})</script>
</head>
<body>
<button>提交
</button>
<!--事件-->
<!--问题:浏览器加载html和js时顺序加载 必须保证js在html在加载后执行,才能保证所有的查找都能找到想要的元素window有一个事件load,会在整个网页加载完成后自动执行，所有js代码都应该放在window.οnlοad=function(){}中，在页面加载后自动执行window.οnlοad=function(){}无论写在哪,都只能在整个窗口内容加载完才自动执行=赋值的意思,如果同时出现多个 window.οnlοad=function(){} 结果只有最后一个覆盖之前的所有解决:$(window).load(function(){}) 可反复加多个window.onload 需要等待所有页面内容(html,css,js,图片)加载完才行 --慢大多数情况下,用户急于使用功能,而无所谓图片内容和网页美观解决:其实在window.onload 之前还有一个事件会提前触发,:DOMContentLoad-- 只等待html和js加载完,无需css和图片 --快DOMContentLoad有兼容性问题 只能用jQuery方式绑定$(docment).ready(function(){}) 所以放在$(docment).ready(function(){})中代码会在dom内容加载后就提前触发,无需等待css和图片总结:jQuery中所有代码都要放在$(document).ready(function(){})中$(document).ready(function(){}) 简化$(function(){})
--><script></script>
</body>
</html>
3.查找3个div
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-1.11.3.js"></script><style>#d1,d2,d3{cursor: pointer;}#d1{position: relative;width: 150px;height: 150px;text-align: center;background-color: green;}#d2{position: absolute;top: 25px;left: 25px;width: 100px;height: 100px;background-color: blue;}#d3{position: absolute;top: 25px;left: 25px;width: 50px;height: 50px;line-height: 50px;background-color: red;}</style>
</head>
<body>
<div id="d1"><div id="d2"><div id="d3"></div></div>
</div>
<script>//查找三个div// $('div')// //div绑定事件// .mouseenter(function(){// console.log(`进入 ${this.id}`);// })//// //div绑定事件// .mouseleave(function(){// console.log(`移出 ${this.id}`);// })//mouseover,mouseout --即使父元素也当做独立的元素看待，从父元素进入子元素，同样会被//出发父元素的mouseover，mouseout事件，与现实不符//解决:jQuery中用mouseenter mouseleave代替//简写：如果同时绑定mouseenter和mouseleave时，其实只要绑定一个hover函数即可//$元素.hover(// function () {//// },// function () {//// }// )$('div').hover(function () {console.log(`进入 ${this.id}`);},function () {console.log(`移出 ${this.id}`);})
</script>
</body>
</html>
4.使用hover
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-1.11.3.js"></script><style>#target{border: 1px solid #eee;border-radius: 6px;padding: 10px;}#target.hover{border: 1px solid #aaa;box-shadow: 0 0 6px #aaa;}</style>
</head>
<body>
<h1>使用hover</h1>
<h3>鼠标悬停在div上方，则突出显示，移出则取消突出显示</h3>
<div id="target"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequatur deserunt, dicta distinctio harum illum itaque magnam maiores maxime, nostrum, numquam placeat porro possimus praesentium quas quidem rerum saepe sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut deleniti dignissimos error eveniet expedita fugit iste itaque nulla, quae tenetur. Eaque excepturi facere ipsa omnis, porro quam quod repellendus ut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam autem impedit laboriosam molestias obcaecati saepe soluta. Architecto consequuntur ducimus fuga fugiat iure, minima modi molestiae mollitia, numquam provident, quae quam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur debitis deserunt doloremque dolorum ducimus eaque est, expedita hic inventore laboriosam laudantium nam quas qui quis quos temporibus voluptatem voluptatum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid delectus dolore dolorum eaque earum est excepturi harum illo magni maiores minus non odit rem, repellendus tenetur ut veniam? Deleniti!</p>
</div>
<script>//当鼠标进入div时，为当前div自己添加class hover，当鼠标移出时，去掉div的class hover//1.查找元素div// $('div#target').hover(// function () {头条新闻宁波 17°C-23°C 小雨// $(this).addClass('hover');// },// function () {// $(this).removeClass('hover');// }// )$('div#target').hover(function () {$(this).toggleClass('hover');})//2.使用hover函数进行事件绑定//3.操作元素
</script>
</body>
</html>
5.百度一下
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<input type="text">
<button>百度一下</button>
<script>//单机按钮时，输出：搜索xxx相关内容
$('button').click(function () {console.log(`搜索 ${$(':text').val()} 相关的内容`);
})//为文本框绑定键盘抬起的事件$(':text').keyup(function (e) {//只有按下的键是回车，才执行和按钮相同的事件处理函数if (e.keyCode==13){$('button').click();//两用 调用//模拟触发：即使没有点击按钮，也可以执行按钮的单机事件处理函数//如何$元素.事件名//调用制定元素上的事件处理函数}})
</script>
</body>
</html>
6.jQuery动画函数–显示隐藏动画
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-1.11.3.js"></script><style>#target{border: 1px solid #eee;border-radius: 6px;padding: 10px;}</style>
</head>
<body>
<h1>jQuery动画函数--显示隐藏动画</h1>
<button id="btn1">显示/隐藏div</button>
<hr>
<div id="target"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci consequatur deserunt, dicta distinctio harum illum itaque magnam maiores maxime, nostrum, numquam placeat porro possimus praesentium quas quidem rerum saepe sunt.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut deleniti dignissimos error eveniet expedita fugit iste itaque nulla, quae tenetur. Eaque excepturi facere ipsa omnis, porro quam quod repellendus ut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam autem impedit laboriosam molestias obcaecati saepe soluta. Architecto consequuntur ducimus fuga fugiat iure, minima modi molestiae mollitia, numquam provident, quae quam!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda consectetur debitis deserunt doloremque dolorum ducimus eaque est, expedita hic inventore laboriosam laudantium nam quas qui quis quos temporibus voluptatem voluptatum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid delectus dolore dolorum eaque earum est excepturi harum illo magni maiores minus non odit rem, repellendus tenetur ut veniam? Deleniti!</p>
</div>
<script>//点击按钮 让div瞬间显示隐藏$('#btn1').click(function () {//#target瞬间显示隐藏//如果#target是隐藏的// if($('#target').is(':hidden')) {// $('#target').show(2000);//显示2000毫秒// }else{// //否则// $('#target').hide(2000);//隐藏2000毫秒// }$('#target').slideToggle(); //$('#target').fadeToggle();})//动画：1.简单动画：固定三种动画效果//1.显示隐藏：$元素.show() $元素.hide() 本质是用display:none和display：block来实现瞬间隐藏显示//2.上滑下滑 : $元素.slideUp() $元素.slideDown() $元素.slideToggle()//3.淡入淡出 :$元素.fadeIn() $元素.fadeOut() $元素.fadeToggle()//问题1：效果固定无法修改//2.都是用js程序和定时模拟器动画效果--效率低//总结：将来未能用css做的动画，首选css--效率高可维护
</script>
</body>
</html>
7.精简显示品牌
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/jquery-1.11.3.js"></script><style>body{text-align: center;}ul{list-style: none;}li{margin: 0;padding: 0;display: inline-block;width: 30%;}</style>
</head>
<body>
<ul id="list"><li>尼康</li><li>佳能</li><li>索尼</li><li>宾得</li><li>爱国者</li><li>欧巴</li><li>海鸥</li><li>卡西欧</li><li>三星</li><li>松下</li><li>其他品牌</li>
</ul>
<button data-toggle="brandlist">精简显示品牌</button>
<script>//为data-toggle="brandlist" 绑定点击事件$('[data-toggle=brandlist]').click(function () {//如果ul#list下有隐藏元素，就显示全部，顺便该当前按钮内容为精简显示品牌var $ul=$('#list');if($ul.is(':has(:hidden)')){$ul.children().show();$(this).html('精简显示品牌')}else{//否则隐藏5以上。但是除最后一个元素之外的剩余元素，顺便该当前的按钮内容为显示所有品牌$ul.children(':gt(5):not(:last)').hide();$(this).html('显示所有品牌');}})</script>
</body>
</html>
8.框架/js库
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="js/angular.js"></script>
</head>
<body><!--vue.js-->
<!--react--><!--框架/js库-->
<!--①基础语法②数据（内部数据，通信数据）③路由（建立一种映射关系）
如何区分：将框架比作一个坦克，学会如何实现基础操作，然后才能正确地用起来将库比作瑞士军刀，专注于一个细节设计原则：①@YANGI You Aren't Gonna Need It(不要写不需要的代码)②KISS keep it simple and stupid 保证代码足够的简洁③DRY Don't repeat Yourselt 要学会封装和复用④高内聚 低耦合 耦合度：不同模块、不同组件之间的关联度⑤SRP single responsibility principle 单一责任原则 一个文件，一个方法，一个变量只做一件事⑥OCP open closed principle 开闭原则anjular是由谷歌公司在09年推出的js框架主要用来实现大中型，大型的spa(单一页面应用程序)开发
-->
<!--初始化应用程序-->
<!--<div ng-app>-->
<!--<!– 大胡子语法、插值表达式 –>-->
<!-- <p>{{3+5}}</p>-->
<!--</div>--><!--ng-init 初始化应用程序数据-->
<!--<div ng-app="" ng-init="a=2;b=5">-->
<!-- <p>值为：{{a*b}}</p>-->
<!--</div>--><!--<div ng-app="" ng-init="firstName='ba';lastName='jianjuan'">-->
<!-- <p>姓名：{{firstName+" "+lastName}}</p>-->
<!--</div>--><!--<div ng-app="" ng-init="pearon={firstName:'ba',lastName:'jianjuan'}">-->
<!--<!– <p>姓为：{{pearon.firstName}}</p>–>-->
<!-- <p>姓为：<span ng-bind="pearon.firstName"></span></p>-->
<!--</div>--><!--<div ng-app="" ng-init="arr=[1,2,5,8]">-->
<!-- <p>第三个值为：{{arr[2]}}</p>-->
<!--</div>--><!--ng-model 把元素值（输入框的值）绑定到应用程序-->
<!----mvc模式m module模块 v view视图 c-controller 控制器
--><!--<div ng-app="" ng-init="fisrtName='tom'">-->
<!-- <p>在输入框输入。。。</p>-->
<!-- <p><input type="text" ng-model="fisrtName"></p>-->
<!-- <p>你输入的值为{{fisrtName}}</p>-->
<!--</div>--><!--两个变量通过ng-model计算相乘结果-->
<!--<div ng-app="" ng-init="a=5;b=8" >-->
<!-- <input type="number" ng-model="a">-->
<!-- <input type="number" ng-model="b">-->
<!-- <p>总计：{{a*b}}</p>-->
<!--</div>--><!--循坏 ng-repeat-->
<!--<div ng-app="" ng-init="arr=[5,8,6,7]">-->
<!-- <h2>循环数组</h2>-->
<!-- <ul>-->
<!-- <li ng-repeat="x in arr">-->
<!-- {{x}}-->
<!-- </li>-->
<!-- </ul>-->
<!--</div>--><!--<div ng-app="" ng-init="info=[-->
<!-- {name:'tom',age:15},-->
<!-- {name:'kai',age:14},-->
<!-- {name:'dong',age:13},-->
<!-- {name:'jan',age:15},-->
<!-- ]">-->
<!-- <h1>循坏对象</h1>-->
<!-- <ul>-->
<!-- <li ng-repeat="x in info">-->
<!-- {{x.name+' '+x.age}}-->
<!-- </li>-->
<!-- </ul>-->
<!--</div>--><div ng-app="myApp" ng-controller="ctrl">
<!-- 姓名:<input type="text" ng-model="name">-->
<!-- <h3>输入的姓名为：{{name}}</h3>--><input type="text" ng-model="firstName"><input type="text" ng-model="lastName"><p>姓名:{{fullName()}}</p> <!-- <p>姓名:{{firstName+' '+lastName}}</p>-->
</div>
<!--
scope 作用域 它是视图和控制器之间的纽带
scope是一个对象，有可用的方法和属性
scope 可应用在视图和控制器上
-->
<script>var app=angular.module('myApp',[]);app.controller('ctrl',function ($scope) {$scope.firstName='ba';$scope.lastName='jianjuan';$scope.fullName=function () {<!-- -->return $scope.firstName+" "+$scope.lastName}})
</script></body>
</html>
篇章
上一篇：JavaScript知识点7
下一篇：JavaScript知识点9-案例大全
JavaScript知识点8相关推荐
- 呕心沥血 JavaScript知识点梳理大全，超详细 建议收藏！！！
呕心沥血 JavaScript知识点梳理大全,超详细 建议收藏!!! ✴️大家好,我是王同学,爆肝三天三夜王同学把JavaScript 知识点梳理了一遍,文章没有一点套路,只有满满的干货 ✴️如果对你 ...
- JavaScript知识点4
文章目录 一.数组 1.数组API(方法) 2.二维数组 3.截取字符串 二.math对象 三.Date对象 四.数学 1.计算平方 3.计算阶乘 五.正则表达式 六.网络和谐语 七.jQuery选择 ...
- JavaScript知识点9-案例大全
文章目录 1.购物车综合案例JQuery版本 2.购物车综合案例JavaScript版本 3.学子商城 public.css index.css 主页面 4.猜数字 篇章 1.购物车综合案例JQuer ...
- 小白学小程序需要的JavaScript知识点
小白学微信小程序需要的JavaScript知识点 文章目录 小白学微信小程序需要的JavaScript知识点 1 js数据类型 Number 字符串 布尔值 数组 对象 null和undefined ...
- javascript知识点_一点点JavaScript知识是第1部分很危险的事情
javascript知识点 几乎是一个数据库的奇怪故事 (The Strange Tale of the Almost-a-Database) 这不是教程,这是一个警告性的故事. (This is n ...
- JavaScript知识点归纳之简介
简介: 参照学习菜鸟教程上例子所做本JavaScript知识点归纳之XXX. 1.JavaScript直接写入HTML输出流: <script> document.write(" ...
- javaScript知识点和实例
javaScript知识点和实例 一.最终显示效果:点击红色按钮,会有视屏弹出 并带有遮罩层 点击黄色区域可以关闭视频 并回到最初的状态. 页面主要代码:main中主要包含一个a,控制显示的按钮.设置 ...
- javascript php 性能,JavaScript知识点总结之如何提高性能_javascript技巧
JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货. 先给大家巩固 ...
- 面试容易问的 JavaScript 知识点，你知道几个？
你是否也遇到这样的问题,学JavaScript不知从哪下手?学了一半不知道自己技巧掌握的如何?或者学完了想去面试,但是不知道自己掌握的知识是否熟练?今天达妹为各位准备了一些JavaScript面试技术 ...
最新文章
- 只做好CTR预估远不够，淘宝融合CTR、GMV、收入等多目标有绝招
- php mysql 正则表达式_MYSQL使用正则表达式过滤数据_MySQL
- CycleGAN：图片风格，想换就换 | ICCV 2017论文解读
- html font后面跟多种字体
- html插入javascript变量,javascript如何引用变量？
- UVA - 10384The Wall Pushers推门游戏（迭代加深）
- 启动马达接线实物图_电工外出接单从事配电柜接线、调试工作的三个要领
- linux如何安装python环境变量中,Windows和linux环境下python安装及环境变量的配置
- android(安卓)手机 markdown不错的编辑器
- nodejs实践录：按行处理文件数据的示例
- golang https 代理_代理，生活中随处可见，Go中如何进行 HTTPS 代理呢？
- ubuntu17安装mysql后数据库乱码_linux安装MySQL数据库,设置编码为utf8
- ❤️Spring的静态、动态代理模式
- 易语言 linux 反编译,易语言反编译工具(E-Code Explorer)
- 移动互联网时代的营销
- 微信小程序踩坑——项目内文件夹删除不掉
- 传音控股前三季度研发投入稳步增加 “剑”指全球新兴市场技术变革新机遇
- mysql汉字按英文字母排序
- Boyd 凸优化课后习题 求共轭函数
- 阿里云国际站相比阿里云中国站有什么优势？
热门文章
- android app 天气功能,Android天气预报app改进版
- appium环境搭建（10）
- Adapting Grad-CAM for Embedding Networks - 度量学习网络可视化方法（reid、人脸识别）
- 0-1岁社群运营有哪些好用的社群工具推荐？
- 基于.net平台下大型分布式HIS系统之药房药库系统-石曼迪-专题视频课程
- 视频图像处理技术有优势 安防视频监控应用多
- Springboot毕业设计毕设作品,人脸识别公司考勤系统 开题报告
- 想搭建自己的网站,应该从哪处入手呢？选择什么样配置的服务器捏？通过哪些手段赚取足够的维护网
- 如何用Matlab一键下载B站高清视频（下）
- 拿了offer，签了三方，毁约流程及建议