jQuery方法小记

最新推荐文章于 2024-05-29 10:34:56 发布
最新推荐文章于 2024-05-29 10:34:56 发布
阅读量113 收藏
点赞数
分类专栏： 笔记 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50969362/article/details/117857335
版权

几个方法使用

jQuery

CDN

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

clone()

//复制
				$("button:eq(0)").click(function() {
					$("ol").append($("li").clone());//在最后添加 复制的所有元素
				});
				$("button:eq(0)").hover(
					function() {
						$("ol").css("color", "pink");
					},
					function() {
						$("ol").css("color", "black");
					});

append()

//增加		

				$("button:eq(1)").click(function() {
				const lis_r = $("<li>jQuery replaceWith()方法</li>");
				const lis_c = $("<li>jQuery clone()方法</li>");
					if ($("li").html() == "jQuery clone()方法") {
						$("ol").append(lis_c);
					} else {
						$("ol").append(lis_r);
					}
				});

remove()，empty()

				$("button:eq(2)").dblclick(function() {
					tips();
					$("ol").empty();//双击清空
				});
				$("button:eq(2)").click(function() {
					$("li:last").remove();//删除最后一个元素
				});	
				function tips() {
					if ($("ol").text() == "") {
						alert("请先增加元素！");
					};
				};

replaceWith()

//替换
				$("button:eq(3)").click(function() {
				const lis_r = $("<li>jQuery replaceWith()方法</li>");
				const lis_c = $("<li>jQuery clone()方法</li>");
					if ($("li").html() == "jQuery clone()方法") {
						$("li").replaceWith(lis_r); //li元素替换为 lis_r
					} else {
						$("li").replaceWith(lis_c);
					}
				});
				$("button:eq(4)").click(function() {
					$("button:eq(2)").unbind("click");
				});

全部

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">			
			$(document).ready(function() {
				//复制
				$("button:eq(0)").click(function() {
					$("ol").append($("li").clone());
				});
				$("button:eq(0)").hover(
					function() {
						$("ol").css("color", "pink");
					},
					function() {
						$("ol").css("color", "black");
					});
				//增加		

				$("button:eq(1)").click(function() {
				const lis_r = $("<li>jQuery replaceWith()方法</li>");
				const lis_c = $("<li>jQuery clone()方法</li>");
					if ($("li").html() == "jQuery clone()方法") {
						$("ol").append(lis_c);
					} else {
						$("ol").append(lis_r);
					}
				});
				//删除
				$("button:eq(2)").dblclick(function() {
					tips();
					$("ol").empty();
				});
				$("button:eq(2)").click(function() {
					$("li:last").remove();
				});

				function tips() {
					if ($("ol").text() == "") {
						alert("请先增加元素！");
					};
				};
				//替换
				$("button:eq(3)").click(function() {
				const lis_r = $("<li>jQuery replaceWith()方法</li>");
				const lis_c = $("<li>jQuery clone()方法</li>");
					if ($("li").html() == "jQuery clone()方法") {
						$("li").replaceWith(lis_r);
					} else {
						$("li").replaceWith(lis_c);
					}
				});
				$("button:eq(4)").click(function() {
					$("button:eq(2)").unbind("click");
				});
			});
		</script>
		<style type="text/css">
			/* 从1开始 */
			button:nth-child(5){
				background: #245123;
			}
		</style>
	</head>
	<body>
		<button type="button">复制</button>
		<button type="button">增加</button>
		<button type="button">删除</button>
		<button type="button">替换</button>
		<button type="button">失效</button>
		<ol>
			<li>jQuery clone()方法</li>
		</ol>
	</body>
</html>
梦中千秋
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jQuery疑难解答
Hy_csdn_road的博客
03-18 691
jQuery 1. Var、let和const声明变量的区别是什么？ var: var在全局声明的变量会自动挂载到顶层对象window上 var声明变量，存在变量提升的现象 var会先将声明变量的操作放在作用域的顶部，之后再执行赋值等操作 因为代码存在变量提升，变量可以先使用再声明，造成代码可读性非常糟糕！var可以重复声明变量 let: let声明的变量不会挂载在window上 let声明变量，...
jQuery的var let const
思维小刀
06-03 2509
var 申明了一个要么是全局，要么是函数级的变量；这种是我们最常见也是最常用的 let 申明了一个块级域的局部变量，并且可以给它一个初始化值 const 创建一个只读常量，在不同浏览器上表现为不可修改；建议申明后不修改；拥有块级作用域 <!DOCTYPE html> <!DOCTYPE html> <html> <head> </he...
JavaScript中的const关键字解析
最新发布
一起coding，一起嗨。
05-29 343
JavaScript中的const关键字解析
js中const,var,let定义变量的区别
自酌一杯酒
11-30 292
js中const,var,let定义变量的区别 1.const定义变量不可以修改，而且必须初始化 const b = 2;//正确 // const b;//错误，必须初始化 console.log('函数外const定义b：' + b);//有输出值 // b = 5; // console.log('函数外修改const定义b：' + b);//无法输出...
101.《jquery详细总结》
qq_44864082的博客
06-17 136
JQuery总结 前言 /* jquery优点 1、轻量级 2、强大的选择器 3、出色的DOM操作的封装 4、可靠的事件处理机制 5、完善的ajax 6、不污染顶级变量 7、出色的浏览器兼容 8、链式操作方式 9、隐式迭代 10、行为层和结构层的分离 11、丰富的插件支持 12、完善的文档 13、开源 jquery库的类型氛围两种 jquery.js (未压缩版) 开发版本 jquery.min.js (压缩版) 生产版本：经过工具压缩之后的版本 */ 1.JQuery与原生js对象相互转换
Jquery中dialog属性小记
10-28
Jquery中dialog属性小记，使用jquery dialog的朋友可以参考下。
jQuery UI AutoComplete 自动完成使用小记
10-28
})` 块在页面加载完成后执行 jQuery 代码，对 `txtTest` 输入框应用 `autocomplete` 方法： ```javascript $("#txtTest").autocomplete({ minLength: 1, // 设置最少输入字符数 source: function(request, ...
Jquery AutoComplete组件+Ajax实现搜索框输入提示功能小记
01-17
在输入页面利用JQuery获取用户输入，然后通过AJAX异步发送到处理页面，处理页面接收到值后进行模糊匹配查询，然后将结果返回，输入页收到返回的数据后在处理，并生成相应的页面显示在页面上。若是jquery ...
JavaScript 中const的使用
weixin_42754922的博客
12-31 1万+
ES2015 引入了两个重要的 JavaScript 新关键词：let 和 const。通过 const 定义的变量与 let 变量使用方法类似。let的使用点击下面链接：JavaScript 中let的使用_安之若素づ的博客-CSDN博客JavaScript 中Let的使用https://blog.csdn.net/weixin_42754922/article/details/122259217 JavaScriptconst变量必须在声明时赋值，但不能重新赋值。 const ...
js中的const 命令
热门推荐
轨迹
11-07 2万+
js中的const 命令 一直以来我在我字典里认为const 命令就是用来声明一个常量，然后并非如此，这也是我在工作中偶然发现的，然后查了下文档才得知，记录在档，以供参考： const 定义 const声明一个只读的常量 。一旦声明， 常量的值就不能改变。 常量 所谓的常量就是不能改变的值 const PI = 3.1415; PI // 3.1415 PI = 3; // TypeError: ...
const的几种使用方法
firefly_2002的专栏
10-07 2万+
const 的使用 const经常用来修饰一个值不能改变的量，安全，并且能消除存储操作(在存储时只存一次) const的几种用法： （1）      说明值常量 （2）      说明指针 （3）      说明函数参数及其返回值 （4）      说明类的常量和成员函数   const 说明值常量 值常量的说明一般放在头文件或者文件的开始部分，也可以放在类中进行说明 （1）
var与ES6中const、let声明的变量的区别
YinghaoGuo的博客
06-02 4645
好久以前的研究，今天再来回顾一下。 首先我们比较一下使用var声明的变量和不使用var声明的变量的区别： 使用var声明的变量声明前调用，那么该变量的值为undefined；不使用var声明的变量声明前调用直接报错Uncaught ReferenceError：xxx is not difined；使用var声明的变量不可delete，不使用var声明则可以delete掉释放空间。（实
js获取css属性值
天空影
03-21 2万+
因为之前用惯了jq来获取和设置css属性，然后在做demo不使用jq的情况下，竟然在这一点上碰到了问题，然后就自个搜了搜为什么，在查看了很多文档和博客之后才终于搞明白了。 &lt;style&gt; .box{ width:200px; height:200px; border:1px solid red; text-align: center; } &lt;/s...
js中const,var,let区别
10-10 2375
今天第一次遇到const定义的变量，查阅了相关资料整理了这篇文章。主要内容是：js中三种定义变量的方式const， var， let的区别。 1.const定义的变量不可以修改，而且必须初始化。 1 const b = 2;//正确 2 // const b;//错误，必须初始化 3 console.log('函数外const定义b：' + b);//有输出值 4 // ...
const常量不能更改和js的两种数据类型
西风XF的博客
03-10 5733
js的两种数据类型：基本类型：string,number,boolean,null,undefined -----&gt;  操作和保存在变量的实际的值 引用类型：Function,Array,Object  -----&gt;  值保存在内存中，js不允许直接访问内存，在操作的时候，操作的是对象的引用const的定义和基本用法可以参考阮一峰老师的ES6入门（传送门：http://es6.ruan...
React.js 中的 const
zyy_0725的博客
11-10 1万+
const const类似于java中的 常量，申明了值就不允许改变。 申明了 就必须立马赋值 不然会 抛SyntaxError: Missing initializer in const declaration 赋值语句和普通变量没什么区别 const Wjj = 10086;1 const和let一样，也只能在所在的{}范围内有效，超出了也会抛出Uncaught R
基于JavaScript的三种声明全局变量方式介绍
shixiaoguo90的专栏
04-18 851
JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍。 声明方式一： 使用var（关键字）+变量名(标识符)的方式在function外部声明，即为全局变量，否则在function声明的是局部变量。该方式即为显式声明详细如下： 复制代码 代码如下: var test = 5;  //全局变量 function a（） {   var cc=3; /
jquery 方法重写
08-23
在jQuery中，你可以通过使用`$.fn.extend`方法来重写已有的jQuery方法。这个方法可以用来扩展或修改jQuery的原型对象。 下面是一个简单的例子，展示如何重写`click`方法： ```javascript // 重写click方法 $.fn....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梦中千秋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值