下载文档原格式
jQuery中的常⽤事件介绍⼀、jQuery事件的分类jQuery事件是对JavaScript事件的封装，常⽤事件分类如下：1、基础事件window事件。
⿏标事件。
键盘事件。
表单事件。
2、复合事件是多个事件的组合⿏标光标悬停。
⿏标连续点击。
⼆、⿏标事件⿏标事件是当⽤户在⽂档上⾯移动或单击⿏标时⽽产⽣的事件，常⽤⿏标事件有：三、键盘事件⽤户每次按下或者释放键盘上的按键时都会产⽣事件，常⽤键盘事件如下：四、表单事件当元素获得焦点时，会触发focus()事件，失去焦点时，会触发blur()事件。
表单提交时会触发submit()事件。
五、综合⽰例1、⽤户名输⼊框获得焦点时输⼊框背景⾊为浅蓝⾊，失去焦点时还原为⽩⾊背景⾊。
2、⿏标移⾄登录按钮时字体变粗，移出时整体恢复正常。
3、敲击键盘的“回车”键时触发表单提交事件。
代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>事件演⽰⽰例</title><style type="text/css">#login{width: 400px;height: 250px;background-color: #f2f2f2;border:1px solid #DDDDDD;padding: 5px;}#login fieldset {border: none;margin-top: 10px;}#login fieldset legend{font-weight: bold;}#login fieldset p{display: block;height: 30px;}#login fieldset p label {display: block;float:left;text-align: right;font-size: 12px;width: 90px;height: 30px;line-height: 30px;}#login fieldset p input {display: block;float:left;border: 1px solid #999;width: 250px;height: 30px;line-height: 30px;}#login fieldset p input.code{width: 60px;}#login fieldset p img{margin-left: 10px;}#login fieldset p a{color: #057BD2;font-size: 12px;text-decoration: none;margin: 10px;}#login fieldset p input.btn{background: url("./images/login.gif") no-repeat;width: 98px;height: 32px;margin-left: 60px;color: #ffffff;cursor: pointer;}#login fieldset p input.input_focus{background-color: #BEE7FC;}</style><!--引⼊jQuery--><script src="../jquery-3.3.1.js"></script><!--javascript--><script>$(function(){// ⽤户名输⼊框的焦点事件$("input[name='member']").focus(function(){$(this).addClass("input_focus");});// ⽤户名失去焦点$("input[name='member']").blur(function(){$(this).removeClass("input_focus");});// ⿏标移⼊移出事件$(".btn").mouseover(function(){$(this).css("font-weight","bold");});$(".btn").mouseout(function(){$(this).css("font-weight","normal");});// 键盘事件，敲击回车键进⾏表单提交，keyCode的数值代表不同的键盘按键// js需要区分keyCode(IE)和which(FF)的兼容性，event.keyCode||event.which⽤来考虑兼容性$(document).keypress(function(e){if(e.keyCode==13){//$("#login").submit();// 模拟表单提交alert("触发表单的提交事件");}});});</script></head><body><form id="login"><fieldset><legend>⽤户登录</legend><p><label>⽤户名：</label><input name="member" type="text" /><p><label>密码：</label><input name="password" type="text" /></p><p><label>验证码：</label><input name="code" type="text" class="code" /><img src="images/code.gif" width="80" height="30" /><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >换⼀张</a></p><p><input name="" type="button" class="btn" value="登录" /><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >注册</a><span>|</span><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >忘记密码？</a> </p></fieldset></form></body></html>效果：以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
1. 如何创建嵌套的过滤器：1.//允许你减少集合中的匹配元素的过滤器，2.//只剩下那些与给定的选择器匹配的部分。
在这种情况下，3.//查询删除了任何没（:not）有（:has）4.//包含class为“selected”（.selected）的子节点。
5..filter(":not(:has(.selected))")2. 如何重用元素搜索1.var allItems = $("div.item");2.var keepList = $("div#container1 div.item");3.//现在你可以继续使用这些jQuery对象来工作了。
例如，4.//基于复选框裁剪“keep list”，复选框的名称5.//符合6.< DIV >class names:7.$(formToLookAt + " input:checked").each(function() {8. keepList = keepList.filter("." + $(this).attr("name"));9.});10.< /DIV>3. 任何使用has()来检查某个元素是否包含某个类或是元素：1.//jQuery 1.4.*包含了对这一has方法的支持。
该方法找出2.//某个元素是否包含了其他另一个元素类或是其他任何的3.//你正在查找并要在其之上进行操作的东东。
4.$("input").has(".email").addClass("email_icon");4. 如何使用jQuery来切换样式表1.//找出你希望切换的媒体类型（media-type），然后把href设置成新的样式表。
2.$('link[media='screen']').attr('href', 'Alternative.css');5. 如何限制选择范围（基于优化目的）：1.//尽可能使用标签名来作为类名的前缀，2.//这样jQuery就不需要花费更多的时间来搜索3.//你想要的元素。
《jq》完美精品课件一、教学内容本节课我们将学习《jq》教材第四章“事件处理”部分，详细内容涵盖事件的基本概念、事件流、事件处理函数、绑定和注销事件等。
二、教学目标1. 理解事件处理的基本概念，掌握事件流和事件处理函数的使用。
2. 学会使用jq为元素绑定和注销事件，并能解决实际问题。
3. 能够运用所学知识编写具有交互性的网页。
三、教学难点与重点重点：事件处理函数的编写和绑定方法。
难点：事件流的理解，以及在实际开发中灵活运用事件处理。
四、教具与学具准备1. 教具：投影仪、计算机、PPT课件。
2. 学具：计算机、教材、笔记本。
五、教学过程1. 导入：通过展示一个具有交互效果的网页，引发学生对事件处理的学习兴趣。
2. 理论讲解：（1）事件的基本概念及分类；（2）事件流的概念及分类；（3）事件处理函数的编写及使用；（4）绑定和注销事件的方法。
3. 实践操作：（1）使用jq为元素绑定事件；（2）编写事件处理函数，实现效果；（3）注销已绑定的事件。
4. 例题讲解：以一个具体实例，讲解事件处理在实际开发中的应用。
5. 随堂练习：让学生编写一个简单的网页，实现按钮弹出提示框的功能。
六、板书设计1. 事件处理基本概念2. 事件流3. 事件处理函数4. 绑定和注销事件5. 实例讲解七、作业设计1. 作业题目：（1）编写一个网页，实现按钮改变元素样式的功能；（2）编写一个网页，实现鼠标移入移出元素时改变元素颜色的功能。
2. 答案：（1）<!DOCTYPE ><><head><meta charset="UTF8"><>作业1</></head><body><button id="btn">改变样式</button><div id="box" style="width: 100px; height: 100px; backgroundcolor: red;"></div><script>$('btn').click(function() {$('box').css('backgroundcolor', 'blue');});</script></body></>（2）<!DOCTYPE ><><head><meta charset="UTF8"><>作业2</></head><body><div id="box" style="width: 100px; height: 100px; backgroundcolor: red;"></div><script>$('box').mouseover(function() {$(this).css('backgroundcolor', 'blue');});$('box').mouseout(function() {$(this).css('backgroundcolor', 'red');});</script></body></>八、课后反思及拓展延伸1. 反思：本节课学生对事件处理的概念和用法掌握程度，以及在实际操作中遇到的问题。
JQ方法大全网友：linuxphpmysql 发布于：2008.10.22 08:58(共有条评论) 查看评论| 我要评论Dom：Attribute：$("p").addClass(css中定义的样式类型); 给某个元素添加样式$("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值，参数是map $("img").attr("src","test.jpg"); 给某个元素添加属性/值$("img").attr("title", function() { return this.src }); 给某个元素添加属性/值$("元素名称").html(); 获得该元素内的内容（元素，文本等）$("元素名称").html("new stuff"); 给某元素设置内容$("元素名称").removeAttr("属性名称") 给某元素删除指定的属性以及该属性的值$("元素名称").removeClass("class") 给某元素删除指定的样式$("元素名称").text(); 获得该元素的文本$("元素名称").text(value); 设置该元素的文本值为value$("元素名称").toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式$("input元素名称").val(); 获取input元素的值$("input元素名称").val(value); 设置input元素的值为valueManipulation：$("元素名称").after(content); 在匹配元素后面添加内容$("元素名称").append(content); 将content作为元素的内容插入到该元素的后面$("元素名称").appendTo(content); 在content后接元素$("元素名称").before(content); 与after方法相反$("元素名称").clone(布尔表达式) 当布尔表达式为真时，克隆元素（无参时，当作true处理）$("元素名称").empty() 将该元素的内容设置为空$("元素名称").insertAfter(content); 将该元素插入到content之后$("元素名称").insertBefore(content); 将该元素插入到content之前$("元素").prepend(content); 将content作为该元素的一部分，放到该元素的最前面$("元素").prependTo(content); 将该元素作为content的一部分，放content的最前面$("元素").remove(); 删除所有的指定元素$("元素").remove("exp"); 删除所有含有exp的元素$("元素").wrap("html"); 用html来包围该元素$("元素").wrap(element); 用element来包围该元素Traversing：add(expr)add(html)add(elements)children(expr)contains(str)end()filter(expression)filter(filter)find(expr)is(expr)next(expr)not(el)not(expr)not(elems)parent(expr)parents(expr)prev(expr)siblings(expr)Core：$(html).appendTo("body") 相当于在body中写了一段html代码$(elems) 获得DOM上的某个元素$(function(){……..}); 执行一个函数$("div > p").css("border", "1px solid gray"); 查找所有div的子节点p，添加样式$("input:radio", document.forms[0]) 在当前页面的第一个表单中查找所有的单选按钮$.extend(prop) prop是一个jQuery对象，举例：jQuery.extend({min: function(a, b) { return a b ? a : b; }});jQuery( expression, [context] ) ---$( expression, [context]); 在默认情况下，$()查询的是当前HTML文档中的DOM元素。
jq命令用法总结一、jq命令简介jq是一款强大的JSON解析和生成工具，它可以让你在命令行环境下轻松处理JSON数据。
jq命令的主要特点包括：1.轻量级：jq仅依赖libjson-perl库，无需其他外部依赖。
2.可定制：jq支持自定义过滤器，可以根据需求定制输出格式。
3.语法简洁：jq的语法简单易懂，易于上手。
二、jq命令的基本用法1.过滤数据jq命令可以通过过滤器对输入的JSON数据进行筛选。
例如，筛选出JSON数组中的某个元素：```jq ".["key"]" input.json```2.映射数据jq命令支持对数据进行映射操作，可以将JSON数据中的某个属性映射到新的属性上。
例如，将JSON数组的某个元素映射为一个新的数组：```jq ".[] | map({"new_key": .["old_key"]})" input.json```3.转换数据类型jq命令可以对数据进行类型转换，例如将字符串转换为数字：```jq ".["key"] = .["key"] * 2" input.json```4.操作数组和对象jq命令支持对数组和对象进行操作，如添加、删除或修改属性。
例如，在JSON数组末尾添加一个新的元素：```jq ".[] += {"new_key": "new_value"}" input.json```二、jq命令的高级用法1.函数定义与调用jq命令支持自定义函数，可以方便地对数据进行处理。
例如，定义一个计算年龄的函数并调用：```jq "def age = ($birthday) => { return ($birthday / 365 * 10000); }; age()" input.json```2.条件语句jq命令支持条件语句，可以根据条件对数据进行处理。
《浅谈jQuery的面试题与解答》 49字以下是10个关于jQuery的面试题及答案：1.问题：什么是jQuery？2.答案：jQuery是一个快速、小型且功能丰富的JavaScript库。
它使HTML文档遍历和操作、事件处理、动画制作以及Ajax开发变得简单易行。
3.问题：jQuery的主要功能有哪些？4.答案：jQuery的主要功能包括选择器、DOM操作、事件处理、动画效果、Ajax交互等。
5.问题：如何使用jQuery选择元素？6.答案：可以使用jQuery选择器来选择HTML元素。
例如，使用$()函数和CSS选择器来选择元素，如$('p')选择所有的段落元素。
7.问题：如何使用jQuery修改元素的内容？8.答案：可以使用.html()或.text()方法来修改元素的内容。
例如，$('#myDiv').html('新的内容')可以修改ID为myDiv的元素的内容。
9.问题：如何使用jQuery修改元素的样式？10.答案：可以使用.css()方法来修改元素的样式。
例如，$('#myDiv').css('color', 'red')可以将ID为myDiv的元素的字体颜色修改为红色。
11.问题：如何使用jQuery添加或删除元素？12.答案：可以使用.append()、.prepend()、.after()、.before()等方法来添加元素，使用.remove()方法来删除元素。
13.问题：如何使用jQuery处理事件？14.答案：可以使用.on()方法来处理事件。
例如，$('p').on('click', function(){ alert('点击了段落！'); })可以给所有的段落元素添加点击事件处理程序。
15.问题：如何使用jQuery制作动画效果？16.答案：可以使用.animate()方法来制作动画效果。
jquery的常见面试题1. 什么是jQuery？jQuery是一个快速、简洁并且功能丰富的JavaScript库。
它简化了HTML文档遍历、事件处理、动画效果和AJAX交互，并且跨浏览器兼容。
2. 如何使用jQuery库？首先，在HTML文档中引入jQuery库的文件。
可以通过下载jQuery文件并链接到HTML文件中，或者使用CDN链接引入。
然后通过在JavaScript代码中使用jQuery的API来操作DOM元素和执行其他操作。
3. 如何选择元素进行操作？在jQuery中，可以使用选择器来选取特定的HTML元素。
常见的选择器包括类选择器（.class）、ID选择器（#id）、元素选择器（element）以及层级选择器（parent > child）等。
4. 如何在页面加载完成后执行jQuery代码？使用$(document).ready()函数或简写的$(function(){})来确保在页面加载完成后再执行jQuery代码。
这样可以避免在页面元素尚未完全加载时执行相关操作。
5. 如何隐藏和显示元素？使用.hide()函数可以隐藏选定的元素，而使用.show()函数可以显示之前隐藏的元素。
另外，还可以使用.toggle()函数在隐藏和显示之间进行切换。
6. 如何在点击事件中执行代码？使用.click()函数可以为选中的元素绑定点击事件，并在点击发生时执行相应的代码。
例如，可以使用$("button").click(function(){...})来绑定按钮的点击事件。
7. 如何切换元素的CSS类？使用.addClass()函数可以向选中的元素添加CSS类，而.removeClass()函数可以移除选中元素的CSS类。
此外，还可以使用.toggleClass()函数在添加和移除之间进行切换。
8. 如何获取和设置元素的属性值？使用.attr()函数可以获取元素的属性值，例如$("img").attr("src")可以获取图片元素的src属性值。
jq事件方法(一)jq事件方法事件处理方法•click()：当元素被点击时触发事件。
•dblclick()：当元素被双击时触发事件。
•mouseenter()：当鼠标指针进入元素时触发事件。
•mouseleave()：当鼠标指针离开元素时触发事件。
•mousedown()：当鼠标按下元素时触发事件。
•mouseup()：当鼠标释放元素时触发事件。
表单事件方法•submit()：当提交表单时触发事件。
•focus()：当元素获得焦点时触发事件。
•blur()：当元素失去焦点时触发事件。
•change()：当元素的值改变时触发事件。
文档加载事件方法•ready()：当文档完全加载时触发事件。
•load()：当页面上的所有元素都加载完成时触发事件。
动画事件方法•show()：当元素显示时触发事件。
•hide()：当元素隐藏时触发事件。
•toggle()：当元素在显示和隐藏之间切换时触发事件。
•fadeIn()：当元素淡入显示时触发事件。
•fadeOut()：当元素淡出隐藏时触发事件。
自定义事件方法•trigger()：触发自定义事件。
以上方法可以通过在括号内传递回调函数来处理事件，回调函数中可以实现相应的操作和逻辑。
例如，通过click()方法可以实现点击按钮弹出消息框的功能：$("#myButton").click(function(){alert("按钮被点击了！");});通过change()方法可以实现监测输入框内容改变并实时更新的功能：$("#myInput").change(function(){var value = $(this).val();$("#output").text(value);});使用这些jq事件方法，可以方便地对页面元素进行各种事件绑定和处理，为用户提供更好的交互体验。
jQuery练习题一、基础知识篇A. $(document).ready(function(){}B. jQuery(document).ready(function(){}C. $().ready(function(){}D. $(function(){}2. 如何获取页面中id为"demo"的元素？选择所有div元素选择class为"active"的元素选择所有可见的p元素4. jQuery中的哪个方法用于绑定事件？5. 如何在jQuery中设置元素的样式？二、操作DOM篇添加元素删除元素替换元素复制元素2. 如何使用jQuery获取和设置元素的内容？3. 请实现一个简单的折叠菜单，菜单时，显示或隐藏菜单内容。
4. 如何使用jQuery实现元素的淡入和淡出效果？5. 请使用jQuery为表格添加隔行变色效果。
三、事件处理篇1. 请列举至少三种jQuery中的鼠标事件。
2. 如何在jQuery中为多个事件绑定同一个处理函数？3. 请实现一个简单的图片轮播效果。
4. 如何使用jQuery阻止事件冒泡？5. 请使用jQuery实现一个可拖拽的div元素。
四、动画与特效篇滑动显示/隐藏元素淡入/淡出元素自定义动画2. 如何使用jQuery实现元素的抖动效果？3. 请使用jQuery实现一个简单的折叠面板。
4. 如何使用jQuery为元素添加和移除类？5. 请实现一个使用jQuery的 tooltip 提示效果。
五、AJAX篇1. 请简述jQuery中$.ajax()方法的基本使用。
2. 如何使用jQuery发送GET请求？3. 请使用jQuery发送POST请求，并传递参数。
4. 如何使用jQuery处理AJAX请求的返回数据？5. 请实现一个简单的用户登录验证功能，使用jQuery发送AJAX 请求。
六、高级应用篇1. 请使用jQuery实现一个插件。
2. 如何使用jQuery扩展自定义方法？3. 请使用jQuery实现一个简单的模态框（对话框）。
Jquery插件实例先说明下应⽤场景，通过可配项的配置和默认项覆盖，获取指定的需求数据，填充到指定的位置（两个指定其实都是可配的）(function($) {$.fn.extend({getOneNews: function(opt) { //获取单条新闻信息var defaults = {newsId: "",};var options = $.extend(defaults, opt);var _this = this;_this.html("<p style='text-align:center'>信息获取中，请稍后...</p>")$.ajax({dataType:"jsonp",jsonp: "callback",url:"xxxx/news/GetNewsById?newsid="+options.newsId,success:function(res){_this.html(res.obj.news_content)},error: function(){_this.html("<p style='text-align:center'>数据异常，请稍后再试！</p>")}});}})})(jQuery)采⽤闭包的⽅式，执⾏插件⽅法；调取⽅式：$(指定容器).getOneNews({ newsId: 配置参数})就这么简单！如果有多个插件，直接通过对象的⽅式写，使⽤⽅式⼀样同上。
转）[高手手绘]一段由茅厕引发的JQ(如何掰弯一个直男) 1.从前有个小受…是个书生。
2.小攻是个纨绔子弟。
3.…攻与受是这样相遇的。
攻：“能否借用下贵厕所？”
受：“呃，请…”
4.攻：“有草纸不？”…
5.第二次，小攻想，这是个巧合。
攻：“能否再借用下贵厕所？”
受：“请进…”
6.后来小攻知道了小受是上京赶考的。
7.小受说读书是很辛苦的，三头六臂都不够用。
8.为了报答两次借之情，小攻请小受去潇洒潇洒，潇洒的地方是全国连锁店——悦来客栈。
攻：“读书那么辛苦，我带你去放松下。
”
9.那天小攻喝得很开心。
攻：“酒量不错嘛…”
受：“谁能没点爱好~”
10.后来，只要小受一有空，小攻就约他出去喝酒。
攻：“快，今天去XX楼，快~”
受：“就来了。
”
11.不知不觉中考期临近，小受能出来的时间很少了……
受：【备考，勿扰】
12.有次好不容易聚聚，大家都喝的有点高，听了小攻的话，小受只是笑了笑。
攻：“靠什么功名啊，干脆我来养你！”
13.然后小攻在酒楼里睡着了——
14 (3)
15.接下来，知道发榜，小攻都没有再见到小受。
16.小受高中榜眼后，约小攻出来喝酒。
受：“我进翰林院了，还在你爹手下~”
攻：“那你是不是以后好好讨好我，以保你以后的仕途一帆风顺啊~”
17.此后，小攻时不时去小受家溜达。
18.……借茅厕是当然的攻：“你家又没草纸了！”受：“直接出来吧~”
19.小攻以为生活可以这样快乐地过下去，直到有一天。
受：“皇帝把我贬到×州做知州，五天后启程。
”
20.其实小攻心里很矛盾，他一届纨绔忧虑啥啊？~ 攻：“他要走，我他妈干嘛要愁啊？！”
21.虽然愁着，小攻觉得又不是丢了相好，这风流日子还是得过！攻：“对，很久没去连锁第一的怡红院了！”
受：“？”
22.临别送行的时候，小攻还很抑郁，所以忽略了小受欲言又止的表情。
攻：“那，祝君此行一帆风顺。
”
受：“...也好，兄弟一场，有缘再斟浊酒一杯，共饮逍遥。
”
23.小受去×州一个月了……攻：我居然15天没去怡红院了！
24.小受去×州两个月了……
攻：“明明每天大鱼大肉，我居然还瘦了！”
25.小受去×州三个月了……
攻：“我TM受不了了！”
26.然后小攻独自启程去了×州。
（“爹，我暂时出去云游（不是离家出走！）不用派人来问候我。
儿子留”）
27.但是知道路上他才发现，没有经济基础、人力基础的[云游]是多么艰难。
攻：“你怎么不早说去×州要10天啊！”
28.好不容易摸到知县府，小攻却被衙差拦住不让进。
衙差：“丢钱了？被抢了？被强了？”
攻：“不是！！”
29.不说为啥找知县，衙差就不让进。
攻：“我TM丢相好了！”
衙差：“那你跑来这干嘛？”
攻：“就丢你们府里，让我进去！”
30.由于人类无限的潜力，小攻竟然凭着疲惫的身体冲进了衙门。
衙差们：“有刺客，抓！”
31.为了躲过一劫，小攻决定先进茅厕避难。
32.有时候，猿粪就是这么奇妙……攻＆受：“……”
33.[小攻一把抱住了小受]
攻：“想死我了想死我了想死我了想得我都快崩溃了！”受：“你怎么……”
34.恋爱时，总需要一个人保持清醒……
攻：“不说点什么？”
受：“很臭，出去说。
”
35.此刻，小攻深深地体会到了关系的重要。
衙差：“老爷，那是刺客！”
受：“刺客？哪？”
36.支开侍女，小受把小攻拉回房间。
受：“你们先下去吧。
”
侍女：“是，老爷。
”
37.进门后，干柴烈火，燃了。
受：“既然来了，就别走了。
”
攻：“行。
”
38.第二天。
侍女A：“喂，我和你说，昨天我看到老爷把那个刺客抱在怀里哎！”侍女B：“胡扯，我明明看到是那个刺客把老爷抱在怀里！”
侍女C：“你们都错了，我看见他们在互抱!”
39.小攻一桩心愿总算了了，可新的烦恼又来了。
不过人生就是这样，勇猛的挑战吧。
攻：“我该怎么忽悠我爹呢？”
受：“吃饭！”
--------------------完--------------------。
