jQuery操作DOM

最新推荐文章于 2022-07-28 21:14:32 发布
最新推荐文章于 2022-07-28 21:14:32 发布
阅读量242 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JSWANGCHANG/article/details/102759900
版权

                
jQuery操作DOM
1，基本操作
    1， html()
        作用： 获取或设置jQuery对象中的html内容
    2， text()
        作用： 获取或设置 jQuery对象中的text文本内容
    3,  val()
        作用： 获取或设置jQuery对象的value值;(主要针对表单控件)
    练习:
        创建一个文本框，定义id
        创建一个按钮，内容为显示；
        创建一个div，点击按钮时，构建成一级标题显示在div中；
    
2， 属性操作
    1，attr()
        作用：读取或设置jQuery对象的属性值
        eg:
            $obj.attr('id')
            $obj.attr('id','main')
    2, removeAttr('attrName')
        删除jQuery对象的attrName属性
        eg：
            $obj.removeAttr('class');
        
3， 样式操作    
    1, attr()
    2, addClass('classname')
        将className添加到元素的class值之后； 追加类选择器；
        返回值: jQuery对象，可以连缀调用；
    3, removeClass('className')
        删除类;    如果无参，则清空类选择器；
    4, toggleClass('className')
        切换样式：
            元素如果具备className选择器，则删除
            如果存在，则添加；
        常用于一个按钮实现显示/隐藏；
    5， css("属性名")  or css("属性名","value")
        获取或设置css属性：
        $obj.css('width')    获取属性值
        $obj.css('width','400px')    设置属性值
        
    6,  css(JSON对象)
        JSON对象：
            是一种约束了格式的对象表现形式；
            JavaScript Object Notation
        1， JSON对象必须是{}括起来
        2， 使用键值对方式声明，表示属性和值
        3， 所有属性使用时必须""括起来
        4， 属性和值之间：
        5， 多对属性之间， 间隔
        同Python的字典
        eg:
            $obj.css({
                "font-size":"28px",
                "color":"#000",
                "background":"pink",
                "border":"1px solid #000"
            })
4， 遍历节点
    1， children()    / children('selector')
        获取某jQuery对象的所有子元素，或带有指定选择器的子元素;
        注意： 只考虑子代元素，不考虑后代元素；
    2， next() / next('selector')
        获取某jQuery对象的下一个兄弟元素;或满足selector的下一个元素
    3, prev()    /     pre('selector')
        获取某jQuery对象的上一个兄弟元素；
        或满足selector的上一个兄弟元素
    4, siblings()    /siblings('selector')
        获取jQuery对象的所有兄弟元素/ 满足selector的所有兄弟元素
    5, find('selector')
        查找满足selector选择器的所有后代元素
    6, parent()
        查找某jQuery对象的父元素；
5， 创建对象
    语法: $("标记")
    eg:
        1,创建一个div //推荐
            var $div = $("<div></div>")
            $div.html('动态创建div');
            $div.attr('id','container');
            $div.css('color','red');
        2, 创建一个div
            var $div = $(
            "<div id = 'container'
            style='color:red';>动态创建div</div>")

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
	.c1{
		background:pink;
	}
	.c2{
		color:green;
	}
	.toggle{
		visibility:hidden;
	}
  </style>
 </head>
	<input type="text" id='t1'>
	<button id='btnShow' onclick='btnShow()'>显示</button>
	<div id='d1'></div>
	<p id='p1'>
		君子曰，学不可以已。青取之于蓝而青于蓝，冰，水为之而寒于水;
	</p>
		<button id='btnCall' onclick='btnCall()'>连缀调用</button>
		<button id='btnCall' onclick='btnClear()'>清空样式</button>
		<button id='btnCall' onclick='btnToggle()'>显示/隐藏</button>
		<button id='btnCall' onclick='getCss()'>获取背景颜色</button>
		<button id='btnCall' onclick='setClass()'>JSON设置样式</button>
		<button id='btnCreate' onclick='btnCreate()'>创建元素</button>
	<script src='jquery-1.11.3.js'></script>
	<script>	
		//练习：点击按钮，将文本框的内容以h1方式显示在div中；
		function btnShow(){		
			$('#d1').html('<h1>' + $('#t1').val() + '</h1>');
		}
		//连缀调用
		function btnCall(){
			$('#p1').addClass('c1').addClass('c2');
		}
		//清空样式
		function btnClear(){
			$('#p1').removeClass();
		}
		//切换 样式，点击按钮可以显示隐藏；
		function btnToggle(){
			$('#p1').toggleClass('toggle');
		}
		function getCss(){
			console.log($('#p1').css('background'))
		}
		//JSON对象设置css
		function setClass(){
			$('#p1').css({
				"font-size":"28px",
				"color":"#000",
				"background":"pink",
				"border":"1px solid #000"
			})
		}
		//创建并插入元素标记
		function btnCreate(){
			$pPoem = $("<p></p>");
			$pPoem.html('白日依山尽<br>黄河入海流<br>欲穷千里目<br>更上一层楼');
			//$('#p1').before($pPoem);
			//$('#p1').after($pPoem);
			//$('#p1').append($pPoem);
			$('#p1').prepend($pPoem);
		}
	</script>
</html>


6， 插入元素
    作用： 将创建好的元素插入到网页中
    1， 内部插入
        作为元素的子元素插入到html中
        1, $obj.append($new);
            将$new元素追加到$obj的最后位置；
        2, $obj.prepend($new);
            将$new元素插入到$obj元素中的第一个子元素位置处
        
    2， 外部插入
        作为元素的兄弟元素插入到html中
        1， $obj.after($new)；
            将$new元素座位$obj的下一个兄弟元素插入
        2， $obj.before($new)；
            将$new元素座位$obj的上一个兄弟元素插入
            
        
        
7， 删除元素
        $obj.remove()
        jQuery不需要先获取父元素，再删除；而是直接删除自己；

作业： jQuery完成购物车页面

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
	<style>
		table{
			border:1px solid #000;
			border-collapse:collapse;
		}
		td{
			border: 1px solid #000;
			text-align:center;
		}
	</style>
 </head>
 <body>
	
	<table id="tdTb">
	<thead>
		<tr>
			<td><input type="text" id="pdName" placeholder="商品名称"></td>
			<td><input type="text" id="pdPrice" placeholder="商品价格"></td>
			<td><input type="text" id="pdNum" placeholder="商品数量"></td>
			<td><button onclick="pdAdd()">增加</button></td>
		</tr>
		<tr>
				<td>商品名称</td>
				<td>商品价格</td>
				<td>商品数量</td>
				<td>操&nbsp&nbsp&nbsp&nbsp作</td>
			
		</tr>
	</thead>
	</table>
	<script src='jquery-1.11.3.js'></script>
	<script>
		function pdAdd(){
			var $pdTb = $('#tdTb');
			//创建元素
			var $pdItem = $('<tr></tr>')
			var $pdName  = $('<td></td>');
			var $pdPrice = $('<td></td>');
			var $pdNum = $('<td></td>');
			var $pdOper = $('<td></td>');
			var $pdBtCha = $("<button id='btnCha' onclick='btnCha(event)' >修改</button>")
			var $pdBtDel = $("<button id='btnDel' onclick='btnDel(event)'>删除</button>")
			//增加元素
			$pdTb.append($pdItem);
			$pdItem.append($pdName);
			$pdItem.append($pdPrice);
			$pdItem.append($pdNum);
			$pdItem.append($pdOper);
			$pdOper.append( $pdBtCha);
			$pdOper.append($pdBtDel);
			//设置元素的值
			$pdName.html($('#pdName').val());
			$pdPrice.html($('#pdPrice').val());
			$pdNum.html($('#pdNum').val());
			
		}
		//对button增加事件
		function btnDel(event){
			//获取父元素的父元素，即button所在的tr；
			var $deltem = $(event.target).parent().parent();	
			$deltem.remove();
			//删除改节点
		}
		//修改按钮click事件
		function btnCha(event){
			//获取商品名称，价格，数量，3个元素
			var $pdNum = $(event.target).parent().prev();
			var $pdPrice = $pdNum.prev();
			var $pdName = $pdPrice.prev();
			//对3个元素进行复制；
			$pdName.html($('#pdName').val());
			$pdPrice.html($('#pdPrice').val());
			$pdNum.html($('#pdNum').val());
		}
	</script>
 </body>
</html>

老王笔记
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery操作DOM之获取表单控件的值
12-08
本文实例讲述了jQuery操作DOM之获取表单控件的值。分享给大家供大家参考。具体分析如下： HTML属性与DOM属性差别最大的地方，恐怕就要数表单控件的值了。比如，文本输人框的 value属性在DOM中的属性叫defaultValue，...
Jquery中DOM操作（详细）
每天多一点
11-17 3818
Jquery中的DOM操作 为了能全面的讲解DOM操作，首先需要构建一个网页。 HTML代码： <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
jQuery操作dom
最自由的笑的博客
08-12 340
jQuery常用选择器//基本选择器 $("#myELement") 选择id值等于myElement的元素 $("div") 选择所有的div标签元素组 $(".myClass") 选择使用myClass类的所有元素 $("#myELement,div,.myclass") 并列选择器，进行联合选择 //层次选择器$("form input")
jquery 操作DOM的基本用法分享
10-28
jquery 操作DOM的基本用法分享，使用jquery的朋友可以参考下，方便以后对dom操作
使用jQuery操作DOM的方法小结
10-20
本文主要介绍了使用jQuery操作DOM的方法，具有很好的参考价值，下面跟着小编一起来看下吧
jquery 操作DOM案例代码分享
01-19
实例如下： 代码如下: <style type=”text/css”> body{ margin:0; padding:40px; background:#fff; font:80% Arial, Helvetica, sans-serif; color:#555; line-height:180%; } img{border:none;...
原生JS和jQuery操作DOM对比总结
10-20
主要给大家介绍了原生JS和jQuery操作DOM的一些对比总结，文中总结了很多的对比，相信对大家的学习或者工作能带来一定的帮助，需要的朋友可以参考借鉴，下面来一起看看吧。
Jquery操作DOM
caolipeng_918的专栏
06-30 865
Jquery操作DOM，简单的应用学习
jQuery中的DOM操作
m0_52660785的博客
07-28 1702
jQuery中的DOM操作
JQuery的dom操作
只是个人笔记，请见谅
03-28 1740
jquery的dom操作查找节点，修改属性创建节点-内部插入法创建节点-外部插入法删除节点复制节点替换节点属性操作样式操作获取html文本和值常用遍历节点方法css-dom操作多选框应用页面加载完毕触发方法作业     创建节点 创建节点：使用jQuery 的工厂函数$(): $(html标签);会根据传入的 html标记字符串创建一个jQuery对象,并返回 动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入到文档中; 当创建单个元素时,需注意闭合标签和使用标准的XHTML格式。例
使用jQuery操作DOM
易始的博客
07-04 264
DOM操作分类 DOM操作分为三类： *DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById() *HTML-DOM：用于处理HTML文档，如document.forms *CSS-DOM：用于操作CSS，如element.style.color="green" 提示：JavaScript用于对(x)html文档进行操作，它对这三类DOM操作都提供了支持 jQuery中的DOM操作 *jQuery对JavaScript中的DOM操作进行了封装 *
使用jQuery操作 DOM
shi15062772894的博客
12-31 493
DOM操作分类 DOM操作分为三类： DOM Core：任何一种支持DOM的编程语言都可以使用它，如getElementById() HTML-DOM：用于处理HTML文档，如document.forms CSS-DOM：用于操作CSS，如element.style.color="green" jQuery中的DOM操作： jQuery对JavaScript中的DOM操作进行了封装 jQuery中的DOM操作 样式操作 内容及Value值操作 节点操作 节点属性操作 节点遍历 CSS-DOM操
jQuery DOM操作
qq_36194388的博客
07-29 1342
jQuery中DOM基本操作 jQuery中的DOM操作主要对包括：建【新建】、增【添加】、删【删除】、改【修改】、查【查找】【像数据库操作】。下面的DOM操作将围绕上面的DOM树进行学习jQueryDOM操作。 【查】查找结点 查找节点非常容易，使用选择器就能轻松完成各种查找工作。 就是利用我们前面学习的选择器来查找节点的。 例：查找元素节点p返回p内的文本内容。 $("p").text(); 例：查找元素节点p的属性返回属性名称对应的属性值 $("p").attr("title"); //.
jquery操作DOM
最新发布
07-28
jQuery是一个流行的JavaScript库，它简化了对DOM元素的操作。下面是一些常见的jQuery操作DOM的示例： 1. 选择元素： 使用jQuery选择器可以方便地选择DOM元素。例如，要选择id为"myElement"的元素，可以使用以下代码： ```javascript var element = $("#myElement"); ``` 2. 操作样式： 使用jQuery可以轻松地添加、删除或修改元素的样式。例如，要将元素的背景颜色设置为红色，可以使用以下代码： ```javascript element.css("background-color", "red"); ``` 3. 操作内容： jQuery提供了许多方法来操作元素的内容。例如，要获取或设置元素的文本内容，可以使用以下代码： ```javascript var text = element.text(); // 获取文本内容 element.text("Hello, World!"); // 设置文本内容 ``` 4. 操作属性： 使用jQuery可以方便地获取或设置元素的属性。例如，要获取或设置元素的href属性，可以使用以下代码： ```javascript var href = element.attr("href"); // 获取href属性值 element.attr("href", "https://www.example.com"); // 设置href属性值 ``` 5. 添加和删除元素： 使用jQuery可以在DOM中添加或删除元素。例如，要在一个元素内部添加一个新的子元素，可以使用以下代码： ```javascript element.append("<div>New element</div>"); // 添加新的子元素 ``` 这些只是jQuery操作DOM的一些基本示例，jQuery还提供了许多其他强大的功能，如事件处理、动画效果等。你可以查阅jQuery的文档以了解更多信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值