码迷,mamicode.com
首页 > Web开发 > 详细

jQuery知识总结

时间:2020-10-16 11:07:13      阅读:37      评论:0      收藏:0      [点我收藏+]

标签:移除   animate   偶数   last   遍历   开头   语法   ddc   焦点   

jQuery知识总结

1、语法:$(document).ready(function(){})===$(function(){});
 
2、光标手形:cursor:pointer;

3、jQuery事件处理方法

-click() 鼠标单击事件

-dblclick() 鼠标双击事件

-focus() 获取焦点

-blur() 失去焦点

-mouseenter() 光标穿过元素触发

-mouseleave() 光标离开元素触发

-mouseover() 鼠标指针移入时

-mouseout() 鼠标指针移出时

-mousedown() 光标移入并按下时触发

-mouseup() 在元素上松开鼠标按钮时触发

-hover() 鼠标移入事件

-submit() 表单提交时触发

-load() 页面加载完触发

-resize() 浏览器窗口大小改变时触发

-change() 当元素失去焦点且元素内容改变时触发

-keydown() 键盘事件,按下按钮时

-keyup() 释放按钮时



mouseover和mouseenter事件的区别

mouseover:不论鼠标指针被选元素或其子元素,都会触发mouseover事件

mouseenter:只有鼠标穿过被选元素时,才会触发mouseenter事件





4、jQuery基本选择器

-类选择器 .class $(".text1") 选取所有class为text1的元素

-ID选择器 #id $("#text1") 选取所有ID为text1的元素

-并集选择器 selector1,selector2... $("div,p,.text") 选取所有div,p,和class为text的元素

-交集选择器 element.class/element#id $("h2.text") 选取所有class为text的h2元素

-全局选择器 * $("*") 选取所有元素


5、jQuery层次选择器

-$("#menu span").css("background-color","red") 获取并设置#menu下的<span>元素的背景颜色(所有)

-$("#menu>span").css("background-color","red") 获取并设置#menu下的子元素<span>的背景颜色(子元素)

-$("h2+dl").css("background-color","red") 获取并设置紧邻<h2>后的<dl>元素的背景颜色(紧邻)

-$("h2~dl").css("background-color","red") 获取并设置<h2>元素后的所有同辈元素<dl>的背景颜色(所有)


6、jQuery

-[attribute] 选取包含给定

-$("[href]") 选取含有href

-$("[href=#]") 选取href属性值

-$("[href!=#]") 选取href属性值不

-$("[href^=#]") 选取href属性值以#

-$("[href$=.jpg]") 选取href属性值以.jpg

-$("[href*=#]") 选取href属性值中含

-[selector][selecyor1] 选取满足多个条件的符合

-$("li[id][title=logo]") 选取含有id属性和title属性为logo的<li>元素



 7、条件过滤选取元素(基本过滤选择器)

 -:first 选取第一个元素 $("p:first")

 -:last 选取最后一个元素

 -:not(selector) 选取去除所有与给定选择器匹配的元素 $("li:not(.three)")选取class不是three的元素

 -:even 选取索引是偶数的所有元素

 -:odd 选取索引是奇数的所有元素

 -:eq(index) 选取索引等于index的元素,例$("li:eq(1)") eq,gt,lt

 -:gt(index) 选取索引大于index的元素

 -:lt(index) 选取索引小于index的元素

 -:header 选取所有标题元素,如h1-h6

 -:focus 选取当前获取焦点元素



 8、条件过滤选取元素(可见性过滤选择器)

 -:visible 选取所有可见元素 $("p:visible")

 -:hidden 选取所有隐藏元素 $("p:hidden")

 -隐藏元素 - display:none或visibility:hidden,前者不占空间消失,后者占空间隐藏



 9、jQuery中的事件与动画

 -addClass() 添加元素样式 [$(this).addClass("cc");]

 -removeClass() 移除元素样式

 -toggleClass() 切换不同元素的类样式

 -bind() 绑定事件

 -unbind() 移除事件

 -hide() 控制元素隐藏

 -show() 控制元素显示

 -toggle() 切换

 -fadeIn() 淡入

 -fadeOut() 淡出

 -fadeToggle() 淡入淡出切换

 -slideUp() 向上滑动元素

 -slideDown() 向下滑动元素

 -slideToggle() 滑动切换

 -animate({}) 自定义动画,$(selecter).animate({params},speed,callback);

 -jQuery animate()-操作多个属性

 position: absolute; 注意移动必须开浮动

 注意:animate()方法操作css属性,必须用Camel标记法书写

 例如:必须用paddingLeft不是padding-lefe,marginRight而不是margin-right



10、用于插入节点的四个方法

-append($newNodel) 在被选元素的结尾插入内容 $newNodel创建含

<li>元素节点

-prepend($newNodel) 在被选元素的开头插入内容 [$("ol").append("

<li>插入项</li>");]

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

-before($newNodel) 在被选内容前插入内容



11、jQuery中用于删除的方法

-remove() 删除被选元素及其子元素 [$("div").remove();]

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

-区别:remove是删除了整个节点,而empty是删除了节点中的内容



12、节点的遍历

-遍历子代元素

-children() 获取元素的所有子元素,不考虑其他后代元素

-语法:$(selector).children([expr]);

-参数expr是可选的,用于过滤子元素的表达式

$("div").children("p.1"); //返回类名为"1"的p元素,它们是div的直接子元素

$(".box1").children().css(""); //给box1的所有直接子元素设置css样式



-遍历同辈元素

-next([expr]) 获取紧邻被选元素之后的元素,参数expr可选,用于过滤同辈元素的表达式

-$("li:eq(1)").next().css() //为紧邻索引为1的下一个li元素设置css样式



-prev([expr]) 获取紧邻被选元素之前的元素

-$("li:eq(1)").prev().css() //为紧邻索引为1的前一个历元素设置css样式



-siblings([expr]) 获取被选元素的所有同辈元素

-$("li:eq(1)").siblings().css() //为索引为1的li的所有同辈元素设置css样式



-遍历前辈元素

-parent() 返回被选元素的直接父元素,该方法只会向上一级对 DOM 树进行遍历

-$("span").parent(); 返回span的直接父元素



-parents() 返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)

-$("span").parents(); 返回span的所有父元素



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

-$("span").parentsUntil("ul"); 返回介于span和ul之间的所有祖先元素



13、表单验证

-JavaScript Array indexOf()方法 [检索邮箱里是否含有@和.]

-indexOf()方法可返回数组中指定元素的位置,也可以检索字符串是否含有某元素

-如果在数组中或字符串中没有找到该元素,则返回-1

-语法:array.indexof(citem,start)

参数:item:(必须)查找的元素

参数:start:(可选)开始检索的位置,取值索引,无参数从0开始

-if(e.indexOf("@",0)==-1) 意为检索字符串e,是否包含字符串@,若有则返回一个>=0的下标索引,没有返回-1



-substring()方法 [用于截取单个字符,如验证名字里是否含有数字,每个字分别获取]

-substring()方法用于提取字符串中介于两个指定下标之间的字符(通过下标(索引)从被选字符串中返回一个子字符串)

-语法:string.substring(from,to)

参数from:(必须)非负整数,规定要提取子串的第一个字符在string Object中的位置

参数to:(可选)非负整数,比要提取的子串的最后一个字符在string Object中的位置多1

若省略第二个参数,则这回的子串会一直到字符串的结尾



-isNaN()函数用于检查其参数是否是非数字值

如果参数是NaN、字符串、对象、underfind等非数字值则返回true,否则返回false

jQuery知识总结

标签:移除   animate   偶数   last   遍历   开头   语法   ddc   焦点   

原文地址:https://www.cnblogs.com/hjxmn/p/13823109.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!