手机+体验
展开

通知:     

一头扎进Jquery视频教程

1
回复
389
查看
[复制链接]

微信扫一扫 分享朋友圈

签到天数: 19 天

[LV.4]偶尔看看III

已抛锚 成长值: 5300

93

主题

108

帖子

713

积分

超级版主

Rank: 8Rank: 8

积分
713
发表于 2018-8-30 16:32:01 | 显示全部楼层 |阅读模式
下载 (4).jpg
  JQuery操作DOM
  DOM 在 JavaScript 课程中我们详细的探讨过,它是一种文档对象模型。方便开发者对 HTML 结构元素内容进行展示和修改。在 JavaScript 中,DOM 不但内容庞大繁杂,而且我们开发的过程中需要考虑更多的兼容性、扩展性。在 jQuery 中,已经将最常用的 DOM 操 作方法进行了有效封装,并且不需要考虑浏览器的兼容性,对于之前的DOM是一颗岑天大树枝繁叶茂让我们遥不可及,那么jQuery的DOM树,就是一个简笔画的小树,所有枝叶都唾手可得。
  JQuery遍历
  祖先:
  parent()
  parents()
  parentsUntil()
  后代 :
  children()
  find()
  兄弟:
  siblings()
  next()
  nextAll()
  nextUntil()
  prev()
  prevAll()
  prevUntil()
  过滤:
  eq()
  DOM元素及属性操作
  1.设置(获取)元素内容。
  html()                          可以获取该元素的标签和内容
  html(text)
  text(text)                     只可以获取该元素的文本内容;
  text()
  val(text)
  val()
  2.操作元素属性。(获取,设置、删除)
  .attr( )
  .attr( )的参数有几种设置方法。
  1)$('div') .attr('type')获取该属性属性值
  2)$('div') .attr('type','value')设置属性值
  3)$('div') .attr({
  'data':'valuer1',
  'data2':'value2'
  })
  设置一组属性值;
  4)$('div').removeAttr('title')
  操作元素样式
  css()
  注:css()方法不仅能获取行内样式,也能获取非行内样式
  css()                                      
  方法的参数有几种设置方法,
  css(name)                              
  获取某个元素的行内样式
  css([name1,name2,name3])   
  获取多个样式,返回值是一个数组;
  css('name',value)                    
  设置行内样式
  css({
  name1:value1,
  name2:value2
  })                                       
  设置多个行内样式
  addClass( )方法
  addClass(class) 给元素添加一个class
  addClass( class1 class2 class3 )给元素添加多个class
  removeClass(class)  给元素删除一个class
  removeClass(class1 class2 class3)给元素删除多个class
  toggleClass(class) 如果元素没有当前class那么添加,如果有那么删除
  css方法
  width()
  height()
  innerWidth() 包含内边距(padding)
  outerWidth()包含内边距和边框(padding border)
  offset()  获取某个元素相对于浏览器窗口(可视区域的距离)
  position()获取某个元素相对于父元素的偏移距离
  scrollTop()获取垂直滚动条的值;
  scrollTop(value)设置垂直滚动条的值;
  scrollLeft()获取水平滚动条的值;
  scrollLeft(value)设置水平滚动条的值;
  JQuery节点操作
  1.创建节点。
  var box=$('<div id="box">节点</div>'); //创建一个节点 $('body').append(box); //将节点插入到<body>元素内部
  2.插入节点
  append(content) 向指定元素内部后面插入节点 content
  appendTo(content) 将指定元素移入到指定元素 content 内部后面
  prepend(content) 向指定元素 content 内部的前面插入节点
  prependTo(content) 将指定元素移入到指定元素 content 内部前面
  after(content) 向指定元素的外部后面插入节点 content
  before(content) 向指定元素的外部前面插入节点 content
  3.包裹节点
  .warp()
  $('div').wrap('<strong></strong>'); //在 div 外层包裹一层 strong
  $('div').wrap('<strong>123</strong>'); //包裹的元素可以带内容
  $('div').wrap('<strong><em></em></strong>'); //包裹多个元素
  $('div').wrap($('strong').get(0)); //也可以包裹一个原生 DOM 不推荐使用,会崩溃
  $('div').wrap(document.createElement('strong')); //临时的原生 DOM
  $('div').unwrap(); //移除一层包裹内容,多个需移除多次
  $('div').wrapInner('<strong></strong>'); //包裹子元素内容
  4.节点操作
  $('body').append($('div').clone(true)); //复制一个节点添加到 HTML 中
  注:clone(true)参数可以为空,表示只复制元素和内容,不复制事件行为。而加上 true 参数的话,这个元素附带的事件处理行为也复制出来。
  $('div').remove(); //直接删除 div 元素
  remove()方法可以接收一个参数,过滤需要删除的元素。
  $('div').replaceWith('<span>节点</span>'); //将 div 替换成 span 元素
  JQuery事件
  各种类型事件
  click
  dblclick
  mouseenter
  mouseleave
  mouseover
  mouseout
  hover
  scroll
  ....
  事件绑定和解绑
  bind
  unbind
  delegate
  on
  off
  事件对象
  JavaScript事件对象是浏览器默认传入的,但是对于浏览器的兼容问题,我们需要对事件对象进行兼容。很烦!但是jQuery已经帮我们解决了所有兼容性的烦恼,并且给我们添加了很多有用的方法。
  event.target                 获取绑定事件的DOM元素
  event.type                    获取事件的类型
  event.data                    获取事件中传递的数据
  event.pagX/pagY                         获取根据页面原点的X,Y值
  event.screenX/screenY                         获取根据显示器窗口的X,Y值
  event.offsetX/offsetY                  获取根据父元素X,Y值     
  event.which                 获取当前鼠标点击的键1,2,3
  event.altKey/shiftKey/ctrlKey/    返回 true、false
  事件冒泡(默认事件)
  preventDefault()    //阻止默认行为
  stopPropagation()  //取消事件冒泡
  return false  阻止默认事件和事件冒泡
  AJAX
  AJAX简介
  AJAX是什么
  Ajax 全称为:"Asynchronous JavaScript and XML"(异步 JavaScript 和 XML), 它并不是 JavaScript 的一种单一技术,而是利用了一系列交互式网页应用相关的技术所形 成的结合体。使用 Ajax,我们可以无刷新状态更新页面,并且实现异步提交,提升了用户体验。
  Ajax 概述
  Ajax 这个概念是由 JesseJamesGarrett 在 2005 年发明的。它本身不是单一技术,是一串 技术的集合,主要有:
  1.JavaScript,通过用户或其他与浏览器相关事件捕获交互行为
  2.XMLHttpRequest 对象,通过这个对象可以在不中断其它浏览器任务的情况下向服务 器发送请求;
  3.服务器上的文件,以 XML、HTML 或 JSON 格式保存文本数据;
  4.其它 JavaScript,解释来自服务器的数据(比如 PHP 从 MySQL 获取的数据)并将其 呈现到页面上。
  由于 Ajax 包含众多特性,优势与不足也非常明显。优势主要以下几点:
  1.不需要插件支持(一般浏览器且默认开启 JavaScript 即可);
  2.用户体验极佳(不刷新页面即可获取可更新的数据);
  3.提升 Web 程序的性能(在传递数据方面做到按需放松,不必整体提交);
  4.减轻服务器和带宽的负担(将服务器的一些操作转移到客户端);
  而 Ajax 的不足由以下几点:
  1.不同版本的浏览器度 XMLHttpRequest 对象支持度不足(比如 IE5 之前);
  2.前进、后退的功能被破坏(因为 Ajax 永远在当前页,不会几率前后页面);
  3.搜索引擎的支持度不够(因为搜索引擎爬虫还不能理解 JS 引起变化数据的内容);
  4.开发调试工具缺乏(相对于其他语言的工具集来说,JS 或 Ajax 调试开发少的可怜) 。
  异步和同步
  使用 Ajax 最关键的地方,就是实现异步请求、接受响应及执行回调。那么异步与同步 有什么区别呢?我们普通的 Web 程序开发基本都是同步的,意为执行一段程序才能执行下 一段,类似电话中的通话,一个电话接完才能接听下个电话;而异步可以同时执行多条任务, 感觉有多条线路,类似于短信,不会因为看一条短信而停止接受另一条短信。Ajax 也可以 使用同步模式执行,但同步的模式属于阻塞模式,这样会导致多条线路执行时又必须一条一 条执行,会让 Web 页面出现假死状态,所以,一般 Ajax 大部分采用异步模式。
  load 方法
  jquery对Ajax进行了大量封装,对于封装方式,jquery采用了多层封装,其中$.ajax()是最底层封装,上层封装方法有.load()方法, $.get(),$.post()方法;
  jquery对Ajax进行了大量封装,对于封装方式,jquery采用了三层封装,其中$.ajax()是最底层封装,上层封装方法有.load()方法, $.get(),$.post()方法;
  .load()方法是局部方法,.load()方法中共有三个参数,一个是url,链接地址,第二个是发送的数据data,第三个是回调函数callback
  1.参数url, 可以提供筛选功能。
  $().load('data/test.html ')
  $().load('data/text.html .url')>>>筛选功能
  2.data参数传入决定,是否以post方式提交参数是一个对象形式传入。
  $().load('data/test.html',{
  url:'zmkm'
  })
  3.回调函数function(response,status,xhr){}
  $().load('data/test.html',{
  url:'zmkm'
  },function(response,status,xhr){})
  第一个参数为返回结果,和页面里内容一样 。
  第二个参数是状态,success,或者error
  第三个参数是XHMJavaScript,他是一个对象
  get和post
  $.get()和$.post()有四个参数,其中第一个地址参数为必填参数,第二个参数data,和第三个callback函数和.load()方法一样, 第四个参数为type
  $.get('data/test.html',{
  url:'zmkm'
  },'html')
  由于php返回的值默认为纯文本格式,所以数据格式html和test格式可以不写。如果写入数据格式,那么默认会强制转换为该格式。如果传入错误格式,那么不会有返回值。
  注:一般情况下,type都是只能判断,并不需要人为设置,除非需要打印整个文件的代码,才需要强制类型转换。
  $.get()和$.post()的差别.get()是以get方式提交,$.post()方式是以post方式提交。
  1.get方式提交数据是吧数据放在浏览器网址上面的,post是通过http消息,实体提交的。
  2.get提交方式有大小限制,限制在2KB,而post方式不收大小限制。
  3.get方式因为在浏览器中会被历史记录缓存,所以这种提交数据方式并不安全,post方式没有这种问题。
  4,在服务器端(php语言), get方式通过$GET[]方式获取,post通过$POST[]方式获取。
  ajax使用方式
  $.ajax({ url:'', 链接路径
  type:'post/get' 用什么方式提交
  data:{键:值}, 传入数据用键值对方式传入
  success:function(){ 成功是传入的参数 } ,
  error:function(){}
  })
  jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)  
  jsonpCallback: "自定义函数名",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
  ajaxSetup()ajax初始化对于ajax可以做一个预先设置,减少重复。
  $.ajaxSetup({
  url:'',
  type:'post',
  data:{user:'ddd'}
  })
  $.ajax({
  success:function(data){
  alert(data)
  }
  })
  动画
  非自定动画
  1.显示、隐藏:
  show( ) 、hide( )、toggle()
  show()、hide()、toggle()方法有两种用法,一种是不传参数,代表直接显示隐藏。
  另一种是向方法中传递一个参数,这个参数为number类型,代表动画的执行时间。会有显示隐藏的动画效果。
  示例:
  show(100)、hide(100)、toggle(100)
  不仅如此,jQuery还为动画方法提供了三种字符串形式的参数,分别是:fast、slow、和空字符串''
  show('fast')、hide('slow')、toggle('')
  三种参数的执行时间,分别为 ,'fast' :200毫秒   ''(默认值):400毫秒   'slow':600毫秒
  2.滑动:
  slideUp():向上滑动(隐藏)
  slideDown():向下滑动(显示)
  slideToggle():滑动(自动)
  3.淡入淡出:
  fadeOut():淡出(隐藏)
  fadeIn():淡入(显示)
  fadeToggle():显示隐藏()自动
  该方法是将元素的透明度从1变成零之后将元素的display属性设置为none;
  但是如果我们想要将透明度设置到一个固定值,这些方法并不能实现,jQuery为我们提供了一个方法fadeTo(),该方法接受两个参数。
  第一个参数是动画执行的时间,第二个参数是期望达到的透明度。
  自定义动画
  animate()方法
  animate()方法有三个参数。分别是动画目标(target),动画执行时间,回调函数。只有第一个参数是必填参数。
  animate()方法的使用:
  1.animate({
  'width':'200px',
  'height':'200px'
  })
  2动画的执行顺序:
  如果想要动画按照顺序执行(执行完第一个动画之后,再执行下一个动画)有三种方法:
  1)借助动画的回调函数。
  $('input').click(function(){
  $('div').animate({
  'width':'400px',
  'height':'400px',
  },function(){
  $('div').animate({
  'width':'200px',
  'height':'200px'
  })
  })
  })
  2)将动画效果分开写。
  $('input').click(function(){
  $('div').animate({
  'width':'400px',
  'height':'400px',
  })
  $('div').animate({
  'width':'200px',
  'height':'200px'
  })
  })
  3)连缀
  $('input').click(function(){
  $('div').animate({
  'width':'400px',
  'height':'400px',
  }).animate({
  'width':'200px',
  'height':'200px'
  })
  })
  这几种方法在什么情况下使用那?
  在操作同一元素的时候,推荐使用连缀。在操作不同元素的时候,推荐使用回调函数。
  连缀:jquery的动画方法,每次调用都会返回当前选择的元素,从而可以让jQuery可以实现连缀。
  动画执行顺序
  当我想要执行一个其他方法的时候,比如给当前元素加一个背景颜色。
  $('input').click(function(){
  $('div').animate({
  'width':'400px',
  'height':'400px',
  }).animate({
  'width':'200px',
  'height':'200px'
  }).css('background','yellow')
  })
  问题出现了:当我按照连缀写法,并没有出现我想要的效果所有方法都按照顺序执行,而是将css方法提前执行了。
  问题分析:根据我们以往写运动框架的经验,知道每个动画都是有定时器的,发生这个问题原因就在于此,定时器是异步的,在运行动画的时候我们后面的方法会继续执行,也就出现了上面的问题。
  解决:
  1)可以用回调函数解决:
  $('input').click(function(){
  $('div').animate({
  'width':'400px',
  'height':'400px',
  }).animate({
  'width':'200px',
  'height':'200px'
  },function(){
  $(this).css('background','yellow')
  })
  })
  2)jquery给我们提供了一个类似于回调函数的方法queue():
  $('input').click(function(){
  $('div').animate({
  'width':'400px',
  'height':'400px',
  }).animate({
  'width':'200px',
  'height':'200px'
  }).queue(function(){
  $(this).css('background','yellow')
  })
  })
  queue()方法的问题:
  当我想要在这个列队函数中再加一个动画的时候,发现在queue()方法后的函数无法执行。
  $('input').click(function(){
  $('div').animate({
  'width':'400px',
  'height':'400px',
  }).animate({
  'width':'200px',
  'height':'200px'
  }).queue(function(next){
  $(this).css('background','yellow');
  next();
  }).hide('400')
  })
  原理:连缀的原理是因为每个jquery动画方法都会提供一个返回值,这个返回值就是所选择的元素,queue()方法并不会提供一个返回值。为了让连缀继续,我们这时候应该让queue()方法有一个返回值。jquery为queue提供了一个参数next,我们只需要在queue()方法中传入这个参数并调用,那么queue()方法就有了一个返回值,连缀就可以继续了。
  动画及相关方法
  1.stop()方法
  这个方法是停止动画的方法,他有两个参数,都是布尔值。第一个参数代表是否清除动画队列,第二个参数代表是否直接运行到最后结果。
  2.delay()方法
  延时执行,该方法有一个参数,是延时执行的毫秒数。
  3.动画的递归
  $('div').slideToggle(2000,recursion)
  function recursion(){
  $(this).slideToggle(2000,recursion)
  }
  自我调用
  高级写法:
  $('div').slideToggle(2000,function(){
  $(this).slideToggle(2000,arguments.callee)
  })
  arguments.callee:常用在匿名函数中, 代表当前的函数。
  4.动画的全局方法
  能影响程序性能$.fx.interval 属性可以调整动画每秒的运行帧数,默认为 13 毫秒。数字越小越流畅,但可。
  $.fx.interval=1000;动画的帧数设置。
  $.fx.off=true;动画关闭。
  //轮播图      jquery改版
网盘密码:jfpk 
下载次数:2  文件大小:4 GB 
下载权限: 不限 以上或 VIP会员   [购买VIP]   [充值E币]  [免费赚E币]
安全检测,请放心下载

签到来了-爱生活,爱学习,跟随玩技e族一起成长~
回复 论坛版权

使用道具 举报

签到天数: 201 天

[LV.7]常住居民III

 成长值: 10876

562

主题

709

帖子

4813

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
4813
QQ
发表于 2019-7-1 17:27:27 来自手机 | 显示全部楼层
心疼
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver-手机版-小黑屋- 玩技e族 会员

本站不提供任何视听上传服务,所有内容均来自视频分享站点所提供的公开引用资源。 Powered by Discuz! X3.2 Licensed© 2001-2013 Comsenz Inc.  威海网络科技有限公司 版权所有
中国互联网举报中心 北京12318文化市场举报热线 网络110报警服务 皖ICP备17010519号-4 | 业务许可证:B1.B2-20140071|网站维护大糖网