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