哈喽大家好,本次是jQuery案例练习系列第三期 ⭐本期是jQuery动画——显示与隐藏效果 系列专栏:前端案例练习 笔者还是前端的菜鸟,还请大家多多指教呀~ 欢迎大佬指正,一起学习,...---- 文章目录 前言 控制显示与隐藏的方法 实现效果 HTML、CSS部分 jQuery部分 总结 ---- 前言 在网页开发中,适当地使用动画可以使页面更加美观,进而增强用户体验。...easing:切换效果(过渡效果),默认过渡效果为swing,还可以使用linear效果。 fn:在动画完成时执行的函数。...部分 思路: 1、引入jQuery,如图 2、添加ready函数,ready是jQuery的文档就绪函数,它用于防止文档在完全加载之前允许jQuery代码,如果在文档没有完全加载之前就运行函数... $(document).ready(function(){ console.log(1111) $("button").eq(0).click(function
jquery animate 动画详解(超简单易懂) animate()方法是jquery里的动画效果,通过修改css相关属性,在规定时间内,值是不断变化的从而形成了一种动画的效果。...$(document).ready(function(){ $("#btn1").click(function(){ $("#box").animate({height:"300px"}); }...多属性 $(document).ready(function(){ $("#btn1").click(function(){ $("#box").animate({height:"300px",width...:"300px"});//多属性写在一起 同时触发 }); 动画队列 $(document).ready(function(){ $("#btn1").click(function(){ $..."});//相对值书写 在原有基础上增加100px }); }); 回调函数 $(document).ready(function(){ $("#btn1").click(function(){
input放在a标签里面单击不能获取input的光标(IE环境下) 双击才可以获得焦点,目前有的解决方案: 不要给a标签添加href属性; 不要在外面套上a标签。...选择器的扩展 //jQuery contains 选择器,对Contains查找的内容不区分大小写 jQuery.expr[':'].Contains = function (a, i, m) {...// A fallback to window.onload, that will always work window.addEventListener( "load", jQuery.ready...document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false ); jQuery.ready...", DOMContentLoaded ); jQuery.ready(); } }; }
之前用过一些jQuery的动画和特效,但是用到的部分也不超过10%的样子,感觉好浪费啊——当然浪费的不是jQuery,而是Web资源。...一、jQuery中的事件 1、加载DOM: 执行时机:在常规的JavaScript中,通常使用window.onload方法,而在jQuery中,使用的是$(document).ready()方法...jQuery的$(document).ready()方法就可以很好的解决这种问题——每次调用$(document).ready()方法都会在现有的行为上追加新的行为,这些行为函数会根据注册的顺序依次执行...//下面的jQuery代码就可以顺序执行上面的两个函数,并且如果还有其他的绑onload函数也可以这样绑定 $(document).ready(function(){ func1(); }); $(...第三个参数则是用来绑定的处理函数。举个实际的例子,下面网页中,单击“标题”链接将显示内容。
window.onload = function () { //...... } //动态注册事件,窗体加载完成后执行,和body onload效果差不多 7、window.控件Id(不建议使用),推荐...document.getElementById("控件Id")来获取标签对象 8、事件:onclick(单击)、ondblclick(双击)、onkeydown(按键按下)、onkeypress(按下按键...中使用srcElement; 在FireFox里使用target 使用Dom获取和更改网页标签元素内文本,在IE中使用innerText; 在FireFox里使用textContent 动态为网页或元素绑定事件...,在IE中绑定事件的方法是attachEvent; 在FireFox中绑定事件的方法是addEventListener jQuery之类的框架进行了封装,解决了不同浏览器上Dom的不同 14、jQuery...的ready和Dom的onload的区别:window.onload只能注册一次,是在所有的Dom元素创建完毕、图片、CSS都加载完毕后才被触发;而jQuery的ready则是在Dom元素创建完毕后被触发
jQuery对这个事件对象进行了必要的扩展,从而在不论什么浏览器中都能够使用这个属性。通过.target,能够确定DOM中首先接收到事件的元素(即实际被单击的元素)。...并且,我们知道this引用的是处理事件的DOM元素,所以能够编写下列代码: $(document).ready(function(){ $(‘#switcher’).click(function(event...与.target类似,这种方法也是一种纯JavaScript特性,但在跨浏览器的环境中则无法安全地使用 。 只是,仅仅要我们通过jQuery来注冊全部的事件处理程序。就能够放心地使用这种方法。 以下。...并在button的单击处理程序中加入一些代码: $(document).ready(function(){ $(‘#switcher .button’).click(funtion(event){... //…… event.stopPropagation(); }) }) 同曾经一样,须要为用作单击处理程序的函数加入一个參数。
普通的dom对象一般可以通过$()转换成jquery对象。 如:$(document.getElementById("msg"))则为jquery对象,可以使用jquery的方法。...$("#msg").click(fn); //为id为msg的元素单击事件添加函数 同样blur,focus,select,submit事件都可以有着两种调用方法 5、集合处理功能 对于jquery...$(document).ready(function(){alert("Load Success")}) //页面加载完毕提示“Load Success”,相当于onload事件。..." 12、解决自定义方法或其他类库与jQuery的冲突 很多时候我们自己定义了$(id)方法来获取一个元素,或者其他的一些js类库如prototype也都定义了$方法,如果同时把这些内容放在一起就会引...如:$(document.getElementById("msg")) 返回的就是jQuery对象,可以使用jQuery的方法。
two"); }); }); - 移除css样式:removeClass(),参数可选,不选则删除全部 $(document).ready(function...元素的显示与隐藏 使用hide()方法 使用hide()方法可以隐藏被选元素 $(document).ready(function () { $(".ex .hide...()方法 使用show()方法可以显示被隐藏元素 $(document).ready(function () { $(".btn1").click(function ()...- fast - normal - 或者直接写数字,单位是毫秒,2000 callback是回调函数 使用fadeIn()方法 jQuery通过控制不透明度的变化来实现淡入效果,并在动画完成之后出发一个回调函数...css属性 - speed可选,规定时长,可选slow,fast或数字 - callback可选,回调函数 $(document).ready(function () {
一、jQuery中的事件 1、加载DOM: 执行时机:在常规的JavaScript中,通常使用window.onload方法,而在jQuery中,使用的是$(document).ready()方法,...(){ 2 //code... 3 } window.onload()不能多次调用,jQuery的$(document).ready()方法就可以很好的解决这种问题——每次调用$(document)...//code... 6 } 7 8 //下面的jQuery代码就可以顺序执行上面的两个函数,并且如果还有其他的绑onload函数也可以这样绑定 9 $(document).ready(function...第三个参数则是用来绑定的处理函数。举个实际的例子,下面网页中,单击“标题”链接将显示内容。 ...jQuery是目前使用最广泛的javascript函数库。
jquery一.筛选 筛选与之前的选择器雷同,筛选提供的都是函数. 1..../js/jquery-1.8.3.js"> $(document).ready(function(){ $("#e01".../js/jquery-1.8.3.js"> $(document).ready(function(){ var i=1;...页面载入 ready(fn):页面载入,在一个页面中可以使用多次 常用格式1: $(document).ready(function(){ .... }) 常用格式2: 格式1的简化版 $(function...(){ ...... }); 常用格式3:完整版 jQuery(document).ready(function(){ ...... }); 3.
jQuery能够实现很多的页面效果,下面的五个技巧是我们经常要用到的,所以简单的给大家翻译一下,供大家一起学习吧。...下面使用jQuery给大家展示一下如何使用它。...//check that the DOM is ready $(document).ready(function() { //select all anchor tags that have http...能够更简单、容易的处理右键的单击事件。...当你想成为熟练掌握jQuery网页开发者,一定会发现更多的jQuery的使用技巧。最后一句,用我的话说:“革命尚未成功,同志仍需努力。”
事件冒泡 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行。...; }); 因此一个单击操作会触发alert函数的执行。 ?...,但是根据官网解释,自从jquery1.7版本以后bind()函数推荐用on()来代替。...你可以在document ready之前就可以绑定那些需要的事件 缺点 从1.7开始已经不被推荐了,所以你也要开始逐步淘汰它了。...Chaining没有被正确的支持 当使用event.stopPropagation()是没用的,因为都要到达document 因为所有的selector/event都被绑定到document, 所以当我们使用
click me $(document).ready(function...html():设置或获取所选元素的内容(包括HTML标记) val():设置或获取表单字段的值 -- 获取属性: attr():设置或获取属性值 ps1:以上函数不传入参数时是获取;传入参数时是设置... click me // $(document).ready...释放$,使用jQuery替代: $.noConflict(); jQuery(document).ready(function(){ //some code }) $.noConflict()返回的引用...如: var jq=$.noConflict(); jq(document).ready(function(){ //some code }) 当然,关于jQuery还有许多插件,比如验证表单
由于用 jQuery 实现 ajax 比较简单,因此接下来的代码引用jQuery库实现Ajax,另外使用Django作为框架。 其中jQuery可以手动下载放到本地文件夹中,也可以引用下面的语句。...的div将展示Ajax数据 (document).ready(function(){})指页面其他元素加载完成后开始加载Ajax数据,此时,浏览器不会有加载条和转圈的情况出现。...也可以使用document.getElementById(“demo”).innerHTML = ret;来展示数据。 $(document).ready(function(){ $.getJSON('/ajax_server...不过开发者已想出了种种办法来解决这个问题,HTML5之前的方法大多是在用户单击后退按钮访问历史记录时,通过创建或使用一个隐藏的IFRAME来重现页面上的变更。
1显示隐藏功能 但凡有两个函数完成的功能是相反的,比如一个显示一个隐藏,那么肯定会有第三个函数的效果是前两个函数的和。也就是说两个单词是反义词,那么肯定会有第三个单词,而且都和toggle有关。....min.js"> // $(document).ready(function(){}) $(function(){...-- 单击li,单击谁就弹出这个li的下标 --> 文字1 文字2 文字3...fadeOut() 淡出 fadeToggle() 一会淡入一会淡出 括号里面可以写动画时间,运动曲线,回调函数三个参数,但这三个参数可以可以不写 fadeTo() 设置透明度,参数一是时间,参数...***事件属性 click() 鼠标单击 ready() DOM加载完成 blur() 元素失去焦点 focus()元素获得焦点 submit()用户提交表单 hover()同时为mouseenter
HTML5+CSS3+JavaScript从入门到精通 作者:王征,李晓波 第二十一章 JavaScript的框架库jQuery 案例 21-01 jQuery的使用 <!...$(document).ready(myFunction);//HTML 页面所有DOM元素加载完成,就可以执行此ready()事件方法 ...jQuery的使用 21-02 jQuery的常用选择器 $(document).ready(function () {
如何禁用右键单击上下文菜单: $(document).bind('contextmenu',function(e){ return false; }); 12....如何使用jQuery来检测右键和左键的鼠标单击两种情况: $("#someelement").bind('mousedown', function(e) { if( (navigator.userAgent.indexOf...left', ($(window).width() - this.width())/2 + $(window).scrollLeft() + 'px'); return this; }; //这样来使用上面的函数...在jQuery中如何使用.siblings()来选择同辈元素 // 不这样做 $('#nav li').click(function(){ $('#nav li').removeClass('active...如何获得鼠标垫光标位置x和y $(document).ready(function() { $(document).mousemove(function(e){ $('#XY').html("X
维护,功能不再新增,最终版本:2.2.4 (2016年5月20日) 3.x:不兼容ie678,只支持最新的浏览器,很多老的jQuery插件不支持这个版本,相对1.x文件较小,提供不包含Ajax/动画API...jQuery的使用 下载jQuery或者使用cdn 引入jQuery的文件 编写代码 <!...通过JQuery入口函数可以拿到DOM元素的宽高 var $width = $img.width() console.log('ready: ', $width) }) image.png...第一种写法 $(document).ready(function () { alert('hello tzk') }); // 第二种写法 jQuery(document).ready(function...JQuery 代码之前编写 释放之后就不能在使用 $, 改为使用 jQuery 自定义访问符号 Javascript var nj = jQuery.noConflict() nj(function (
实现动画很麻烦 初体验 【02-让div显示与设置内容.html】 $(document).ready(function () { $("#btn1").click(function () {...(animate.js、common.js) 使用步骤 引包(引入js文件) 入口函数 $(document).ready...) //jQuery目前正在更新的版本 3.x版本:不兼容IE678,更加的精简(在国内不流行,因为国内使用jQuery的主要目的就是兼容IE678),3.x版本只是在原来的基础上增加了一些新的特性。...两种写法: //第一种写法 $(document).ready(function() { }); //第二种写法 $(function() { }); jQuery入口函数与js入口函数的对比 1....DOM对象可以和jQuery对象相互转化 DOM对象转换成jQuery对象:【联想记忆:花钱】 var $obj = $(domObj); // $(document).ready(function()
二、使用方法 在需要使用JQuery的页面中引入JQuery的js文件即可。...普通的dom对象一般可以通过$()转换成jquery对象。 如:$(document.getElementById("msg"))则为jquery对象,可以使用jquery的方法。...$("#msg").click(fn); //为id为msg的元素单击事件添加函数 同样blur,focus,select,submit事件都可以有着两种调用方法 5、集合处理功能...$(document).ready(function(){alert("Load Success")}) //页面加载完毕提示“Load Success”,相当于onload事件。..." 12、解决自定义方法或其他类库与jQuery的冲突 很多时候我们自己定义了$(id)方法来获取一个元素,或者其他的一些js类库如prototype也都定义了$方法,如果同时把这些内容放在一起就会引起变量方法定义冲突
领取专属 10元无门槛券
手把手带您无忧上云