jQuery基础知识,很赞的!!!
一、jQuery基础 1、jQuery是什么?jQuery是一个js框架,其主要思想是,通过选择器查找到对应的节点,然后对这个节点进行封装(封装成一个jQuery对象)。通过调用jQuery对象的属性或者方法来实现对节点的操作。这样做的好处是:第一,将不同的浏览器之间的差异屏蔽起来了。第二,代码更加简洁,维护方便。2、jQuery编程的步骤step1: 使用选择器查找节点step2: 调用jQuery对象的方法或者属性选择器:jQuery模仿css选择器语法,创建的一套用于查找节点的规则。3、jQuery对象与dom节点1)dom节点如何转换成jQuery对象调用$()函数,比如$(obj);2)jQuery对象如何转换成dom节点方式一: $obj.get(0)方式二: $obj.get()[0]3) jQuery与其它js框架如何共存?使用conflict()函数。二、选择器1、选择器是什么?jQuery模仿css选择器语法,创建的一套用于查找节点的规则。2、基本选择器#id.classelementselector1,select2..selectn*3、层次选择器select1 select2select1>select2select1+select2select1~select24、过滤选择器(1)基本过滤选择器:first:last:not(selector):even:odd:eq(index):gt(index):lt(index)
(2)内容过滤选择器:contains(text) 匹配包含给定文本的元素:empty 匹配所有不包含子元素或者文本的空元素:has(selector) 匹配含有选择器所匹配的元素的元素:parent 匹配含有子元素或者文本的元素
(3)可见性过滤选择器:hidden 匹配所有不可见元素,或者type为hidden的元素:visible 匹配所有的可见元素(4)属性过滤选择器[attribute][attribute=value][attribute!=value](5)子元素过滤选择器:nth-child(index/even/odd)(6)表单对象属性过滤选择器:enabled:disabled:checked:selected5、表单选择器:input:text:pasword:radio:checkbox:submit:image:reset:button:file:hidden三、dom操作1、dom查找通过选择器找到节点后,可以调用a, html() : 输出或者修改节点之间的html内容b,text():输出或者修改节点之间文本c,val():输出或者修改节点的value属性2、创建节点: $(html)3、添加节点: append():向每个匹配的元素内部追加内容 prepend():向每个匹配的元素内部前置内容 after():在每个匹配的元素之后插入内容 before():在每个匹配的元素之前插入内容4、删除节点remove()remove(selector)empty():清空节点5、复制节点clone()clone(true):使复制的节点也具有行为(将事件处理代码一块复制)
6、属性操作读取:attr('');设置:attr('','') 或者一次设置多个 attr({"":"","":""});删除:removeAttr('')7、样式操作获取和设置: attr("class","")追加:addClass('')移除:removeClass('') 或者removeClass('s1 s2') 或者removeClass()//会删除所有样式切换样式:toggleClass,有该样式,就删除,没有,就添加。是否有某个样式 hasClass('')读取css('')设置css('','')或者css({'':'','':''})//设置多个样式
1、遍历节点children():只考虑子元素,不考虑其它后代元素。next()/next(selector)prev()/prev(selector)siblings()/siblings(selector)find(selector)/parent()
2、事件处理机制1)事件绑订的方式bind(type,fn)2)、绑订方式的简写形式click(function(){});3)、合成事件hover(enter,leave) : 模拟光标悬停事件toggle(fn1,fn2...):模拟鼠标连续单击事件4)、事件冒泡a、获得事件对象//event不再是原始的事件对象,而//是封装之后的对象。click(function(event){});b、停止冒泡event.stopPropagation()c、停止默认行为event.preventDefault()5)、事件对象的属性event.typeevent.target:返回事件源(是dom对象!!!)event.pageX/pageY: 点击的坐标6)、模拟操作trigger('click')3、动画1)、show("slow"/"normal"/"fast"/100) hide()另外,还可以添加一个回调函数,比如:show('slow',function(){//这儿的代码会在动画执行完成之后//才执行。});2)、fadeIn() fadeOut(): 淡入、淡出改变不透明度。fadeIn,fadeOut可以添加"slow"/"normal"/"fast"/100参数,也可以添加一个回调函数。3)、slideUp() slideDown() : 改变元素的高度用法跟前面一样。4)、自定义动画 animate(params,speed,callback):params: 是一个形如 {"height":"300px","width","200px"}speed: 单位是毫秒,表示动画执行的速度。callback:回调函数,动画执行完成之后,执行该函数。4、操作类数组的方法:说明:jquery操作数组的方法,$()操作返回的如果是一个数组,可以使用如下方法来操作each(fn(i)):循环遍历每一个元素,this代表被迭代的dom对象,$(this)代表被迭代的jquery对象。eq(index):返回index+1位置处的jquery对象index(obj):返回下标,其中obj可以是dom对象或者jquery对象。length:个数get():返回dom对象组成的数组get(index):返回index+1个dom对象。