1. 排除头部给行添加样式 例如: <table> <thead> <tr><th>姓名</th></tr> </thead> <tbody> <tr><td>梁继龙</td><td>男</td><td>广东阳春</td></tr> </tbody> </table> //实现 $(function(){ $('tbody>tr:odd').addClass('odd'); //给tbody中的奇数行添加样式 $('tbody>tr:even').addClass('even'); //给tbody中的偶数行添加样式 }); 2.普通的隔行变色 CSS代码 .even{background:#FFFFFFF} //偶数行样式 .odd{background:#FFFFFFF} //奇数行样式 实现 $(function(){ $('tr:odd').addClass("odd"); //给偶数行添加样式 $('tr:even').addClass("even"); //给奇数行添加样式 }) /*注意:$('tr:odd')和$('tr:even')选择器中索引是从0开始的,因此第一行是偶数 */ 3. 单选框控制表格行高亮 例如:给单击的当前行添加高亮,然后将它的兄弟行的高亮样式去掉,最后将当前行里的单选设置为选中 $('tbody>tr:').click(function(){ $(this).addClass('selected').siblings().removeClass('selected').end() .find(':radio').attr('checked',true); }); 4. 处理默认已经有单选框被选中 $("table:radio:checked").parent().parent().addClass('selected'); //或者 $('table:radio:checked').parents('tr').addClass('selected'); 5. 通过has选择器进一步简化,表示含有选中的单选框的<tr>行将被高度显示 $('tbody>tr:has(":checked")').addClsss('selected'); 6.复选框控制表格行高亮 注意:复选框与单选框不同,它并没有限制被选择的个数 例如:如果已经高亮了,则移除它并去掉当前复选框的选中的状态,如果没有,则添加样式并将当前行的复选框选中。 $('tbody>tr').click(function(){ if($(this).hasClass('selected')){ //判断是否有selected高度样式 $(this).removeClass('selected').find(':checkbox').attr('checked',false); }else{ $(this).addClass('selected').find(':checked').attr('checked',true); } }) //或者用三元运算实现 $('tbody>tr').click(function(){ //判断当前是否选中 var hasSelected=$(this).hasClass('selected'); //如果选中,则移出selected类,否则就加上selected类 $(this)[hasSelected?"removeClass":"addClass"]('selected') //查找内部的checkbox,设置对应的属性 .find(':checked').attr("checked",!hasSelected); }); ------------------------------------------------------------------------------------------ 表格展开关闭实例 $(function(){ $('tr.parent').click(function(){ $(this).toggleClass('selected') .siblings('.child'+this.id)+toggle(); //隐藏/显示的子行 (.chlid_+this.id)表 示.child class=".child"+某个值即:例如:.child1 或.child2 }) }); 表格的内容筛选 例如:高度显示王五 $(function(){ $("table tbody tr").hide()fileter(":contains(王五)").show(); }); ----------------表单对象属性过虑示例--------------/// 1.改变表单内可用<input>元素的值 $(#form1 input:enabled).val("这里变化了"); 2.改变表单内不可用<input>元素的值 $(#form1 input:disabled).val("这里变化了"); 3.获得多选框选中的个数 $("input:checked").length 4.获得下拉框选中的内容 $("select:selected").text(); 5.选中所有<input>、<textarea>,<select>和<button>元素 $(":input") 6.选中所有的上传域 $(":file") 7.总结:其他属性的所有选中都是$(":+属性类型") 例如: $("image") .... 8.选择第一个元素 :first $('div:first')选取所有<div>元素中第一个<div>元素 9.选取最后一个元素 :last $("div:last")选取所有<div>元素中最后一个<div>元素 10.去除所有与给定选择器匹配的元素 :not(selector) $('inptu:not(.myClass)')选取clas不是myClass的<input>元素 11.选取索引是偶数的所有元素,索引从0开始 :even $("input:even")选取索引是偶数的<input>元素 12.选取索引是奇数的所有元素,索引从0开始 :odd $("input:odd")选取索引是奇数的<input>元素 13.选取索引是等于index的元素(索引从0开始) :eq(index) $("input:eq(1)")选取索等于1的<input>元素 14.选取索引是大于index的元素(索引从0开始) :gt(index) $("input:gt(1)")选取索大于1的<input>元素 //注意:大于1,而不包括1 15.选取索引是小于index的元素(索引从0开始) :lt(index) $("input:lt(1)")选取索小于1的<input>元素 //注意:小于1,而不包括1 16.选取所有的标题元素,例如h1 h2.... :header $(":header")选取网页中所有的<h1>.... 17.选取当前正在执行动画的所有元素 :animated $('div:animated')选取当前正在执行动画的<div>元素 //-----------------------事件绑定方法和方法的使用----------------------- bind()方法 bind(type[,data],fn); 合成事件 1.hover()方法 语法: hover(enter,leave); hover()方法 准确来说代替bind("mouseenter") and bind("mouseleave")而不是代替bind("mouseover"); and bind("mouseout") 2. toggle()方法 语法 toggle(fn1,fn2,fnN); fn1 到fnN依次被触发直到完毕 3 .event.stopPropagation() //停止事件冒泡 4.event.preventDefault() //阻止默认行为 5. event,target()方法 作用于是获取触发事件的元素 alert(event.target.href) //获取触发事件的<a>的href属性值 6. event.relateTarget()方法 mouseover和mouseout所发生的元素可以通过event.target()方法来访问 event.relateTarget()方法在mouseover中相当于IE浏览器的event.fromElement()方法 在mouseout中相当于IE浏览器的event.toElement()方法 7.event.pageX()方法和event.pageY()方法 作用是获取到光标相对于页面的x坐标和y坐标 注意:如果没有使用jquery时,IE浏览器是用event.x()/event.y()方法,而Firefox浏览器中用.event.pageX()/event.pageY()方法 8.event.which()方法 作用是在鼠标事件中获取到鼠标的左,右,中键.在键盘事件获取键盘的按键 $( function(){ $("body").mousedown(function(e){ alert(e.which); //1=左键 2=中 ,3=右 }) }) 9.event.metaKey()方法 针对不同浏览器对键盘中的<ctrl>按键解释不同,在jquery并规定event.metaKey()方法为键盘事件中获取<ctrl>按键 10.event.originalEvent()方法 作用指向原始的事件对象 11.fadeIn()和fadeOut()方法 .fadeIn()和fadeOut()只是改变元素的不透明度 fadeOut方法会指定的一段时间降低元素的不透明度,直到元素完全消失,而fadeOut()刚相反 12.slideUp()和slideDown()方法 只是改变元素的高度,如果一个元素的display属性值为none当调用slideDown()时,这个元素将会由上至下延伸显示,slideUp正好相反,从下到上缩短隐藏. 1.offset()方法 它的作用是获取元素在当前视窗的相对偏移 例如: var $offset=$('p').offset(); //获取<p>元素的offset() var $left=$offset.left; //获取左边偏移 2.position()方法 作用是获取相对于最近的一个position样式属性为relative或absolute的祖父节点的相对偏移,与offset()一样 它返回的对象也包括两个属性,即top和left 例如: var $p=$('p').position() ; //获取<p>元素的position var $left=$p.left/top; //获取左边/头的偏移 3.scrollTop()和scrollLeft()方法 它们的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离 var $p=$('p'); var $sT=$p.scrollTop(); //获取元素的滚动条距顶端的距离 var $sL=$p.scrollLeft(); //获取元素的滚动条距左侧的距离 //或者指定参数 $('textarea').scrollTop(300 ); //元素的垂直滚动条到指定的位置 3-1-1 1.使用HTML-DOM来获取表单对象的方法 document.forms //html-dom提供一个forms对象 2.使用HTML-DOM来获取元素的SRC属性的方法 element.src 3-2-1 找节点 var $li = $("ul li:eq(1)"); //获取<ul>里第二个<li>节点 3-2-2 查找属性节点 ** attr() 方法可以获取各种属性的值,并且方法可以放参数 eg: var $p=$("p"); //获取<p>节点 var p_txt=$p.attr("title"); //获取<p>元素节点属性title 3-2-3 创建节点 例如:创建<li> </li>子节点到<ul> 下方 var $li=$("<li></li>"); //创建了一个子节点 $("ul").append("$li"); //把子节点添加到<ul>下方 **** 注意: 1.动态创建的新元素节点不会被自动添加到文档中. 2.当创建单个元素时,要注意闭合标签和使用标准的XHTML格式.例如:创建 一个<p>元素,可以用$("<p/">)或者$("<p></p>"),但是不要使用$("<p>")或者大写$("P/"); 插入节点的方法 1 append() 向每个匹配的元素内部追加内容 eg: html代码: <p>我想说:</p> jQuery代码 $("p").append("<b>你好</b>") 结果: <p>我想说:<b>你好</b><p/> 2 appendTo() 将所有匹配的元素追加到指定的元素中实际上,颠倒了常规$(A).append(B)的操作即不是将B追加到A中,而是将A追加到B中 eg: html代码: <p>我想说:</p> jQuery代码 $("<b>你好</b>").append("p") 结果: <p>我想说:<b>你好</b><p/> 3.prepend() 向每个匹配的元素内部前置内容 eg: html代码: <p>我想说:</p> jQuery代码 $("p").prepend("<b>你好</b>"); 结果: <p><b>你好</b>我想说:<p/> 4 prependTo() 将所有匹配的元素前置到指定的元素中实际上,颠倒了常规$(A).append(B)的操作即不是将B前置到A中,而是将A前置到B中 eg: html代码: <p>我想说:</p> jQuery代码 $("<b>你好</b>").append("p") 结果: <p>我想说:<b>你好</b></p> 5.after()在每个匹配的元素之后插入内容 html代码: <p>我想说:</p> jQuery代码 $("p").after("<b>你好</b>"); 结果: <p>我想说:</p><b>你好</b> ------------------------------------------复选框、下拉框------------- //全选 $("#checkedAll").click(function(){ //checkedAll被点击的ID $('[name=items]:checkbox').attr('checked',true) //items被选name }) //全不选 $("#checkedNo").click(function(){ //checkedNo被点击的ID $('[name=items]:checkbox').attr('checked',false) //items被选name }) //反选 $("#checkedReturn").click(function(){ //checkedReturn被点击的ID $('[name=items]:checkbox').each(function(){ //each是遍历循环 $(this).attr("checked",!$(this).attr("checked")); }) }) 或者 $("checkedReturn").click(function(){ $('[name=items]:checkbox').each(function(){ this.checked=!this.checked; }) }); //弹出被选的提交 $("#send").click(function(){ var str="你 选中的是:\r\n"; $('[name=items]:checkbox:checked').each(function(){ str +=$(this).val()+"\r\n"; }); alert(str); }); $('[name=items]:checkbox').click(function(){ var $st=$('[name=items]:checkbox'); $('#che').attr('checked'),$st.length==$st.filter(':checked').length }); ----------------------------------------------------------------- 假设将左边的选项添加到右边 $('#add').click(function(){ //dblclick --双击事件 var $options=$('select1 option:selected'); //获取选中的选项 // var $remove=$options.remove(); //删除下拉框列表中选中的选项 $remove.appendTo("select2");; //追加给对方 }); ------------------------------------------------------------显示和隐藏效果----------- 1.show()和hide()方法让元素动起来 例如:指定一个速度关键字slow /normal /fast $("element").show("slow"); 2.指定时间使元素在时间内显示/;隐藏 $("element").show(1000); $("element").hide(1000); 3.next的使用 $(this).next("div.content").hide(500); 4.自定义动画animate() 语法:animate(params,speed,callback); 说明: parms:一个包含样式属性及值的映射,例如:{property1:"value1", ..........} speed:速度参数,可选 callback:在动画完成时执行的函数,可选 5.累加和累减动画 "+ =" 或 "- ="表示在当前位置累加/减 $(function(){ $("#pane1").click(function(){ $(this).animate({left: "+=500px"},300); //在当前位置累加500px }); }); 6.多重动画 A. 同时执行多个动画 eg: 在元素向右滑动的同时,放大的高度. $(function(){ $("#myImag").click(function(){ $(this).animate({left:"500px",height:"200px"},3000); //或者 //$(this).animate({left:"500px"},3000).animate({height:"200px"},3000); }) }) 7.综合动画 单击<div>向右移动并增大高度,将它的不透明从50%变换到100%,然后让它从上到下移动,同时它的宽度变大 当完成这些效果,让它以谈出的方式隐藏 $(function(){ $("#pane1").css("opacity","0.5"); //(opacity)设置不透明度 $("#pane1").click(function()){ $(this).animate({left:"400px",height:"200px",opacity:"1"},3000) .animate({top:"200px",with:"200px"}, 3000).fadeOut("slow"); } }) 8.停止动画和判断是否处于动画状态 语法:stop([clearQueue][,gotoEnd]); clearQueue代表是否要清空未执行完的动画队列, gotoEnd代表是否直接将正在执行的动画跳转到未状态 -----------层次选择器---------- 选择器 1.$('ancestor descendant') 选取ancestor 元素里的所有descendant(后代)元素 $('div span')选取<div>里的所有的<span>元素 2.$('parent>child') 选取parent元素下的child(子元素)与$('ancestor descendant') 有区别,$('ancestor descendant')选择后代元素 3.$('prev+next') 选择紧接在prev元素后的next元素 $('.one+div')选取class为one的下一个<div>元素 4.$('prev~siblings') 选取prev元素之后的所有siblings $('#two~div')选取ID为two的元素后面的所有<div>兄弟元素 -------------------------------------------------------------选择器的认识----------------------------------- //注意: 1.3.1版本彻底放弃1.1.0版本遗留下的@符号,如果使用1.3.1以上的版本 那么不能在属性前添加@符号 Eg: $('div[@title="test"]') //这是错误的 $('div[title="test"]') //这是正确的 1.带空格的选择器与不带选择器的区别 eg: var $a=$('.test :hidden'); var $b=$('.test:hidden'); 输出长度 var $a_len=$a.length; //输出4 var $b_len=$b.length; //输出3 选择器 1. #id根据给定ID匹配一个元素,返回单个元素 2 .class根据给定的类名匹配元素,返回集合 3. element根据给定的元素名匹配元素,返回集合 $('p') //选中所有的<p>元素 4. *匹配所有元素,返回集合 5. selector1,selector2,...将每一个选择器匹配到的元素合并后一起返回 $('div,span,p.myClass')选取所有<div>,<span>,和拥有class为myClass的<p>标签的一组元素 1.改变id为one的元素的背景 $('one').css("background","bEEEEE"); 2.改变class为mini的所有元素的背景色 $('.mini').css("background","bEEEEE"); 3.改变元素名是<div>的所有元素的背景 $('div').css("background","bEEEEE"); 4.改变所有元素的背景色 $('*').css("background","bEEEEE"); 5.改变所有的<span>元素和id为two元素的背景色 $('span,#two').css("background","bEEEEE"); //$('prev+next')选择器与next()方法等价关系 $('.one+div') 等价 $('.one').next("div"); $('#prev+div') 等价 $('#prev').nextAll("div"); triggerHandler和trigger区别.txt 1.trigger("blur')不仅会触发为元素邦定的blur事件,也会触发浏览器默认的blur事件,即不能将浏览器光标定位到文本框上,而triggerHandler("blur")只会触发为元素邦定的blur事件,而不会触发浏览器默认的的blur事件 2.执行默认操作 如果只想触发绑定的focus事件,而不想执行浏览器默认操作用 triggerHandler()方法 $("input").triggerHandler("focus"); $("div").trigger("click!"); //感叹号的作用是匹配所有不包含在命名空间中的click方法 ---------------------------1.移除事件--------------- 1.移除所有click事件 $('#delall').click(function(){$("#btn").unbind("click")}); 或者$("delall").click(function(){$("#btn").unbind()}) 2.移除单个事件 $("delOne").click(function(){$("#btn").unbind("click",myOnes)}) 3.移除节点,remove()和empty() 1).remove()方法的作用是从DOM中所有匹配的元素,传入的参数用于根据jquery表达式来筛选元素 Eg:从<ul>节点中的第二个<li>元素节点 $('ul li:eq(1)').remove(); //获取第二个<li>元素节点后,将它从网页中删除 //或者删除之后再重新添加到<ul>元素里 var $li=$('ul li:eq(1)').remove(); $li.appendTo('ul'); //添加/追加到Ul元素里 2).empty()方法并不是删除节点,而是清空,它能清空元素中的所有的后代节点 $('ul li:eq(1)').empty(); 1.查找元素节点 var $li==$('ul li:eq(1)'); //获取<ul>里第2个<li>节点 var li=$li.text(); //获取第2个<li>元素节点的文本内容 2.查找属性节点 var $p=$('p'); //获取<p>节点 var p_txt=$p.attr('title'); //获取<p>元素节点属性title