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
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
