一、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=$("
//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=$("
哎呦诶
");//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是毫秒，时间
});