Jquery DOM&事件

库和框架的区别

  • 看到的经典回答:
    • 框架帮你挖好坑,你来填!库是给你一把铲子你自己挖!
    • You call library ,Framework calls you.
  • 库是一些方法的集合;例如你想修改DOM元素时需要选中、修改、放回去步骤繁琐,这时我们可以自己写个函数来专门实现这种功能,你只需要放参数进来它就返回结果给你,不用重复写;这个函数就是库里面的方法,库里面放了很多方法。
  • 框架是设计好的结构,是个可拓展的半成品;例如有一群人都想建房子,那么框架会帮你打好地基、搭好承重梁,等于这个房子的主体搞定了,然后不同人按自己的需要去添砖加瓦去构建自己想要的房子;
  • 从本质上来看,库和框架都是为了减少我们的工作量而服务的。库是着眼于小方面帮你做好工具让你不用每次干活都先造工具,但你去干什么活它不管;而框架呢是着眼于大方面,把一些通用的、基础的(比如不管是谁每次建房子前都要先打地基)给打包在一起,要建房就把那一堆放上去,然后在此基础上再自己去做,但你要用对,建房地基包不能拿去做桥梁的!

jquery

  • jquery是一个又小又快功能丰富的javascript库,它可以让你对DOM元素的遍历和操作、事件、ajax和动画等变得更简单,不需要像原生js那么繁琐,它帮你封装好了,提供了很多API你只要去调用它就能返回结果给你,而且它的方法还兼容各个版本的浏览器。

jquery 对象和 DOM 原生对象的区别及互相转化

  • jauery对象的外层都是一个中括号包裹的,通过使用$( )得到的,类似[

    我是段落

    ]
    ,只有jauery对象才能使用jquery的方法。因为是类数组对象,所以我们可以加个中括号包裹的数字即可得到原生DOM对象,[

    我是段落

    ][0]
    ;另外jquery还提供了一个get方法来实现,如[

    我是段落

    ].get(0)
  • DOM原生对象就是我们通过geElementBy xx得到的节点,例如

    我是段落

    ;可以使用$( )来包裹DOM原生对象从而得到jquery对象,$(DOM原生对象)

jquery中事件绑定

  • jquery中使用on来绑定事件,对象.on('事件名称','处理函数')

bind、unbind、delegate、live、on、off的作用;

  • bind在jquery1.7之前的版本中用于直接给一个元素绑定事件,所以在绑定前元素必须是已存在的。
  • unbind可以移除元素上用bind绑定的事件,如果没有参数就移除元素上的所有事件。
  • delegate在jquery1.7之前的版本中使用,一般用于给父元素绑定一个或多个事件,只要匹配的子元素发生事件就会触发。
  • live在jquery1.7版本被废弃了,给匹配的所有元素绑定一个事件。
  • on给匹配的元素绑定事件处理函数,可以有多个事件。
  • off移除用on绑定的事件,如果没有参数则移除所有事件。

推荐使用on来绑定事件,因为它更灵活,而且旧版本中其他绑定方法它都能实现达成了统一。

使用on绑定事件使用事件代理的写法

  • 使用on绑定事件代理写法如下:为ul绑定事件,当li元素发生事件时,触发处理函数。

    $('ul').on('click', 'li', function(){ });
    

jquery 中如何展示/隐藏元素?

  • $().hide()来隐藏元素,可以设置参数来控制执行的时间、方式、回调参数等。
  • $().show()来隐藏元素,可以设置参数来控制执行的时间、方式、回调参数等。

jquery 动画的使用

  • 使用.animate( )来使用动画,元素.annimate(css属性:值,opts),opt里可以设置较多东西,时间、方式、速度、回调函数等,可以按需要去jquery官网查阅,对于css属性部分要注意必须是值可数字化的css属性,例如宽高可以而背景色就不行。

元素内部 HTML 内容设置和获取、元素内部文本的设置和获取?**

  • HTML内容使用jquery的.html( ),括号内不带内容表示获取所选对象的html内容,带内容的话则将用括号内的内容覆盖其内部html内容。原生js中用.innerHTML获取,用赋值来设置内容。
  • 文本内容使用jquery的.text( ),括号中不带内容表示获取所选对象的文本内容(注意同样是忽略html标签进行文本拼接),带内容的话则将用括号内的内容覆盖其内部html内容。原生js中用.innerText获取,用赋值来设置内容。

表单用户输入或者选择的内容设置和获取、元素属性的设置和获取

  • 和原生JS中input对象.value类似,jquery中可以使用$( ).val( )来获取表单输入的内容。
  • 元素属性的获取在原生JS中是使用元素.getAttribute,使用元素.settAttribute来设置;而在jquery中获取和设置两种操作是同一个方法,$( ).attr('属性名')来获取属性值,$( ).attr('属性名','值')来对属性值进行设置。

你可能感兴趣的:(Jquery DOM&事件)