1. id 选择器 #
class 选择器 .
标签 选择器 标签名
群组 选择器 用逗号隔开
全局 选择器 *
2. 后代 元素 选择器 空格
子代 元素 选择器 >
紧邻同辈 元素 选择器 +
相邻同辈 元素 选择器 ~
3. first() 第一个
last() 最后一个
even() 奇数个
odd() 偶数个
eq() 指定的那一个（下标）
gt() 大于本元素的（下标）
lt() 小于本元素的（下标）
4. 表单域 选择器 :表单名
5. 表单对象属性选择器
获取选中的复选框元素 :checkbox:checked
获取选中的单选框元素 :radio:checked
获取选中的下拉框元素 option:selected
6. 属性选择器
普通包含选择器（包含id属性的元素）:标签名[id]
属性等于选择器 [id=XXXXX]
复合属性选择器 [value=''][id]
7. 搜索父元素
父 元素 parent()
祖先元素 parents()
搜索同辈元素
上一个 prev()
下一个 next()
所有 siblings()
搜索子元素
children()
过滤操作
filter
例如：console.log($(":input").filter("[id]"));
过滤出input有id的
map
例如：$(":checkbox:checked").map(function (){return $(this).val();}).get().join(",");
多选框数值的接收
8. 内部追加
内部向前追加 【prepend】
内部向后追加 【append】
外部追加
外部向前追加 【before】
外部向后追加 【after】
9. 删除
删除节点 remove
清空节点 empty
10.元素内容
操作HTML
//设置p中的html内容
$("p:first").html("<a href='#'>跳转</a>");
//获取p标签中的html内容
var t=$("p:first").html();
console.log(t);
操作文本
//获取p标签中的文本
var m=$("p:first").text();
console.log(m);
//设置p标签中的文本
$("p:first").text("<a href='#'>跳转</a>");
操作值
//获取和设置单标签input元素的值
//获取id和name的元素的value属性的值
var name = $("#name").val();
console.log(name);
//设置id是btn的元素的value属性的值
$("#btn").val("提交");
元素属性
//读取和修改属性
//.attr("属性名","属性值");
//读取id为name的type属性值
var zhi = $("#name").attr("type");
console.log(zhi);
//修改id为name的type属性值为button
$("#name").attr("id","button");
//删除id是name的value属性
$("#button").removeAttr("value");
元素样式
//添加样式类 addClass
$("#btn").addClass("c");
//移除样式类 removeClass
//$("#btn").removeClass();
//是否包含样式类 hasClass
var flag = $("#btn").hasClass("c");
console.log(flag);
元素css
//设置css样式
//1.链式操作
$("div").css("width","100px").css("height","100px").css("background-color","red");
//2.对象
$("div").css({"width":"200px","height":"200px","background-color":"green"});
//读取css样式
console.log($("div").css("width"));
console.log($("div").css("background-color"));
//元素css位置
//position:获取当前元素相对于父元素的偏移
var position = $("div").position(); console.log(position);
//元素css尺寸
//width
console.log($("#button").width());
//height
console.log($("#button").height());
//innerWidth
console.log($("#button").innerWidth());
//innerHeight
console.log($("#button").innerHeight());
//outerWidth
console.log($("#button").outerWidth());
//outerHeight
console.log($("#button").outerHeight());