第二章 jQuery基本操作

🕗 发布于 2024-10-17 17:48 jquery 前端 javascript

第二章 jQuery基本操作

1. DOM操作分类

DOM操作分为三类：

DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById()
HTML-DOM：用于处理HTML文档，如document.forms
CSS-DOM：用于操作CSS，如element.style.color="green"

2. jQuery中的DOM操作

样式操作
内容及Value值操作
节点及节点属性操作
节点遍历

2.1 样式操作

设置和获取样式值：

使用css()为指定的元素设置样式值或获取样式值

//设置单个属性
css(name,value);
$(this).css("border","5px solid #f5f5f5");
//同时设置多个属性
css({name:value, name:value,name:value…});
//获取属性值
css(name);
//设置透明度
$(this).css({"border":"5px solid #f5f5f5","opacity":"0.5"})

追加和移除样式：

//追加样式
$(selector).addClass(class);
$(selector).addClass(class1 class2 … classN);
<style>
.text{ padding:10px;}
.content {background-color:#FFFF00; }
.border {border:1px dashed #333; }
</style>
<script>
$("h2").mouseover(function() {
$("p").addClass("content border");
});
</script>
//移除样式
$(selector).removeClass("class") ;
$(selector).removeClass("class1 class2 … classN ") ;

切换样式：

<style>
.text{ padding:10px;}
.content {
    background-color:#FFFF00;
    font-size:120%;
}
.border {border:1px dashed #333; }
</style>
<body>
    <h2>jQuery操作css</h2>
    <selector>
        <p>css设置或返回样式</p>
    </selector>
</body>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
    $("h2").click(function() {
        $("p").toggleClass("content border");
    });
});
</script>

判断是否含指定的样式：

hasClass( )方法来判断是否包含指定的样式

<script>
    $(document).ready(function(){
    //鼠标移入如果不存在该样式，加入样式
        $("h2").mouseover(function() {
            if(!$("p").hasClass("content ")){
                $("p").addClass("content ");
            }
        });
    //鼠标移出如果存在该样式，移除样式
        $("h2").mouseout(function() {
            if($("p").hasClass("content")) {
                $("p").removeClass("content ");
            }
        });
});
</script>

2.2 HTML代码操作

html() - 设置或返回所选元素的内容（包括 HTML 标签）

<p id="test">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
$("#btn2").click(function(){
    alert("HTML: " + $("#test").html());//HTML: 这是段落中的 <b>粗体</b> 文本。
  });

2.3 标签内容操作

text()可以获取或设置元素的文本内容

  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());//Text: 这是段落中的 粗体 文本。
  });

** html( )和text( )方法的区别：**

语法格式	参数说明	功能描述
html( )	无参数	用于获取第一个匹配元素的HTML内容或文本内容
html(content)	content为元素的HTML内容	用于设置所有匹配元素的HTML内容或文本内容
text( )	无参数	用于获取所有匹配元素的文本内容
text (content)	content为元素的文本内容	用于设置所有匹配元素的文本内容

2.4 属性值操作

val()可以获取或设置元素的value属性值

<p>名称: <input type="text" id="test" value="姓名"></p>
<button>显示值</button>
 $("button").click(function(){
    alert("值为: " + $("#test").val());//值为姓名
  });

3.节点操作

jQuery中节点操作：

查找节点

创建节点

插入节点

删除节点

替换节点

复制节点

3.1创建节点元素

工厂函数$()用于获取或创建节点

<body>
    <ul>
        <li>你好</li>
        <li>你好</li>
        <li>你好</li>
    </ul>
</body>
<script src="js/jquery-1.12.4.js"></script>
<script>
var newNode=$("<li></li>");
var newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
var newNode2=$("<li title='last'>北京申办冬奥会是再合适不过了！</li>");
$("ul").append(newNode);
$("ul").append(newNode1);
$("ul").append(newNode2);

3.2插入节点

元素内部插入子节点

语法	功能
append(content)	$(A) . a pp e n d (B) 表示将 B 追加到 A 中如：$ (“ul”).append($newNode1);
appendTo(content)	$(A) . a pp e n d T o (B) 表示把 A 追加到 B 中如：$ (newNode1).appendTo(“ul”);
prepend(content)	$(A). prepend (B)表示将B前置插入到A中如： $(“ul”).prepend(newNode1);
prependTo(content)	$(A) . p re p e n d T o (B) 表示将 A 前置插入到 B 中如：$ (newNode1).prependTo(“ul”);

//向后追加
$("ul").append(newNode1);
$(newNode1).appendTo("ul");
//向头插入
$("ul").prepend(newNode1);
$(newNode1).prependTo("ul");

元素外部插入同辈节点

语法	功能
after(content)	$(A) . a f t er (B) 表示将 B 插入到 A 之后如：$ (“ul”).after(newNode1);
insertAfter(content)	$(A) . in ser t A f t er (B) 表示将 A 插入到 B 之后如：$ (newNode1).insertAfter(“ul”);
before(content)	$(A) . b e f ore (B) 表示将 B 插入至 A 之前如：$ (“ul”).before(newNode1);
insertBefore(content)	$(A) . in ser tB e f ore (B) 表示将 A 插入到 B 之前如：$ (newNode1).insertBefore(“ul”);

//插入节点下面
$("ul").after(newNode1);
$(newNode1).insertAfter("ul");
//插入节点上面
$("ul").before(newNode1);
$(newNode1).insertBefore("ul");

3.3删除节点

remove()：删除整个节点
empty()：清空节点内容
detach()：删除整个节点，保留元素的绑定事件、附加的数据

$(newNode1).empty();
$(newNode2).detach();
$("ul").remove();

3.4替换节点

//后面替换前面
var newNode1=$("<li>你喜欢哪些冬季运动项目？</li>");
//replaceWith()
$(".gameList li:eq(2)").replaceWith(newNode1);
//replaceAll()
$(newNode1).replaceAll(".gameList li:eq(2)")

3.5复制节点

//参数ture或flase, true复制事件处理，flase时反之
$(".gameList li:eq(1)").click(function(){
    $(this).clone(true).appendTo(".gameList");
})
$(".gameList li:eq(2)").click(function(){
    $(this).clone(false).appendTo(".gameList");
})

4.属性操作

4.1获取与设置元素属性

attr()用来获取与设置元素属性

<div class="contain">
    <img src="../../images/tou01.jpg" /></div>    
$(".contain img").attr({width:"100px",height:"80px"});

4.2删除元素属性

removeAttr()用来删除元素的属性

//$(selector).removeAttr(name) ;
$(".contain img").removeAttr("alt");

5.节点遍历

5.1 遍历子节点

children()方法可以用来获取元素的所有子元素

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    <li>ddd</li>
</ul>
var ul =$("ul").children(); //4
for(var i = 0;i<ul.length;i++){
    alert(ul[i].innerHTML);
}

5.2 遍历同辈节点

语法	功能
next([expr])	用于获取紧邻匹配元素之后的元素$(“li:eq(1)”).next().addClass(“orange”);
prev([expr])	用于获取紧邻匹配元素之前的元素$(“li:eq(1)”).prev().addClass(“orange”);
slibings([expr])	用于获取位于匹配元素前面和后面的所有同辈元素$(“li:eq(1)”).siblings().addClass(“orange”);

//后一个
$("li:eq(1)").next().addClass("orange");
//前一个
$("li:eq(1)").prev().addClass("orange");
//前一个和后面所有
$("li:eq(1)").siblings().addClass("orange");

5.3 遍历前辈节点

parent()：获取元素的父级元素
parents()：获取元素的祖先元素

<div>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
        <li>ddd</li>
    </ul>
    <span>eeee</span>
</div>
//父级元素
$("li:eq(1)").parent().addClass("orange");
//祖先元素
$("li:eq(1)").parents().addClass("orange");

5.4 其他遍历方法

each( ) ：规定为每个匹配元素规定运行的函数

//$(selector).each(function(index,element)) ;
$("img").click(function(){
   $("li").each(function(){
       var str=$(this).text()+"<br>";
       $(".contain").append(str);
   })
});

end( )：结束当前链条中的最近的筛选操作，并将匹配元素集还原为之前的状态

$(".contain :header").css({"background":"#2a65ba","color":"#ffffff"});
$(".gameList li").first().css("background","#b8e7f9").end().last().css ("background","#d3f4b5");
$(".gameList li:last").css("border","none");

6.CSS-DOM操作

除css()外，还有获取和设置元素高度、宽度等的样式操作方法

语法	功能
css()	设置或返回匹配元素的样式属性
height([value])	设置或返回匹配元素的高度
width([value])	设置或返回匹配元素的宽度
offset([value])	返回以像素为单位的top和left坐标。仅对可见元素有效
offsetParent( )	返回最近的已定位祖先元素。定位元素指的是元素的CSS position值被设置为relative、absolute或fixed的元素
position( )	返回第一个匹配元素相对于父元素的位置
scrollLeft([position])	参数可选。设置或返回匹配元素相对滚动条左侧的偏移
scrollTop([position])	参数可选。设置或返回匹配元素相对滚动条顶

原文地址：https://blog.csdn.net/weixin_62008675/article/details/142933673

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：redis--过期策略和内存淘汰策略
下一篇：CUDA 共享内存 shared memory

Spring MVC实现高效文件上传及优化案例
基于SSM实现springmvc文件上传功能
阅读更多2024-10-17
CTFHUB技能树之HTTP协议——响应包源代码
点击“开始”没有抓取到报文，先看看网页源代码是什么情况。居然直接给出flag了，不知道这题的意义何在。是个贪吃蛇小游戏，看不出来有什么特别的地方。
阅读更多2024-10-17
嵌入式面试——FreeRTOS篇（九）内存管理
FreeRTOS内存管理介绍：在使用 FreeRTOS 创建任务、队列、信号量等对象的时，一般都提供了两种方法：•动态方法创建：自动地从 FreeRTOS 管理的内存堆中申请创建对象所需的内存，并且
阅读更多2024-10-17
基于遥感技术的碳储量、碳收支、碳循环等多领域监测与模拟实践技术应用
卫星遥感具有客观、连续、稳定、大范围、重复观测的优点，已成为监测全球碳盘查不可或缺的技术手段，卫星遥感也正在成为新一代、国际认可的全球碳核查方法。本次目的就是梳理碳中和与碳达峰对卫星遥感的现实需求，
阅读更多2024-10-17
旋转花键材质及运用场景
旋转花键的材质有很多种，其材质选择是一个涉及多方面因素的重要决策，‌主要取决于应用场景的具体要求，包括设备的运行环境、负载大小、运行速度以及所需的耐磨性和耐腐蚀性等因素。
阅读更多2024-10-17
记bean对象之间的转换Orika使用（二）
A对象属性值转换到B对象，然后B再转换到A两个对象中的属性名不同的处理方法集合对象映射、对象中包含对象的映射
阅读更多2024-10-17
传输层协议UDP详解
传输层协议 ———— UDP，一篇即懂
阅读更多2024-10-17
2018年计算机网络408真题解析
协议是数据传输服务，的数据传输服务，的数据连接服务。和使用。而使用的是。TCP/IP应用层协议中，各个协议使用的传输层服务依次如下图所示：答案选。
阅读更多2024-10-17
OpenCV人脸检测与识别：构建智能识别系统
OpenCV进行简单的人脸检测与识别。我们通过读取并预处理图像、准备训练数据、训练人脸识别模型、进行预测以及显示结果等步骤，实现了基本的人脸识别功能。
阅读更多2024-10-17
Bug剖析
•所有的Bug报告有以下的基本要求：•标题。要简略。•指派。谁来处理这个问题。•重现步骤。问题再次出现的相关步骤。•优先级别。问题的紧迫性与重要性。•严重程度。问题所产生的后果。•解决方
阅读更多2024-10-17

第二章 jQuery基本操作

文章目录