jQuery

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

1，DOM对象转jQuery对象

2，jQuery对象转DOM对象

3，选择器

  1. id选择器  $("#id")
  2. 类选择器  $(".class")
  3. 标签选择器 $("tag")
  4. $(“*”) 选取页面中所有DOM对象。
  5. 组合选择器:$(“id,class,标签名”)
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery</title>
		<style type="text/css">
			div{
				background-color: red;
				width: 200px;
				height: 100px;
			}
		</style>
		
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			function func1(){
				$("#one").css("background","green");
			}
			function func2(){
				$(".two").css("background","blue");
			}
			function func3(){
				$("div").css("background","pink");
			}
			function func4(){
				$("*").css("background","black");
			}
			function func5(){
				$("span,#one").css("background","orange");
			}
		</script>
		
		<script type="text/javascript">
			
			function func1(){
				var $dom = $(":text");
				//获取第一个dom对象的值
				alert($dom.val());
			}
			function func2(){
				var $dom = $(":radio");
				for(var i = 0; i < $dom.length; ++i){
					//将jQuery转成dom对象
					alert($dom[i].value);
				}
			}
			function func3(){
				var $dom = $(":checkbox");
				for(var i = 0; i < $dom.length; ++i){
					//将jQuery对象转成dom对象
					alert($dom[i].value);
				}
			}
			
		</script>
		
	</head>
	<body>
		<div id="one">我是id等于one的div</div>
		<br />
		<div class="two">我是class等于two的div</div>
		<br />
		<div>我是没有id和class的div</div>
		<br />
		<span>我是一行数据</span>
		<br />
		<input type="button" value="选取id=one" onclick="func1()"/>
		<input type="button" value="选取class=two" onclick="func2()"/>
		<input type="button" value="选取div" onclick="func3()"/>
		<input type="button" value="选取所有" onclick="func4()"/>
		<input type="button" value="选取one 和 span的标签" onclick="func5()"/>
		
		
		<br /><br /><br />
		文本框：<input type="text" value="我是type=text"/><br />
		性别：
		<input type="radio" name="sex" value="man">男</input>
		<input type="radio" name="sex" value="woman">女</input>
		<br />
		爱好：<br />
		<input type="checkbox" value="bike"/>骑行
		<input type="checkbox" value="football"/>足球
		<input type="checkbox" value="music"/>音乐
		<br />
		
		<p>功能按钮</p>
		<input type="button" value="读取text" onclick="func1()"/>
		<input type="button" value="读取radio" onclick="func2()"/>
		<input type="button" value="读取checkbox" onclick="func3()"/>
		
	</body>
</html>

4，过滤器

1，基本过滤器：

  • 选择第一个first, 保留数组中第一个DOM对象 ：$("选择器：first")
  • 选择最后个last, 保留数组中最后DOM对象:$("选择器：last")
  • 选择数组中指定对象:$("选择器：eq(数组索引)")
  • 选择数组中小于指定索引的所有DOM对象：$("选择器：lt(数组索引)")
  • 选择数组中大于指定索引的所有DOM对象：$("选择器”：gt(数组索引)")

2，表单对象属性过滤器：

  • 选择可用的文本框：$(":text:enabled")
  • 选择不可用的文本框:$(":text:disabled")
  • 复选框选中的元素:$(":checkbox:checked")
  • 选择指定下拉列表的被选中元素:选择器>option:selected
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery</title>
		<style type="text/css">
			div{
				background: red;
			}
		</style>
		
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			$(function(){
				
				$("#btn1").click(function(){
					$("div:first").css("background","black");
				})
				$("#btn2").click(function(){
					$("div:last").css("background","green");
				})
				$("#btn3").click(function(){
					$("div:gt(3)").css("background","pink");
				})
				$("#btn4").click(function(){
					$("div:lt(3)").css("background","blue");
				})
				$("#btn5").click(function(){
					$("div:eq(3)").css("background","yellow");
				})
				
			})
		</script>
		
	</head>
	<body>
		<div id="one">我是div-0</div>
		<div id="two">我是div-1</div>
		<div>
			我是div-2
			<div class="son">我是div-3</div>
			<div class="son">我是div-4</div>
		</div>
		
		<div>我是div-5</div>
		<br />
		<span>我是span</span>
		<br />
		<p>功能按钮</p>
		<input type="button" id="btn1" value="选择第一个div"/><br />
		<input type="button" id="btn2" value="选择最后一个div"/><br />
		<input type="button" id="btn3" value="选择索引大于3的索引"/><br />
		<input type="button" id="btn4" value="选择索引小于3的索引"/><br />
		<input type="button" id="btn5" value="选择索引等于4的索引"/><br />
	</body>
</html>

5，函数

1，val()

操作数组中DOM对象的value属性.$(选择器).val() ：无参数调用形式，读取数组中第一个DOM对象的value属性值$(选择器).val(值)：有参形式调用;对数组中所有DOM对象的value属性值进行统一赋值

2，text()

操作数组中所有DOM对象的【文字显示内容属性】 $(选择器).text():无参数调用，读取数组中所有DOM对象的文字显示内容，将得到内容拼接为一个字符串返回$(选择器).text(值):有参数方式，对数组中所有DOM对象的文字显示内容进行统一赋值

3，attr()

对val,text 之外的其他属性操作$(选择器).attr(“属性名”):获取DOM数组第一个对象的属性值$(选择器).attr(“属性名”,“值”):对数组中所有DOM对象的属性设为新值

4，hide()

$(选择器).hide() :将数组中所有DOM对象隐藏起来

5，show()

$(选择器).show():将数组中所有DOM对象在浏览器中显示起来

6，remove()

$(选择器).remove() : 将数组中所有DOM对象及其子对象一并删除

7，empty()

$(选择器).empty()：将数组中所有DOM对象的子对象删除

8，append()

为数组中所有DOM对象添加子对象$(选择器).append("<div>我动态添加的div</div>")

9，html()

设置或返回被选元素的内容（innerHTML）。$(选择器).html()：无参数调用方法，获取DOM数组第一个匹元素的内容。$(选择器).html(值)：有参数调用，用于设置DOM数组中所有元素的内容。

10，each()

each是对数组，json和dom数组等的遍历,对每个元素调用一次函数。语法1：$.each(要遍历的对象,function(index,element){处理程序})语法2：jQuery对象.each( function( index, element ){处理程序})index: 数组的下标element: 数组的对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery</title>
		<style type="text/css">
			div{
				background: red;
			}
		</style>
		
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn1").click(function(){
					var txt = $(":text").val();
					alert("我是第一个text:" + txt);
				});
				$("#btn2").click(function(){
					$(":text").val("hello");
				});
				$("#btn3").click(function(){
					var $dom = $("div");
					for(var i = 0; i < $dom.length; ++i){
						alert(i + "=" + $dom.get(i).innerText);
					}
				});
				$("#btn4").click(function(){
					alert($("div:first").text());
				});
				$("#btn5").click(function(){
					alert($("div").text("hahha"));
				});
				$("#btn6").click(function(){
					$("img").attr("src","img/3.png");
				});
			});
		</script>
	</head>
	<body>
		<p>文本框val</p>
		<input type="text" value="张飞"/>
		<input type="text" value="关羽"/>
		<input type="text" value="刘备"/>
		<p>文本数据text</p>
		<div>我是第一个div</div>
		<div>我是第二个div</div>
		<div>我是第三个div</div>
		<p>图片</p>
		<img id="img1" src="img/1.png"/>
		<img id="img2" src="img/2.png"/>
		<p>功能按钮</p>
		<button id="btn1">获取第一个文本框的值</button>
		<button id="btn2">设置所有文本框为新值</button>
		<button id="btn3">获取div的所有文本</button>
		<button id="btn4">获取第一个div文本</button>
		<button id="btn5">设置div新文本</button>
		<button id="btn6">设置img图片</button>
	
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery</title>
		<style type="text/css">
			div{
				background: blue;
			}
		</style>
		
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			$(function(){
				
				$("#btn1").click(function(){
					$("div").hide();
				})
				$("#btn2").click(function(){
					$("div").show();
				})
				$("#btn3").click(function(){
					$("select").empty();
				})
				$("#btn4").click(function(){
					$("select").remove();
				})
				$("#btn5").click(function(){
					$("#father").append("<input type='text' value='我是动态添加的input标签'>");
				})
				$("#btn6").click(function(){
					alert($("span").html());
				})
				$("#btn7").click(function(){
					alert($("span").html("我是span标签"));
				})
				$("#btn8").click(function(){
					$("span").each(function(i,n){
						alert("索引" + i + " " + n.innerHTML);
					})
				})
				$("#btn9").click(function(){
					var arr = ["a","b","c"];
					$.each(arr,function(i,n){alert("数组下标" + i + "成员是" + n)});
				})
				$("#btn10").click(function(){
					//遍历json对象
					var arr = {name:"张三",age:"20"};
					$.each(arr,function(i,n){alert("key是: " + i + ",value是" + n)})
				})
				$("#btn11").click(function(){
					//遍历dom数组
					$.each($(":text"),function(i,n){alert("下标是 " +i+",dom的value是" +n.value)})
				})
				$("#btn12").click(function(){
					$(":text").each(function(i,n){alert("下标是 " +i+ ",dom的value是：" + n.value)});
				})
			})
		</script>
	</head>
	<body>
		
		<p>文本框val</p>
		<input type="text" value="刘备"/>
		<input type="text" value="关羽"/>
		<input type="text" value="张飞"/>
		
		<p>hide和show</p>
		<div id="one">我是one</div>
		<div id="two">我是two</div>
		<p>remove和empty</p>
		<select>
			<option>老虎</option>
			<option>狮子</option>
			<option>大象</option>
		</select>
		<br />
		<select>
			<option>C++</option>
			<option>Java</option>
			<option>Python</option>
		</select>
		<br />
		<p>append</p>
		<div id="father" style="background: red;">我是父div</div>
		<br />
		<p>html</p>
		
		<span>mysql是一个<b>数据库</b></span>
		<span>使用jdbc访问数据库</span><br />
		
		<p>功能按钮</p>
		<button id="btn1">隐藏所有div</button>
		<button id="btn2">显示所有div</button>
		<button id="btn3">清除所有下拉列表中的子标签</button>
		<button id="btn4">删除所有下拉列表</button>
		<button id="btn5">添加元素</button>
		<button id="btn6">获取第一个span的文本内容</button>
		<button id="btn7">设置span的内容</button>
		<button id="btn8">each循环</button>
		<button id="btn9">one</button>
		<button id="btn10">two</button>
		<button id="btn11">three</button>
		<button id="btn12">three</button>
	</body>
</html>

6，事件

定义元素监听事件：

语法：$(选择器).监听事件名称(处理函数);

说明：监听事件名称是js事件中去掉on后的内容，js中的onclick的监听事件名称是click例如：为页面中所有的button绑定onclick,并关联处理函数fun1$("button").click(fun1)为页面中所有的tr标签绑定onmouseover，并关联处理函数fun2$("tr").mouseover(fun2)

on()绑定事件：

  • 语法：$(选择器).on(event,,data,function)
  • event：事件一个或者多个，多个之间空格分开
  • data：可选。规定传递到函数的额外数据，json格式
  • function:可选。规定当事件发生时运行的函数
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery</title>
		<style type="text/css">
			div{
				background: blue;
				width: 200px;
				height: 80px;
			}
		</style>
		
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn1").on("click",function(){
					
					$("#mydiv").append("<button id='mybutton'>我是添加的NewButton</button>");
					
					$("#mybutton").on("click",function(){
						alert("Newbutton被点了"); 
					});
				})
				$("p").on("click",{name:"luoyi"},function(event){
					alert(event.data.name);
				});
			});
			
		</script>
	</head>
	<body>
		<p>功能按钮</p>
		<button id="btn1">动态添加button</button>
		<br />
		<div id="mydiv"></div>
		<p>可以clickme</p>
	</body>
</html>

 

7，Ajax

$.ajax()

$.get()

$.post()

 演示

 

 

 

 

 

 

&罗毅
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jquery1.8.3
09-26
jquery1.8.3官方包，包含jquery-1.8.3.min.js和jquery-1.8.3.js两个文件。
JQuery的引用
zwjl1017的博客
04-01 3955
最近在做的项目是用JQuery开发的，但是在JQuery这项技术上，资质尚浅，特意学习一下，做一些笔记，有不对之处希望大佬们多多指教！ JQuery的下载和引入 在JQuery官网上 （Download jQuery | jQuery）jQuery: The Write Less, Do More, JavaScript Libraryhttps://jquery.com/download/ 标记的是开发环境下的版本，按个人需要去使用版本，点开以后直接全选复制，在项目中创建一个js文件（例：JQue
jQuery基础
luckyboy!的博客
11-16 3316
jQuery由美国人John Resig于2006年创建。jQuery是目前最流行的JavaScript程序，它是对JavaScript对象和函数的封装。它的设计思想是write less,do more。
jQuery 遍历对象
m0_67458498的博客
03-28 4151
遍历对象 $.each(对象，function(k 对象属性变量，v对象属性值变量） var cat={ name:'kitty'; age:5 climb:function(){ console.log('在爬树') } $.each (cat,function(k,v){ console.log(k+':'+v); }) 遍历数组 $.each(数组，function(k元素下标变量，v元素值变量{});) var color=['red','blu
jquery移除标签
qq_35086941的博客
04-28 3624
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function
jQuery选择器
m0_57774967的博客
06-16 4555
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素（注意：jQuery选择器返回的是jQuery对象）jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器jQuery选择器虽然很多，但是选择器之间可以互相替代，就是说获取一个元素，会有很多种方法获取到，所以平时真正能用到的只是少数的最常用的选择器...
jquery在线引用
jiufu_的博客
07-15 4978
直接引如下的即可 <scripttype="text/javascript"src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
jQuery的下载及安装
weixin_64812436的博客
10-17 4913
1、下载地址：https://jquery.com/，点击Download jQuery下载 2、继续点击如下图所示 3、点击后会出现如图所示清况，先Ctrl+A全选，再Ctrl+C复制 4、在 vs code 新建js文件，名字自己取，我取的是jquery.js 5、使用时，用script标签导入jquery.js文件，即可正常调用jquery里面的方法
jQuery-3.4.1下载
cheng1a的博客
02-11 5021
jQuery-3.4.1下载 链接：https://pan.baidu.com/s/1Z1mjG00jzSzXEmXNtvFT8g 提取码：0430
jQuery引入方式
m0_67388537的博客
07-07 2780
jQuery的两种引入方式
jquery 3.5.1
10-27
jquery-3.5.1包含 jquery-3.5.1.js、 jquery-3.5.1.min.js两个文件
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、后面会出一个简单的使用方法。
基于Java的library电子图书管理系统设计源码
05-24
本项目是基于Java的library电子图书管理系统设计源码，包含32个文件，其中包括16个Java文件、3个XML文件、3个HTML文件、2个JavaScript文件、1个Gitignore文件、1个YAML文件、1个CSS文件、1个EOT文件、1个SVG文件和1个TTF文件。这个项目是一个电子图书管理系统，旨在通过Java、HTML、JavaScript和CSS技术栈实现，为用户提供高效、便捷的电子图书管理服务。
Python_微调lamamistraldelama模型和更多的指南.zip
最新发布
05-24
Python_微调lamamistraldelama模型和更多的指南
基于open stack搭建私有云平台
05-24
私有云：IaaS:毕业设计
flac使用命令流-源码.zip命令流-源码_.zip
05-24
flac使用命令流-源码.zip命令流-源码_

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值