操作闭合标签内容
/*
操作标签内容
1.闭合标签
$(选择器).html() 取值赋值一体
取值： $(选择器).html()
设置： $(选择器).html(值)
特点：覆盖之前已经存在的内容，识别标签
$(选择器).text()
取值： $(选择器).html()
设置： $(选择器).html(值)
特点：覆盖之前已经存在的内容，不识别标签
*/
//1.取值 $(选择器).html()
console.log($("div").html()); //<span>11</span>
//2.设置
//$("div").html("22");
//之前的+现在的
$("div").html($("div").html()+"<p>22</p>");
//3.text
console.log($("div").text()); //1122 不识别标签
$("div").text("<p>33</p>")
操作input的val
/*
原生js：
获取：var value = input.value
设置：input.value = 值
jq：
操作输入框：
获取：$(选择器).val();
设置：$(选择器).val(值);
操作选择框：
获取被选中元素的value：$(":checked").val();
设置选中元素：$(input标签).val([选中元素的val值])
*/
//1.输入框获取
console.log( $(":text").val()); //1234
//2.输入框的设置
$(":text").val("abcd");
//3.操作单选框
//获取
console.log($(":radio:checked").val());
//设置
$(":radio").val(['男']);
//4.多选
//获取
console.log($(":checkbox:checked").val());
//设置
$(":checkbox").val(['女',"玩游戏"]);
//5.下拉列表
console.log( $("select").val()); //"印度"
$("select").val(["哈尔滨"])
操作属性
/*
原生js：
设置：标签.属性名 = 属性值
获取：var 变量 = 标签.属性名
DOM：
设置：标签.setAttribute("属性名","属性值")
获取：标签.getAttribute('属性名')
可以获取自定义属性
jq：
设置：$(选择器).attr(属性名,属性值)
获取：$(选择器).attr(属性名)
删除：$(选择器).removeAttr(属性名)
设置：$(选择器).prop(属性名,属性值)
获取：$(选择器).prop(属性名)
删除：$(选择器).removeProp(属性名)
只存在true/false属性，应该使用prop
*/
//1.设置
$("div").attr("id","box1");
//2.获取
console.log($("div").attr("id"))
console.log($("div").attr("index"))//0
//3.删除
$("div").removeAttr("class");
//4.获取checked属性
console.log($("input").attr("checked")); //undefined 'checked'
console.log($("input").prop("checked"));//false true
操作class
/*
$("div").mouseover(function(){
//1.addClass
$("div").addClass("active");
});
$("div").mouseout(function(){
//1.removeClass
$("div").removeClass("active");
}); */
$("div").click(function(){
//toggleClass:开关 如果没有这个class就添加，有就删除
$("div").toggleClass("active");
});
//hasClass() : 判断当前元素是否存在某个class
console.log($("div").hasClass("box")); //有就是true 没有就是false
操作样式
原生js：
获取：var 变量 = 标签.style.属性名
设置：标签.style.属性名 = 属性值
jq：
设置：$(选择器).css(属性名,属性值)
获取：$(选择器).css(属性名)
批量操作：
设置：$("选择器").css({属性名：属性值，属性名：属性值})
特点：取值赋值一体，给的值不对，不会报错，只是这个效果无效
*/
$("div").css("background","green");
$("div").css("margin","250px"); //数字 200，字符串带单位：“200px”
//2.获取
var w = $("div").css("width");
console.log(w); //200px
//3.批量操作
$("div").css({
width:300,
height:300,
background:"orange",
fontSize:20 //可以加引号也可以不加，不加的话需要使用驼峰
});
var o = $("div").css(["width","height"]);
console.log(o); //{width: "300px", height: "300px"}
console.log(o.width); //
BOM操作属性
原生js：
style：
元素内容宽：标签.style.width
元素内容高：标签.style.height
元素的定位距离：标签.style.top
元素的定位距离：标签.style.left
client：
元素可视宽高：标签.clientWidth/Height ; 内容+padding
屏幕可视宽高：document.documentElement.clientWidth/Height
offset：
元素占位宽高：标签.offsetWidth/Height : 内容+padding+border
元素的位置：标签.offsetTop/Left 当前元素的顶部到定位父元素的距离，如果没有定位父元素到body的距离
scroll：
滚动事件：onscroll
页面的滚动：document.documentElement.scrollTop||document.body.scrollTop
jq:
style：
元素内容宽：$(选择器).width()
元素内容高：$(选择器).height()
元素的定位距离：$(选择器).position() {top: 8, left: 8}
client：
元素可视宽高：$("div").innerWidth()/innerHeight; 内容+padding
屏幕可视宽高：$(document).innerWidth()/innerHeight
offset：
元素占位宽高：标签.offsetWidth/Height : 内容+padding+border
元素的位置：标签.offset 当前元素到body的距离
scroll：
滚动事件：scroll
页面的滚动的距离：$(window).scrollTop()
增，删，改，查节点
原生js：
创建：
document.createElement(标签名) : 标签节点
document.createTextNode(文本内容) : 文本节点
添加：
追加：父元素.appendChild(子节点)
在某个元素之前：父元素.insertBefore(newChild,refChild)
删除：
标签.remove(); 删除自己本身， ie8不兼容
父元素.removeChild(子节点) ： 删除父元素中的某个子元素
替换：
父元素.replaceChild(newChild,refChild)
复制：
被复制的节点.cloneNode(boolean);
默认false：只复制标签没有内容 true：复制标签和内容
查：
获取子元素：
父节点.children; 非标准属性，只获取标签
父节点.childNodes; 标准属性，会获取到文本，标签，注释节点
获取父元素：
子节点.parentNode; 获取直接父节点
子节点.offsetParent; 获取定位父节点
获取首尾节点：
父节点.firstElementChild || 父节点.firstChild
父节点.lastElementChild || 父节点.lastChild
兄弟节点：
参考节点.previousElementSibling ||参考节点.previousSibling
参考节点.nextElementSibling ||参考节点.nextSibling
ie8+
documet.querySelector(选择器) ： 获取被选中元素的第一个
documet.querySelectorAll(选择器) ： 获取所有被选中的元素
jq：
创建： $("<li></li>")
添加：
追加：
$("父节点").append('子节点')
$("子节点").appendTo(父节点)
在头部添加
$("父元素").prepend('子元素')
$("子节点").prependTo('父节点')
在某个元素之前添加
$("参考元素").before('新元素')
$("新元素").insertBefore('参考元素')
在某个元素之后添加
$("参考元素").after('新元素')
$("新元素").insertAfter('参考元素')
删除：
$().remove():删除元素，返回被删除元素,方便下一次使用，不会保留元素上的事件
$().detach()：删除元素，返回被删除元素,方便下一次使用，会保留元素上的事件
$().empty():清空父元素中的子元素
替换：
$("被替换的元素").replaceWith('替换的元素')
$("替换的元素").replaceAll('被替换的元素')
复制：
$(被复制的元素).clone(boolean);
默认false：不会复制js中添加的事件
默认true：会复制js中添加的事件
查：
查找子元素：
$(父元素).children(选择器) ： 找直系的子元素
$(父元素).find(选择器) : 找后代 不考虑层级
找父元素：
$("子元素").parent() : 找直系父元素
$("子元素").parents()：找所有的父元素
找兄弟：
$("参考元素").next(); 下一个兄弟
$("参考元素").nextAll(); 下面所有的兄弟
$("参考元素").prev(); 上一个兄弟
$("参考元素").prevAll(); 上面所有的兄弟
$("参考元素").siblings(); 所有的兄弟
过滤：
$("li").not("#box").css("background","red"); 找到选择器选中的标签，除了
$("li").filter("#box").css("background","red"); 找到选择器选中的标签，并且
