一.基础选择器
1.Id选择器 格式：$("#id属性值") 获取指定id值的对象（只会获取到第一个id的值 /*必须会/
2.类选择器 格式：$(".class属性值") 获取所有指定class属性的属性/*必须会/
3.元素选择器 格式：$("元素名/标签名") 获取所有指定标签名的元素/*必须会/
4.通用选择器 格式：$("*") 获取所有的元素的对象
5.组合选择器 格式：$("选择器1,选择器2...")
例子：
1.id选择器
var div1 = $("#div1");
console.log(div1);
2.类选择器
var cls = $(".test");
console.log(cls);
3. 元素选择器
var divs = $("div");
console.log(divs);
4. 通用选择器
var all = $("*");
console.log(all);
5. 组合选择器
var group = $("#div1,span,.test");
console.log(group)
二.层次选择器
1.后代选择器 ancestor descendant $("#parent div")选择id为parent的元素的所有div元素
2.子代选择器 parent > child $("#parent>div")选择id为parent的直接div子元素
3.相邻选择器 prev + next $(".blue + img")选择css类为blue的下一个img元素
4.同辈选择器 prev ~ sibling $(".blue ~ img")选择css类为blue的之后的img元素
三.表单选择器
1.表单元素：文本框、密码框、单选框、复选框、文件域、隐藏域、文本域textarea、下拉框select
2.非表单元素：div、span、p、h1~h6、img、a、table
四.过滤选择器
1.:checked 选择所有被选中的元素
var checkboxs = $(":checkbox");
checkboxs.each(function(){
console.log(this);
console.log(this.checked);
});
2.:eq(index) 匹配指定下标的元素
var second = $(":checkbox:eq(1)")
second.each(function(){
console.log(this);
});
:gt(index) 匹配下标大于指定值的所有元素
var gtfirst = $(":checkbox:gt(0)")
gtfirst.each(function(){
console.log(this);
});
:odd 选择每个相隔的（奇数） 元素
var odds= $(":checkbox:odd")
odds.each(function(){
console.log(this);
});
:even 选择每个相隔的（偶数） 元素
var evens= $(":checkbox:even")
evens.each(function(){
console.log(this);
});
五.元素
1.操作元素属性
获取属性的值：attr(属性名称) 获取指定的属性值，操作 checkbox 时选中返回 checked，没有选中返回 undefined。 attr('checked')attr('name')
prop(属性名称) 获取具有true和false两个属性的属性值 prop('checked')
设置属性的值：
attr(属性名称,属性值);
prop(属性名称,属性值);
移除属性：removeAttr(属性名) 移除指定的属性 removeAttr('checked')
如果属性的返回值是true或false（checked、selected、disabled），使用prop()方式；其他属性使用attr();
2.操作元素样式
attr(“class”) 获取class属性的值，即样式名称
attr(“class”,”样式名”)
修改class属性的值，修改样式
addClass(“样式名”)
添加样式名称
css() 添加具体的样式
removeClass(class)
移除样式名称
例子：
attr
设置元素的class属性（如果属性不存在，则添加属性）
$("#conRed").attr("class","red");
如果属性存在，则修改属性值
$("#conBlue").attr("class","green");
addClass() 添加样式，原来的样式保留，如果出现相同的样式，以后面定义样式为准
$("#conRed").addClass("larger");
css()
添加一个具体样式 css("样式名","样式值")
$("#remove").css("color","red");
同时添加多个具体的样式名 css({"样式名":"样式值","样式名":"样式值"})
$("#remove").css({"color":"red","font-family":"楷体","background-color":"gray"})
3.操作元素内容
html() 获取元素的html内容
html("html,内容") 设定元素的html内容
text() 获取元素的文本内容，不包含html
text("text 内容") 设置元素的文本内容，不包含html
val() 获取元素value值
val(‘值’) 设定元素的value值
例子：
设置（非表单）元素的内容
包含的html标签
$("#html").html("<h3>上海</h3>");
$("#html").html("上海");
不包含html标签,只能设置纯文本
$("#text").text("<h3>上海</h3>");
$("#text").text("上海");
设置表单元素的值
$("input").val("Hello");
获取元素的值
console.log($("#getHtml").html());
console.log($("#getHtml").text());
console.log($("input").val());
4.创建元素
创建元素 $("元素内容")
添加元素
prepend(content) 在被选元素内部的开头插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(content).prependTo(selector) 把 content 元素或内容加入 selector 元素开头
append(content) 在被选元素内部的结尾插入元素或内容，被追加的 content 参数，可以是字符、HTML 元素标记。
$(content).appendTo(selector) 把 content元素或内容插入selector 元素内，默认是在尾部
before()：在元素前插入指定的元素或内容:$(selector).before(content)
after()：在元素后插入指定的元素或内容:$(selector).after(content)
5.删除元素
remove() 删除所选元素或指定的子元素，包括整个标签和内容一起删。
empty() 清空所选元素的内容
6.遍历元素
each()
$(selector).each(function(index,element)) :遍历元素
参数 function 为遍历时的回调函数，
index 为遍历元素的序列号，从 0 开始。
element是当前的元素，此时是dom元素。
六.事件
1.ready()加载事件
ready()类似于 onLoad()事件
ready()可以写多个，按顺序执行
$(document).ready(function(){})等价于$(function(){})
onload与ready()的区别：
1、ready()在DOM结构解析完毕后即执行
2、onload在DOM结构解析完毕，并且外部资源加载完毕后执行
js的onlooad事件
window.onload = function(){
var mydiv = $("#mydiv");
console.log(mydiv);}
jquery的ready事件
$(document).ready(function(){
var mydiv = $("#mydiv");
console.log(mydiv);
});
2.按钮事件
1.确定为哪些元素绑定事件
获取元素
2.绑定什么事件（事件类型）
第一个参数：事件的类型
3.相应事件触发的，执行的操作
第二个参数：函数
3种绑定简单事件:
1.js绑定事件
document.getElementById("btn").onclick = function(){
alert('这是个按钮。。。');
};
2.bind()绑定事件
$("#btn").bind("click",function(){
alert('这是个按钮。。。');
});
3.直接绑定事件(必须会)
$("#btn").click(function(){
alert('这是个按钮。。。');
});
绑定多个事件
聚焦失焦事件
方式一：
$("#txt").focus(function(){
聚焦时清空文本框
$("#txt").val("");
}).blur(function(){
$("#txt").val("你好");
});
多个事件绑定一种行为
$("#txt").bind("focus blur",function(){
console.log("。。。");
});
