jQuery说白了就是javascript库
关键词 $
// 第一种写法
$(document).ready(function() {
});
// 第二种
$().ready(function() {
});
// 第三种
$(function() {
// 编写功能实现代码
})
Jquery选择器
id选择器:$("#id的属性值")
类选择器:$(".class的属性值")
标签选择器:$("标签名")
并集选择器:$("选择器,选择器")
后代选择器:$("选择器 选择器")
子选择器:$("选择器 > 选择器")
属性名称选择器:$("input[type=button]")
$("选择器[属性名='值']")
$("选择器[属性名!='值']")
$("选择器[属性名^='值']")
$("选择器[属性名$='值']")
$("选择器[属性名*='值']")
首元素选择器:${选择器:first}
尾元素选择器:${选择器:last}
偶数选择器:${选择器:even}
奇数选择器:${选择器:odd}
等于索引选择器:${选择器:eq(index)}
大于索引选择器:${选择器:gt(index)}
小于索引选择器:${选择器:lt(index)}
单复选框:${:checked}
全部选中以及反选
$(function() {
$("#th").click(function() {
var th1 = $("#th").prop("checked");
// 获取全部复选框选中状态
$("tr td #th1").prop("checked", "th1");
// 获取下面的checkbox
})
// 单击下面的复选框
$("tr td #th1").click(function() {
// 第一个值,除了全选意外下面有多少个checkbox
var th = $("tr td #th1").length
// 第二个值,获取被选中的复选个数:checked
var count = $("tr td #th1:checked").length
// 判断全部复选框的值与复选框个数的值是否相等
// 则全选的checkbox设置选中状态
if (count == th) {
$("#th").prop("checked", true);
} else {
$("#th").prop("checked", false);
}
})// 反选
$("#btn1").click(function() {
// console.log(tt);
$("tr td #th1[type=checkbox]").each(function() {
this.checked = !this.checked;
var th = $("tr td #th1").length
// 第二个值,获取被选中的复选个数:checked
var count = $("tr td #th1:checked").length
// 判断全部复选框的值与复选框个数的值是否相等
// 则全选的checkbox设置选中状态
if (count == th) {
$("#th").prop("checked", true);
} else {
$("#th").prop("checked", false);
}
})
})
attr方法和prop方法
$(function() {
$("#div_0").click(function() {
// attr(属性名):可以获取到标签的属性值(非布尔值)
// attr(属性名,属性值) 用来设置标签的的属性值(非布尔值)
$("#div_0").attr("class", "div0")
})
$("input[type='button']").click(function() {
// prop(属性名) 只能获取布尔类型的值
$("input[type='checkbox']").prop("checked", "true");
})
})