[学习笔记] 动态网页开发基础之使用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/

评论