JQuery 总结（4） DOM操作

注意：一下操作只有针对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）

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")
}
})