JQuery复习笔记

2019-08-01 12:41
网页上实现点击复制功能,在很多地方都可以用到....

jQuery 事件

鼠标事件
键盘事件表单事件窗口事件
click单击
keypress按下字符
submit提交
load加载完毕
dblclick双击
keydown按下
change改变
resize调整窗口大小
mouseenter鼠标经过
keyup松开
focus获得焦点
scroll滚动
mouseleave鼠标离开

blur失去焦点
unload离开页面




当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件。

当在元素上松开鼠标按钮时,会发生 mouseup 事件。

hover()方法用于模拟光标悬停事件。

$(document).ready() 方法允许我们在文档完全加载完后执行函数。

jQuery 效果

显示隐藏 hide(1000) show(1000)

toggle() 方法来切换 hide() 和 show() 方法。


淡出淡入 fadeIn(1000) fadeOut(1000)

fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

fadeTo(1000,透明度0.8) 方法允许渐变为给定的不透明度


滑上滑下 slideDown() slideUp()

slideToggle() 方法来切换slideDown()与slideUp()方法


animate({CSS样式},时间秒,函数) 方法用于创建自定义动画。

stop() 方法用于在动画或效果完成前对它们进行停止。

Callback 函数在当前动画 100% 完成之后执行。


$("#p1").css("color","red").slideUp(2000).slideDown(2000);

jQuery - 获取内容和属性

text() - 设置或返回所选元素的文本内容

html() - 设置或返回所选元素的内容(包括 HTML 标记)

val() - 设置或返回表单字段的值

attr() 方法用于获取属性值。

拥有回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。

jQuery - 添加元素

append() - 在被选元素的结尾插入内容

prepend() - 在被选元素的开头插入内容

after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容

jQuery - 删除元素

remove() - 删除被选元素(及其子元素)

empty() - 从被选元素中删除子元素

jQuery - 获取设置 CSS

addClass() - 向被选元素添加一个或多个类

removeClass() - 从被选元素删除一个或多个类

toggleClass() - 对被选元素进行添加/删除类的切换操作

css() - 设置或返回样式属性

jQuery css() 方法

css() 方法设置或返回被选元素的一个或多个样式属性。

$("p").css("background-color");

$("p").css("background-color","yellow");

css({"propertyname":"value","propertyname":"value",...});

jQuery 尺寸

width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。

height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

innerWidth() 方法返回元素的宽度(包括内边距)。

innerHeight() 方法返回元素的高度(包括内边距)。

outerWidth() 方法返回元素的宽度(包括内边距和边框)。

outerHeight() 方法返回元素的高度(包括内边距和边框)。

jQuery 遍历

parent() 方法返回被选元素的直接父元素。

parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 ()。

parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。


children() 方法返回被选元素的所有直接子元素。

find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。


siblings() 方法返回被选元素的所有同胞元素。

next() 方法返回被选元素的下一个同胞元素。

nextAll() 方法返回被选元素的所有跟随的同胞元素。

nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。

first() 方法返回被选元素的首个元素。

last() 方法返回被选元素的最后一个元素。

eq() 方法返回被选元素中带有指定索引号的元素。

filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。

not() 方法返回不匹配标准的所有元素。

jQuery - AJAX

load() 方法是简单但强大的 AJAX 方法。

$(selector).load(URL,data,callback);

get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。

$.get(URL,callback);

$.post(URL,data,callback);


必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

jQuery - noConflict() 方法

noConflict() 方法会释放对 $ 标识符的控制,这样其他脚本就可以使用它了。


选择器类型

通配选择器 $("*").action(); //所有

id选择器 $("#id选择器").action() //id

class选择器 $(".class选择器").action() //class

标签选择器 $("HTML Tag").action() //标签

群组选择器 $("多个选取器之间以逗号间隔").action() //群组

属性选择器 $("[属性名称]").action(); //标签属性

$("[属性名称=属性值]").action(); //标签属性=值

子代选择器 $("父选择器>子选择器").action() //父子>标签

后代选择器 $("父选择器 后代选择器").action() //后代 (空格) 标签

过滤选择器 $("选择器:first").action() //第一个

$("选择器:last").action() //最后一个

$("选择器:eq(索引值)").action() //索引

eg : $("li:eq(2)").css("color","blue");

排他选择器 $("选择器:not()").action() //排除

奇,偶选择器 $("选择器:odd").action(); //奇偶

$("选择器:even").action();

兄弟选择器 $("选择器+兄弟选择器").action(); //兄弟,同级

范兄弟选择器 $("选择器~兄弟选择器").action(); //范围同级

全部回复| 共有0条回复