jquery事件 | 易学教程

jQuery的动画效果

阅读更多关于 jQuery的动画效果

jQuery里面有一些简单的动画效果，下面就总结和实践一下。一、基本效果 jQuery里的基本动画效果有显示、隐藏和显示隐藏切换 1、show([s,[e],[fn]]) 显示 2、hide([s,[e],[fn]]) 隐藏 3、toggle([s],[e],[fn]) 显示隐藏切换下面是用法练习： < ! DOCTYPE html > < html > < head lang = "en" > < meta charset = "UTF-8" > < title > < / title > < / head > < body > < button class = "btn" > 点击 < / button > < div class = "block" style = " width: 200px; height: 200px; background-color: red" > < / div > < script src = "jquery/jquery.js" > < / script > < script > $ ( function ( ) { var count = 0 ; $ ( ".btn" ) . click ( function ( ) { count ++ ; if ( count % 2 == 0 ) { $ ( ".block" ) . show (

jQuery Ajax总结

阅读更多关于 jQuery Ajax总结

jQuery对Ajax的操作进行了封装。jQuery中$.ajax()属于最底层的方法，这个放在后面说，首先看看封装了$.ajax()的方法。 load()方法 load()可以远程载入HTML并插入到DOM中。结构为： load(url [,data] [,callback]) url (String):服务端资源的url。 data (Obejct):发送到服务器的key/value数据 callback (Function):请求完成时(无论成功或失败)的回调函数，在响应数据已经加载到包装集元素之后被调用。传入这个函数的参数是响应文本、状态码、以及xhr实例。加载HTML文档首先构造一个要被load()方法加载的新闻评论页面，comment.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最新评论</title> </head> <body> <div class="comment"> <p> <a href="#" class="username">张三</a> <span class="location">[北京市网友]</span> </p> <p class="contentTxt">一楼给度娘</p> </div> <div class="comment">

jQuery的prop和attr练习切换图片

阅读更多关于 jQuery的prop和attr练习切换图片

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>18-attr和prop的练习</title> <script src="../js/jquery-1.12.4.js"></script> <script> $(function () { //1.给我们的按钮天界点击事件 var btn=document.getElementsByTagName("button")[0]; btn.onclick=function () { //2.获取输入框输入的内容 var input=document.getElementsByTagName("input")[0]; var text=input.value; //3.修改img的src属性节点的值 // $("img").attr("src",text); $("img").prop("src",text); } }) </script></head><body><input type="text"><button>切换图片</button><br><img src="https://www.baidu.com/img/bd_logo1.png" alt=""></body></html> 来源： https://www.cnblogs.com

jQuery笔记之事件绑定

阅读更多关于 jQuery笔记之事件绑定

.on()，off()，.one()，.trigger() .hover() jQuery实例方法-动画 .show()，.hide()，.toggle() 参数：null或(duration,easing,callblack) .fadeIn()，.fadeOut()，.fadeToggle()，.fadeTo() 参数：null或(duration,[opacity],easing,callblack) .slideDom()，.slideUp()，.slideToggle() 参数: null或(duration,easing,callblack) .animate() 这是一个大佬等级的动画！参数：(target duration easing callblack) 配合一下方法使用 .stop()，finish() .delay() jQuery.fx.off = true 动画开关接口 ------------------------------------------------------------- on() 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width,

12.2.4 jQuery动画

阅读更多关于 12.2.4 jQuery动画

基本效果 show([s,[e],[fn]]) ：显示隐藏的匹配元素。 speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"。 fn:在动画完成时执行的函数，每个元素执行一次。 hide([s,[e],[fn]]) ：隐藏显示的元素。 speed:三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)。 easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"。 fn:在动画完成时执行的函数，每个元素执行一次。 toggle([s],[e],[fn]) ：用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件，如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。 speed: 隐藏/显示效果的速度。默认是 “0"毫秒。可能的值：slow，normal，fast。” easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"。 fn:在动画完成时执行的函数，每个元素执行一次。滑动效果 slideDown([s],[e]

jQuery – 8.事件和事件参数

阅读更多关于 jQuery – 8.事件和事件参数

事件 (*)JQuery中的事件绑定：$(“#btn”).bind(“click”,function(){})，每次都这么调用太麻烦，所以jQuery可以用$(“#btn”).click(function(){})来进行简化。unbind <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="Jqeury/jquery-1.10.2.js"></script> <script type="text/javascript"> $(function () { $("input[value='bind']").click(function() { $("#btn").bind( { "click": function() { alert("click"); }, "mouseover": function() { alert("mouseover"); }, "mouseout": function() { alert("mouseout"); } } ); }); $("input[value='unbind']"

jquery学习

阅读更多关于 jquery学习

title: jquery学习 date: 2019-10-30 原本在个人博客上写了一些博文，现转移到CSDN上 jquery学习最近手头上在做关于创建要素的一些工作，前台部分涉及多个div的输入区域，每个区域又包含多个input。类似这种其中涉及到js的各种操作，需要利用jquery来实现多种效果，记录如下：获取网页要素在js操作中，需要获取网页中某个div的value，对value中的某些属性进行一些操作。本例中，我所用的是jquery绑定按钮的id，获取当前的源div的value，并通过源div取数组来获取自己想要的div要素。 $(document).on('click','#addmodel',function ($event) { var e = $event.originalEvent.path[4];//获取当前div的源div，取得modelarr的div的class值 console.log(e.className); } 其中关键就是加上$event获取event值，来取得需要的要素value 使新增的button有效在点击add之后，会新增一个条目，条目中有button，但是点击这个新增的button出现了无法触发click事件的情况。原代码： $("#add").click(function () {} 利用这种方式

jQuery-事件

阅读更多关于 jQuery-事件

一·、AJAX 用jQuery的相关对象来处理AJAX，不但不需要考虑浏览器问题，代码也能大大简化。 ajax jQuery在全局对象jQuery（也就是$）绑定了ajax()函数，可以处理AJAX请求。ajax(url, settings)函数需要接收一个URL和一个可选的settings对象，常用的选项如下： async：是否异步执行AJAX请求，默认为true，千万不要指定为false； method：发送的Method，缺省为'GET'，可指定为'POST'、'PUT'等； contentType：发送POST请求的格式，默认值为'application/x-www-form-urlencoded; charset=UTF-8'，也可以指定为text/plain、application/json； data：发送的数据，可以是字符串、数组或object。如果是GET请求，data将被转换成query附加到URL上，如果是POST请求，根据contentType把data序列化成合适的格式； headers：发送的额外的HTTP头，必须是一个object； dataType：接收的数据格式，可以指定为'html'、'xml'、'json'、'text'等，缺省情况下根据响应的Content-Type猜测。下面的例子发送一个GET请求，并返回一个JSON格式的数据： var

jQuery知识点总结

阅读更多关于 jQuery知识点总结

一、元素的增删改查 1、增加 a 、 append() 和 appendTo() 区别 append()：后边的加到前边的里边（后置插入） appendTo()：前边的加到后边的里边 b 、 prepend() 和 prependTo() 区别后边的加到前边的里边（前置插入） c、after() 和 before() 区别后边的插入到前边的之后后边的插入到前边的之前 2、删除 a 、 remove 、empty 和 detach 方法的区别 Remove：移除 Empty：把元素内容清空 Detach：删除后还保留原有的事件 3、改 a、replaceWith() 后边的替换前边的例： <div class="container"> <div class="inner first">Hello</div> <div class="inner second">And</div> <div class="inner third">Goodbye</div> </div> $(‘.third').replaceWith($('.first')); 执行完的结果是？And hellow b 、 replaceAll() 方法前边的替换后边的 4、以下选择器各列举五个基本选择器 Id Class * 群组选择器直接名字层次选择器 form>input

初学JQuery相关知识点

阅读更多关于初学JQuery相关知识点

【简单的JQuery】注册事件的函数。 $(document).ready(function(){}) 【JQuery提供的函数】 $.map(array,fn) 对数组array中每个元素调用fn函数逐个进行处理，fn函数将处理返回，最后得到一个新的数组。 var arr = [3,5,9]; var arr2 = $.map(arr,function(item){return item*2}); $.map不能处理Dictionary风格的数组。 $.each(array,fn) 对数组array每个元素调用fn函数进行处理，没有返回值。 var arr = {"tom":"汤姆","jerry":"杰瑞","lily":"莉莉"}; $.each(arr,function(key,value){alert(key+"="+value);}); 如果是普通风格的数组，则key的值是序号。还可以省略function的参数，这时候用this可以得到遍历的当前元素： var arr = [3,6,9]; $.each(arr,function(){alert(this);}); 【JQurey选择器】 JQurey选择器用于查找满足条件的元素，比如可以用$("#控件ID")来根据控件id获得控件的JQuery对象。 $("#div1") $("TagName"

订阅 jquery事件