注意：一下操作只有针对jQuery对象才有用。
一.获取和设置DOM属性
1. $("li").attr("class") 获取li的class属性 只能获取第一个
解决方法 用map遍历 index下标 ele是对用dom 下面可以用this代替
$("li").map(function (index,ele) {
console.log($(ele).attr("class"));
})
2.设置属性 【$(this).index() 获取索引】
$("li").attr("class","classname")或者
$("li").attr({
"class":"classname",
"id":"box"
})
demo:点击不同 li 显示不同的图片
$("li").click(function () {
var index=$(this).index()+1 两种方法都可以
var index=$("li").index($(this))+1 这个可以用来接收li的索引值
$(".gg img").attr("src","http://m.jjchfcyy.cn/zt2/zt"+index+".jpg") })
引申：
固有属性：id class src href title type alt value
.attr支持固有和自定义 ，
.prop 只支持固有（判断checkbox动态返回true和false）
<input type="checkbox" checked="checked">
console.log($("input:checkbox").prop("checked")) 返回true
二 html 代码 文本 值 【改和查】
1. text() - 取值和赋值都是一组，超级重要，要修改请深入修改 面对谁修改
$(".kk").text("文本") 括号没参数就是取值
html() - 取值和赋值（带html标记）[碰到对象的话 取值第一个]
val() - 设置或返回表单字段的值 $("input").val()
2.包裹：
$("ul").wrap("<div class='wrap'></div>"); 把所有的ul 用div分别包起来
$(".cc").unwrap(); 把这个cc的父级去掉
$(".cc").wrapAll("<div></div>"); 所有的.cc 包一起
$(".dd").wrapInner("<div></div>"); 把.dd的内容用div包起来
三 增加和删除
1. 父子之间插入
$li=$("<li>内容</li>")
var son=$("<img src="+"https://www.baidu.com/img/baidu_jgylogo3.gif"+">")
$(".father").prepend(son) 插在前面 $(".father").append(son) 插在后面
$(son).prependto(".father") 插在前面 $(son).appendto(“.father”) 插在后面
父节点.prepend（子节点） 父节点.append（子节点）
子节点.prependto（父节点） 子节点.appendto（父节点）
2.兄弟元素之间插入
旧节点.after（新节点），新节点.insertAfter（旧节点）
$(".p2").after($("<span/>")) .p2的后面放span 这么理解
$("<span/>").insertAfter($(".p2")) 把span放到 p2的后面 [insert 是插入的动作]
before也是如此
$("b").clone() 复制一个b标签 随便可以用来插入别的地方 3. 元素删除
$(".father img").remove(); 谁调用.remove() 就删谁
$a=$(".p2").remove(); 删完之后 用$a来接收，
$(".ab").remove(".dd") 同时满足 class ab和dd的元素删除
$a.insertAfter(".p3"); 把接收的东西插入到p3
$(".p4").empty(); 这个是清空p4下所有的节点和文字，儿子孙子什么的都清空 只留下p4
4.替换
$(".dd").replaceWith("<span class="+"dd"+">155</span>") 把前面的替换为后面的
$("<span class="+"dd"+">155</span>").replaceAll(".dd")
旧节点.replaceWith（新节点） 新节点.replaceAll（旧节点）
5.复制 节点
$("ul li").click(function () {
$(this).clone().appendTo("ul");})
六 常用css的属性 【改和查】
1.$("img").offset().left 和top 可以获取 也可以改变 这个是相对视口
$("img").offset({ left:600,top:300})
非定位元素 获取坐标
$("img").offset().left+" "+$("img").offset().top; 可以制作跟随鼠标的效果
2.$("img").position() 只可以获取 不能设置
有定位之后 在空中一般用这个 位置变动
$("img").position().left+" "+$("img").position().top;
注意 $.position().left 这个才是获取 css中left的值
3.$("img").height(500) 这个是给高度设置500 ，不设置参数就是获取高度
$("img").css("width") 和这个一样 这个返回的带px css带单位
width（）content，
innerWidth（）content+padding，
outerWidth() content+padding+border，
outerWidth(true) content+padding+border+margin，
$(window).scroll(fun)
$(window).scrollTop()获取屏幕滚动的高度
$(window).height()获取屏幕可视区域的高
$(document).height() 获取文档的高度 滚动条也包含
4. 来回切换class
$("button").click(function(){
$("p").toggleClass("main");
});
点击4次 切换一次
var count = 0;
$(document).ready(function(){
$("button").click(function(){
$("p").toggleClass("main", count++ % 4== 0);
});
});
1. hasClass（“class”） 判断是否有这个class
2. addClass（“class”）增加， removeClass（“class”）删除，toggleClass（“cc”）有就删cc，没有增加cc。
$("li").click(function () {
$(this).toggleClass("bb")
})
$("li").click(function () {
if ($(this).hasClass("bb")) {
$(this).removeClass("bb")
}else{
$(this).addClass("bb")
}
})
$("li").click(function () {
if ($(this).attr("class")=="aa") {
$(this).addClass("bb")
}else{
$(this).removeClass("bb")
}
})