以下包含
划入、划出、切换
淡入、淡出
自定义动画
动画队列与停止动画
动态创建元素
添加节点的几种方式
清空节点与移除节点
克隆节点：clone（）
获取表单/设置表单元素内容
JQuery中操作属性
尺寸和位置的操作
offset() 和 position()
scrollLeft() 和 scrollTop()
划入、划出、切换 划入：slideDown（参数1，参数2） 参数1：动画执行的时长 参数2：动画执行完成后的回调函数 划出：slideUp（参数1，参数2） 参数1：动画执行的时长 参数2：动画执行完成后的回调函数 切换：slideToggle（参数） 参数：动画执行完成后的回调函数 隐藏状态-->划入 显示状态-->划出 淡入、淡出（相对于页面）：改的是透明度 淡入：fadeIn（参数1，参数2） 参数1：动画执行的时长 参数2：动画执行完成后的回调函数 淡出：fadeOut（参数1，参数2） 参数1：动画执行的时长 参数2：动画执行完成后的回调函数 切换：fadeToggle（参数） 参数：动画执行完成后的回调函数 隐藏状态-->淡入 显示状态-->淡出 淡入到哪里：fadeTo（参数1，参数2） 参数1：时间 参数2：谈入完成时的透明度 自定义动画 animate 参数1：必选的，对象，需要做动画的属性 参数2：速度 参数3：缓动还是匀速 linear 匀速 swing 缓动 参数4：回调函数 无限套娃 eg： $('#div').animate({ left:800, width:200, height:200, opacity:0.5 },2000,'linear',function(){ alert("动画执行了"); }); 动画队列与停止动画 stop（参数1，参数2） 默认 stop（false,false） 参数1：是否清除队列 true/false 参数2：是否跳转到最终效果 true/false eg： $(this).find('ul').stop(true,false).slideUp(150); 动态创建元素 原生js创建节点 1.html（） 1.1.获取内容html（）不给参数 获取到元素的全部内容 1.2.设置内容：html（）方法给参数 会把原来的内容给覆盖 会把标签中的内容给解析出来 $('#div1').html（‘我是设置的内容<a href = "https://www.baidu.com"></a>’） JQuery中创建节点 2.$() 能创建元素，但是创建的元素只存在于内存中，想要显示，就得追加 var $link = $(<a href = "https://www.baidu.com/">我是新闻</a>) $('#div1').append($link) 添加节点的几种方式 1.qppend() 父元素.qppend(子元素) 作为最后一个子元素添加 2.prepend() 父元素.prepend(子元素) 作为第一个子元素添加 3.before 元素A.before(元素B) 把元素B插到元素A前面，作为兄弟元素添加 4.after 元素A.after(元素B) 把元素B插到元素A后面，作为兄弟元素添加 5.appendTo 子元素.appendTo(父元素) 把子元素作为父元素的最后一个子元素添加 清空节点与移除节点 清空节点：empty（） 清空节点之后，只是内容没有，ul还在 移除节点：remove（） 什么都没有了 1.清空ul $('#ul1').html(""); //不推荐使用，有可能会造成内存泄漏，不安全 $('#ul1').empty(); //推荐使用 2.移除某一个元素 $('#li3').remove(); //自杀 3.移除ul，但是只能回去li3这个标签 $('#li3').parent().remove(); //坑爹 克隆节点：clone（） 克隆的只存在与内存中，如果要在页面上显示，就应该追加到页面上 clone()方法参数不管是true还是false都会克隆到后代节的 有true和false节点的区别 参数为true 表示会把事件一起克隆 参数为false 不会把事件一起克隆 不给参数表示默认为 false 修改克隆节点的id $cloneDiv.attr('id','div2'); 获取表单/设置表单元素内容 原生js是通过value属性来获取或者设置的 Jquery 1.val()方法，不给参数就是获取 2.val()方法，给参数就是设置 JQuery中操作属性 attr() removeattr() 1.设置属性 attr(属性名,属性值) 设置多个属性 attr({ key：value； key：value； }) 2.获取属性 attr(属性名) 3.移除属性 removeAttr(属性名) removeAttr("aaa bbb ccc") 在jQuery1.6以后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法 尺寸和位置的操作 1.获取宽高 width(); height(); 2.设置宽高，有参数 width(); height(); 3.获取宽高+padding innerWidth(); innerHeight(); 4.获取宽高+padding+border outerWidth(); outerHeight(); 5.获取宽高+padding+border+margin outerWidth(true); outerHeight(true); 6.页面可视区的宽高 $(window).width(); $(window).height(); offset() 和 position() offset() 元素距离document的位置 position() 获取距离有定位的父元素的位置 scrollLeft() 和 scrollTop() 1.获取元素被卷曲的高度 scrollLeft() 元素内容被卷曲出去的宽度 scrollTop() 元素内容被卷曲出去的高度 2.设置元素被卷曲的高度 scrollLeft(参数值) scrollTop(参数值) 3.获取页面被卷曲的高度 $(window).scrollLeft() 页面被卷曲出去的宽度 $(window).scrollTop() 页面被卷曲出去的高度 4.设置页面被卷曲的高度 $(window).scrollLeft(参数值) $(window).scrollTop(参数值) 可以用来设置回到顶部或者底部 同时注册事件，也不支持动态注册 1.简单事件绑定 2.bind注册事件 3.delegate注册委托事件-原理：时间冒泡 支持同时注册，也支持动态注册 4.Jquery1.7以后，用on统一了事件的注册方式 4.1 on简单注册事件 不支持动态 $('div').on('click',function(){ console.log("我是单击时间"); }); 4.2 on注册事件委托 $('body').on('click','div,span',function(){ console.log("123..."); }) on注册事件的语法： 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件） 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用） 第四个参数：handler，事件处理函数 $(selector).on(events,[selector],[data],handler); off 解绑事件 off()不给参数就是解绑所有的事件 off('click')解绑指定的事件 事件触发 tigger 用代码的方式触发事件 $('#one').on('Haoge','function(){ console.log(""); }') $('#one').on('click','function(){ $('#one').tigger('Haoge'); }') 事件对象 １.注册一个事件，系统就会帮我们生成一个对象记录这个事件出发时候的一些信息 jQuery中用事件参数e来获取 是对原生JS的封装，处理了兼容性 ２.事件对象常用的三个坐标 screenX 屏幕左上角 clientX 页面可视区的左上角（忽视滚动条） pageX 页面的最顶部的左上角（计算滚动条） 3. e.stopPropagation();阻止事件冒泡 e.preventDefault();阻止事件行为 return false;既能阻止事件冒泡，也能阻止事件行为 4.获取键盘按键 e.keyCode 必须是jquery才能点出jquery方法 end() 回到上一个状态 end()是jquery方法，得jQuery对象才能点出来，end()方法返回对象也是jQuery对象 显示迭代 each 便利jQuery对象集合，为每个匹配的元素执行一个函数 eg： $('.lis').each(function(index,element){ $('.li').css('opacity','(index+1)/10'); }); 多库共存 1.查看jQuery的版本 jQuery.fn.jquery jQuery.prototype.jquery $.fn.jquery $.prototype.jquery 2.引入多个jQuery文件，使用的$是后引入的那个，文件覆盖 3.两库共存 $.noConflict(); 把$控制权释放 还可以用jQuery 此时引入两个库 $ 和 jQuery不冲突 var _$ = $.noConflict();有返回值 _$和jQuery的作用相同 4.多库共存 连续释放，然后用值接受 颜色插件· animate动画不会改变背景颜色，如果想改，就得使用插件 jq22.com 省市联动插件使用 1.引入jquery文件 2.引入插件文件 3.调用插件方法 使用插件十分简单，但是不能过分依赖 UI插件 开发jQuery插件 1.给jQuery的原型添加方法 实例方法 2.给jQuery直接添加 静态方法 一般都有返回值