jquery函数与技巧

jquery中hover的用法在jQuery中，hover()方法是用于在鼠标移入和移出元素时触发事件的方法。

hover()方法可以接受两个参数，第一个参数是当鼠标移入元素时要执行的函数，第二个参数是当鼠标移出元素时要执行的函数。

下面是hover()方法的基本语法：```javascript$(selector).hover(inFunction,outFunction);```其中，selector是要绑定hover事件的元素选择器，inFunction是当鼠标移入元素时要执行的函数，outFunction是当鼠标移出元素时要执行的函数。

例如，以下代码会在鼠标移入和移出id为"myDiv"的元素时分别显示和隐藏一个提示框：```javascript$(document).ready(function(){$("#myDiv").hover(function(){$("#tip").show();},function(){$("#tip").hide();});});```在上面的代码中，当鼠标移入id为"myDiv"的元素时，会执行匿名函数，该函数用于显示id为"tip"的元素；当鼠标移出id为"myDiv"的元素时，会执行另一个匿名函数，该函数用于隐藏id为"tip"的元素。

除了使用两个参数的hover()方法外，还可以使用一个参数的hover()方法来绑定鼠标移入和移出事件。

例如：```javascript$(selector).hover(handler);```在这种情况下，handler参数可以是一个函数，用于在鼠标移入和移出元素时都执行相同的操作。

例如：```javascript$(document).ready(function(){$("#myDiv").hover(function(){$(this).addClass("highlight");});});```在上面的代码中，当鼠标移入id为"myDiv"的元素时，会将该元素添加一个名为"highlight"的CSS类。

jq常用方法jq是一个快速、简洁、灵活的JavaScript库，它允许我们轻松地操纵HTML文档，解析和处理JSON数据、处理表单和事件等。

在使用jq时，我们经常用到一些常用方法，那么接下来，我们就来一一讲解。

1. 选择器在jq中，选择器是最为基本的部分，它可以让我们快速地筛选元素，比如：- $("#id")：根据id选择元素。

- $(".class")：根据class选择元素。

- $("tag")：根据标签名选择元素。

- $("element").find(selector)：在指定元素中查找符合条件的元素。

2. 事件绑定在jq中，我们可以通过事件绑定来实现在指定元素上触发事件。

常用的事件有：- $(selector).click(function(){})：点击元素触发事件。

- $(selector).mouseover(function(){})：鼠标移上元素触发事件。

- $(selector).submit(function(){})：表单提交触发事件。

- $(selector).focus(function(){})：元素获得焦点触发事件。

3. DOM操作在jq中，我们可以通过一些方法来快速地操作DOM元素，比如：- $(selector).html()：获取或设置元素的HTML内容。

- $(selector).text()：获取或设置元素的文本内容。

- $(selector).attr()：获取或设置元素的属性。

- $(selector).addClass()：为元素添加class。

- $(selector).remove()：删除指定元素。

4. 动画效果在jq中，我们可以通过动态效果来增加网页的交互性，比如：- $(selector).show(speed,callback)：显示元素，可以设置速度和回调函数。

jqueryoff用法jQuery.off()方法的用法和示例jQuery.off()方法是jQuery的事件绑定方法之一，用于移除指定元素上绑定的一个或多个事件处理函数。

使用jQuery.off()方法可以解除调用jQuery.on()方法绑定的事件处理函数，可以移除特定事件类型的处理函数，或者针对特定的元素和事件类型移除事件处理函数。

该方法的语法如下：```javascript$(selector).off(eventType, handler)```其中，`selector`是要移除事件处理函数的元素选择器，`eventType`是要移除的事件类型，可以是字符串，或者多事件类型用空格隔开的字符串，`handler`是要移除的事件处理函数。

下面是一个使用jQuery.off()方法的示例：```javascript// 绑定click事件处理函数$('#myButton').on('click', function() {console.log('按钮被点击了！');});// 移除click事件处理函数$('#myButton').off('click');```在示例中，我们首先使用`jQuery.on()`方法将一个click事件处理函数绑定到`#myButton`按钮上。

然后，使用`jQuery.off()`方法移除了该按钮上的click事件处理函数。

需要注意的是，传递给`jQuery.off()`方法的事件处理函数必须与绑定时的函数完全相同，否则无法移除。

除了移除事件处理函数，jQuery.off()方法还可以用于移除由`jQuery.on()`方法通过事件委托绑定的事件处理函数。

```javascript// 绑定click事件处理函数$('.myContainer').on('click', '.myButton', function() {console.log('按钮被点击了！');});// 移除通过事件委托绑定的click事件处理函数$('.myContainer').off('click', '.myButton');```在示例中，我们通过事件委托方式将一个click事件处理函数绑定到`.myButton`按钮上，该按钮是`.myContainer`容器内的元素。

});
四， $复.g制et代JS码O
代码如下:
$.getJSO N("data. $("#getJ S所ON以Re调sp用o 时需要使
);
When Ajax 载入静态 页面 load( url, (dSatraing) (cMaalpl)b(a可ck (Callbac load()方 法可以轻 复制代码
代码如下:
$("#load ing").aj $(t}h)i;s).
全局事件 也 复可制以代帮码
代码如下:
$("#msg" ).before $(t}h)i.sa)j.a xSuccess $(t}h)i.sa)j.a xError(f $}()t;his).
很显然， 第 复三制个代参码
代码如下:
$.ajax({
进一步了 解 前A面JA讨X事论 的一些方 ajaxStar t(全局事 件 be)fo开re始Se n(d局部事 件 a(j全)ax局当Se事一nd 件 s(u局)cc部请es事求s 件 aj)ax请Su求cc e全ss局事件 全 e(r局局ro部的r事请 件 aj)ax仅Er当ro r
全局事件 全 c(o局局mp部的le事发te 件 aj)ax不Co管mp l全et局e事件 全 a(j全局ax局的St事请op 件 局)部当事没件 在之前的 复制代码
代码如下:
$('#ajax 这样， d复at制a.代ht码m
代码如下:
$('#ajax -
实现GET 和POST方 get( url, (dSatraing) (cMaalpl)b(a可ck (Callbac 很显然这 是一个专 复制代码
代码如下:
$.get('l ogin.pihdp

jquery parent用法
jQuery的parent()是一个内置的函数，用来获取父元素的jQuery对象，比如说<div>的子元素<p>，那么<p>的父元素就是<div>，调用$('p').parent()，就可以获取<div>这
个父元素的jQuery对象。

也就是说使用parent()可以“返回被选元素的直接父元素”。

其实parent()函数也可以和其他参数结合被使用。

常见的情况有两种：
第一种是和参数结合，即指定要查找的父元素的类型或者是含有特定的class，如：$('p').parent('div')，表示获取<p>的<div>父元素，而不是获取<p>的所有父元素；$('p').parent('.redClass')，表示获取所有含有class为redClass的<p>的父元素，而不是所有<p>的父元素。

第二种情况是不使用参数，但是使用搭配find方法，这样当使用find方法查看某个父元素中特定元素时，可以将这两个函数结合起来，来获取父元素中的特定元素，如：$('div').parent().find('span')，表示获取所有<div>的父元素中符合<span>的元素。

总而言之，jQuery的parent()函数可以用于获取被选元素的父元素，这可以是指定
类型的父元素或是含有特定类的父元素，也可以搭配find方法结合使用，以获取父元素
中特定元素。

translate() 方法通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数：rotate() 方法通过 rotate() 方法，元素顺时针旋转给定的角度。

允许负值，元素将逆时针旋转。

scale() 方法通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：skew() 方法通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：matrix() 方法matrix() 方法把所有 2D 转换方法组合在一起。

matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

transform: translate(50px,100px);transform:matrix(0.866,0.5,-0.5,0.866,0,0);CSS3 创建多列column-count 属性规定元素应该被分隔的列数：CSS3 规定列之间的间隔column-gap 属性规定列之间的间隔：CSS3 列规则column-rule 属性设置列之间的宽度、样式和颜色规则。

jQuery $(this).hide()演示 jQuery hide() 函数，隐藏当前的 HTML 元素。

$("#test").hide()演示 jQuery hide() 函数，隐藏 id="test" 的元素。

$("p").hide()演示 jQuery hide() 函数，隐藏所有 <p> 元素。

$(".test").hide()演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。

基础语法是：$(selector).action()∙美元符号定义 jQuery∙ 选择符（selector ）“查询”和“查找” HTML 元素∙ jQuery 的 action() 执行对元素的操作我们的实例中的所有 jQuery 函数位于一个 document ready 函数中： $(document).ready(function(){--- jQuery functions go here ----});$(this) 当前 HTML 元素$("p")所有 <p> 元素 $("p.intro")所有 class="intro" 的 <p> 元素 $(".intro")所有 class="intro" 的元素 $("#intro")id="intro" 的元素 $("ul li:first") 每个 <ul> 的第一个 <li> 元素$("[href$='.jpg']") 所有带有以 ".jpg" 结尾的属性值的 href 属性$("div#intro .head") id="intro" 的 <div> 元素中的所有 class="head" 的元素jQuery 名称冲突jQuery 使用 $ 符号作为 jQuery 的简介方式。

jQuery. Callbacks ()回调函数队列用法详解本文实例讲述了jQuery. Callbacks ()冋调函数队列用法。

分享给人家供人家参考，具体如下：1> jQuery. CallbacksThe jQuery. Callbacks() function, introduced in version 1. 7, returns a multi-purpose object that provides a powerful way to manage callback lists. Tt supports adding, removing, firing, and di sab1ing cal 1 backs.The $.Callbacks () function is internally used to provide the base functionality behind the jQuery $. ajax() and $. Deferred () components. It can be used as a similar base to define functionality for new components.接下来，我们分别看下四个标准的控制标志。

1.1 once创建的callbacks对彖只允许被fireWithO 一次［注意：方法fire()是fireWithO的外观模式］。

var callbacks 二$. Callbacks (/z once〃)；cal 1 backs, add(function() {console. log(〃fl〃);}); callbacks. fire() ; //输出"fl"callbacks. fire() ; //什么也不发生,在源码中已经禁用了list. disableO1.2 memory在调用add()方法时，如果这时callbacks队列满足fired && firing = false (真执行完毕)&& memory (需要在构造函数指定),那么acid()进去的回调函数会立即执行，而这个add进去的回调函数调用时的参数存储在memory 变量中o memory变量用于存储最后一次调用callbacks. fireWith(...)时所使用的参数［context, arguments］。

JQUERY的$（function（）{}）和window.onload=function。

在Jquery⾥⾯，我们知道⼊⼝函数有两种写法:$(function(){}) 和$(document).ready(function(){})作⽤类似于传统JavaScript中的window.onload⽅法，不过与window.onload⽅法还是有区别的。

重点内容1.执⾏时间1 window.onload必须等到页⾯内包括图⽚的所有元素加载完毕后才能执⾏。

2 $(document).ready()是DOM结构绘制完毕后就执⾏，不必等到加载完毕。

2.编写个数不同1 window.onload不能同时编写多个，如果有多个window.onload⽅法，只会执⾏⼀个2 $(document).ready()可以同时编写多个，并且都可以得到执⾏3.简化写法1 window.onload没有简化写法2 $(document).ready(function(){})可以简写成$(function(){});由于在 $(document).ready() ⽅法内注册的事件，只要 DOM 就绪就会被执⾏，因此可能此时元素的关联⽂件未下载完。

例如与图⽚有关的html 下载完毕，并且已经解析为 DOM 树了，但很有可能图⽚还没有加载完毕，所以例如图⽚的⾼度和宽度这样的属性此时不⼀定有效。

要解决这个问题，可以使⽤ Jquery 中另⼀个关于页⾯加载的⽅法 —load() ⽅法。

Load() ⽅法会在元素的 onload 事件中绑定⼀个处理函数。

如果处理函数绑定给 window 对象，则会在所有内容 ( 包括窗⼝、框架、对象和图像等 ) 加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。

1 Jquery 代码如下：2 $(window).load(function (){3 // 编写代码4 });等价于 JavaScript 中的以下代码5 Window.onload = function (){6 // 编写代码7 }。

jquery中animate的用法jQuery中的animate()方法是一个非常常见的动画效果实现方式。

通过这个方法，我们可以方便地实现各种各样的动态效果，比如淡入淡出、滑动、旋转、缩放等，而且非常适合用于页面中一些简单的特效展示。

下面，我将详细介绍一下animate()方法的用法，包括如何调用、传入参数、实现动画效果等。

1. 调用animate()方法animate()方法需要调用jQuery库中的对象或元素。

比如，如果需要修改一个<div>元素的高度和宽度，可以这样实现：$('div').animate({ height: '500px', width: '200px' });当然，你也可以通过类名或ID选择元素：$('.class-name').animate({ height: '500px', width:'200px' });$('#divId').animate({ height: '500px', width: '200px' });2. animate()方法的参数animate()方法可以传入很多参数来实现不同的动画效果。

下面介绍一下animate()方法中最常用的参数：(1) CSS属性通过传入CSS属性来实现动画效果。

比如：$('div').animate({ height: '500px', width: '200px', backgroundColor: '#fff' });(2) 时长我们可以通过传入一个数字来指定动画的时长，默认时间是400毫秒：$('div').animate({ height: '500px', width: '200px' }, 1000);(3) 缓动函数（easing）jQuery中提供了一些缓动函数，可以使动画更加自然。

jquery中each的用法在使用jQuery编写JavaScript代码时，经常会遇到需要遍历一个集合或数组的情况。

而jQuery中的each()方法便是用来实现遍历功能的。

使用each()方法可以对集合或数组中的每个元素进行迭代，并对每个元素执行指定的函数。

具体用法如下：```javascript$(selector).each(function(index, element) {// 执行操作});```其中，`$(selector)`为jQuery选择器，用于选择要遍历的元素集合。

`function(index, element)` 是需要执行的函数，它接受两个参数：index表示元素在集合中的索引，element表示当前遍历到的元素。

在函数中，可以根据需求对每个元素进行相应的操作。

例如，可以通过使用`$(this)`来获取当前遍历到的元素，并进行操作。

以下是一个示例，展示了如何使用each()方法遍历一个`<ul>`中的每个`<li>`元素，并将每个元素的文本内容输出到控制台：```javascript$("ul li").each(function(index, element) {var text = $(this).text();console.log("第 " + index + " 个元素的文本内容是：" + text);});```这段代码会遍历所有的`<li>`元素，并输出每个元素的文本内容到控制台。

需要注意的是，jQuery的each()方法在遍历时是支持`return false`的。

当在函数中的某个地方返回`false`时，将会立即停止遍历。

通过学习以上使用each()方法的示例和说明，相信您已经了解了jQuery中each()方法的基本用法和原理。

有了它，您可以更加方便地遍历和操作元素集合或数组。

jquery的slide方法jQuery的slide方法是jQuery库中提供的一种动画效果方法，它可以用于实现元素的滑动效果。

在web开发中，通过使用slide方法可以使页面中的元素在水平或垂直方向上平滑滑动，给用户带来更好的交互体验。

使用slide方法的基本语法如下：$(selector).slide(speed, callback);其中，selector是要应用滑动效果的元素选择器，speed是动画的速度，可以取以下几个值："slow"，"fast"，或者毫秒数，callback是动画完成后要执行的回调函数。

具体来说，slide方法可以分为以下几种形式：1. slideDown：滑动下拉，通过向下展开元素来显示它。

基本用法如下：$(selector).slideDown(speed, callback);2. slideUp：滑动上拉，通过向上收缩元素来隐藏它。

基本用法如下：$(selector).slideUp(speed, callback);3. slideToggle：切换滑动，如果元素处于隐藏状态，则通过展开来显示它；如果元素处于显示状态，则通过收缩来隐藏它。

基本用法如下：$(selector).slideToggle(speed, callback);4. slideLeft：向左滑动，通过向左平滑滑动元素来显示它。

基本用法如下：$(selector).animate({marginLeft:'-200px'}, speed);5. slideRight：向右滑动，通过向右平滑滑动元素来显示它。

基本用法如下：$(selector).animate({marginLeft:'200px'}, speed);6. slideLeftToggle：切换向左滑动，如果元素处于隐藏状态，则通过向左滑动来显示它；如果元素处于显示状态，则通过向右滑动来隐藏它。

浅谈JQUREY（摘自/softwave/article/details/2070815）JQUERY手册（第七页，附教程）Jquery是继prototype之后又一个优秀的Javascript框架。

对prototype我使用不多，简单了解过。

但使用上jquery 之后，马上被她的优雅吸引住了。

有人使用这样的一比喻来比较prototype和jquery：prototype就像Java，而jquery 就像ruby.实际上我比较喜欢java（少接触Ruby罢了）但是jquery的简单的实用的确有相当大的吸引力啊！在项目里我把jquery作为自已唯一的框架类包。

使用其间也有一点点心得，其实这些心得，在jquery的文档上面也可能有讲，不过还是记下来，以备忘罢。

一，找到你了！还记得$()这个东西吧？prototype还是DWR都使用了这个函数代替document.getElementById()。

没错，jquery也跟风了。

为达到document.getElementById()的目的，jquery是这样写的：Java代码1.var someElement = $("#myId");[java]view plaincopyprint?1.var someElement = $("#myId");看起来比其他两个框架的要多了一个#，好，看看下面的用法：Java代码1.$("div p");(1)2.$("div.container")(2)3.$("div #msg");(3)4.$("table a",context);(4)[java]view plaincopyprint?1.$("div p");(1) $("div.container")(2) $("div #msg");(3) $("table a",context);(4)在prototype里看过这样的写法吗？第一行代码得到所有<div>标签下的<p>元素。

jquery项⽬中⼀些常⽤⽅法1、获取url中的参数function getUrlParam(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); //构造⼀个含有⽬标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); //匹配⽬标参数以及解析中⽂乱码问题if (r != null) return decodeURI(r[2]); return null; //返回参数值}调⽤：getUrlParam(参数名称) 注意：参数名称是⼀个字符串2、封装ajax加移动端当数据没出现出现加载图标//封装ajax请求、function ajax_datatypeByXml(type, url, Xml_data, func) {//data数据可以为空$.ajax({type: type,url: url,async: false,dataType: "json",timeout: 30000, //超时时间：30秒data: Xml_data,beforeSend: function () {mui.showLoading("正在加载..", "div"); //加载⽂字和类型，plus环境中类型为div时强制以div⽅式显⽰ },complete: function () {mui.hideLoading(function () {});//隐藏后的回调函数},success: function (data) {if (data) {func(data);} else {mui.alert("数据加载失败");}},error: function() {mui.alert('服务器连接超时，请稍后再试');}});}//扩展mui.showLoading(function ($, window) {//显⽰加载框$.showLoading = function (message, type) {if ($.os.plus && type !== 'div') {$.plusReady(function () {plus.nativeUI.showWaiting(message);});} else {var html = '';html += '<i class="mui-spinner mui-spinner-white"></i>';html += '<p class="text">' + (message || "数据加载中") + '</p>';//遮罩层var mask = document.getElementsByClassName("mui-show-loading-mask");if (mask.length == 0) {mask = document.createElement('div');mask.classList.add("mui-show-loading-mask");document.body.appendChild(mask);mask.addEventListener("touchmove", function (e) { e.stopPropagation(); e.preventDefault(); });} else {mask[0].classList.remove("mui-show-loading-mask-hidden");}//加载框var toast = document.getElementsByClassName("mui-show-loading");if (toast.length == 0) {toast = document.createElement('div');toast.classList.add("mui-show-loading");toast.classList.add('loading-visible');document.body.appendChild(toast);toast.innerHTML = html;toast.addEventListener("touchmove", function (e) { e.stopPropagation(); e.preventDefault(); }); } else {toast[0].innerHTML = html;toast[0].classList.add("loading-visible");}}};//隐藏加载框$.hideLoading = function (callback) {if ($.os.plus) {$.plusReady(function () {plus.nativeUI.closeWaiting();});}var mask = document.getElementsByClassName("mui-show-loading-mask");var toast = document.getElementsByClassName("mui-show-loading");if (mask.length > 0) {mask[0].classList.add("mui-show-loading-mask-hidden");}if (toast.length > 0) {toast[0].classList.remove("loading-visible");callback && callback();}}})(mui, window);3、初始化移动端根节点字体⼤⼩⽤作rem值window.addEventListener("resize", setSize, false);window.addEventListener("orientationchange", setSize, false);function setSize() {var oHtml = document.getElementsByTagName("html")[0];var iWidth = oHtml.getBoundingClientRect().width;$("html").css("fontSize", iWidth / 15)}4、根据年⽉获得当⽉天数的实现代码function getDaysInMonth(year, month) {month = parseInt(month, 10);var temp = new Date(year, month, 0);return temp.getDate();}5、屏蔽打印consoleconsole.log=function(){}6、当动态⽣成li时点击事件有时可能会触发两次解决办法$('body').off('click').on('click','selector',function(){});使⽤之前要清理掉body上绑定的click事件，利⽤了jQuery⾥⾯off()⽅法7、选择input框的选中状态操作<div class="desc"><input type="checkbox" id="selectAll" onclick="checkAll()">全选</div><script>function checkAll(){var checkedOfAll=$("#selectAll").prop("checked");$("input[name='procheck']").prop("checked", checkedOfAll);alert(checkedOfAll);}</script>8、⿏标移⼊移出事件并在移⼊时操作$(".contactus-wrap").mouseover( function () {clearTimeout(time);$(".contactus").css({"opacity": 1,"left":"12px"})});$(".contactus-wrap").mouseout(function () {time = setTimeout(function () {$(".contactus").css({"opacity": 0,"left": "-206px"})}, 500)});$(".contactus").mouseover(function () {clearTimeout(time); $(".contactus").css({"opacity": 1,"left": "12px"})});$(".contactus").mouseout(function () {time = setTimeout(function () {$(".contactus").css({"opacity": 0,"left": "-206px"})}, 500);});9、jquery中获取⽗级iframe中的dom元素$(parent.window.document).find("iframe").contents().find("#F_HTNO")；10、textarea⾃动换⾏，且⽂本框根据输⼊内容⾃适应⾼度<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>输⼊框⾃适应</title><script src="jquery.min.js"></script><script>// textare⾃动换⾏/*** ⽂本框根据输⼊内容⾃适应⾼度* @param {HTMLElement} 输⼊框元素* @param {Number} 设置光标与输⼊框保持的距离(默认0)* @param {Number} 设置最⼤⾼度(可选)*/var autoTextarea = function (elem, extra, maxHeight) {extra = extra || 0;var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),addEvent = function (type, callback) {elem.addEventListener ?elem.addEventListener(type, callback, false) :elem.attachEvent('on' + type, callback);},getStyle = elem.currentStyle ? function (name) {var val = elem.currentStyle[name];if (name === 'height' && val.search(/px/i) !== 1) {var rect = elem.getBoundingClientRect();return rect.bottom - rect.top -parseFloat(getStyle('paddingTop')) -parseFloat(getStyle('paddingBottom')) + 'px';};return val;} : function (name) {return getComputedStyle(elem, null)[name];},minHeight = parseFloat(getStyle('height'));elem.style.resize = 'none';var change = function () {var scrollTop, height,padding = 0,style = elem.style;if (elem._length === elem.value.length) return;elem._length = elem.value.length;if (!isFirefox && !isOpera) {padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));};scrollTop = document.body.scrollTop || document.documentElement.scrollTop;elem.style.height = minHeight + 'px';if (elem.scrollHeight > minHeight) {if (maxHeight && elem.scrollHeight > maxHeight) {height = maxHeight;style.overflowY = 'auto';} else {height = elem.scrollHeight;style.overflowY = 'hidden';};style.height = height + extra + 'px';// scrollTop += parseInt(style.height) - elem.currHeight;// document.body.scrollTop = scrollTop;// document.documentElement.scrollTop = scrollTop;elem.currHeight = parseInt(style.height);};};addEvent('propertychange', change);addEvent('input', change);addEvent('focus', change);change();};$(document).ready(function() {$("table td").each(function() {if ($(this).find("[datatype='required']").length > 0||$(this).find("[datatype='number']").length > 0) {$(this).css("position", "relative");}})})</script></head><body><table><tr><td><textarea datatype="required" id="grxygzjh"isheightauto="true" maxlength="1000"msg="必填项" name="grxygzjh" onfocus="autoTextarea(this)"placeholder="*请输⼊个⼈下⽉⼯作计划"style="width:99%; font-size: 15px; border-style: none none solid; border-color: rgb(255,255, 255) rgb(255, 255, 255) rgb(119, 119, 119); border-bottom-width: 1px;height: 39px; background: transparent; text-align:left"type="text"></textarea></td></tr></table></body></html>11、移动端悬浮按钮可拖动touchImg: function () {var flag = 0; //标记是拖曳还是点击var oDiv = document.getElementsByClassName('add-btn')[0];var disX,moveX,L,T,starX,starY,starXEnd,starYEnd;oDiv.addEventListener('touchstart',function(e){flag = 0;e.preventDefault();//阻⽌触摸时页⾯的滚动，缩放disX = e.touches[0].clientX - this.offsetLeft;disY = e.touches[0].clientY - this.offsetTop;//⼿指按下时的坐标starX = e.touches[0].clientX;starY = e.touches[0].clientY;//console.log(disX);});oDiv.addEventListener('touchmove',function(e){flag = 1;L = e.touches[0].clientX - disX ;T = e.touches[0].clientY - disY ;//移动时当前位置与起始位置之间的差值starXEnd = e.touches[0].clientX - starX;starYEnd = e.touches[0].clientY - starY;//console.log(L);if(L<0){//限制拖拽的X范围，不能拖出屏幕L = 0;}else if(L > document.documentElement.clientWidth - this.offsetWidth){L=document.documentElement.clientWidth - this.offsetWidth;}if(T<0){//限制拖拽的Y范围，不能拖出屏幕T=0;}else if(T>document.documentElement.clientHeight - this.offsetHeight){T = document.documentElement.clientHeight - this.offsetHeight;console.log(T)}moveX = L + 'px';moveY = T + 'px';//console.log(moveX);this.style.left = moveX;this.style.top = moveY;});window.addEventListener('touchend',function(e){//alert(parseInt(moveX))//判断滑动⽅向if(flag === 0) {//点击}});}}12、监听input中value改变//监听input中value改变var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;//浏览器兼容var config = { attributes: true, childList: true }//配置对象$("input").each(function () {var _this = $(this);var observer = new MutationObserver(function (mutations) {//构造函数回调mutations.forEach(function (record) {if (record.type == "attributes") {//监听属性window.location.reload();}if (record.type == 'childList') {//监听结构发⽣变化//do any code}});});observer.observe(_this[0], config);});13、监听多张图⽚加载完成$.when.apply(null, $(".ccc").map(function(i, e) {var dfd = $.Deferred();if (plete) {console.log(`${i}`)dfd.resolve()} else {e.onload = function() {console.log(`${i}`)dfd.resolve()}}return dfd;}).toArray()).done(function() {console.log("图⽚加载完成");//要执⾏的⽅法loop();});console.log("图⽚开始加载");14、在不屏蔽F12的情况下禁⽌⽤户修改⽹页var submitBtn = parent.document.getElementById("lbtnPrint");var blackLbtnPrint = parent.document.getElementById("blacklbtnPrint"); if ($(submitBtn).length > 0 || $(blackLbtnPrint).length > 0) {var ConsoleManager = {onOpen() {$(submitBtn).hide();$(blackLbtnPrint).hide();// alert("Console is opened")},onClose() {window.parent.location.reload();$(submitBtn).show();$(blackLbtnPrint).show();// alert("Console is closed")},init() {var self = this;var x = document.createElement('div');var isOpening = false, isOpened = false;Object.defineProperty(x, 'id', {get() {if (!isOpening) {self.onOpen();isOpening = true;}isOpened = true;}});setInterval(function () {isOpened = false;(x);console.clear();if (!isOpened && isOpening) {self.onClose();isOpening = false;}}, 200)}}////如果f12打开就隐藏打印按钮ConsoleManager.onOpen = function () {$(submitBtn).hide();$(blackLbtnPrint).hide();// alert("Console is opened")}ConsoleManager.onClose = function () {window.parent.location.reload();$(submitBtn).show();$(blackLbtnPrint).show();// alert("Console is closed")}ConsoleManager.init();}15、iframe在移动端的缩放的⽰例代码//缩放ifrmae页⾯var Width = document.body.scrollWidth;var Height = document.body.scrollHeight;var zoomScale = Width / 640;setTimeout(function () {console.log($("#ifr"))$("#ifr").css({"transform": "scale(" + zoomScale + ")","width": (Width / zoomScale),"height": (Height / zoomScale),"transform-origin": "0 top 0"});}, 1000)。

一、介绍jQuery是一个广泛使用的JavaScript库，它简化了在网页上进行DOM操作和事件处理。

其中，keydown事件是当用户按下键盘键时触发的事件，在jQuery中，可以使用keydown()方法来绑定该事件的回调函数。

在这篇文章中，我们将详细讨论keydown事件的回调函数参数。

二、keydown事件1. keydown事件的定义在jQuery中，可以使用keydown()方法来绑定键盘的keydown事件。

当用户按下键盘上的任意键时，就会触发该事件。

2. keydown事件的用途keydown事件通常用于捕获用户按下键盘时的操作，例如监听用户的按键输入或实现键盘快捷键等功能。

在实际开发中，keydown事件常常与回调函数一起使用，以响应用户的键盘操作。

三、keydown事件的回调函数1. 回调函数的定义在使用keydown()方法绑定keydown事件时，可以传入一个回调函数作为参数。

当键盘按键被按下时，该回调函数将会被执行。

2. 回调函数的参数在keydown事件的回调函数中，通常会传入一个event对象作为参数。

该event对象包含了与键盘按下相关的信息，例如按下的键值、按下的键的字符、以及其他与键盘事件相关的属性。

3. event对象的属性在keydown事件的回调函数中，可以通过event对象的属性来获取与键盘事件相关的信息。

常用的event对象属性包括：- event.which：获取按下的键的键值- event.keyCode：获取按下的键的键码- event.key：获取按下的键的字符- event.ctrlKey：判断是否按下了Ctrl键- event.altKey：判断是否按下了Alt键- event.shiftKey：判断是否按下了Shift键通过这些属性，可以在回调函数中获取到用户按下的键的相关信息，从而进行相应的处理。

四、示例代码下面是一个使用keydown事件的回调函数的示例代码：```javascript$(document).keydown(function(event) {if (event.which === 13) {alert('You pressed Enter key');}});```在这段示例代码中，我们使用keydown()方法来绑定了keydown事件的回调函数。

把焦点光标移动到id的文本最后。
jquery获取焦点后光标在字符串后,当input获得焦点后，自动把光标移到文本内容的最后,jQuery用focus()使文本输入框获得焦 点且焦点在文字的最右的方法 复制代码 代码如下:
//获取焦点后光标在字符串后 //其原理就是获得焦点后重新把自己复制粘帖一下 var t=$("#"+id).val(); $("#"+id).val("").focus().val(t);
这篇文章主要介绍了jquery使用before和after在元素前后添加内容的方法实例分析了jquery中before和after方法添加内容的技巧非常具有实用价值需要的朋友可以参考下
jquery中 focus（）函数实现当对象获得焦点后自动把光 标移到内容最后
复制代码 代码如下:
("#"+id).val(); $("#"+id).val("").focus().val(t); }

jquery中replace的用法在jQuery中，replace是一个用于替换字符串中指定内容的函数。

它使用指定的新内容替换原始字符串中的目标内容。

replace函数有两个参数：要查找和替换的目标内容以及要替换为的新内容。

使用replace函数，可以实现以下功能：1. 替换指定内容：使用replace函数，我们可以将字符串中的指定内容替换为新的内容。

例如，我们有一个字符串“Hello world”，想要将其中的“world”替换为“Universe”，可以使用以下代码：```javascriptvar str = "Hello world";var newStr = str.replace("world", "Universe");console.log(newStr); // 输出: Hello Universe```2. 替换所有匹配项：默认情况下，replace函数只替换第一个匹配到的内容。

如果希望替换所有匹配项，可以使用正则表达式（Regular Expression）结合replace函数。

例如，我们有一个字符串“apple apple apple”，想要将其中的“apple”全部替换为“orange”，可以使用以下代码：```javascriptvar str = "apple apple apple";var newStr = str.replace(/apple/g, "orange");console.log(newStr); // 输出: orange orange orange```在上述代码中，正则表达式`/apple/g`中的`g`标识了全局匹配。

3. 使用函数进行替换：除了直接替换为指定内容，replace函数还可以接受一个函数作为参数，用于自定义替换逻辑。

例如，我们有一个字符串“Hello 123”，想要将其中的数字加倍后替换为新的内容。

学习要学会总结JQuery 学习大全JQuery 介绍...................................................................................................................................... 2 JQuery 事件...................................................................................................................................... 2 选择器（隐藏元素）....................................................................................................................... 4 使用 JQuery 元素选择器： ..................................................................................................... 5 属性选择器：........................................................................................................................... 5 CSS 选择器：............................................................................................................................ 5 文档就绪函数................................................................................................................................... 6 JQuery 效果...................................................................................................................................... 6 隐藏和显示............................................................................................................................... 6 切换........................................................................................................................................... 8 jQuery 滑动函数 - slideDown, slideUp, slideToggle ................................................. 8 JQuery 自定义动画（还是这个最合人心） ........................................................................ 10 JQuery HTML 操作.......................................................................................................................... 11 改变 HTML 内容....................................................................................................................... 11 添加 HTML 内容....................................................................................................................... 11 JQuery CSS 操作.......................................................................................................................... 11 JQuery Size 操作.......................................................................................................................... 12 JQuery 和 AJAX............................................................................................................................... 13学习要学会总结JQuery 介绍JQuery 是一个 JavaScript 库，但是它极大的简化了 JS 编程，说的再具体一点，就是： JQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 函数库 下面就开始我们的学习旅程吧！看如何通过使用 JQuery 应用 JS 效果。