JQuery

最新推荐文章于 2022-01-15 17:35:08 发布
最新推荐文章于 2022-01-15 17:35:08 发布
阅读量131 收藏
点赞数
文章标签： jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48967079/article/details/108706059
版权

JQuery

1.什么是JQuery？
JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一整套定义好的方法
2.如何调用JQuery?
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
3.使用JQuery绑定事件
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
			$('div').click(function(){
				alert("Hello Word");
			})	
			})
		</script>
	</head>
	<body>
		<div>点击弹框</div>
	</body>
</html>
//我们可以看到在绑定事件前多了一段代码
$(function(){
    
})
这段代码的意思是延迟加载的意思，我们以前在操作DOM时，一般将Script写到后边，因为JS遵循自上而下的原则，Script写到上边是获取不到对象的,原生JS中我们可以使用onload进行延迟加载，而JQuery中则使用此代码进行延迟加载
4.JQuery获取的对象和原生JS获取到的对象的区别
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="div1">

		</div>
	</body>
</html>
<script type="text/javascript">
	var jqObj = $('#div1');
	var Obj=document.getElementById("div1");
	document.write(jqObj); //[object Object]
	document.write(Obj);//[object HTMLDivElement]
	document.write(jqObj==Obj);//false
	//很明显,两个获取到的对象是不一样的,JQuery获取的对象是不可以调用原生JS中的属性和方法
	//同样,JS获取的对象也不能调用JQuery中的方法和属性
</script>
5.使用JQuery对象添加类,删除类以及设置样式
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<h1>爱你</h1>
	</body>
</html>
<script type="text/javascript">
	$('h1').addClass("hone");//给指定标签添加类
	$(".hone").css("color","red");
	$('h1').removeClass("hone");//给指定标签移除类
	//$(".hone").css("color","yellow"); 并没有改变样式,很明显，hone类已经被移除
</script>
6.使用JQuery设置，获取，移除属性
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="ls">今天天气不错</div>
	</body>
</html>
<script type="text/javascript">
	//获取属性的值
   var did=	$("div").attr("id");
   document.write(did);// ls
   //添加属性
   $("div").attr({"class":"my","style":"color:red"});
   //<div id="ls" class="my" style="color:red">今天天气不错</div>,添加属性后的结果
   
   //移除属性
   $("div").removeAttr("class");
   //<div id="ls" style="color:red">今天天气不错</div>,移除属性后的结果
   </script>
7.如何获取以及设置元素中HTML,文本,表单的文本内容?
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div>
			<span 	style="color: red;">哈哈</span>
		</div>
		<span id="">
			你好
		</span><br>
		<input type="text"  value="111" />
	</body>
</html>
<script type="text/javascript">
	//获取元素中的HTML内容
	var dh=$("div").html(); //哈哈
	//设置所有div元素的内容
	$("div").html("<h1>我爱你<h1>") //我爱你
	
	//获取文本内容
	$("span").text(); //你好
	
	//设置文本内容
	$("span").text("BestLee"); //  BestLee
	
	//获取文本框中的值
	var res=$("input").val();
	document.write(res);//111
	
	//设置文本框中的值
	$("input").val("hello");
	
	//获取设置后的值
	document.write($("input").val());//hello
</script>
8.JQuery切换Class属性
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			.div1{
				height: 200px;
				width: 200px;
				background-color: red;
			}
			.div2{
				height: 200px;
				width: 200px;
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div class="div1"></div>
		<button type="button">点击切换样式</button>
	</body>
</html>
<script type="text/javascript">
	//给button按钮绑定事件
	$("button").click(function(){
		$("div").toggleClass("div2");//切换class
	})
</script>
9.JQuery对象和原生对象的互相转换
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="div1">
			哈哈
		</div>
	</body>
</html>
<script type="text/javascript">
	//获取原生DOM对象
	var do1=document.getElementById("div1");
	//获取JQquery对象
	var jq=$("#div1");
	
	//原生转JQuery
	var jqdo=$(do1);
	jqdo.css("background-color","red");//转换后的对象可以调用JQuery中的方法
	
	//JQuery对象转原生
	
	jq.get(0).style.fontSize="30px";
	
</script>
10.JQuery创建元素并添加
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
	</body>
</html>
<script type="text/javascript">
	//首先创建一个节点,然后添加
	var res=$("<h1>今天天气真好<h1>");
	$("body").append(res);
	
	//直接添加
	$("body").append("<h2>哈哈<h2>")
</script>
11.JQuery中如何绑定和解绑事件?
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button">按钮1</button>
		<button type="button">按钮2</button>
	</body>
</html>
<script type="text/javascript">
	//首先给两个button按钮绑定事件
	$("button").on("click",function(){
		alert("1");
	});
	
	//给第二个button按钮解绑事件
	$("button").eq(1).off("click");
</script>
12.JQuery复制和删除元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button" class="bt1">按钮1</button>
	</body>
</html>
<script type="text/javascript">
	//绑定事件
	$("button").click(function(){
		alert(1);
	})
	//克隆按钮
	var x=$("button").clone(true);//true表示复制事件处理函数,false代表不复制事件
	//添加
	$("body").append(x);
	
	//删除
	$("body").remove();
</script>
13.事件冒泡
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#one{
				height: 500px;
				width: 500px;
				background: #FFFF00;
			}
			#two{
				height: 300px;
				width: 300px;
				background: red;
			}
			#three{
				height: 100px;
				width: 100px;
				background: black;
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">百度</a>
		
		<form action="#" method="post">
			<input type="text" id="" value="" name="username"/>
			<input type="submit" value="提交"/>
		</form>
		
		<div id="one">
			<div id="two">
				<div id="three">
					
				</div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	$('a').click(function(e){
		e.preventDefault();
		alert("abc");
	})
	
	$('form').submit(function(e){
		//异步提交
		e.preventDefault();
		alert("异步提交");
	})
	
	$('#one').click(function(e){
		e.stopPropagation()
		alert(1111)
	});
	
	$('#two').click(function(e){
		e.stopPropagation()
		alert(222)
	});
	$('#three').click(function(e){
		e.stopPropagation();
		alert(333)
	});
	
</script>
一位不透露姓名的先生
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery1.8.3
09-26
jquery1.8.3官方包，包含jquery-1.8.3.min.js和jquery-1.8.3.js两个文件。
js姓名除了姓显示其他*
JessicaLi的博客
09-29 1331
function formatName(str) { return str.substr(0,1)+new Array(str.length).join('*') ; }
js 只显示姓
huang772624的专栏
11-18 581
var str="张三" str.substr(0,1)+new Array(str.length).join('*')
使用Postman测试接口
qq_41984644的博客
07-29 199
使用Postman测试接口第一步、[下载Postman软件](https://www.getpostman.com/)第二步、打开postman软件创建request请求 第一步、下载Postman软件 现在有这么一个需求 如果存在结果因本公司服务器原因导致未获取结果，可主动访问 http://www.baidu.com/api/get_result/ ，通过post请求获取结果。...
JS正则表达式隐藏身份证中间8位(电话号码/姓名/千位符)......
时漂亮的博客
01-15 5693
// 案例 <template> <div>{{ house || '' + address || '' }}</div> <div>{{ house || '' }} {{ address || '' }}</div> <div>{{ (house || '').concat(address || '') }}</div> <div>{{ idCard && idC.
js的隐藏姓名方式保护用户隐私，只显示首个汉字也就是姓，后面的隐藏，匿名方式
u012442504的专栏
05-15 4607
alert("13456789012".replace(/([\u4E00-\u9FA5]{1})([\u4E00-\u9FA5]+)$/,"$1*****"));
jquery-3.7.0.min.js（jQuery下载）
最新发布
06-25
jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）jquery-3.7.0.min.js（jQuery下载）...
jquery-3.3.1.js和jquery-3.3.1.min.js
03-22
jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-3.3.1.js和jquery-3.3.1.min.js免费下载哈。jquery-...
jquery版本2.2.4
03-04
1、原生js使用太繁琐，使用jquery。 2、免费下载，希望大家爱上学习。 3、后面会出一个简单的使用方法。
jquery-migrate3.4版本
05-17
jquery-migrate3.4版本
前端+jQuery+实现烟花特效
05-02
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
jQuery源码 jQuery源码 jQuery源码
04-19
jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码jQuery源码...
jquery验证码
10-19
jQuery实现web开发验证码，无需后台验证。简单方便实用
jquery1.7.2
08-28
jquery1.7.2中文文档，这是一个chw格式的中文文档，方便查询
jquery 3.5.1
10-27
jquery-3.5.1包含 jquery-3.5.1.js、 jquery-3.5.1.min.js两个文件
javascript正则姓名加密，保留姓，名用*号代替
热门推荐
祈澈菇凉
12-04 1万+
大家都知道javascript诞生最初的目的是为了处理表单验证操作的。javascript发展到现在，已经从一个简单的表单验证器功能发展成为一门强大而复杂的语言。 前两天在群里看到一个群友提问的，今天突然想起来，写了个小的demo，记得之前也写过一个正则验证手机号码的demo，其实都差不多。想要的效果差不多如下所示： &lt;!DOCTYPE...
js名字匿名只显示姓氏（第一个字）
Qing_X_C的博客
07-17 1261
效果如图： function formatName(str) { return str.substr(0,1)+new Array(str.length).join('*') ; }
__GetZoneResult_ = { mts:'1589808', province:'辽宁', catName:'中国移动', telString:'158980
hjiaqing的博客
11-21 3835
在开发微信小程序时，里面有个练习项目，开发电话归属查询服务。下面是淘宝电话归属查询地址：https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=15898087107 查询结果如下，需要转换成JSON.使用javascript,同时，使用JSON.parse()方法。 其中有个方法，如下： function strJson(str){...
php淘宝接口API查询手机号归属地 __GetZoneResult_
eagletosoar的博客
07-21 1496
1、调用方法传入 手机号 function get_mobile_provice($mobile){ $ch = curl_init(); $url = "https://tcc.taobao.com/cc/json/mobile_tel_segment.htm?tel=$mobile"."&t=".time(); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); ...
jQuery
05-31
jQuery 是一个流行的 JavaScript 库，它可以简化 JavaScript 编写的复杂度。它是免费、开源的，可以跨浏览器使用，支持主流的浏览器。 jQuery 提供了很多的 API 和方法，可以用于 DOM 操作、事件处理、AJAX、动画...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值