60Jquery基础知识点总结学习

jQuery目前在Web前端开发所占的比重越来越高，在我们jQuery学习和开发的过程中都会去使用。jQuery帮我们解决了浏览器之间JS一些不兼容的地方和简化了原生JS对DOM的操作。下面把PHP程序员雷雪松对jQuery的知识点总结和归纳分享给大家。1、jQuery简介jQuery是一个实用的JavaScript库。jQuery极大地简化了JS对DOM的操作，实现一些常用的方法，jQuery还可以链式操作。2、jQuery的基本用法[cclang=javascriptescaped=true]//引入jQuery文件，可以本地也可以远程scripttype=text/javascriptsrc=jQuery.js/scriptscripttype=text/javascript//当文档完成加载完时触发，避免获取dom对象时，dom对象还没有加载$(document).ready(function(){//写js语句或者jQuery函数$(p).click(function(){$(this).hide();});});/script[/cc]3、jQuery常用的选择器和事件，和CSS的选择器很相似。$()-使用CSS选择器匹配元素jQuery的事件和JS的事件基本相同，在使用的时候，去掉JS事件前面的on即可。jQuery常用的事件：load：当文档加载时运行脚本blur：当窗口失去焦点时运行脚本focus：当窗口获得焦点时运行脚本change：当元素改变时运行脚本submit：当提交表单时运行脚本keydown：当按下按键时运行脚本keypress：当按下并松开按键时运行脚本keyup：当松开按键时运行脚本click：当单击鼠标时运行脚本dblclick：当双击鼠标时运行脚本mousedown：当按下鼠标按钮时运行脚本mousemove：当鼠标指针移动时运行脚本mouseout：当鼠标指针移出元素时运行脚本mouseover：当鼠标指针移至元素之上时运行脚本mouseup：当松开鼠标按钮时运行脚本abort：当发生中止事件时运行脚本4、jQuery常用的效果方法$(selector).hide()-隐藏被选的元素$(selector).show()-显示被选的元素$(selector).toggle()-对被选元素进行隐藏和显示的切换$(selector).slideDown()-通过调整高度来滑动显示被选元素$(selector).slideToggle()-对被选元素进行滑动隐藏和滑动显示的切换$(selector).slideUp()-通过调整高度来滑动隐藏被选元素$(selector).fadeIn()-逐渐改变被选元素的不透明度，从隐藏到可见$(selector).fadeOut()-逐渐改变被选元素的不透明度，从可见到隐藏$(selector).fadeTo()-把被选元素逐渐改变至给定的不透明度$(selector).animate()-对被选元素应用“自定义”的动画4、jQuery常用的DOM元素操作方法$(selector).parent()-返回被选元素的直接父元素。$(selector).parents()-返回被选元素的所有祖先元素，它一路向上直到文档的根元素(html)，可选参数来过滤对祖先元素的搜索$(selector).children()-返回被选元素的所有直接子元素。可选参数来过滤对子元素的搜索$(selector).find()-返回被选元素的后代元素，一路向下直到最后一个后代，可选参数来过滤对后后代元素的搜索$(selector).siblings()-返回被选元素的所有同胞元素。过滤对同胞元素的搜索。$(selector).next()-返回被选元素的下一个同胞元素。$(selector).nextAll()-返回匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。$(selector).prev()-返回的是前面的同胞元素$(selector).prevAll()-返回匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。$(selector).first()-将匹配元素集合缩减为集合中的第一个元素。$(selector).last()-将匹配元素集合缩减为集合中的最后一个元素。$(selector).eq()-指定索引的新元素。$(selector).get()-获得由选择器指定的DOM元素。$(selector).index()-返回指定元素相对于其他指定元素的index位置。注：parent()、next()、prev()、first()、last()、eq()只返回一个元素。返回元素集合的函数都可以传传参数筛选，比如：parents()、siblings()、nextAll()、prevAll()、siblings()。$(selector).each()对对象进行迭代，为每个元素执行函数$(selector).toArray()以数组的形式返回jQuery选择器匹配的元素$(selector).size()返回被jQuery选择器匹配的元素的数量$(selector).text()-设置或返回所选元素的文本内容$(selector).html()-设置或返回所选元素的内容（包括HTML标记）$(selector).val()-设置或返回表单字段的值$(selector).append()-在被选元素的结尾插入内容$(selector).prepend()-在被选元素的开头插入内容$(selector).after()-在被选元素之后插入内容$(selector).before()-在被选元素之前插入内容$(selector).remove()-删除被选元素（及其子元素）$(selector).empty()-从被选元素中删除子元素$(selector).removeAttr()-从所有匹配的元素中移除指定的属性。$(selector).clone()-创建匹配元素集合的副本$(selector).load()-从服务器加载数据，然后把返回到HTML放入匹配元素5、jQuery对CSS的操作$(selector).height()-设置或返回匹配元素的高度。$(selector).width()-设置或返回匹配元素的宽度。$(selector).addClass()-向被选元素添加一个或多个类$(selector).removeClass()-从被选元素删除一个或多个类$(selector).toggleClass()-对被选元素进行添加/删除类的切换操作$(selector).css()-设置或返回样式属性$(selector).hasClass()检查匹配的元素是否拥有指定的类。6、jQuery其他知识点$(selector).data()-存储与匹配元素相关的任意数据$(selector).removeData()-移除之前存放的数据$(selector).serialize()-将表单内容序列化为字符串$(selector).serializeArray()-序列化表单元素，返回JSON数据结构数据$冲突的解决办法[cclang=javascriptescaped=true]//释放$标识符的控制，使用默认的变量jQuery$.noConflict();//自定义变量varjq=$.noConflict();[/cc]7、jQueryAjax操作函数$.ajax()-执行Ajax异步请求$.get()-使用GET请求从服务器获取数据$.getJSON()-使用GET从服务器请求JSON编码数据$.getScript()-使用GET从服务器请求JavaScript文件并执行该文件$.post()-使用POST请求从服务器获取数据