jQuery现在在Web前端开辟所占的比重越来越高,在我们jQuery进修和开辟的历程中都会去运用。jQuery帮我们处理了浏览器之间JS一些不兼容的处所和简化了原生JS对DOM的操纵。下面把PHP程序员雷雪松对jQuery的知识点总结和归结分享给人人。
1、jQuery简介
jQuery是一个有用的JavaScript库。jQuery极大地简化了JS对DOM的操纵,完成一些经常使用的要领,jQuery还能够链式操纵。
2、jQuery的基础用法
//引入jQuery文件,能够当地也能够长途
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
//当文档完成加载完时触发,防止猎取dom对象时,dom对象还没有加载
$(document).ready(function(){
//写js语句或许jQuery函数
$("p").click(function(){
$(this).hide();
});
});
</script>
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 数据结构数据
$争执的处理办法
//开释$标识符的掌握,运用默许的变量jQuery
$.noConflict();
//自定义变量
var jq = $.noConflict();
7、jQuery Ajax 操纵函数
$.ajax() – 实行Ajax异步要求
$.get() – 运用GET要求从服务器猎取数据
$.getJSON() – 运用GET从服务器要求JSON编码数据
$.getScript() – 运用GET从服务器要求JavaScript文件并实行该文件
$.post() – 运用POST要求从服务器猎取数据