文章目录 10.8. jquery动画 jquery动画 10.8. jquery动画 jquery动画 通过animate方法可以设置元素某属性值上的动画，可以设置一个或多个属性值，动画执行完成后会执行一个函数。 $('#div1').animate({ width:300, height:300 },1000,'swing',function(){ alert('done!'); }); 参数可以写成数字表达式： $('#div1').animate({ width:'+=100', ...

文章目录 10.9. jquery尺寸相关、滚动事件 尺寸相关、滚动事件 10.9. jquery尺寸相关、滚动事件 尺寸相关、滚动事件 1、获取和设置元素的尺寸 width()、height() 获取元素width和height innerWidth()、innerHeight() 包括padding的width和height outerWidth()、outerHeight() 包括padding和border的width和height outerWidth(true)、outerHeight(true...

文章目录 10.12. jquery事件 jquery事件 10.12. jquery事件 jquery事件 事件函数列表： blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发） mouseenter() 鼠标进入（进入子元素不触发） mouseleave() 鼠标离开（离开子元素不触发） hover() 同时为mouseenter和mouseleave事件指定处理函数 ready() DOM加...

文章目录 jquery属性操作 10.10. jquery属性操作 jquery属性操作 1、html() 取出或设置html内容 // 取出html内容 var $htm = $('#div1').html(); // 设置html内容 $('#div1').html('<span>添加文字</span>'); 2、prop() 取出或设置某个属性的值 // 取出图片的地址 var $src = $('#img1').prop('src'); // 设置图片的地址和alt属性 $('...

文章目录 10.11. jquery循环 jquery循环 10.11. jquery循环 jquery循环 对jquery选择的对象集合分别进行操作，需要用到jquery循环操作，此时可以用对象上的each方法： $(function(){ $('.list li').each(function(i){ $(this).html(i); }) }) ...... <ul class="list"> <li></li> &lt...

文章目录 10.13. 事件冒泡 事件冒泡 10.13. 事件冒泡 事件冒泡 什么是事件冒泡 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 事件冒泡的作用 事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把...

文章目录 10.14. jquery事件委托 10.14. jquery事件委托 事件委托 事件委托就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。 一般绑定事件的写法 $(function(){ $ali = $(’#list li’); $ali.click(function() { $(this).css({background:‘red’}); }); }) … 1 2 3 4 5 事件委托的写法 $(fu...

文章目录 10.15. jquery元素节点操作 jquery元素节点操作 10.15. jquery元素节点操作 jquery元素节点操作 创建节点 var $div = $('<div>'); var $div2 = $('<div>这是一个div元素</div>'); 插入节点 1、append()和appendTo()：在现存元素的内部，从后面插入元素 var $span = $('<span>这是一个span元素</span>'); $('#div1')...

文章目录 10.16. 滚轮事件与函数节流 滚轮事件与函数节流 10.16. 滚轮事件与函数节流 滚轮事件与函数节流 jquery.mousewheel插件使用 jquery中没有鼠标滚轮事件，原生js中的鼠标滚轮事件不兼容，可以使用jquery的滚轮事件插件jquery.mousewheel.js。 函数节流 javascript中有些事件的触发频率非常高，比如onresize事件(jq中是resize)，onmousemove事件(jq中是mousemove)以及上面说的鼠标滚轮事件，在短事件内多处触发执行绑定的函数，可以巧...

文章目录 10.17. json json 10.17. json json json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的一种数据格式，目前这种数据格式比较流行，逐渐替换掉了传统的xml数据格式。 javascript自定义对象： var oMan = { name:'tom', age:16, talk:function(s){ alert('我会说'+...

文章目录 10.18. ajax与jsonp ajax与jsonp 10.18. ajax与jsonp ajax与jsonp ajax技术的目的是让javascript发送http请求，与后台通信，获取数据和信息。ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信。ajax通信的过程不会影响后续javascript的执行，从而实现异步。 同步和异步 现实生活中，同步指的是同时做几件事情，异步指的是做完一件事后再做另外一件事，程序中的同步和异步是把现实生活中的概念对调，也就是程序中的异步指的是现实生活中的同步，程序...

文章目录 10.19. 本地存储 本地存储 10.19. 本地存储 本地存储 本地存储分为cookie，以及新增的localStorage和sessionStorage 1、cookie 存储在本地，容量最大4k，在同源的http请求时携带传递，损耗带宽，可设置访问路径，只有此路径及此路径的子路径才能访问此cookie，在设置的过期时间之前有效。 jquery 设置cookie $.cookie('mycookie','123',{expires:7,path:'/'}); jquery 获取cookie $.cookie('...

文章目录 10.20. jqueryUI jqueryUI 10.20. jqueryUI jqueryUI jQuery UI是以 jQuery 为基础的代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序。 jqueryUI 网址 http://jqueryui.com/ 课堂实例 1、设置数值的滑动条 2、自定义滚动条

文章目录 11. 移动端库和框架 11. 移动端库和框架 课程介绍 学习移动端场景下的js事件；制作移动端特效常用的js库；介绍移动端常用开发框架Bootstrap。