[学习笔记] 动态网页开发基础之使用jQuery操作DOM
# 学习 # · 2020-08-20
样式操作
1、设置和获取样式值：
//基本语法
$(selector).css(name); //获取样式值
$(selector).css(name, value); //设置单个样式值
$(selector).css({name:value, name:value}); //设置多个样式值
//实例
$(".text").css("background-color");
$(".text").css("color", "red");
$(".text").css({"color":"red", "font-size","20px"});2、追加样式：
//基本语法
$(selector).addClass(class); //追加一个样式
$(selector).addClass(class1 class2 class3); //追加多个样式
//实例
$(".text").addClass("content");
$(".text").addClass("content border");3、移除样式：
//基本语法
$(selector).removeClass(class); //移除一个样式
$(selector).removeClass(class1 class2 class3); //移除多个样式
//实例
$(".text").removeClass("content");
$(".text").removeClass("content border");4、切换样式：当元素中含有名称为class的CSS类样式时，删除该类样式，否则增加一个该名称的类样式。
//基本语法
$(selector).toggleClass(class);
//实例
$("p").toggleClass("main");5、判断是否含指定样式：
//基本语法
$(selector).hasClass(class);
//实例
$("p").hasClass("main");内容操作
1、HTML代码操作（含HTML标签）：
//基本语法
$(selector).html(content);
//实例
$("p").html("<h1>Hello World！</h1>");2、标签内容操作（不含HTML标签）：
//基本语法
$(selector).text(content);
//实例
$("p").text("Hello World！");3、属性值操作（大多用于input元素）：
//基本语法
$(selector).val(value);
//实例
$("input").val("Hello World！");节点操作
1、查找节点：通过jQuery选择器查找相应的节点。
2、创建节点元素：
//基本语法
$(selector); //通过selector选择器匹配元素
$(element); //以DOM元素创建jQuery对象
$(html); //使用HTML字符串创建jQuery对象3、插入节点（内部插入）：
//基本语法
append(content); //向所选择的元素内部插入内容
appendTo(content); //把所选择的元素追加到另一个指定的元素集合中
prepend(content); //向每个选择的元素内部前置内容
prependTo(content); //将所有匹配元素前置到制定元素中
//实例
$(A).append(B); //将B追加到A中
$(A).appendTo(B); //把A追加到B中
$(A).prepend(B); //将B插入A前
$(A).prependTo(B); //将A前置到B中4、插入节点（外部插入）：
//基本语法
after(content); //在每个匹配的元素之后插入内容
insertAfter(content); //将所有匹配元素插入指定元素的后面
before(content); //向所选择的元素外部前面插入内容
insertBefore(content); //将所匹配的元素插入指定元素的前面
//实例
$(A).after(B); //将B插入到A之后
$(A).insertAfter(B); //将A插入到B之后
$(A).before(B); //将B插入到A之前
$(A).insertBefore(B); //将A插入到B之前5、删除节点：
//基本语法
$(selector).remove(expr); //删除被选元素（及其子元素）
$(selector).empty(); //从被选元素中删除子元素
//实例
$("p").remove(".italic"); //删除class="italic"的所有<p>元素
$("p").empty(); //删除所有 <p> 元素6、替换节点：
//基本语法
$(selector).replaceAll($(selector));
$(selector).replaceWith($(selector));
//实例
$('#wu').replaceAll($('#shu'));
$('#yu').replaceWith('<li>黄盖</li>');7、复制节点：
//基本语法
$(selector).clone(boolean); //boolean规定是否需要复制事件处理程序
//实例
$("body").append($("p").clone());属性操作
1、获取和设置元素属性：
//基本语法
$(selector).attr(name); //获取属性值
$(selector).attr({[name1:value1], [name2:value2]}); //设置多个属性值
//实例
$("img").attr("width");
$("img").attr({["width":"200px"], ["height":"20px"]});2、删除元素属性：
//基本语法
$(selector).removeAttr(name); //删除属性
//实例
$("img").removeAttr("alt"); //删除图片alt属性节点遍历
1、遍历子元素：
//基本语法
$(selector).children(expr);
//实例
$("section").children(); //获取section的子元素个数2、遍历同辈元素：
//基本语法
$(selector).next(expr); //获取紧邻匹配元素之后的元素
$(selector).prev(expr); //获取紧邻匹配元素之前的元素
$(selector).siblings(expr); //获取紧邻匹配元素前后所有同辈元素
//实例
$("li:eq(1)").next(); //索引为1的下一个同辈元素
$("li:eq(1)").prev(); //索引为1的上一个同辈元素
$("li:eq(1)").siblings(); //索引为1的上下所有同辈元素3、遍历前辈元素：
//基本语法
$(selector).parent(selector); //获取当前匹配元素集合中每个元素的父级元素
$(selector).parents(selector); //获取当前匹配元素集合中每个元素的祖先元素
//实例
$("li").parent(); //获取<li>的上层元素<ul>
$("li").parents(); //获取<li>的祖先节点<ul>、<section>、<body>、<html>4、其他遍历方法：
//基本语法
$(selector).each(function(index,element)); //为每个匹配元素规定运行的函数
$(selector).end(); //结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态
//实例
$("li").each(function(){
alert($(this).text()); //输出每个 li 元素的文本
});
$("p").find("span").end().css("border", "2px red solid"); //选择所有段落，找到这些段落中的 span 元素，然后将它们恢复为段落，并把段落设置为两像素的红色边框CSS-DOM操作
1、CSS()：设置或返回匹配元素的样式操作。
css("propertyname"); //返回CSS属性
css("propertyname","value"); //设置CSS属性
css({"propertyname":"value","propertyname":"value",...}); //设置多个CSS属性2、height([value])和width([value])：设置或返回匹配元素的高度和宽度。
alert($("div").height()); //返回 <div> 元素的高度
alert($("div").width()); //返回 <div> 元素的宽度3、offset([value])：返回以像素为单位的top和left坐标。仅对可见元素有效。
var x = $("p").offset(); //返回 <p> 元素的偏移坐标
alert("Top: " + x.top + " Left: " + x.left);4、offsetParent()：返回最近的已定位祖先元素。
$("p").offsetParent().css("background-color","red"); //设置 <p> 元素的最近的被定位的父元素的背景颜色5、position()：
x = $("p").position(); //返回 <p> 元素的 top 和 left 位置
alert("Top: " + x.top + " Left: " + x.left);6、scrollLeft([position])：设置或返回匹配元素相对滚动条左侧的偏移。
alert($("div").scrollLeft()); //返回 <div> 元素的水平滚动条位置7、scrollTop([position])：设置或返回匹配元素相对滚动条顶。
alert($("div").scrollTop()); //返回 <div> 元素的垂直滚动条位置
如无特殊说明，本博所有文章均为博主原创。
如若转载，请注明出处：一木林多 - https://www.l5v.cn/archives/79/
如若转载，请注明出处：一木林多 - https://www.l5v.cn/archives/79/
评论