jQuery的一些基础性内容

说明

  因为是个人复习java的总结,所以结构稍显杂乱,有些语句过于口语化.
  下面只能说是简单了解,具体可能看文档学比较好,然后自己去写一点才能掌握,我就不深入了.

jquery

  这个就是JavaScript的框架,通过引入js文件简化了js的代码,概念没什么说的.

版本

  主要就是三类1.X 2.X和3.X
  主要使用1.X,因为兼容老的浏览器,功能也已经固定,不再更新.
  至于jquery中的文件没什么好说的,跟之前使用的一些包差不多,分有缩进的和没缩进用来看的两种文件

jQuery的对象和js的对象

  一般在js中获取元素对象是通过document的方法获取元素对象.而在jQuery中获取比较方便,一般是使用$("")来获取的.看起来两个通过id获取的对象应该是同一个的对象,其实这两个对象不是同一种对象.但从类型上来说,通过js获取的对象是HTMLColection类型的,而通过jquery获取的对象是Object类型的.从这个类型上可以看出来,js的对象趋近于数组而jquey似乎是单纯地当做一个对象来使用.

  使用的时候也确实是这样的,比如说想要操作对象的内容,js获取的所有元素对象,那么就需要遍历这些对象然后进行设置.如果是jQuery获取的对象则可以直接用对象去调用方法修改所有的元素的内容.
那么显而易见两者的对象不能调用对方的方法进行操作.那就涉及到两者对象之间的转换问题.
js对象转换成jQuery对象,只要在js外面加一层$()就可以转换了.

  而jQuery对象转换成js对象只需要jQuery对象通过get(索引)获取到其中单独的对象,就是js对象了.其实也可以理解成,jQuery对象是类似单独js对象的组合,而js对象又表现为单独js的一个数组,那么理所应当js对象和jQuery对象不是同一种对象

基本语法

$("a").click(function(
	alert("111");
));

  这个是绑定方法的基本语法,也就是js中给某个元素绑定某个单击事件之类的.其实差不多,只是放方法的地方不太一样.

$(function(){
});

  其实如果在前面学习的时候做过网页的肯定接触过jquery,这个肯定也见过.一般都是在这个中放上面的事件方法.其实意思就是js中的windows.onload,用来延迟代码执行,等待页面加载完的.但是需要注意window.onload是相当于将onload中绑定了方法,所以只能绑定一个,多次绑定的话会形成冲突.而jQuery这种方式相当于是创建一个匿名的方法,这个方法的加载会比较迟,所以可以随便写几个,一般也是根据功能模块写这个延迟加载.

jquery的选择器

  基本选择器
  其实基本的选择器就和css的选择器差不多,可以使用#表示id选择器,直接输入标签名可以选择对应的标签,使用.表示class选择器.
  另外对于选择器可以进行并集操作,也就是说想要通过两个选择器选择元素,那么可以使用,来连接.

层级选择器

  其实就是父子选择器,和css中也一样的,A B表示A元素中的所有子元素B,不管层级关系.如果使用>连接表示的就是选择其中的子标签,大于子的层级就不选择了.

属性选择器

  其实就是基于标签选择器再通过属性来进行选择的选择器,如果只传入属性名,那么就会选择含有这个属性名的元素,也就是$(A[属性名]).
  但是如果是传入某个属性名和属性值的键值对,那么就会选择标签中带有某个属性并且属性值对应的元素.也就是$(A[属性名=''"]).
  而且这种方式很神奇,还可以反选,也就是使用!=来判断,就能获取到除了带有这个属性的元素以外所有元素.或者说是选择以某些内容开头的使用^=符号.其实就是在这里可以使用正则表达式的方式,但是太复杂的没有,只有几种定义好的.比如说包含*= 以什么结束$=
  然后还可以复合属性选择,也就是加[]就好了.

过滤选择器

  其实这个选择器一般是在上面的选择器的基础上增加了一些选择.比如说选择筛选后的第一个元素$("div:first").
  还有选择最后一个的就是使用:last
  还有非选择器,也就是传入not(选择器),根据另一个选择器再去去除掉一些内容.
  然后还有偶数和奇数选择器:even和:odd,注意这里偶数和奇数都是从0开始的,并且0算偶数.
  还有运算符选择器,这个是用来获取元素索引在某个范围的元素的,也就是:eq和:gt和:lt分别代表的等于大于小于某个索引的元素.
  还有一种固定的header选择器,用来获取h1-h6的标签.

表单过滤选择器

  这个也是基于上面的基本的选择器来使用的一种附加的选择器.专门用来获取input和表单中相关内容的选择器.
  :enabled表示获取表单中的可用元素,其实就是能写的input
  :disabled表示获取表单中不能写的
  :checked用来获取checkbox中选中的
  :selected用来获取选中的,但是需要注意不是针对select的选择器,而是针对其中的option的选择器.不然用了select结果选了半天也选不到.

DOM操作

  其实就是js中document的一些操作的方法

val()

  不传参的时候是获取标签中的value,传参的时候是设置value

html()

  就是根据对象获取或者设置对应标签下的html内容,也就是会获取其html语句

text()

  就是获取或者修改其中的文本内容,不包括标签部分.

attr()

  获取或者设置属性值

removeAttr()

  删除属性值

prop()
removeProp()

  注意,其实prop效果和上面是一样的,区别在于attr建议使用在自定义属性,而prop建议使用在固有属性,其实就是标签一些默认自带的属性需要用prop获取,attr不能获取到这种属性,比如说checked或者selected,而非要使用prop获取自定义属性,也是可以的,比如说name.

addClass()

  增加class属性

removeClass()

  删除class

toggleClass()

  是对于class的属性先进行判断,存在class则删除这个class值,不存在则修改class

css()

  修改css样式

对象1.append(对象2)

  将对象2添加到对象1的末尾

prepend()

  添加在开头

appendTo()

  这个就是上面的添加变一下,前面添加到后面里面去.

prependTo()

  加在开头

after()

  添加到某个元素的后面

before()

  添加到某个元素的前面,形成的是兄弟元素

insertAfter()
insertBefore()

  就是上面两个的对象反一下

remove()

  移除元素

empty()

  将元素的子元素全部清空

  其实这些方法看起来还都是比较简单好用的,比如说之前对于表格中复选框的全选和全不选的切换,就很方便,只要给第一行的复选框添加一个单机事件,事件中选择下面的复选框并改变其中的固有属性为第一行复选框的状态就可以了.注意是固有属性使用prop()

  当然上面对于基础方法的描述是不完全的,如果想要深入了解还需要到文档去看.

jQuery一些更深入的使用

一些动画效果

  比如说显示和隐藏,滑动显示和隐藏,淡入淡出显示和隐藏.

show(speed,[easing],[fn])

  speed可以设置预定义的slow,normal,fast.或者直接传入毫秒值.
  easing默认是swing也就是动画开始和结束的时候慢,中间比较快.还可以设置成linear也就是匀速
  fn则是在动画完成之后执行的方法

show(5000,"linear",function(){})

  注意是上面这样的格式,其中默认值是以String的形式传入的

hide(speed,[easing],[fn])

  隐藏效果

toggle(speed,[easing],[fn])

  这个方式是显示和隐藏的结合,定义之后可以实现隐藏和显示的切换

slideDown(speed,[easing],[fn])
slideUp(speed,[easing],[fn])
slideToggle(speed,[easing],[fn])

  其实就是和上面差了一个滑动的效果,整天看ppt用ppt的人肯定很熟悉.

fadeIn(speed,[easing],[fn])
fadeOut(speed,[easing],[fn])
fadeToggle(speed,[easing],[fn])

  就是淡入淡出的效果,也没什么好说的

遍历

  在使用js的时候是跟java差不多使用的for之类的循环,当然在jQuery中要用这种方式也没有关系,只是可能会稍显玛法,而jQuery中实现方式主要有三种

jQuery对象.each(callback)

  上面的方式其实就是获取到多个对象之后,可以对整体对象调用这个方法,然后批量添加回调函数.然后如果需要一些参数就可以设置这个回调函数的参数.
  另外这里有一个需要注意的点,那就是在使用jQuery的时候如果加了if判断,是不能使用break结束的,也就是jQuery不是和js一样跟java差不多.如果想要实现相同的效果可以return来实现,true则等同于continue,false等同于break
  注意上面的方式是给对象使用的遍历.

$.each(object, [callback])

  这种方式也是针对对象的,使用情况和上面相同

for ( a of as )

  这个方式必须是3.0之后的版本,所以可能使用情况比较少.但是实际效果其实也和上面差不多,就是改成了类似python中的简单的遍历语句.针对某个整体jQuery对象遍历其中的具体对象.

事件绑定

  其实就是给对象绑定方法,基本语句就是
  jQuery对象.事件方法(回调函数)
  但是还可以采用另外一种语句,实现事件的绑定,解绑和切换

  jQuery对象.on(“事件名称”,回调函数)
  jQuery对象.off(“事件名称”)
  jQuery对象,toggle(fn1,fn2)
  具体效果从名字就很明显了,加上上面的方法名,都是类似的套路
  但是需要注意off的解绑是针对其事件名称的,如果不传入名称就会解绑目标对象的全部事件

  另外toggle这个方法在1.9之后被舍弃了,如果想要恢复得使用migrate的一个插件才能恢复
  这里补充一点,jQuery的对象调用事件绑定之后还可以再绑一个事件,也就是链式编程,但是不建议写太多个,容易混乱.

插件机制

  其实就是可以通过自己书写一些方法来增加jQuery自身或者是jQuery对象的功能

$.fn.extend(object)
$.fn.extend({
	check:function(){
		alert(123);
}
})

  看到上面的案例应该就能很好的理解,这里就是给jQuery的对象增加了一个check方法,效果则是其中写好的弹出一个提示框

$.extend(object)
$.extend.({
	max:function(a,b){
	return a>b ? a:b;
}
})

  其实形式和对象的差不多,只是调用者不同,上面调用的是jQuery获取的对象,而这里调用者是jQuery或者说是$

如有错误欢迎读者批评指正!!