JQEURY 基础功法(内功增强)

newerdragon

使用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 - 选取所有可见元素属性过滤选择器:[attribute] : $("div[id]") 选择拥有id属性的div元素[attribute=value] : 选择拥有value属性的元素[attribute!=value] : 选择没有value属性的元素[attribute^=value] : 选择属性的值以value开始的元素[attribute$=value] : 选择以value结束的元素[attribute*=value] : 选择属性值中含有value的属性以上过滤器可以合用 : 例 - $("div[id=test][class!=.test")子元素过滤器:: nth-child(index/even/odd) - 选择每个父元素下第一个index元素 (注意:是第几个,不是索引): first-child - 选择每个父元素的第一个元素: last-child - 选择每个父元素的最后一个元素: only-child - 匹配唯一的子元素,如果父类拥有多个子元素将不被匹配表带对象过滤器:: enabled - 选取所有可用元素: disabled - 选取所有不可用的元素: checked - 选取所有被选中的元素: selected - 选取所有被选中元素表单选择器:: input - 选取所有的<input> <textarea> <select> <button> 元素: text - 选取所有的单行文本框: password - 选取所有密码框: radio - 选取所有单选框: checkbox - 选取所有复选框: submit - 选取所有提交按钮: image - 选取所有图片框: reset - 选取所有的重置按钮: file - 选取所有的文件域: hidden - 选取所有隐藏域JQUERY 对 DOM 的操作:(查找元素)$("ul li:eq(1)") : 获取ul里面第2个<li>元素$("p").attr("align") : 获取<p>元素align属性的值(创建节点)使用$()来创建节点:$("<li></li>")创建带属性的节点:$("<p align='center'></p>")插入节点:append : 向元素内容后面添加元素例 - "html代码" : <p>test</p>$("p").append("<font size='6'>test</font>");结果 : <p>test<font size='6'>test</font></pappendTo(B) : append的一个反向操作$("<font size='6'>test</font>").appendTo("p") : prepend : 向匹配元素内容前添加内容$("p").prepend("<font size='6'>test</font>") 结果:testHelloprependTo : prepend的反向操作after : 向每个匹配元素内容后插入元素insertAfter : after 的反向操作before : 向每一个匹配元素内容前插入元素insertBefore : before的反向操作(删除元素)remove : $("ul li:eq(1)").remove() 删除ul中第2个<li>标签$("ul li").remove("li[title=name]") 删除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的操作" $("[name=likes]:checkbox").each(function(){$(this).attr("checked",!$(this).attr("checked"));})"对表格的操作:隔行变色"$("tr:odd").addClass() : 给奇数行添加背景色$("tr:even").addClass() : 给偶数行添加背景色