JQEURY 基础功法(内功增强)
使用JQEURY的原因:1.轻量级的封装2.简洁的语法3.跨平台的兼容性4.版本的支持性5.强大的选择器6.完善的事件处理机制基本选择器:$("#test")选取id为test的元素$(".test")选取class为test的元素$("input")选取input所有标记为<input>的元素$("*")选取所有元素层次选择器:$("from input")选取from表单中所有的input元素$("div>span")选取div下所有span元素$("div+p")选取紧跟在div后面的p元素$("div~p")选取div后面所有的p元素过滤选择器:(过滤选择器都是以冒号(:)开始): not() - $("input:not(.test)") 选取class不是test的input元素: first - 选取第一个元素: last - 选取最后一个元素: even - 选取索引是偶数的元素: odd - 选取索引是奇数的元素: eq(index) - $("input:eq(1)") 选取索引为index的input元素: gt(index) - 选取索引大于index的元素: lt(index) - 选取索引小于index的元素内容过滤器:: contains(text) - 选取内容中含有text的元素: empty - 选取不包含子元素和文本的空元素: has(selector) - 选择含有选择器所匹配的元素: parent - 选取含有子元素或文本的元素可见性过滤器:: hidden - 选取所有不可见元素: visiable - 选取所有可见元素属性过滤选择器: : $("div") 选择拥有id属性的div元素 : 选择拥有value属性的元素 : 选择没有value属性的元素 : 选择属性的值以value开始的元素 : 选择以value结束的元素 : 选择属性值中含有value的属性以上过滤器可以合用 : 例 - $("div") 删除li中title的值等于name的元素empty() 清空内容属性操作:attr("attributeName") : 获取属性的值attr("attributeName","value") : 给指定的属性赋值removeAttr("attribute") : 删除某个属性操作样式 (style):css() : 设置样式addClass() : 追加样式removeClass("") : 移除样式toggle() : 切换样式toggleClass() : 样式上的重复切换设置HTML,TEXT,VALUEhtml() : 等价于innerHTMLtext() : 等价于innerTextval() : 获取元素的值,等价于value属性遍历节点:children() :所有子元素next() : 紧邻在后面的同辈元素prev() : 紧邻在前面的同辈元素siblings() : 紧邻前后所有的同辈元素JQUERY中的事件:blur,focus,load,resize,scroll,click,dbclick,mousedown,mouseup,mouseover,mouseout,change,select,submit,keydown,keypress,keyup合成事件:hover(enter,leave) : 当鼠标悬停在元素上时,触发第一个函数,当鼠标离开时触发第二个函数toggle(function(),function()) : 鼠标连续点击时触发的事件JQUERY 动画效果:show() : 显示元素,如果不带参数,等价于:dispaly:blockshow(毫秒数) : 设置元素显示的频率hide() : 隐藏元素hide(毫秒数)fadeIn() : 改变元素的透明度来让元素显示fadeOut() : 改变元素的透明度让元素隐藏slideUp() : 调整元素的高度来控制元素的显示slideDown() : 调整元素的高度来控制元素的不显示animate() : 一种自定义动画方式JQEURY 对表单,表格的操作:"对checkbox的操作" $(":checkbox").each(function(){$(this).attr("checked",!$(this).attr("checked"));})"对表格的操作:隔行变色"$("tr:odd").addClass() : 给奇数行添加背景色$("tr:even").addClass() : 给偶数行添加背景色
页:
[1]