今天我们来说一说JQuery的一些设计目的和方法,仅仅是我个人的理解。首先必须声明的是JavaScript和JQuery是可以共存但不可以混用。
1.JQuery选择元素更加方便
一是:使用模拟CSS选择元素。比如选择<div id='box'></div>,使用$("#box"),或者$("div").这样的书写方式和css元素的书写是有相通之处的。并且对于选择的多个标签可以一次性赋予属性,没有必要像JavaScript原生的那样,还需要使用循环来实现。
二是:表达式选择。比如选择一组元素的第一个或者最后一个。使用first或者last。也可以使用odd(偶数)和even(奇数)。也可以使用eq定位第几个元素。
三是:多种筛选方法。比如$("li").filter(".box").选择li中有calss="box".的元素。等等。
四是:选择器的选择具有同级,父级,子级。可以进行关系之间的选择。
向上:
• parent() 返回被选元素的直接父元素
• parents() 被选元素的所有祖先元素,它一路向上直到文档的根元素
• parentsUntil() 介于两个给定元素之间的所有祖先元素
向下:
• children() 返回被选元素的所有直接子元素
• find() 被选元素的后代元素
同级:这个网上有详细的资料,可以查询。
• siblings()
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()
2.JQ的写法
一是:方法函数化。简单点就是都是函数。比如等待页面加载完,JavaScript中是这样来写的
window.onload =function(){};但是在JQuery中只要$()。
点击事件:
onclick =funtion(){};但是在JQuery中就是click(function(){})。
innerhtml=“123”。JQuery就是html()。
所以在JQuery中就是把他们这些东西都函数化了。在原生中经常可以看到赋值的操作符=,而在JQuery中比较不常见。而且在JQuery的使用中,很多时候我们要在后面使用()。
二是:链式操作
JQuery的链式操作是重要的一点。也算是优点之一。链式操作,节省代码量,使代码看起来更优雅。另外一点为了更好的异步体验 Javascript是无阻塞语言,所以他不是没阻塞,而是不能阻塞,所以他需要通过事件来驱动,异步来完成一些本需要阻塞进程的操作
链式操作的原理是:实际上链式操作仅仅是通过对象上的方法最后 return this 把对象再返回回来,对象当然可以继续调用方法啦,所以就可以链式操作了。
三是:取值赋值合体
比如html()这就是取值,那么html(“hello”)就是赋值。或者css(“width”),就是取值。那么css(“width”,“200px”)就是赋值。
后续如果有新的想法,在写下一篇。。。。。