隔行换色: 全选全不选:
分析:
1、页面加载 $(function(){})
2、获取所有奇数行数 添加css样式
3、获取所有偶数行数 添加css样式
属性和CSS
对属性进行操作
attr()设置或者获取元素的属性
方式一
attr("获取属性名称");
方式二
attr("属性名称","属性值");
方式三
设置多个属性 json
attr({
"属性1":"值",
"属性2":"值",
"属性3":"值"
})
移除指定属性
removeAttr("获取属性名称");
CSS
attr("class","值");
addClass("添加指定样式");
removeClass("一处指定样式");
对CSS进行操作:style样式
css(); 括号里不写值就是获取 写值就是设置css样式
方式一:css("属性名");
方式二:css("属性名称","属性值");
方式三 :设置多个值用 json
css({
"属性1":"值",
"属性2":"值",
"属性3":"值"
})
获取元素尺寸:
-----------------------------------------------------------------------------------------------------
//给元素添加属性
var $username = $("name='username'");
$username.attr("title","姓名");
//获取元素的属性
---->$username.attr("title");
//添加value和class属性
$username.attr({"value":"张三" "class":"textClass"})
//删除username的class属性
$username.removeAttr("class");
//给username添加一个名为textClass的样式
$username.addClass("textClass"); -----textClass 为已经写好的 里面有背景颜色的属性
//删除username的textClass的样式
$username.removeClass("textClass");
//给div添加边框样式
var $div = $("div");
$div.css("border","1px solid red");
//获取div的表框样式
$div.css("color"); -=-=-=-=-=-=-=- 获取得到的rgb的格式
//给div添加多种样式
$div.css({
"width":"200px","height":"100px","background-color":"red"
})
//获取div的位置
$div.offset().left ---- 距离左的举例
$div.offset().width() ---获取div的宽度
$div.offset().height() ---获取div的高度
==========================================================
隔行换色
<!--错误率较高-->
$(function(){
$("tr:gt(0):odd").css("background-color","red");
$("tr:gt(0):even").css("background-color","yellow");
})
第二种:
$("tr:gt(0):odd").addClass("odd");
$("tr:gt(0):even").addClass("even");
然后再odd里面和even 的 class类里面写颜色的样式。
-----------------------------------------------------------------------------------------------------全选和全不选
要求:上面复选框状态与下面一组复选框保持一致
分析: 1、复选框点击事件
2、函数:
a.获取复选框选中状态 attr true false
b. 获取下面所有复选框状态,让他们与第一个复选框一致
注意:
jQuery版本1.6以上 使用 prop来操作联合属性
==========================================================
例子:
<input type="checkbox" id = "selectAll" />
<input type="checkbox" class="itemSelect" />
<input type="checkbox" class="itemSelect" />
//首先获得
$(function(){
$("#selectAll").click(function(){
//测试 alert($(this).prop("checked")); //选中为true 未选中为false
$(".itemSlect").prop("checked",$(this).prop("checked"));
});
})