注意：一下操作只有针对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”） 判断是否有这个class2. 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") } })
转载于:https://www.cnblogs.com/nice2018/p/9939617.html
