jq的常用事件及其案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>授权</title>
<script src="js/jq/jquery-3.4.1.js" type="text/javascript"></script>
<style type="text/css">
p {
border: #0d5aa7 2px dashed;
}
textarea {
resize: none;
overflow: scroll;
outline: none;
overflow-y:auto;
}
span{
background: #666666 2px fixed;
}
img{border: rebeccapurple solid 2px;padding: 1px}
</style>
</head> <!--https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect-->
<form>
<table>
<tr>
<td><p id="p1">我是p1</p></td>
<td><p id="p2">我是p2</p></td>
<td><p id="p3">我是p3</p></td>
<td><p id="p4">我是p4</p></td>
</tr> <tr>
<td><input type="text" value="我是text1"/></td>
</tr> <tr>
<td><input id="span1" type="number" placeholder="keydown">我是span1</input></td>
<td><span id="span2"></span>:key</td>
<td><span id="span3"></span>:char</td>
<td><span id="span4"></span>:code</td>
</tr>
<tr>
<td><input id="span5" type="number" placeholder="keypress">我是span1</input></td>
<td><span id="span6"></span>:key</td>
<td><span id="span7"></span>:char</td>
<td><span id="span8"></span>:code</td>
</tr>
<tr>
<td><input id="span9" type="number" placeholder="keyup">我是span1</input></td>
<td><span id="span10"></span>:key</td>
<td><span id="span11"></span>:char</td>
<td><span id="span12"></span>:code</td>
</tr> <tr>
<td>
<div id="div1"><img src="img/lion.png"/></div>
</td>
<td>
<h2 id="kkk">你你你</h2>
<div id="div2">2222</div>
</td>
<td>
<div id="div3">我是div3</div>
</td>
</tr> <tr>
<td><input type="datetime-local"/>我是local1</td>
<td><input type="datetime-local"/>我是local2</td>
<td><input type="datetime-local"/>我是local3</td>
</tr> <tr>
<td><textarea id="ta1" rows="10" ; cols="30" ;>《傅雷家书》是2018年译林出版社重新出版的图书，作者是傅雷、朱梅馥，编者是傅敏。《傅雷家书》最早出版于1981年，《傅雷家书》的出版是当时轰动性的文化事件，三十多年来一直畅销不衰。它是傅雷夫妇在1954年到1966年5月 [1] 期间写给傅聪和儿媳弥拉的家信，由次子傅敏编辑而成。
这些家书开始于1954年傅聪离家留学波兰，终结至1966年傅雷夫妇“文革”中不堪凌辱，双双自尽。十二年通信数百封，贯穿着傅聪出国学习、演奏成名到结婚生子的成长经历，也映照着傅雷的翻译工作、朋友交往以及傅雷一家的命运起伏。傅雷夫妇非常细心，儿子的信都妥善收藏，重点内容则分类抄录成册。</textarea>
</td>
<td><textarea id="ta2" rows="10" ; cols="30" ;>《傅雷家书》是2018年译林出版社重新出版的图书，作者是傅雷、朱梅馥，编者是傅敏。《傅雷家书》最早出版于1981年，《傅雷家书》的出版是当时轰动性的文化事件，三十多年来一直畅销不衰。它是傅雷夫妇在1954年到1966年5月 [1] 期间写给傅聪和儿媳弥拉的家信，由次子傅敏编辑而成。
这些家书开始于1954年傅聪离家留学波兰，终结至1966年傅雷夫妇“文革”中不堪凌辱，双双自尽。十二年通信数百封，贯穿着傅聪出国学习、演奏成名到结婚生子的成长经历，也映照着傅雷的翻译工作、朋友交往以及傅雷一家的命运起伏。傅雷夫妇非常细心，儿子的信都妥善收藏，重点内容则分类抄录成册。</textarea>
</td>
<td><textarea id="ta3" rows="10" ; cols="30" ;>正是蒙古民族的历史和神秘，草原的广阔和浪漫，将本书的主人公、一个叫陈阵的北京青年带进了草原。很快，陈阵发现草原并不全是浪漫和自由。牧民们为了保护自己的财产必须和狼进行战斗。他亲眼目睹蒙古的女人和小孩与偷袭羊群的狼――像豹子一样大的狼――徒手搏斗。也曾误入狼群、并亲眼看见群狼怎样在头狼的指挥下，调兵遣将围猎几百只黄羊。但是，人却抢了狼储存的食物。为了报复人的贪婪，狼利用冬季风雪和夏季蚊灾的掩护，发动了两次大规模的偷袭军马群的残酷而壮烈的战役。于是人又被激怒了。来自于农耕民族的干部不顾蒙古牧民的反对，开始了大规模的围猎狼群的战斗。狼在死亡前的尊严和牺牲精神震撼了陈阵。陈阵和他的朋友亲自掏了一窝小狼，并且养了其中的一只。他要通过一只小狼的成长，探索狼的习性和狼的哲学。通过一系列的令人陶醉的有趣的故事，陈阵发现狼是动物中唯一不可驯服的、十分神秘的动物。比如，第一次面对食物或者面对大批食物的时候，会举行跑圈，类似现代宗教的感恩仪式或者祭祀；比如，狼一旦离开大地就会颤抖无力，又像希腊神话中的安泰。进而，陈阵又发现蒙古民族不仅将狼作为自己民族的图腾崇拜的对象，而且，死后又将自己的尸体放到狼出没的地方，实施“天葬”。蒙古牧民相信狼会将他们的灵魂带上“腾格里”（蒙语：天）。狼是蒙古人敬畏的敌人，也是他们相伴一生、甚至是来生的朋友。正是蒙古人带着狼的精神征服了差不多半个地球，开通了东西方商业贸易与文化的交流。 [2]
陈阵和他的来自于北京的青年朋友，因为狼的缘故和牧民融为一片。但是，他们无法阻挡来自于农耕文化和文革时期的错误政策对草原生态的破坏。他们首先用现代武器杀狼，将仅存的狼驱赶到边境外。进而，大片的开垦草原土地。几年以后，草原上鼠害横行，大片的草原沙化。在作品的最后，也就小说的尾声，来自于蒙古草原的沙尘暴已经遮天避日地肆虐北京，浮尘甚至飘过大海，在日本和韩国的天空游荡……
人类失去的不仅是草原不仅是狼，真正失去的是人与自然和谐共存的价值观；失去的是中华民族早期的图腾：自由、独立、顽强、勇敢的精神、永不屈服、决不投降的性格、意志和尊严。这是《狼图腾》的主题和作家悲怆的呼唤</textarea>
</td>
</tr>
</table> </form>
<fieldset id="checkBox">
<legend>复选框</legend>
————爱 好：
<label><input type="checkbox" name="" id="" value="1" data-par="上网" />上网，</label>
<label><input type="checkbox" name="" id="" value="2" data-par="购物" />购物，</label>
<label><input type="checkbox" name="" id="" value="3" data-par="玩游戏" />玩游戏，</label>
<label><input type="checkbox" name="" id="" value="4" data-par="打球" />打球，</label>
<label><input type="checkbox" name="" id="" value="5" data-par="旅游" />旅游，</label>
<label><input type="checkbox" name="" id="" value="6" data-par="看电影" />看电影，</label>
<label><input type="checkbox" name="" id="" value="7" data-par="旅游" />旅游，</label>
<label><input type="checkbox" name="" id="" value="8" data-par="聊天" />聊天，</label>
<label><input type="checkbox" name="" id="" value="9" data-par="听音乐" />听音乐，</label>
<label><input type="checkbox" name="" id="" value="10" data-par="敲代码" />敲代码</label>
<input type="button" id="checkedBtn" value="全 选" />
</fieldset> <fieldset id="radioBox">
<legend>单选框</legend>
————性 别：
<label><input type="radio" name="single" id="" value="1" data-sex="先生" />先生，</label>
<label><input type="radio" name="single" id="" value="2" data-sex="女士" />女士</label>
<label><input type="radio" name="single" id="" value="3" data-sex="人妖" />人妖</label>
<label><input type="radio" name="single" id="" value="4" data-sex="其他" />其他</label>
————下拉列表：
<select id="selectBox">
<option value="0" selected>--请选择--</option>
<option value="1">先生</option>
<option value="2">女士</option>
<option value="3">人妖</option>
<option value="4">其他</option>
</select>
</fieldset> <fieldset>
<legend>已选内容</legend>
<section id="selectBok"></section>
<input type="button" id="selectBtn" value="查看已选" />
</fieldset> </body>
<script type="text/javascript">
// on多个事件绑定不同函数
$(function () {
$("#p1").on({
//鼠标点击
mousedown: function ff2() {
$("form").css("background-color", "red");
},
//鼠标悬浮
mouseover: function ff3() {
$("form").css("background-color", "yellow");
},
//鼠标点击后松开，鼠标不离开原来位置
mouseup: function ff4() {
$("form").css("background-color", "green");
},
//鼠标离开
mouseout: function ff5() {
$("form").css("background-color", "blue");
},
});
}); //多个事件绑定同一个函数
$(function () {
$("input[type=password]").on("blur focus", function () {
console.log("#p2")
});
}); //模拟点事件trigger匹配所有（只要点击#p3就相当于触发#p1的mouseover事件 #p2）
$(function () {
$("#p3").mousedown(function () {
$("#p1,#p2").trigger("mouseover")
});
}); $(function () {
$("#p2").mouseover(function () {
console.log("#p2的mouseover事件")
});
$("#p1").mouseover(function () {
console.log("#p1的mouseover事件")
}); }); //模拟点事件triggerHandler而且只影响第一个匹配元素，与函数顺序无关，事件触发顺序只与元素位置有关（只要点击#p4就相当于点击#p1 ）
$(function () {
$("#p4").mousedown(function () {
$("#p2,#p1").triggerHandler("mouseover")
});
}); //change事件触发
$(function () {
$(":text").change(function () {
console.log("我被改变了")
});
});
//keydown：当用户按下键盘上的任意键时触发，如果按住不放的话，会重复触发此事件；
// keypress：当用户按下键盘上的字符键时触发，如果按住不放的话，会重复触发此事件；
// keyup：当用户释放键盘上的字符键时触发。
//触发先后顺序keydown》keypress》keyup
/**
* 在input元素上绑定keydown keypress事件会发现一个问题： 每次获取的内容都是之前输入的，当前输入的获取不到 keydown事件触发在文字还没敲进文本框，这时如果在keydown事件中输出文本框中的文本，
得到的是触发键盘事件前的文本，而keyup事件触发时整个键盘事件的操作已经完成，
获得的是触发键盘事件后的文本
*
*
* keydown 触发which
* **/
$("#span1").keydown(function (event) {
$("#span2").html("Key: " + event.which);
$("#span3").html(String.fromCharCode(event.charCode))
$("#span4").html(String.fromCharCode(event.keyCode))
console.log($(this).val())
});
$("#span5").keypress(function(event){
$("#span6").html("Key: " + event.which);
$("#span7").html(String.fromCharCode(event.charCode))
$("#span8").html(String.fromCharCode(event.keyCode))
console.log($(this).val())
});
$("#span9").keyup(function(event){
$("#span10").html("Key: " + event.which);
$("#span11").html(String.fromCharCode(event.charCode))
$("#span11").html(String.fromCharCode(event.keyCode))
console.log($(this).val())
});
/**
jq在元素的后面添加内容的方法有三种，下面介绍下append、appendTo、after这三种方法。
最简单的写法：
$("selector").append(content);
selector: 指定元素；
content： 指定要插入的内容，可以是 字符、html标签、函数
与第一种写法相反$("a").append(b);把b插入a中 $("a").appendTo(b);a插如b中
append和appendTo是在元素的内容后进行继续添加，紧跟着添加
不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。
$(content).appendTo(selector);
after() 在元素的后面插入内容
$(selector).after(content);
三种方法的区别：
after是在整个元素的后面进行的添加 */ //添加html标签
$("img").on('mouseout',function(event){
$("#div1").append("<p>我在后</p>");
}); //添加内容
$("img").on("mouseover",function(){
$("#div1").append("我在前")
}); //添加function
$("img").on('dblclick',function(event){
$("#div1").append(function () {
alert("我是函数哦")
});
}); //appendTo
$("#div2").dblclick(function(){
$("#kkk").appendTo("#div2");
}); //after
$("#div3").click(function(){
$(this).after($("#div1"));
}); //全选
$(document.body).on('click', '#checkedBtn', function(){
$('#checkBox').find('input').each(function(i){
if($(this).prop('checked')){//获取checked属性 并判断
$(this).prop('checked',false); //修改设置为不选中状态
}else{
$(this).prop('checked',true);//修改设置为选中状态
// $(this).attr("src","../img/aha.jpg")
}
});
}); //获取已选内容
$(document.body).on('click', '#selectBtn', function(){
var dom = '复选框<hr/>'
$('#checkBox').find('input').each(function(i){
if($(this).prop('checked')){
dom += 'value:['+ $(this).val() +']=>text：'+ $(this).attr('data-par');
}
}); dom +='<br/>单选框<hr/>' $('#radioBox').find('input').each(function(i){
if($(this).prop('checked')){
dom += 'value:['+ $(this).val() +']=>text：'+ $(this).attr('data-sex');
}
}); dom +='<br/>下拉框<hr/>' dom += 'value:['+ $('#selectBox').val() +']=>text：'+ $('#selectBox').find("option:selected").text(); $('#selectBok').html(dom);
}); var ss=[1,4,7,2,5,8,3,6,9];
var ddd={"name":"wb","sex":0};
$(function () {
$.each(ss,function(index,ele){
console.log(index+":"+ele);
});
//js3.2.1没有foreach可以用 for in
for(var key in ddd ){
console.log(key+":"+ddd[key]);
}
});
//forEach
$(function () {
ss.forEach(function (value, index, ss) {
console.log(value+":"+index)
});
})
// array.find(function(currentValue, index, arr),thisValue)
//
// 参数
// 参数 描述
// function(currentValue, index,arr) 必需。数组每个元素需要执行的函数。
// 函数参数:
// 参数 描述
// currentValue 必需。当前元素
// index 可选。当前元素的索引值
// arr 可选。当前元素所属的数组对象
// thisValue 可选。 传递给函数的值一般用 "this" 值。
// 如果这个参数为空， "undefined" 会传递给 "this" 值
</script>
</html>
jq的常用事件及其案例的更多相关文章
- jq常用事件（on,blur,focus,change）,js/jq等待图片(页面)加载完毕事件,js读取文件
jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...
- Python全栈开发之路 【第十七篇】：jQuery的位置属性、事件及案例
位置属性 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- ios手势操作,四个基本事件与六个常用事件
基本事件包括begin,canceled,move,ended四项,如果对象的hidden属性为yes,则无效果,hidden属性必须为no;才能使用: -(void)touchesBegan:(NS ...
- js-DOM-页面元素的兼容性、常用事件、节点
页面元素的兼容性: 所谓的兼容性指的就是当前浏览器是否支持当前对象的属性或是方法,如果支持就是兼容,如果不支持就是不兼容. 举个例子: /** * 设置页面标签之间的文本内容的兼容性写法 * @par ...
- C#基础练习（事件登陆案例）
Form1的后台代码: namespace _08事件登陆案例 { public partial class Form1 : Form { public Form1() ...
- jQuery--引入，基本语法，以及常用事件
一.初识jQuery jQuery是一个JavaScript函数库.主要包含的功能有:HTML元素的选取.操作,CSS操作,HTML事件函数,JavaScript特效和动画,HTML DOM遍历和修改 ...
- jQuery常用事件
1.$(document).ready() $(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式.它和onload具有类似的效果 ...
- css3模拟jq点击事件
还是这个梗,收好冷.今天是一个css3模拟jq点击事件,因为我发现,css3中没有类似于,js的点击事件,那么,可不可以仿照 jq的效果,类似的做一个呢?主要用到,input里面的radio 单选按钮 ...
- 基础5.jQuery常用事件
jQuery常用事件 1.bind() 方法 :为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数. 2.blur() 方法:当元素失去焦点时发生 blur 事件. 3.change() ...
随机推荐
- PAT乙级：1070 结绳 (25分)
PAT乙级:1070 结绳 (25分) 题干 给定一段一段的绳子,你需要把它们串成一条绳.每次串连的时候,是把两段绳子对折,再如下图所示套接在一起.这样得到的绳子又被当成是另一段绳子,可以再次对折去跟 ...
- tomcat日志及logback相关日志框架
一.重点问题整理 1.1 关于logback.xml中的路径设置问题 准备金系统的logback.xml中设置的路径是: <!-- 定义日志文件 输出位置 --> <property ...
- 浅谈树模型与集成学习-从决策树到GBDT
引言 神经网络模型,特别是深度神经网络模型,自AlexNet在Imagenet Challenge 2012上的一鸣惊人,无疑是Machine Learning Research上最靓的仔,各种进 ...
- 第十三篇 -- QMainWindow与QAction（新建-打开-保存）
效果图: 添加了三个Action,分别是新建,打开,和保存,没有具体写相应的功能,只是提供了一个接口,可以自己写相应的功能.这次不仅将这些Action放在了工具栏,还将其添加到了菜单栏.方法同样是直接 ...
- CreateWindow() -- 创建普通的窗口
(1)函数原型 1 HWND CreateWindow( 2 LPCTSTR lpClassName, //pointer to register class name 3 LPCTSTR lpWin ...
- g6踩坑
1. 当父元素有transform: scale()时,有鼠标定位不准确的问题 // 开启支持css缩放,智能保证基本的准确,很多情况还是有问题 graph.get('canvas').set('su ...
- 【Logback日志级别】动态调整Logback的日志级别
一.导入 Logback作为目前一个比较流行的日志框架,我们在实际项目经常使用到该框架来帮助我们打印日志,以便我们可以更快速地获取业务逻辑执行情况.定位系统问题. 常用的日志打印一共有5种级别控制,优 ...
- openresty——yum安装 配置 使用 错误处理 docker方式安装
yum方式安装 wget https://openresty.org/package/centos/openresty.repo mv openresty.repo /etc/yum.repos.d/ ...
- HCNA Routing&Switching之STP端口状态、计时器以及拓扑变化
前文我们了解了STP选举规则相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15131999.html:今天我们来聊一聊STP的端口状态.计时器.端口状 ...
- Linux命令（九）之安装mysql
.personSunflowerP { background: rgba(51, 153, 0, 0.66); border-bottom: 1px solid rgba(0, 102, 0, 1); ...