欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jQuery学习和知识点总结归纳

程序员文章站 2022-12-21 11:41:16
jQuery目前在Web前端开发所占的比重越来越高,在我们jQuery学习和开发的过程中都会去使用。jQuery帮我们解决了浏览器之间JS一些不兼容的地方和简化了原生JS对DOM的操作。下面把雷雪松对jQuery的知识点总结和归纳分享给大家。1、jQuery简介jQuery是一个实用的JavaScr ......

jquery目前在web前端开发所占的比重越来越高,在我们jquery学习和开发的过程中都会去使用。jquery帮我们解决了浏览器之间js一些不兼容的地方和简化了原生js对dom的操作。下面把对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() – 对被选元素应用“自定义”的动画

5、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 放入匹配元素

6、jquery对css的操作
$(selector).height() – 设置或返回匹配元素的高度。
$(selector).width() – 设置或返回匹配元素的宽度。
$(selector).addclass() – 向被选元素添加一个或多个类
$(selector).removeclass() – 从被选元素删除一个或多个类
$(selector).toggleclass() – 对被选元素进行添加/删除类的切换操作
$(selector).css() – 设置或返回样式属性
$(selector).hasclass() 检查匹配的元素是否拥有指定的类。

7、jquery其他知识点
$(selector).data() – 存储与匹配元素相关的任意数据
$(selector).removedata() – 移除之前存放的数据
$(selector).serialize() – 将表单内容序列化为字符串
$(selector).serializearray() – 序列化表单元素,返回 json 数据结构数据

$冲突的解决办法

//释放$标识符的控制,使用默认的变量jquery
$.noconflict();
//自定义变量
var jq = $.noconflict();

8、jquery ajax 操作函数
$.ajax() – 执行ajax异步请求
$.get() – 使用get请求从服务器获取数据
$.getjson() – 使用get从服务器请求json编码数据
$.getscript() – 使用get从服务器请求javascript文件并执行该文件
$.post() – 使用post请求从服务器获取数据

来源:jquery学习和知识点总结归纳