• jQuery-DOM操作

    目录

    获取和设置属性值(css)

    追加和删除样式(addClass、removeClass)

    切换样式(toggleclass)

    元素内容操作(html、text) 

    属性值操作(value) 

    删除节点(remove)

    克隆节点(clone)

    获取、设置、删除元素属性(attr、removeAttr)

    获取和设置属性值(css)

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>获取和设置样式值title>
    6. 		<script src="js/jQuery.js">script>
    7. 		<style>
    8. 			p{
    9. 				color: #f00;
    10. 				font-size: 30px;
    11. 			}
    12. 		style>
    13. 	head>
    14. 	<body>
    15. 		<p>段落标签p>
    16. 	body>
    17. 	<script>
    18. 		$(document).ready(function(){
    19. 			//获取p标签并获取样式值
    20. 			var color = $('p').css('color');
    21. 			console.log(color);
    22. 			var fontSize = $("p").css("font-size");
    23. 			console.log(fontSize);
    24. 			
    25. 			//获取p标签并设置样式
    26. 			$('p').css("background-color","#0f0");
    27. 			//获取P标签并且同时设置多个样式
    28. 			$('p').css({
    29. 				'text-decoration':'underline',
    30. 				'text-algin':'center',
    31. 				'border':'1px solid #00f'
    32. 			})
    33. 						
    34. 		});
    35. 		
    36. 	script>
    37. html>

    追加和删除样式(addClass、removeClass)

    • addClss()：追加样式
    • removeClass()：删除样式

    示例：

    //获取p元素标签并追加样式text

    $('p').addClass('test');

    //获取p元素标签并删除样式demo

    $('p').removeClass('demo');

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>追加和删除样式title>
    6. 		<script src="js/jQuery.js">script>
    7. 		<style>
    8. 			.demo{
    9. 				color: #f00;;
    10. 				font-size: 30px;
    11. 			}
    12. 			
    13. 			.test{
    14. 				background-color: #ccc;
    15. 				border: 1px solid #00f;
    16. 				border-radius: 10px;
    17. 			}
    18. 		style>
    19. 	head>
    20. 	<body>
    21. 		<p class="demo">段落标签p>
    22. 		<button>追加样式button>
    23. 		<button>移出样式button>
    24. 	body>
    25. 	<script>
    26. 		$(function(){
    27. 			// 获取添加样式按钮，添加点击事件
    28. 			$('button:first').click(function(){
    29. 				$('p').addClass('test');
    30. 			});
    31. 			
    32. 			// 获取移出样式按钮，添加点击事件
    33. 			$('button:last').click(function(){
    34. 				$('p').removeClass('demo');
    35. 			});
    36. 		});
    37. 	script>
    38. html>

    切换样式(toggleclass)

    toggleclass()：切换样式

    示例

    $('p').toggleClass('demo');//获取p元素标签并切换demo样式

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>切换样式title>
    6. 		<script src="js/jQuery.js">script>
    7. 		<style>
    8. 			.demo{
    9. 				color: #f00;
    10. 				font-size: 36px;
    11. 				background-color: #ccc;
    12. 			}
    13. 		style>
    14. 	head>
    15. 	<body>
    16. 		<p>段落标签p>
    17. 		<button>切换样式button>
    18. 	body>
    19. 	<script>
    20. 		$(function(){
    21. 			$('button').click(function(){
    22. 				$('p').toggleClass('demo');
    23. 			})
    24. 		});
    25. 	script>
    26. html>

    元素内容操作(html、text) 

    • html：获取的内容包括标签和文本
    • text:获取的内容只有文本
    • html:加入标签和文本时标签不显示，标签效果存在
    • text:加入标签和文本时，标签显示且没有效果

    示例

    //获取div节点内的所有内容，包括标签和文本

    $('div').html();

    //只获取div节点内的文本

    $('div').text();

    //使用html向id为demo的元素标签中添加文本内容

    $('#demo').html('大户名城，建设高地');

    //使用text向id为demo的元素标签中添加文本内容
    $('#demo').text('大湖名城，建设高地');

    //使用html向id为demo的元素标签中添加元素标签和文本内容时，添加的元素标签有效果
    $('#demo').html('

    大湖名城，建设高地

    ');

    //使用text向id为demo的元素标签中添加元素标签和文本内容时，添加的元素标以文本显示且无效果
    $('#demo').text('

    大湖名城，建设高地

    ');

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>内容操作title>
    6. 		<script src="js/jQuery.js">script>
    7. 	head>
    8. 	<body>
    9. 		<div>
    10. 			<ul>
    11. 				<li>
    12. 					<p>段落标签1p>
    13. 				li>
    14. 				<li>
    15. 					<p>段落标签2p>
    16. 				li>
    17. 			ul>
    18. 		div>
    19. 		<p id="demo">p>
    20. 	body>
    21. 	<script>
    22. 		$(function(){
    23. 			var result1= $('div').html();
    24. 			console.log(result1);
    25. 			
    26. 			var result2= $('div').text();
    27. 			console.log(result2);
    28. 			
    29. 			// $('#demo').html('大户名城，建设高地');
    30. 			// $('#demo').text('大湖名城，建设高地');
    31. 			// $('#demo').html('
      大湖名城，建设高地
      ');
    32. 			// $('#demo').text('
      大湖名城，建设高地
      ');
    33. 		});
    34. 	script>
    35. html>

    属性值操作(value) 

    示例：

    //获取input元素标签中的value属性值

    $('input').val();

    //设置input元素标签中的value属性值

    $('input').val('篮球');

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>value属性值操作title>
    6. 		<script src="js/jQuery.js">script>
    7. 	head>
    8. 	<body>
    9. 		<input type="checkbox" value="basketball"/>篮球
    10. 	body>
    11. 	<script>
    12. 		$(function(){
    13. 			var result1 = $('input').val();
    14. 			console.log(result1);
    15. 			
    16. 			$('input').val('篮球');
    17. 			var result2 = $('input').val();
    18. 			console.log(result2);
    19. 		});
    20. 	script>
    21. html>

    创建节点

    • A.append(B)：在当前标签（A）中添加新建标签（B）
    • B.appendTo(A)：将新建标签（B）添加到当前标签（A）中     
    • A.prepend(B)：将新建标签（B）添加到当前标签（A）中
    • B.prependTo(a)：将新建标签（B）添加到当前标签（A）中     
    • A.after(B)：将新建标签（B）添加到当前标签（A）之后
    • B.insertAfter(A)：将新建标签（B）添加到当前标签（A）之后     
    • A.before(B)：将新建标签（B）添加到当前标签（A）之前
    • B.insertBefore(A)：将新建标签（B）添加到当前标签（A）之前

    示例

    //创建一个li元素标签

    $('

  • jQuery中创建的元素标签
  • ');

    //获取ul元素后将新创建的元素标签默认添加到末尾

     $('ul').append(liEle);

    //将新创建的元素节点添加到ul元素中，默认添加到末尾

     liEle.appendTo($('ul'));

    //获取ul元素标签后将新创建的元素添加到ul里所有标签之前

     $('ul').prepend(liEle);

    //将新标签添加到ul元素标签下的所有标签之前

    liEle.prependTo($('ul'));

    //获取ul元素标签后将新创建的元素添加到ul标签之前

    $('ul').before(pEle);

    //将新标签添加到ul元素标签之前

    pEle.insertBefore($('ul'));

    //获取ul元素标签后将新创建的元素添加到ul标签之后

    $('ul').after(pEle);

    //将新标签添加到ul元素标签之后

    pEle.insertAfter($('ul'));

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>节点操作title>
    6. 		<script src="js/jQuery.js">script>
    7. 	head>
    8. 	<body>
    9. 		<ul>
    10. 			<li>我是已经写好的li标签li>
    11. 			<li>我是已经写好的li标签li>
    12. 		ul>
    13. 		<script>
    14. 			$(function(){
    15. 				//创建一个li元素标签
    16. 				var liEle = $('
    17. jQuery中创建的元素标签
    18. ');
  • //将li元素标签添加到ul元素标签中
  • // $('ul').append(liEle);
  • // liEle.appendTo($('ul'));
  • //将li元素标签添加到所有li元素标签之前
  • // $('ul').prepend(liEle);
  • liEle.prependTo($('ul'));
  • //创建一个p元素标签
  • var pEle = $('

    世界人口突破500亿

    ');

  • //将p元素标签添加到ul元素标签之前
  • // $('ul').before(pEle);
  • // pEle.insertBefore($('ul'));
  • //将p元素表签添加到ul元素之后
  • // $('ul').after(pEle);
  • pEle.insertAfter($('ul'));
  • });
  • script>
  • body>
  • html>

    • 删除节点(remove)

    示例

    $('h2').remove();//获取h2元素标标签收使用remove删除h2元素标签

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>删除节点title>
    6. 		<script src="js/jQuery.js">script>
    7. 	head>
    8. 	<body>
    9. 		<h2>二级标题标签h2>
    10. 		<ul>
    11. 			<li>列表项第1项li>
    12. 			<li>列表项第2项li>
    13. 			<li>列表项第3项li>
    14. 		ul>
    15. 	body>
    16. 	<script>
    17. 		$(function(){
    18. 			//删除标题标签
    19. 			$('h2').remove();
    20. 			//删除列表第二项
    21. 			$('li:eq(1)').remove();
    22. 		})
    23. 	script>
    24. html>

    替换节点

    • A.replaceWith(B)：将当前标签（A）替换为新标签（B）
    • B.replaceAll(A)：将当前标签（A）替换为新标签（B）

    示例

    //获取li元素标签后使用replaceWith替换为新标签

    $('li:eq(1)').replaceWith($liEle);

    //新标签使用replaceAll与li元素标签进行替换
    $liEle.replaceAll($('li:eq(1)'));

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>替换节点title>
    6. 		<script src="js/jQuery.js">script>
    7. 	head>
    8. 	<body>
    9. 		<ul>
    10. 			<li>列表项第1项li>
    11. 			<li>列表项第2项li>
    12. 			<li>列表项第3项li>
    13. 		ul>
    14. 	body>
    15. 	<script>
    16. 		$(function(){
    17. 			//创建一个li元素标签
    18. 			var $liEle = $('
    19. 我是jQuery创建的元素标签
    20. ');
  • //替换第二个li元素标签
  • // $('li:eq(1)').replaceWith($liEle);
  • $liEle.replaceAll($('li:eq(1)'));
  • });
  • script>
  • html>

    • 克隆节点(clone)

    clone()：如果括号里的值为false，克隆时不克隆元素标签中的事件，如果括号里的值为true，克隆时克隆元素标签中的事件。

    示例

    //克隆ul元素标签，包括ul元素标签中的事件

    var result = $('ul').clone(true);

    //只克隆ul元素标签，包括ul元素标签中的事件,括号中的默认值为false

    var result = $('ul').clone();

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>克隆节点title>
    6. 		<script src="js/jQuery.js">script>
    7. 	head>
    8. 	<body>
    9. 		<div>
    10. 			<ul>
    11. 				<li>列表项第1项li>
    12. 				<li>列表项第2项li>
    13. 				<li>列表项第3项li>
    14. 			ul>
    15. 		div>
    16. 	body>
    17. 	<script>
    18. 		$(function(){
    19. 			$('ul').click(function(){
    20. 				$('ul').css('background-color','yellow');
    21. 			})
    22. 			
    23. 			//克隆ul元素标签
    24. 			var result = $('ul').clone(true);
    25. 			
    26. 			//将克隆的ul元素标签添加到div中
    27. 			$('div').append(result);
    28. 		})
    29. 	script>
    30. html>

    获取、设置、删除元素属性(attr、removeAttr)

    示例

    //获取img元素标签后使用attr得到width属性值

    $('img').attr('width');

    //获取img元素标签后使用attr设置width属性值为800像素

    $('img').attr('width','800px');

    //获取img元素标签后使用removeAttr删除width属性值

    $('img').removeAttr('width');

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>获取、设置、删除元素属性title>
    6. 		<script src="js/jQuery.js">script>
    7. 	head>
    8. 	<body>
    9. 		<img src="img/sec1-5.jpg" width="500px" title="饮料">
    10. 	body>
    11. 	<script>
    12. 		$(function(){
    13. 			//获取属性值
    14. 			var result1 = $('img').attr('width');
    15. 			console.log(result1);
    16. 			var result2 = $('img').attr('src');
    17. 			console.log(result2);
    18. 			
    19. 			//设置属性值
    20. 			$('img').attr('width','800px');
    21. 			$('img').attr('title','好喝的饮料');
    22. 			
    23. 			//删除属性
    24. 			$('img').removeAttr('title');
    25. 			$('img').removeAttr('width');
    26. 		})
    27. 	script>
    28. html>
  • 相关阅读:
    大数据培训课程之fold(num)(func)案例
    modbus如何添加从机以IO模块举列
    STM32 HAL库F103系列之ADC实验（二）
    ClickHouse 存算分离改造：小红书自研云原生数据仓库实践
    外汇天眼：纽约联储调查显示11月通胀预期反弹 通胀上升与经济增长放缓并存
    2023NOIP A层联测10 集合
    Shell编程之免交互
    【C++编程】类与对象 -- 运算符重载：加号、左移运算符、递增运算符、函数调用运算符(仿函数) ...
    Vue实现登录功能全套详解（含封装axios）
    Pinia基础知识
  • 原文地址：https://blog.csdn.net/m0_57051895/article/details/127881214