搜索
jQuery1.什么是jQuery??jQuery是一个优秀的JavaScript框架，一个轻量级的JavaScript类库。jQuery的核心理念是Writeless，Domore。使用jQuery可以兼容各种浏览器，方便的处理HTML、Events、动画效果等，并且方便的为网站提供AJAX交互。2.jQuery的特点：利用选择器来查找要操作的节点，然后将这些节点封装成一个jQuery对象，通过调用jQuery对象的方法或者属性来实现对底层被封装的节点的操作。好处：a、兼容性更好；b、代码更简洁3.编程步骤：step1、使用选择器查找节点step2、调用jQuery的属性和方法4.jQuery对象与DOM对象之间的转换1.什么是jQuery对象？？jQuery对象是jQuery对底层对象的一个封装，只有创建了这个对象，才能使用类库中提供的方法。2.DOM对象----jQuery对象DOM对象向jQuery对象的转变很容易，外面追加$和圆括号即可。functionf(){varobj=document.getElementById(‘d1’);//DOM-jQuery对象var$obj=$(obj);$obj.html(‘hellojQuery’);}3.jQuery对象----DOM对象jQuery对象向DOM对象转化，通过调用get方法加参数值0即可$obj.get(0)。functionf(){var$obj=$(‘#d1’);//jQuery对象-DOMvarobj=$(obj).get(0);obj.innerHTML=‘hellojQuery’;}5.jQuery选择器1.什么是jQuery选择器？？jQuery选择器是一种类似CSS选择器的特殊说明符号，能够帮助jQuery定位到要操作的元素上，使用了选择器可以帮助HTML实现内容与行为的分离。只需要在元素上加上Id属性。2.选择器的种类a、基本选择器#id根据指定的ID匹配一个元素.class根据指定的类匹配一个元素element根据的指定的元素名匹配所有的元素select1,select2,......将每一个选择器匹配到的元素合并后一起返回*匹配所有元素b、层级选择器1.select1空格select2查找指定元素的所有的后代2.select1select2查找子节点3.select1+select2下一个兄弟4.select1~select2下面所有的兄弟c、过滤选择器1.基本过滤选择器:first获取第一元素:last获取最后一个元素:not排除选择器要求的元素:even匹配所有下标为偶数的元素:odd匹配所有下标为奇数的元素:eq匹配所有给定索引值的元素:gt匹配所有大于给定索引值的元素:lt匹配所有小于给定索引值的元素2.内容过滤选择器:contains匹配包含给定文本的元素:empty匹配所有不包含子元素或者文本的空元素:has匹配含有选择器所匹配的元素的元素:parent匹配含有子元素或者文本的元素3.可见性过滤选择器根据元素在页面中的可见属性进行过滤，主要是对hidden属性和visible属性的判断。:hidden匹配所有不可见元素，或者type为hidden的元素:visible匹配所有的可见元素4.属性过滤选择器属性过滤器会对标记的属性进行判断，符合条件的元素会作为返回的对象。[attribute]匹配包含给定属性的元素。[attribute=value]匹配给定的属性是某个特定值的元素[attribute!=value]匹配所有不含有指定的属性，或者属性不等于特定值的元素。[attribute^=value]匹配给定的属性是以某些值开始的元素[attribute$=value]匹配给定的属性是以某些值结尾的元素[attribute*=value]匹配给定的属性是以包含某些值的元素[attrSel1][attrSel2][attrSelN]复合属性选择器，需要同时满足多个条件时使用。5.子元素过滤选择器子元素过滤选择器会根据子元素的位置的数值来进行筛选。:nth-child（index、enven、odd）匹配其父元素下的第N个子或奇偶元素。注意':eq(index)'只匹配一个元素，而这个将为每一个父元素匹配子元素。:nth-child从1开始的，而:eq()是从0算起的！6.表单对象属性过滤选择器:enabled匹配所有可用元素:disabled匹配所有不可用元素:checked匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option):selected匹配所有选中的option元素d、表单选择器使用的规则和以上各选择器一致。$(“：input”)就会返回所有的input输入框，大多数情况下，表单选择器会和其他选择器进行配合来定位元素。:input匹配所有input,textarea,select和button元素:text匹配所有的单行文本框:password匹配所有密码框:radio匹配所有单选按钮:checkbox匹配所有复选框:submit匹配所有提交按钮:image匹配所有图片:reset匹配所有重置按钮:button匹配所有按钮:file匹配所有的文件域:hidden匹配所有不可见元素，或者type为hidden的元素6.jQuery操作DOM-查询1.html（）html()等价于innerHTML读取或修改节点的HTML内容的属性和value值。与DOM对象的innerHTML的作用一致。2.text（）text()等价于innerText读取或修改节点中的文本内容，会过滤掉标记内容，与innerText的作用基本一致，但innerText在不同浏览器中写法不同，在jQuery中则使用text（）方法即可。3.val（）读取或修改节点的value属性值，也就是针对表单元素中有value属性的哪些元素的操作。4.attr（）读取或设置修改节点的属性。这个方法会更宽泛一些，可以修改元素的任何属性。7.jQuery操作DOM-创建、插入、删除1.创建DOM节点的语法使用$符号将HTML标记的字符串文本括起来，即创建了DOM节点，如$（html）。大多数时候创建后的节点需要放入文档中，使用到后续的一些方法可以实现节点的插入简写形式如$(‘body’).append(‘div…/div”)2.插入DOM节点的方法append方法会将DOM节点作为最后一个孩子节点添加进来prepend方法将DOM节点作为第一个孩子节点添加进来after方法将DOM节点作为下一个兄弟节点添加进来before方法将DOM节点作为上一个兄弟节点添加进来3.删除DOM节点的方法remove（）可以移除DOM，remove（selector）可以按选择器定位后删除，empty（）清空节点。4.将js和html内容分离$(fn);注意：window.onload=function(){}等价于$(fucntion(){});但是内在的机制不相同。fn是一个函数，表示当整个页面记载完成之后就会执行fn。8.jQuery操作DOM-复制节点1.复制DOM节点的方法clone（）方法和clone（true）都会实现复制，添加参数true的时候会将节点的行为也复制到新的对象之上。9.jQuery操作DOM-属性操作1.属性操作的方法读取属性使用attr（）方法，设置属性使用attr（‘’，‘’）方法。删除属性使用removeAttribute（‘’）方法。10.jQuery操作DOM-样式操作attr(class,)获取和设置addClass()追加样式removeClass()删除所样式toggleClass()切换样式hasClass()是否有某个样式css()读取css值css(,)设置多个样式11.jQuery操作DOM-遍历节点childern()/childern(selector)只考虑直子节点next()/next(selector)下一个兄弟的节点perv()/perv(selector)上一个兄弟的节点sibling()/sibling(selector)其他的兄弟find(selector)查找满足选择器的所有的后代parent()父节点，没有选择器jQuery事件处理1.使用jQuery实现事件绑定1.使用jQuery实现事件绑定$obj.bind(事件类型，事件处理函数)；注意：为一个jQuery对象绑定单击事件的代码实现为$obj.bind(‘click’,fn);也可以简写为$obj.click(fn);2.获得事件对象event$(fucntion(e){e就是事件处理对象（jQuery对底层事件对象做了一个封装，简化代码）});3.事件对象的常用属性a、找到事件源：varobj=e.target获取事件源使用事件对象的target属性。b、获取发生事件时的鼠标点击的坐标：alert(e.pageX+''+e.pageY);获取发生事件时的鼠标坐标使用pageX和pageY属性。c、禁止事件冒泡e.stopPropagation();2.事件冒泡子节点产生的事件会依次向上抛给相应的父节点当事件发生时，会首先发送给最内层的元素，在这个元素获得响应机会之后，事件会向上冒泡给更外层的元素，及从内层向外层依次传递。3.合成事件.hover（over，out）模拟鼠标悬停事件它为频繁使用的任务提供了一种“保持在其中”的状态。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。toggle（f1，f2，......）模拟连续单机事件注意的是，通过jQuery这种方式触发事件时，不会发生事件传播；只会执行直接添加到元素的处理程序。如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数，如果有更多函数，则再次触发，直到最后一个。随后的每次点击都重复对这几个函数的轮番调用。4.模拟操作trigger（type，[data]）在每一个匹配的元素上触发某类事件。也就是提交第一个表单，但不用submit()的效果。$('#username').trigger('focus');简写$obj.focus();jQuery动画1.显示隐藏的动画效果.hide()和.show()方法是对display的属性的操作。如果添加一个速度参数，就会产生动画效果。2.上下滑动式动画效果$('div').slideDown(800);通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。$('div').slideUp('fast');通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。$('div').slideToggle(speed,[callback])通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。3.淡入淡出式动画效果如果针对一个元素，只是逐渐增大其不透明度，那么使用fadeIn（‘slow’）;fadeOut是逐渐减少不透明度，可以使用/.fadeOut()4.自定义动画效果用法：animate（{js对象}，执行时间，回调函数）；js对象：{}描述动画执行之后元素的样式执行时间：毫秒数callback回调函数：动画执行结束后要执行的函数jQuery类数组1.什么是类数组jQuery对象封装的DOM对象。2.类数组的操作length属性：获得jQuery对象封装的dom对象的个数each（fn）遍历类数组，fn用来处理DOM对象。在fn中this表示正在被遍历的那个DOM对象。fn函数可以添加一个参数i用于表示正在被遍历的DOM对象的下标（从