一、css()

---

//css( )直接写属性名称是获取属性值，如果改多个属性值需要加{ }，如果不加{ }可以单独修改

alert($("#div1").css("width"))//200px  获取值，有单位

$("#div1").css("width","400px")//单一设置属性值

//加{}修改多个值

$("#div1").css({

height:400,

border:"4px solid orange",

})

---

二、jQ中的宽高

$(document).on("click", function() {

//1.width()这个方法只能获取css中设置的width这个属性的值，并不是元素的显示宽度

//height()这个方法也是一样的

//alert($("#div1").width())  //200  没有单位

//width()里面不写参数是获取，写上参数是设置

//$("#div1").width(400);

//2.outerWidth()相对于width()包含了边框和padding值

//outerHeight()也是一样的

//outerHeight()和outerWidth()括号内部提供了一个可选参数true，如果加上true，则margin值也会被计算在内

alert($("#div1").outerWidth())//240  没有单位

alert($("#div1").outerWidth(true))//280 没有单位

})

---

三、offset()

$(document).on("click",function  () {

//offset()方法获取的是，元素距离文档的偏移量，不考虑父级元素

alert($("#content").offset().left)  //250  没有单位

alert($("#content").offset().top)  //250  没有单位

})

---

四、position()

$(document).on("click",function(){

//position()获取元素本身距离 定位的 父级的 偏移量

alert($("#content").position().left) // 50  没有单位

alert($("#content").position().top) // 50  没有单位

//offsetParent()获取或者设置最近的定位父级元素

$("#content").offsetParent().width(400);

})

---

五、scrollLeft&scrollTop

$(document).on("click", function() {

//console.log($("#wrap").scrollLeft())

//console.log($("#wrap").scrollTop())

//不写值就是获取，写值就是设置

$("#wrap").scrollLeft(500);

//this.title = $("#wrap").scrollLeft();

});

---

六、插入添加节点

var  num=0;

$(document).on("click", function() {

num++;

//首先创建一个li

var li=$("<li>"+num+"</li>");

//1.添加在ul内部后面的方法

//让父级元素执行添加

//$("#ul1").append(li);

//让子级元素执行添加

//li.appendTo($("#ul1"))

//2.添加在ul内部前面的方法

//让父级元素执行添加

//$("#ul1").prepend(li)

//让子级元素执行添加

//li.perpendTo($("#ul1"))

//3.添加在同级以下，紧挨着

//后添加的元素在上面

//$("#ul1").after(li)

//后添加的元素在上面

//li.insertAfter($("#ul1"))

//4.添加在同级以上，紧挨着

//后加的元素在下面

//$("#ul1").before(li)

//后加的元素在下面

li.insertBefore($("#ul1"))

})

---

七、删除节点

$(document).on("click", function() {

//remove()方法将自身以及自身内部的所有元素全部删除

//$("#ul1").remove();

//empty()方法将自身内部的元素删除，而自身不会被删除

//$("#ul1").empty();

})

---

八、替换节点

$(document).on("click",function  () {

var newP=$("<p>哎呦诶</p>");

//replaceAll()替换，替换的参数为选择器，通过给定的选择器决定被替换元素

//可以替换多个，也可以替换一个

//newP.replaceAll("p")

//newP.replaceAll("#love")

//newP.replaceAll("p:eq(0)")

//newP.replaceAll("p:first")

})

---

九、复制节点

$(document).on("click", function() {

//jq中的复制，自身和子元素都会被复制，

//如果不传入参数js属性不会被复制

//如果传入参数true会把js事件复制过来，而false没有什么具体意义

var a = $("#baidu").clone();

$("#box").append(a)

})

---

十、遍历节点

$(document).on("click", function() {

//1.children()获取子元素集合，不传入参数，所有子元素，

//还可以通过选择器获取某个或者某些子元素

//console.log($("#box").children())

//获取子元素是p的元素

//console.log($("#box").children("p").length)

//console.log($("#box").children("div:eq(0)"))

//var div = $("#box").children("div:eq(0)");

//2.length  size()都可以获取数组的容量

//console.log($("#box").children().length)

//console.log($("#box").children().size())

//3.html()如果什么都不写，就是获取标签内的内容

//如果写入，则是修改标签内的内容

//div.html("我能改变文本内容");

//var p = $("#box").children("p:eq(0)");

//4.next()找的是目标元素的同级以下紧邻第一个元素

//console.log(p.next())

//5.siblings()如果书写选择器内容，找到的是同级符合选择器条件的所有的元素

//如果不书写选择器内容，找到的是同级的所有的元素

//console.log(p.siblings("h3"))

//6.parent()获取目标元素的父级元素

//获取p的父级元素

//console.log(p.parent());

//7.prev()找的是目标元素的同级以上紧邻第一个元素

//获取p的紧邻上一个元素

//console.log(p.prev())

//8.find()找到某个元素

//找的到第一个div，使用find

//console.log($("#box").find("div:eq(0)"))

});

---

十一、class操作

addClass()方法向匹配的元素增加指定的类名(一个或多个).

注意对于元素来说,class属性可以有多个值.该方法不会移除已经存在的值,而是在原有的基础上追加一个或多个class属性.

用attr()方法设置class属性,是一个覆盖的过程;而addClass()则是一个追加的过程.

class之间最终是用空格来隔开的.

如果需要添加多个类,用空格分隔类名.

removeClass()方法从被选元素移除一个或多个类.如需移除若干类,用空格来分隔类名.如果没有传参数,该方法将会移除被选元素的所有类.

toggleClass()方法对被选元素的一个或多个类进行切换(设置或移除).

该方法检查每个元素中的指定类,如果存在则删除,如果不存在则添加.

通过添加参数,可以设置只进行删除或者只进行添加操作.

格式:$(selector).toggleClass(class,switch)

switch值为true时,只添加;为false时,只删除.

hasClass()方法检查被选元素是否包含指定的class.

还可以用is()方法实现同样的功能,方法参数传入一个选择器字符串,比如”.className”.

$(document).on("click", function() {

//addClass()添加类名，不会出现覆盖

//$("#box").addClass("color");

//toggleClass()如果传入的类名当前没有相当于添加，

//如果传入的类名当前存在相当于删除

//$("#box").toggleClass("color")

//$("#box").toggle(500)//500是毫秒，时间

});

---