学习jQuery这一篇就够了
1. jQuery的使用
在需要使用jquery的页面引入jquery核心js文件
2. Dom对象 与 Jquery包装集对象
2.1 Dom对象
通过js方式获取的元素对象（document）
var divDom = document.getElementById("mydiv");
console.log(divDom);
var divsDom = document.getElementsByTagName("div");
console.log(divsDom); // js获取不存在的元素
var spanDom = document.getElementsByTagName("span");
console.log(spanDom);
var spanDom2 = document.getElementById("myspan");
console.log(spanDom2);
console.log("==========");2.2 jquery对象
通过jquery方法获取的元素对象，返回的使jquery包装集
// 通过id选择获取元素对象 $("#id属性值")
var divJquery = $("#mydiv");
console.log(divJquery); // jquery获取不存在的元素
var spanJquery = $("#myspan");
console.log(spanJquery);2.3 DOM对象转jquery对象
// Dom对象转为jQuery对象，只需要利用$()方法进行包装即可
var divDomToJquery = $(divDom);
console.log(divDomToJquery);2.4 Jquery对象 转 Dom对象
// 获取包装集对象中指定下标的元素，将jquery对象转换成dom对象
var divJqueryToDom = divJquery[0];
console.log(divJqueryToDom);3. 基础选择器
3.1 id选择器
var mydiv = $("#mydiv1");
console.log(mydiv);3.2 类选择器
var clas = $(".blue");
console.log(clas);3.3 元素选择器
var spans = $("span");
console.log(spans);3.4 通用选择器
var all = $("*");
console.log(all);3.5 组合选择器
var group = $("#mydiv1,div,.blue");
console.log(group);4. 层次选择器
4.1 后代选择器
格式： 父元素 指定元素 （空格隔开）
示例： $("父元素 指定元素")
选择父元素的所有指定元素（包含第一代、第二代等）
// 后代选择器
var hd = $("#parent div");
console.log(hd);4.2 子代选择器
格式： 父元素 > 指定元素 （大于号隔开）
示例： $("父元素 > 指定元素")
选择父元素的所有第一代指定元素
// 子代选择器
var zd = $("#parent > div");
console.log(zd);4.3 相邻选择器
格式： 元素 + 指定元素 （加号隔开）
示例： $("元素 + 指定元素")
选择元素的下一个指定元素（只会查找下一个元素，如果元素不存在，则获取不到）
// 相邻选择器
var xl = $("#child + div");
console.log(xl);4.4 同辈选择器
格式： 元素 ~ 指定元素 （波浪号隔开）
示例： $("元素 ~ 指定元素")
选择元素的下面的所有指定元素
// 同辈选择器
var imgs = $(".gray ~ img");
console.log(imgs);5.表单选择器
表单选择器 :input 查找所有的input元素：$(":input")；
注意：会匹配所有的input、textarea、select和button元素。
文本框选择器 :text
密码框选择器 :password
单选按钮选择器 :radio
多选按钮选择器 :checkbox
提交按钮选择器 :sunmit
图像按钮选择器 :image
重置按钮选择器 :reset
文件域选择器 :file
按钮选择器 :button
7.操作元素的样式
操作元素的样式
attr("class") 获取元素的样式名
attr("class","样式名") 设置元素的样式 （设置样式，原本的样式会被覆盖）
addClass("样式名") 添加样式 （在原来的样式基础上添加样式，原本的样式会保留，如果出现相同样式，则以样式中后定义的为准）
css() 添加具体的样式（添加行内样式）
css("具体样式名","样式值"); 设置单个样式
css({"具体样式名":"样式值","具体样式名":"样式值"}); 设置多个样式
removeClass("样式名") 移除样式
css()方法设置元素样式
天蓝色
大红色
天蓝色