JQuery

最新推荐文章于 2023-12-16 12:23:20 发布
最新推荐文章于 2023-12-16 12:23:20 发布
阅读量201 收藏
点赞数
文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73667562/article/details/127319134
版权

1.jQuery的概念

jquery是一个快速、简洁的JavaScript库，其设计的宗旨就是"write less,do more",即倡导写更少的代码，做更多的事情。

学习jquery的本质：就是学习调用这些函数（方法）

2.jQuery的优点

1.轻量级。核心文件才几十kb，不会影响页面加载速度。 2.跨浏览器兼容，基本兼容了现在主流的浏览器。 3.链式编程、隐式迭代。 4.对事件、样式、动画支持，大大简化了DOM操作。 5.支持插件扩展开发。有着丰富的第三方的插件。 6.免费、开源

3.jQuery的入口函数

第一种：简单易用

$(function(){

});

4.jQuery的顶级对象$

1.$是jquery的别称，在代码中可以使用jQuery代替，但一般为了方便，通常都直接使用$

2.$是jQuery的顶级对象$，相当于原生JavaScript中的window。把元素利用$包装成jQuery对象，就可以调用jQuery的方法

                                                  jQuery对象和DOM对象的转换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!--/引入jQuery库-->
		<script src="js/jquery.min.js">
			
		</script>
		<script type="text/javascript">
			$(function(){
			var a1=$("#d1");//获取id元素
			console.log(a1);
			console.log(a1.text());//使用JQ对象的方法获取元素的文本内容
			console.log(a1[0].innerText);//JQ对象转换成DOM对象获取文本内容
			
			console.log("................")
			var d1=document.getElementById("d1")//根据id获取元素
			console.log(d1.innerText);//使用DOM对象获取元素文本内容
			console.log($(d1).text());//DOM对象转化为JQ对象，获取文本内容
			
			var a2=$("p");
			console.log(a2);//获取标签元素
			console.log(a2.text())
			});
		</script>
	</head>
	<body>
		<h2>JQuery入门</h2>
		<div id="d1">
			id为d1的div
		</div>
		<p>这是一个p标签1</p>
		<p>这是一个p标签2</p>
	</body>
</html>

二.jQuery的选择器

2.1基础选择器

名称用法描述
ID选择器$("#id")    获取指定id的元素
全选选择器   $("*")    匹配所有元素
类选择器  $(".class")  获取同一类class的元素
标签选择器$("div")  获取同一类标签的所有元素
并集选择器  $("div,p,li")  选取多个元素
交集选择器 $("li.current")   交集元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js">	</script>
			
	
		<script type="text/javascript">
			$(function(){
			//1.基础选择器
				//JQ的id选择器
				var d1=$("#d1");
				console.log(d1.text());
				//JQ的class选择器
				var c1=$(".c1");
				console.log(c1.text());
				//JQ的标签选择器
				var p=$("p")
				console.log(p.text());
});
		</script>
	</head>
	<body>
		<div id="d1">
			id选择器
		</div>
		<div class="c1">
			class选择器1
		</div>
		<div class="c1">
			class选择器2
		</div>
		
		<p>标签选择器1</p>
		<p>标签选择器2</p>
		<p>标签选择器3</p>
	</body>
</html>

        2.2层级选择器
层级选择器最常用的两个分别为:后代选择器和子代选择器。

名称   用法 描述
子代选择器$("ul>li")   使用>号，获取亲儿子层级的元素;注意;并不会获职孙子层设的元素
后代选择器$("ul li")   使用 号，代表后代选择器，获取ul下的所有li元素，包括孙子等
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js">	</script>
			
	
		<script type="text/javascript">
			$(function(){
               //2.层级选择器
				var li=$("ul li")  //ul>li  直接包含的li; ul li 所有包含的li
				li.css("color","#8A2BE2")
   	});
		</script>
	</head>
	<body>
           <ul>
 			<li><a href="#" target="_blank">苹果</a></li>
			<li><a href="#" target="_blank">香蕉</a></li>
			<li>橙子</li>
			<li>葡萄</li>
			<li>西瓜</li>
			<ol>
				<li>牛奶</li>
				<li>面包</li>
				<li>瓜子</li>
			</ol>
		</ul>
	</body>
</html>

  2.3.属性选择器
属性选择器是制定DOM元素对应属性的一种选择器

名称    用法  描述    
属性名称选择器 $(A[属性名]”) 包含指定属性的选择器
属性选择器 $(“A[属性名=值)) 包含提定属性等于指定值的选择器   
复合属性选择器S(A[属性名-值]0--”)   包含多个属性条件的选择器
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js">	</script>
			
	
		<script type="text/javascript">
			$(function(){
              //3.属性选择器
				var a=$("a[target='_blank']");//选择具有target属性且属性值是_blank的a标签
				a.css("color","red");
			});
		</script>
	</head>
    <body>
   <ul>
			<li><a href="#" target="_blank">苹果</a></li>
			<li><a href="#" target="_blank">香蕉</a></li>
			<li>橙子</li>
			<li>葡萄</li>
			<li>西瓜</li>
			<ol>
				<li>牛奶</li>
				<li>面包</li>
				<li>瓜子</li>
			</ol>
		</ul>
	</body>
</html>

2.4过滤选择器
筛选选择器，顾名思义就是在所有的选项中选择满足条件的进行筛选选择

语法用法描述    
:first  $("li:first") 获取第一个1元素    
:last$("li:last") 获取最后一个h元索    
:eq(index)  $("li:eq(2)”) 获取到的1i元素中，选择索引号为2的元素，索引号index从0开始
:odd $("li:odd )   获取到的11元素中，选择索引号为奇数的元素
:even$("li:even”)    获取到的11元素中，选择索引号为偶数的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js">
			
		</script>
		<script type="text/javascript">
			$(function(){
				//过滤选择器
				var li=$("ul>li:odd");
				li.css("color","red")
			});
		</script>
	</head>
	<body>
		<ul>
			<li>苹果</li>
			<li>香蕉</li>
			<li>橙子</li>
			<li>葡萄</li>
			<li>西瓜</li>
			<li>柚子</li>
			</ul>
	</body>
</html>

2.5表单过滤选择器    I    
在表单元素中，针对不同的表单元素状态(Query提供的表单过滤选择器。

名称用法描述    
可用元素选择器  :enabled  获得可用元素    
不可用元素选择器 :disabled   获得不可用元素    
选中选择器:checked 获得单选/复选框造中的元素 
选中选择器:selected获得下拉框选中的元素
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				//按钮的点击事件
				$("#btn").click(function(){
				var jq1=$("input:enabled");
				//alert(jq1.val());
				var jq2=$("input:checked");
				for(var i=0;i<jq2.length;i++){
					var dom=jq2[i];
					alert(dom.value);
				}	
				});
				
			});
		</script>
	</head>
	<body>
		<form action="#" method="post">
		可用表单：<input type="text" name="name" value="" /><br />
		不可用表单：<input type="text" name="id" value="编号20056" disabled="true"/><br />	
		单选框:<input type="radio" name="sex" id="sex" value="男" />男	
			 <input type="radio" name="sex" id="sex" value="女" />女	<br />
		复选框:<input type="checkbox" name="hobby"  value="唱歌" />唱歌	 
		     <input type="checkbox" name="hobby"  value="跑步" />跑步	 
		     <input type="checkbox" name="hobby"  value="篮球" />篮球<br />
		下拉框:<select name="addr">
			<option value="河南">河南</option>
			<option value="河北">河北</option>
			<option value="山东">山东</option>
			<option value="山西">山西</option>
		</select><br />
			<button type="button" id="btn">按钮</button>
		</form>
	</body>
</html>

练习题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#context{
				width: 200px;
				height: 200px;
				background-color: blueviolet;
			}
		</style>
		<script src="js/jquery.min.js"></script>
		
		<script type="text/javascript">
			$(function(){
				//1.点击那一项让当前项变红色，取余项变蓝色
				$("ul>li").click(function(){
					$(this).css("color","red")
					$(this).siblings().css("color","blue")
				});
				//2.
				//变宽
				$("#towidth").click(function(){
					$("#context").css("width","400px")
				});
				//变高
				$("#toheight").click(function(){
					$("#context").css("height","400px")
				});
				//隐藏
				$("#tohide").click(function(){
					$("#context").hide()
				});
				//显示
				$("#toshow").click(function(){
					$("#context").show()
				});
				//切换
				$("#totiggle").click(function(){
					$("#context").toggle()
				});
				//滑动切换  slideToggle()  slideDown() slideUp()
				$("#totiggle").click(function(){
					$("#context").
				});
			
			});
		</script>	
		
	</head>
	<body>
		<ul>
			<li>苹果</li>
			<li>香蕉</li>
			<li>桃子</li>
			<li>西瓜</li>
			<li>葡萄</li>
			<li>柚子</li>
		</ul>
		<hr />
		
		<button id="towidth">变宽</button>
		<button id="toheight">变长</button>
		<button id="tohide">隐藏</button>
		<button id="toshow">显示</button>
		<button id="totiggle">切换</button>
		<div id="context">
			
		</div>
	</body>
</html>


        

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>淘宝精品案例</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			ul li{
				list-style: none;
			}
			a{
				text-decoration: none;
			}
			#context{
				width: 310px;
				height: 261px;
				/*border: 1px pink solid;*/
				margin: 30px auto;
				overflow: hidden;
			}
			#left{
				width: 100px;
				/*border: 1px blue solid;*/
				float: left;
				
			}
			#right{
				width: 200px;
				border: 1px;
				float: right;
			}
			#left ul li a{
				display: inline-block;
				width: 80px;
				height: 29px;
				font-family: "行楷";
				font-size:15px;
				line-height: 29px;
				text-align: center;
				background-color:peachpuff ;
				font-weight: bold;
			}
			#left li a:hover{
				background-color: aqua;
			}
		</style>4
		<script src="js/jquery.min.js"></script>
			
			<script type="text/javascript">
				$(function(){
				 $("#left>ul>li").mouseover(function(){
				 	//拿到当前鼠标放到列表项的索引
				 	var index=$(this).index();
				 	//根据索引找到右侧匹配的项进行显示，其他隐藏
				 	$("#right>ul>li:eq("+index+")").fadeIn().siblings().hide()
				 });
				
				});
			</script>
	</head>
	<body>
		<div id="context">
			<div id="left">
				<ul>
					<li><a href="#">女靴</a></li>
					<li><a href="#">雪地靴</a></li>
					<li><a href="#">冬裙</a></li>
					<li><a href="#">呢大衣</a></li>
					<li><a href="#">毛衣</a></li>
					<li><a href="#">棉服</a></li>
					<li><a href="#">女裤</a></li>
					<li><a href="#">羽绒服</a></li>
					<li><a href="#">牛仔裤</a></li>
				</ul>
			</div>
			<div id="right">
				<ul>
					<li><img src="img/女靴.jpg"/></li>
					<li><img src="img/雪地靴.jpg"/></li>
					<li><img src="img/冬裙.jpg"/></li>
					<li><img src="img/呢大衣.jpg"/></li>
					<li><img src="img/毛衣.jpg"/></li>
					<li><img src="img/棉服.jpg"/></li>
					<li><img src="img/女裤.jpg"/></li>
					<li><img src="img/羽绒服.jpg"/></li>
					<li><img src="img/牛仔裤.jpg"/></li>
				</ul>
			</div>
		</div>
	</body>
</html>


 
  
         
       
     
         
   
 

weixin_73667562
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Java Web Jquery表单验证
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
jQuery - 3.6.0
05-04
jQuery 是一个快速、小巧且功能丰富的 JavaScript 库。它使HTML文档遍历和操作，事件处理，动画和Ajax等功能变得更加简单，它具有易于使用的API，可跨多种浏览器运行。凭借多功能性和可扩展性的结合，jQuery改变了数...
jQuery
最新发布
White-Camellia
12-16 1245
jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“Write Less，Do More”，即倡导写更少的代码，做更多的事情。
jQuery基础
weixin_51445423的博客
07-12 635
公司摸鱼自学jQuery
jQuery使用（超详细）
热门推荐
Eliauk_Doubling的博客
08-12 1万+
会把这个dom对象转换成jQuery对象,即 [object HTMLSpanElement] ======> [object Object]* 4.传入参数为[DOM对象]时，将DOM对象包装为jQuery对象返回。* 2.传入参数为[HTML字符串]时，根据这个字符串创建元素节点对象。* 3.传入参数为[选择器字符串]时，根据这个字符串查找元素节点对象。*1. 传入参数为[函数]是，在文档加载完成以后执行这个函数。jQuery对象的本质时dom对象的数组+jQuery提供的一系列的功能函数。
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-migrate
03-05
jQuery 迁移插件， Migrate 有两个版本。jquery-migrate-1.4.1版本将帮助您将 1.9 之前的 jQuery 代码更新到 jQuery 1.9 到 3.0。 jquery-migrate-3.4.0版本将帮助您更新代码以在 jQuery 3.0 或更高版本上运行。 ...
jqury前端插件
01-23
46种好用的前端插件，提高前端开发效率，值得学习，值得收藏。
各个版本的jQuery
07-13
这里收集了各个版本的jq，比较全，从1.6.4到3.3.1都有。我给每个文件都按版本号重新命名了一下，方便大家获取。本人喜欢用1.8.3的版本jq,bootstrap需要的是1.9以上的jq，2.0以上的jq不再兼容IE8，3以上的jq有了很多新功能，大家可以根据需要来选择版本。
JQuery 详细教程
qq15035899256的博客
05-13 6030
本文是对JQuery的学习，首先认识了JQuery包装集对象和Dom对象的区别，又学习了JQuery选择器，后续又学习了JQuery对元素的增删查改，以及加载事件和绑定事件，最后使用了JQuery Ajax的四种封装方法。
jquery
firenaimal的博客
04-13 165
学习目标 一、jquery概念 1.1 Jquery介绍 jquery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（框架）于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情;采用链式操作。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。用jsDOM模型的获得节点
jQuery详解
亦翼的博客
07-10 8462
文章目录Bootstrap简介概念为什么使用Bootstrap下载与使用Bootstrap的使用表格丰富的标签好看的类样式情景色类样式响应式表格表单表单布局默认布局内联布局表单控件输入框文本框复选框复选按钮单选框单选按钮按钮图片下拉菜单组件分页组件栅格系统缩略图组件模态框组件两个案例首页轮播大图响应式导航条 Bootstrap简介 概念 Bootstrap 来自 Twitter，是目前最受欢迎的响应式前端框架。 Bootstrap 基于 HTML、CSS、JavaScript，简洁灵活，使得 Web 开发
jQuery介绍及基本使用
2201_75869073的博客
03-23 5896
（1） jQuery就是一个快速、简介的js库，把一些常用的方法写到一个单独的js文件，使用的时候直接引用这个js文件，其设计宗旨是倡导写更少的代码，做更多的事情。jQuery封装了js常用的功能代码，优化了DOM的操作、事件处理、动画设计和Ajax交互。（2）学习jQuery的本质就是：学习调用这些函数（方法）除标准选择器之外还有:(1)第一个：（：first）1.代码风格：$(“***”)选取元素、(3) 所有偶数：（：even）(5)根据下标：（：eq(n)）(4)所有奇数：（：odd）
Jquery（知识点，快速入门）
m0_62420605的博客
12-05 5981
Jquery（知识点，无尿点，纯干货）

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值