技术标签: button input function callback JQuery ajax jquery
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
基础语法是:$(selector).action()
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落
$("p.test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){
--- jQuery functions gohere ----
});
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数,操作可能失败。下面是两个具体的例子:
jQuery使用 CSS 选择器来选取 HTML 元素。写法与css语法一致
$("p")选取 <p> 元素。
$("p.intro")选取所有 class="intro" 的 <p> 元素。
$("p#demo")选取 id="demo" 的第一个 <p> 元素。
jQuery使用 XPath 表达式来选择带有给定属性的元素。
$("[href]")选取所有带有 href 属性的元素。
$("[href='#']")选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']")选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']")选取所有 href 值以 ".jpg" 结尾的元素。
$("[href^='.jpg']")选取所有 href 值以 ".jpg" 开始的元素。(important)
语法参见:http://www.w3school.com.cn/jquery/jquery_ref_selectors.asp
$(”div.txt span”)取得类名为div下的span
注意:定位同时具有两个类名的对象
$(".intro.demo") |
所有 class="intro" 且 class="demo" 的元素 |
与属性结合定位
$("div.txt[title]:eq(1)") 带有title属性的div,且第2个
用于定位第1个first、最后一个last、奇数odd、偶数even、或第N个以前lt、或第N个以后gt、或第N个eq。主要用于状态转换
$(“p,div.txt”)选择p元素和有txt属性的div
$(":input") |
所有 <input> 元素 |
|
$(":text") |
所有 type="text" 的 <input> 元素 |
|
$(":password") |
所有 type="password" 的 <input> 元素 |
|
$(":radio") |
所有 type="radio" 的 <input> 元素 |
|
$(":checkbox") |
所有 type="checkbox" 的 <input> 元素 |
|
$(":submit") |
所有 type="submit" 的 <input> 元素 |
|
$(":reset") |
所有 type="reset" 的 <input> 元素 |
|
$(":button") |
所有 type="button" 的 <input> 元素 |
|
$(":image") |
所有 type="image" 的 <input> 元素 |
|
$(":file") |
所有 type="file" 的 <input> 元素 |
|
|
|
|
$(":enabled") |
所有激活的 input 元素 |
|
$(":disabled") |
所有禁用的 input 元素 |
|
$(":selected") |
所有被选取的 input 元素 |
|
$(":checked") |
所有被选中的 input 元素 |
:not(selector) |
$("input:not(:empty)") |
所有不为空的 input 元素 |
|
|
|
$(":header") |
所有标题元素 <h1> - <h6> |
|
|
所有动画元素 |
|
|
|
|
$(":contains('W3School')") |
包含指定字符串的所有元素 |
|
$(":empty") |
无子(元素)节点的所有元素 |
|
:hidden |
$("p:hidden") |
所有隐藏的 <p> 元素 |
$("table:visible") |
所有可见的表格 |
jQueryCSS 选择器可用于改变 HTML 元素的 CSS 属性。
下面的例子把所有 p 元素的背景颜色更改为红色:
$("p").css("background-color","red");
注意:第一、触发事件 第二、绑定事件
事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件。
触发实例:
$("button#demo").click()
上面的例子将触发id="demo" 的 button 元素的 click 事件。
绑定实例:
$("button#demo").click(function(){$("img").hide()})
上面的例子会在点击id="demo" 的按钮时隐藏所有图像。
定义和用法:用不同函数轮流响应click事件
toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。
实例
切换不同的背景色:
$("p").toggle(
function(){
$("body").css("background-color","green");},
function(){
$("body").css("background-color","red");},
function(){
$("body").css("background-color","yellow");}
);
定义和用法
each() 方法规定为每个匹配元素规定运行的函数。
如:对每个li执行此函数,函数功能是输出它的文本
$("li").each(function(){
alert($(this).text())
});
定义和用法
bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数
$(selector).bind(event,data,function)
当点击鼠标时,隐藏或显示 p 元素:(data是可选参数)
$("button").bind("click",function(){
$("p").slideToggle();
});
传data例子:是将data作为event的成员传入
var message = 'Spoon!';
$('#foo').bind('click', {msg: message}, function(event) {
alert(event.data.msg);
});
另外一个用法:
假如要编写一个可以自由拖动的div层,则当鼠标移动时,div层也随之移动,那么则div层须绑定到鼠标的移动事件,当事件发生时,会将事件参数e传递给绑定的函数,由绑定的函数去计算div层的移动位置。
对数组进行过滤后返回数组
grep(array,callback,invert)
· array:待过滤数组;
· callback:处理数组中的每个元素,并过滤元素,该函数中包含两个参数,第一个是当前数组元素的值,一个是当前数组元素的下标,即元素索引值。此函数应返回一个布尔值。另外,此函数可设置为一个字符串,当设置为字符串时,将视为“lambda-form”(缩写形式?),其中 a 代表数组元素,i 代表元素索引值。如“a > 0”代表“function(a){ return a > 0; }”
· invert:布尔型可选项,默认值false,值为true或false, 如果 “invert”为 false 或为设置,则函数返回数组中由过滤函数返回 true 的元素,当”invert” 为 true,则返回过滤函数中返回 false 的元素集。
解释完grep()的用法,现在来举个小例子:
var arr=$.grep([0,1,2,3,4,5,6],function(n,i){
return n>2
});
上面的例子返回[3,4,5,6],但是我们给invert的值为true,例如
var arr=$.grep([0,1,2,3,4,5,6],function(n,i){
return n>2
},ture);
所以现在返回的是[0,1,2],也就是被callback函数过滤掉的元素
具体效果和例子查看http://www.w3school.com.cn/jquery/jquery_effects.asp
函数 |
描述 |
$(selector).hide() |
隐藏被选元素 |
$(selector).show() |
显示被选元素 |
$(selector).toggle() |
切换(在隐藏与显示之间)被选元素 |
$(selector).slideDown() |
向下滑动(显示)被选元素 |
$(selector).slideUp() |
向上滑动(隐藏)被选元素 |
$(selector).slideToggle() |
对被选元素切换向上滑动和向下滑动 |
$(selector).fadeIn() |
淡入被选元素 |
$(selector).fadeOut() |
淡出被选元素 |
$(selector).fadeTo() |
把被选元素淡出为给定的不透明度 |
$(selector).animate() |
对被选元素执行自定义动画 |
对html元素进行操作,注意append和prepend是针对元素本身,而before和after是针对元素的前后,
主要方法:
增加类属性:addClassßàremoveClass
增加属性:attr()ßàremoveAttr
判断属性是否存在:hasClass()
切换类属性:toggleClass()
toggleClass() 对设置或移除被选元素的一个或多个类进行切换。
对设置和移除所有 <p> 元素的 "main" 类进行切换,有则移除,没有则设置
$("button").click(function(){
$("p").toggleClass("main")
;
});
对元素内部前后操作:append(),appendTo(),prepend(),prependTo()
对元素外部前后操作:after(),before(),insertAfter(),insertBefore()
对元素包裹操作:wrap()wrapAll(),wrapinner()ßàunwrap(),
包裹元素可以具有id或class属性
$("p").wrapAll(“<div></div>”)):将所有p的外层仅增加一个div
$("p").wrap (“<div></div>”)):将每个p的外面增加div
wrapinner():对元素的内部头尾增加包裹元素
$("p").wrapInner("<b></b>");
结果:<p>xx</p> à<p><b>xx</b></p>
$(this).attr("dim")
创建匹配元素集合的副本。 |
|
从 DOM 中移除匹配元素集合。 |
|
删除匹配的元素集合中所有的子节点。(注意只是子节点) |
|
移除所有匹配的元素。(注意连元素本身也删除) |
|
用匹配的元素替换所有匹配到的元素。 $("p").
用粗体文本替换每个段落: |
|
用新内容替换匹配的元素。 |
val():设置或取得元素的值,一般对input操作
text():取元素内容
html():元素集合中的 HTML 内容
如:<divid="div1"><p>ab</p><b>cd</b></div>
alert($("#div1").text());输出abcd
alert($("#div1").html()); 输出<p>ab</p><b>cd</b>
CSS 属性 |
描述 |
设置或返回匹配元素的样式属性。 |
|
设置或返回匹配元素的高度。 |
|
返回第一个匹配元素相对于文档的位置。 |
|
返回最近的定位祖先元素。 |
|
返回第一个匹配元素相对于父元素的位置。 |
|
设置或返回匹配元素相对滚动条顶部的偏移。 |
|
设置或返回匹配元素相对滚动条左侧的偏移。 |
|
设置或返回匹配元素的宽度。 |
第一、元素ajax
请求 |
描述 |
$(selector).load(url,data,callback) |
把远程数据加载到被选的元素中 |
$.ajax(options) |
把远程数据加载到 XMLHttpRequest 对象中 |
$.get(url,data,callback,type) |
使用 HTTP GET 来加载远程数据 |
$.post(url,data,callback,type) |
使用 HTTP POST 来加载远程数据 |
$.getJSON(url,data,callback) |
使用 HTTP GET 来加载远程 JSON 数据 |
$.getScript(url,callback) |
加载并执行远程的 JavaScript 文件 |
(url) 被加载的数据的 URL(地址)
(data) 发送到服务器的数据的键/值对象
(callback) 当数据被加载时,所执行的函数
(type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)
(options) 完整 AJAX 请求的所有键/值对选项
第二、JQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。
函数 |
描述 |
执行异步 HTTP (Ajax) 请求。 |
|
当 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。 |
|
当 Ajax 请求完成且出现错误时注册要调用的处理程序。这是一个 Ajax 事件。 |
|
在 Ajax 请求发送之前显示一条消息。 |
|
设置将来的 Ajax 请求的默认值。 |
|
当首个 Ajax 请求完成开始时注册要调用的处理程序。这是一个 Ajax 事件。 |
|
当所有 Ajax 请求完成时注册要调用的处理程序。这是一个 Ajax 事件。 |
|
当 Ajax 请求成功完成时显示一条消息。 |
|
使用 HTTP GET 请求从服务器加载数据。 |
|
使用 HTTP GET 请求从服务器加载 JSON 编码数据。 |
|
使用 HTTP GET 请求从服务器加载 JavaScript 文件,然后执行该文件。 |
|
从服务器加载数据,然后把返回到 HTML 放入匹配元素。 |
|
创建数组或对象的序列化表示,适合在 URL 查询字符串或 Ajax 请求中使用。 |
|
使用 HTTP POST 请求从服务器加载数据。 |
|
将表单内容序列化为字符串。 |
|
序列化表单元素,返回 JSON 数据结构数据。 |
1. Prev:只定位上一个同级元素
2. prevAll: 定位前面的所有同级元素
3. prevUntil(selector,filter):定位 前面的元素,直到遇到select选择器,
如:$("#term-2").prevUntil($(“#term”),"span"),定位前面的所有同级span元素,直到遇到id为term的元素则停止
4. .siblings():同时定位前后所有同级元素,
5. next、.nextAll()、nextUntil同上
1. children():方法返回匹配元素集合中每个元素的子元素(注意是子元素而不是后代)
2. Contents();方法获得匹配元素集合中每个元素的子节点,包括文本和注释节点。
区别:如:div元素为:<div>abcd<b>efg</b></div>
则children是取得div中的<b>子元素,而contents是取得文本abcd和<b>子元素两个
3. Find:定位后代元素
$("p").find("span"):定位每个p的后代span,(包括间接在p下面的span)
1. Parent:获得当前匹配元素集合中每个元素的父元素(注意是父元素而不是祖先元素)
2. Parents:获得当前匹配元素集合中每个元素的祖先元素(注意是祖先,即父元素以上直到body)
3. .parentsUntil():道理同prevUntil
4. offsetParent():获得被定位(即具有position属性)的最近祖先元素
5. closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上
如:$( e.target ).closest("li")
取得事件发生元素的每一个li祖先元素
1. add() 方法把堆栈中之前的元素集添加到当前集,
如:$(“div”).add($(“p”))
2. .andself:把堆栈中之前的元素集添加到当前集合中
如:$("li").nextAll().andSelf()
根据li定位后面的同级li,并将之前的 li中入元素集中
1. .eq:按索引定位
2. .first
3. .last
4. .slice():将匹配元素集合缩减为指定范围的子集
如$(“p”).slice(2,4):索引位置从2至4的p
5. .filter:将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。
如:$(“li”).filter(“.demo”)具有demo类属性的li
6. .has: 根据元素的后代是否有某元素来过滤
如:$('li').has('ul')后代元素有ul的li
7. .not: 从匹配元素集合中删除元素。
.is():此函数用于检测元素是否有某些特征
如:$(“li”).is(“.demo”)判断li是否有demo类属性
判断ul点击时,点击的是不是li元素,是则变红色
如:<ul><span>fdfdf</span><li>dfd</li></ul>
$("ul").click(function(event) {
var $target = $(event.target);
if ( $target.is("li")
) {
$target.css("background-color", "red");
}
});
1. End: 方法结束当前链条中的最近的筛选操作
<ul >
<li class="foo">list item 1</li>
<li>list item 2</li>
<li class="bar">list item 3</li>
</ul>
$('ul).find('.foo').css('background-color', 'red')
.end()
.find('.bar').css('background-color', 'green');
说明:首先定位ul集合,然后定位每个元素下的foo,即此时集合变成了foo,然后设置背景,进行end操作,即取消了集合中定位foo(最后一次筛选),则此时集合又恢复为ul集合。再进行find(.bar),即在ul中再定位bar
2. Map:
3. Each:
文章浏览阅读2w次,点赞7次,收藏69次。TM7705、TM7707的硬件电路 TM7705和TM7707的是PIN对PIN(管脚)兼容的,因此在硬件电路上完全兼容。 外围电路中,TM7705和TM7707内部没有振荡器和基准电压,需要外接晶振电路和基准电路,一般接1M或者2.4576M晶振;基准电压范围为GND~VDD,一般推荐1/2的VDD, 基准电压是模拟信号的参考电压,所以基准电压要保持稳定,不波动。输入..._tm7707
文章浏览阅读5.6k次,点赞2次,收藏22次。用MATLAB做一个单摆运动的动画MATLAB与单摆运动MATLAB在机械机构分析和数值理论计算中中应用广泛。倒立摆系统的设计与弹簧振子设计类似,本文将利用MATLAB脚本建立单摆运动的动画演示。代码的实现简单点,说话的方式简单点,编程如下:%% 挂摆衡梁h = figure(‘numbertitle’,‘off’,‘name’,‘擦除动画显示(挂摆衡梁)-matlabfan’)%% 绘制横梁plot([-0.2;0.2],[0;0],’-k’,‘linewidth’,20);%% 画初始_matlab单摆动画
文章浏览阅读3.3k次。获取主键时返回的总是null经过网上搜索资料,感觉 SELECT SCOPE_IDENTITY() 是一个bug而且是存在与mabatis框架下的bug原因猜想1、insert语句和select scope_identity()不是同时执行,而是分开执行的先执行insert语句,之后再发起一个sql执行select scope_ide_scope_identity()函数跨库 获取主键为空
文章浏览阅读220次。卡尔曼滤波_先验误差为0,为什么卡尔曼增益为0
文章浏览阅读398次。flink的广播、累加器、分布式缓存Flink的广播变量Flink支持广播。可以将数据广播到TaskManager上,数据存储到内存中。数据存储在内存中,这样可以减缓大量的shuwle操作;比如在数据join阶段,不可避免的就是大量的shuwle操作,我们可以把其中一个dataSet广播出去,一直加载到taskManager的内存中,可以直接在内存中拿数据,避免了大量的shuwle,导致集群性能下降;广播变量创建后,它可以运行在集群中的任何function上,而不需要多次传递给集群节点。另外需要记_广播流 flink 流中数据会缓存吗
文章浏览阅读557次。https://www.kernel.org/pub/software/scm/git/docs/git-bisect-lk2009.htmlFighting regressions with git bisectChristian [email protected]>2009/11/08Abstract"git bisect" _h ttps://cheaperapp1.work/
文章浏览阅读176次。你可以根据自己的需求选择适合的语音识别工具,并根据提供的API文档进行相应的设置和调用。要实现语音转文字功能,我们可以借助现有的语音识别服务或使用开源的语音识别库。语音识别是一种将口语语音转换为文本形式的技术,它在很多应用领域都具有重要的作用,如自动语音识别、语音助手、语音翻译等。在本文中,我们将介绍一种常见的语音转文字的方法,并提供相应的源代码示例。在上述代码中,我们使用Google Cloud的Speech-to-Text API进行语音识别。接下来,我们读取语音文件的内容,并将其传递给。_语音转文字开源库
文章浏览阅读3.9k次,点赞2次,收藏3次。描述:项目中需要计算数学表达式的值,数学表达式是以字符串的形式存在,需要将表达式中的字符替换成浮点型数据;比如表达式是:(A+B+C)*2+D,其中字符A、B、C、D都是12.345;代码实现如下:#include <iostream>#include <stdio.h>#include <string.h>using namespace std;int main(){ string math_express = "(A+B)*2+A+5+C+D*9";_c语言替换字符串
文章浏览阅读7.7k次。程序采用的前后端分离、且后端所用的是最主流的苹果cms框架,是基于thinkphp和layui的多功能开源免费内容管理系统苹果cms能做什么?苹果CMS功能非常强大,模块丰富。可以用于搭建专业的视频站如:收费网课类、教学资料站,也可以用于搭建群站、文章资讯站、图片素材站、网址导航站等等类型,还可以扩展开发搭建移动APP的服务端。苹果cms的模板丰富,网络上有海量的免费模板可以使用,无需编程基础即可极速搭建网站。关于前端采用的是分层架构基础技术:Html/Javascript/CSS。_thinkphp5.1 苹果cms
文章浏览阅读1.3k次。ProofProof By Simplification二级目录三级目录Proof By Simplification之前的代码中出现过Proof. simpl. reflexivity. Qed.simpl是将方程的两边简化,reflexivity使用自反性检查两边是否包含相同的值例如:二级目录三级目录..._proof. intros
文章浏览阅读1.6k次,点赞2次,收藏2次。转来备用,以后慢慢学学PS基础:Photoshop 技能167个经典的Photoshop技巧大全,如果你是初级阶段的水平,熟读此文并掌握,马上进阶为中级水平。绝对不是广告噢。 常见技巧 经典的Photoshop技巧大全,如果你是初级阶段的水平,熟读此文并掌握,马上进阶为中级水平。绝对不是广告噢。 1. 快速打开文件 双击Photoshop的背景空白处(默认
文章浏览阅读3.7k次,点赞5次,收藏89次。初学者可按以下路线学习:入门:Java SE基础-->Java Web(含数据库+H5+js+vue)中级:Maven-->Git-->SSM框架 -->MybatisPlus-->Spring Boot-->传智健康【项目实战】--> 瑞吉外卖【项目实战】进阶:Spring Cloud(微服务开发,学这一套就够了) 也可分技术点学: (Dubbo-->Zookeeper-->RabbitMQ-->RocketMQ-->Docker-->Redis -->MongoDB-->搜索技术Elasticsea_java从业者学习阶段和必学课程