jQuery(框架)

最新推荐文章于 2024-04-09 23:57:59 发布
最新推荐文章于 2024-04-09 23:57:59 发布
阅读量367 收藏 2
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuo_h_dr/article/details/84796887
版权

    将一个又一个丰富多彩的程序功能进行封装，供他人可以调用这些封装好的程序组件（框架）

jQuery是在可以JS中使用的，其作用是可以获取到页面中的一些元素，并对其进行操作。这些DOM对象也可以做到，可以将jQuery对象的一些型为视为是对DOM对象的操作的封装。两种对象用法互不相通，但对象之间可以进行转换。
    优势：

  1. 轻量级：耦合度低
  2. 强大的选择器
  3. 出色的DOM操作封装
  4. 可靠的事件处理机制
  5. 出色的浏览器兼容性

 

   jQuery对象：数组或集合

  1. 通过jQuery包装DOM后产生的对象
  2. jQuery对象是jQuery独有的
  3. jQuery对象无法使用DOM对象的任何方法，同样DOM对象也不能使用jQuery里的任何方法
  4. 约定：如果获取jQuery对象，那么要在变量前加$

    绑定事件： 
       手动绑定事件：对象.bind("事件名",函数)；
       手动解绑事件：unbind("事件名")；

  jQuery和DOM对象的类型转换：
        jQuery——>DOM:
                  $("#msg")[0]
                  $("#msg").get(0)
        DOM——>jQuery
                  $()
        例子：$(doucment.getElementById("msg"))

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			function JSWrite(){//普通函数
				//document.getElementById("span1").innerHTML="美美哒！";
				var spanEle = document.getElementById("span1");
				$(spanEle).html("美美哒！");
			}
			
			$(function(){//jQuery函数
				/*document.getElementById("btn1").onclick = function(){
					document.getElementById("span1").innerHTML="帅帅哒！";
				}*/
				$("#btn1").click(function(){
					//JQ对象转换成DOM对象的第一种方式
					//$("#span1")[0].innerHTML="呵呵哒！";
					//JQ对象转换成DOM对象的第二种方式
					$("#span1").get(0).innerHTML="呵呵哒！";
				});
				
			});
		</script>
	</head>
	<body>
		<input type="button" value="JS写入" onclick="JSWrite()"/>
		<input type="button" value="JQ写入" id="btn1"/><br /><br />
		<span id="span1">sssss</span>
	</body>
</html>

注意：JQ对象只能操作JQ里面的属性和方法
      JS对象只能操作JS里面的属性和方法。  

    jQuery选择器：


        基本选择器：

选择器描述返回值
#id        根据给定id匹配一个元素        单个元素组成的集合
 .class   根据给定的类名匹配元素        集合元素
element   根据给定元素名匹配元素        集合元素

 

id选择器：$(“#id名称”);元素选择器：$(“元素名称”);类选择器：$(“.类名”);

通配符：*                      多个选择器共用(并集)

<html>
	<head>
		<meta charset="UTF-8">
		<title>基本选择器</title>
		<link rel="stylesheet" href="../../css/style.css" type="text/css"/>
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("#one").css("background-color","pink");//元素选择器
				});
				$("#btn2").click(function(){
					$(".mini").css("background-color","pink");//类选择器
				});
				$("#btn3").click(function(){
					$("div").css("background-color","pink");//类型选择器
				});
				$("#btn4").click(function(){
					$("*").css("background-color","pink");
				});
				$("#btn5").click(function(){
					$("#two .mini").css("background-color","pink");//选择id为two并且样式为mini的元素
				});
			});
		</script>		
	</head>
	<body>
		<input type="button" id="btn1" value="选择为one的元素"/>
		<input type="button" id="btn2" value="选择样式为mini的元素"/>
		<input type="button" id="btn3" value="选择所有的div元素"/>
		<input type="button" id="btn4" value="选择所有元素"/>
		<input type="button" id="btn5" value="选择id为two并且样式为mini的元素"/>
		<hr/>
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>
		
		<div id="two">
			<div class="mini">
				222
			</div>
			<div class="mini">
				333
			</div>
		</div>
		
		<div id="three">
			<div class="mini">
				444
			</div>
			<div class="mini">
				555
			</div>
			<div class="mini">
				666
			</div>
		</div>
		
		<span id="four">
			
		</span>
	</body>
</html>

层次选择器：
    选择器    

$("ancestor descendant")        选取ancestor的所有元素        集合元素
 $("ancestor descendant")：选取parent元素后所有的child元素 
 $("parent > child")：选取parent元素后所有的直属child元素，何谓“直属”，也就是第一级的意思了 
 $("prev + next")：prev和next是两个同级别的元素. 选中在prev元素后面的next元素，注意事项：这两个标签必须紧跟着。中间不能有其他的标签。 
$("prev ~ siblings"):选择prev后面的根据siblings类型的元素。注:siblings是过滤器，获取所有的其后面的弟节点。 

ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)

parent > child : 在给定的父元素下匹配所有的子元素(儿子)

prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)

prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)

<html>
	<head>
		<meta charset="UTF-8">
		<title>层级选择器</title>
		<link rel="stylesheet" href="../../css/style.css" />
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("body div").css("background-color","pink");
				});
				$("#btn2").click(function(){
					$("body>div").css("background-color","pink");
				});
				$("#btn3").click(function(){
					$("#two+div").css("background-color","pink");
				});
				$("#btn4").click(function(){
					$("#one~div").css("background-color","pink");
				});
			});
			
		</script>
		
		
	</head>
	<body>
		<input type="button" id="btn1" value="选择body中的所有的div元素"/>
		<input type="button" id="btn2" value="选择body中的第一级的孩子"/>
		<input type="button" id="btn3" value="选择id为two的元素的下一个元素"/>
		<input type="button" id="btn4" value="选择id为one的所有的兄弟元素"/>
		
		<hr/>
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>
		
		<div id="two">
			<div class="mini">
				222
			</div>
			<div class="mini">
				333
			</div>
		</div>
		
		<div id="three">
			<div class="mini">
				444
			</div>
			<div class="mini">
				555
			</div>
			<div class="mini">
				666
			</div>
		</div>
		
		<span id="four">
			
		</span>
	</body>
</html>

 

    过滤选择器：

基本过滤选择器：


    （1）Jquery中简单过滤选择器 
            jquery根据某一类过滤规则进行元素匹配，书写时以：开头，是Jquery中应用最为广泛的选择器 
    （2）简单过滤选择器的基本语法 

格式含义返回
first()或者：first         获取第一个元素单个元素组成的集合
last()或者：last获取最后一个元素       集合元素
：not(selector)获取除了给定选择器的其他元素         集合元素
：even获取索引为偶数的元素，索引从0开始           集合元素
：odd获取索引为奇数的元素，索引从0开始             集合元素
：eq(index)获取指定索引元素，从0开始                 集合元素★
：gt(index)获取大于给定索引的元素，从0开始         集合元素
：lt(index)获取小于给定索引的元素，从0开始 集合元素

   内容过滤选择器

$('li').first() 等价于：$(“li:first”)

格式作用返回
 ：contains（text）  选取内容含有text的集合元素
:parent获取到有子元素或者文本内容的节点集合元素
父:has(子)获取到有某子元素类型的父结点集合元素
:empty获取所有不含子标签或html内容为空的元素集合元素

.html()   得到内容

可见性过滤选择器：

过滤器名 jQuery 语法 说明返回
:hidden $(':hidden')选取所有不可见元素集合元素
:visible$(':visible')选取所有可见元素集合元素

      :hidden 对象有一个show方法  其作用是将隐藏的显示出来  无参数情况下为立即显示 有参数以毫秒为单位显示                                :visible  对象有一个hide方法  其作用是将显示的隐藏出来  无参数情况下为立即显示 有参数以毫秒为单位显示                       
       .toggle()方法：将显示的隐藏，将隐藏的显示。重载方式与show和hide相同。

<html>
	<head>
		<meta charset="UTF-8">
		<title>基本过滤选择器</title>
		<link rel="stylesheet" href="../../css/style.css" type="text/css"/>
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("div:first").css("background-color","pink");
				});
				$("#btn2").click(function(){
					$("div:last").css("background-color","pink");
				});
				$("#btn3").click(function(){
					$("div:odd").css("background-color","pink");
				});
				$("#btn4").click(function(){
					$("div:even").css("background-color","pink");
				});
			});
		</script>
		
	</head>
	<body>
		<input type="button" id="btn1" value="body中的第一个div元素"/>
		<input type="button" id="btn2" value="body中的最后一个div元素"/>
		<input type="button" id="btn3" value="选择body中的奇数的div"/>
		<input type="button" id="btn4" value="选择body中的偶数的div"/>
		
		<hr/>
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>
		
		<div id="two">
			<div class="mini">
				222
			</div>
			<div class="mini">
				333
			</div>
		</div>
		
		<div id="three">
			<div class="mini">
				444
			</div>
			<div class="mini">
				555
			</div>
			<div class="mini">
				666
			</div>
		</div>
		
		<span id="four">
			
		</span>
	</body>
</html>

       

属性值选择器：attribute: 一个属性名                value: 一个属性值

$("[attribute|='value']")选择指定属性值等于给定字符串或改字符串为前缀（该字符串后跟一个连字符“-”）的元素。
$("[attribute*='value']")选择指定属性具有包含一个给定的子字符串的元素。（选择给定的属性是以包含某些值的元素）
$("[attribute~='value']")选着指定属性用空格分隔的值中包含一个给定的元素。
$("[attribute$='value']")选择指定属性是以给定元素结尾的元素。这个元素比较是区分大小写的。
$("[attribute='value']")选择指定属性是给定值的元素。
$("[attribute!='value']")选择指定属性不等于这个值的元素
$("[attribute^='value']")选择指定属性就是以给定字符串开始的元素。
$("[attribute]")选择所有具有指定属性的元素，该属性可以是任何值。

 

<html>
	<head>
		<meta charset="UTF-8">
		<title>层级选择器</title>
		<link rel="stylesheet" href="../../css/style.css"  type="text/css"/>
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$("div[id]").css("background-color","pink");
				});
				$("#btn2").click(function(){
					$("div[id='two']").css("background-color","pink");
				});
			});
			
		</script>
	</head>
	<body>
		<input type="button" id="btn1" value="选择有id属性的div"/>
		<input type="button" id="btn2" value="选择有id属性的值为two的div"/>
		
		<hr/>
		<div id="one">
			<div class="mini">
				111
			</div>
		</div>
		
		<div id="two">
			<div class="mini">
				222
			</div>
			<div class="mini">
				333
			</div>
		</div>
		
		<div id="three">
			<div class="mini">
				444
			</div>
			<div class="mini">
				555
			</div>
			<div class="mini">
				666
			</div>
		</div>
		
		<span id="four">
			
		</span>
	</body>
</html>

表单选择器


        

 

<html>
	<head>
		<meta charset="UTF-8">
		<title>表单选择器</title>
		<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
		<script type="text/javascript" src="../../js/jquery-1.8.3.js" ></script>
		<script>
			$(function(){
				$("#btn1").click(function(){
					$(":input").css("background-color","pink");
				});
				$("#btn2").click(function(){
					$(":text").css("background-color","pink");
				});
			});
		</script>
	</head>
	<body>
		<input type="button" id="btn1" value="选择所有input元素" />
		<input type="button" id="btn2" value="选择文本框" />
		<br/>
		<form>
			<input type="text[还可以使用属性选择]" /><br />
			<input type="checkbox" /><br />
			<input type="radio" /><br />
			<input type="image" /><br />
			<input type="file" /><br />
			<input type="submit" />
			<input type="reset" /><br />
			<input type="password" /><br />
			<input type="button" /><br />
			<select><option/></select><br />
			<textarea></textarea><br />
			<button></button>
		</form>
	</body>
</html>

jQuery中获取，设置属性的方法：

  1. text() - 设置或返回所选元素的文本内容
  2. html() - 设置或返回所选元素的内容（包括 HTML 标记）,获取到的是标签对之间的值。
  3. val() - 设置或返回表单字段的值，获取到的是value属性。
  4. attr() 方法也用于设置/改变属性值。

下面的例子演示如何通过 text()、html() 以及 val()attr() 方法来设置内容：

//获取
var 1=$("#test1").text();//只会获取文本内容
var 2=$("#test2").html();//会将html标签同时获取到

//设置
$("#test1").text("Hello world!");//只会设置文本内容，若为一个html标签，则会将其按照文本显示出来
$("#test2").html("<b>Hello world!</b>");//若为html标签则会给获取到的节点添加一个子节点
$("#test3").val("Dolly Duck");
$("#w3s").attr("href","http://www.hanghang.com");


    var $obj1=$("div:empty");
    //向节点中添加或获取元素
    //添加内容
    $obj1.html("空间添加节点");

    //for-each循环
                var $list=$(":checked");
                集合.each(function,(i,element){//其对象为DOM对象
                    
                });

jQuery
    查询：
    .siblings（） 获取相邻节点
    .prev()    获取上一个兄节点
    .prevAll()    获取所有兄节点
    .

动态效果：

常用案例：

1.

左五先生
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端Jquery框架
09-20
**jQuery框架概述** jQuery是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。自2006年发布以来，jQuery已经成为了前端开发的标准工具之一，因其简洁的语法和丰富的功能而...
jQuery框架
qq_57167753的博客
04-05 2261
let stuArr = [{'sid':1,'sname':'闫凯','ssex':'1','score':0},{},{}];在jQuery中将HTML中事件都封装成了一系统的事件方法。三、如何在HTML页面中使用jQuery框架。还需要在HTML页面中导入相应的js文件。jQuery是一个封装了JS脚本的框架。在jQuery中封装了一系列的方法。.min.js 这是压缩的版本。也就是说是已经写好的JS代码。核心方法： jquery();四、jQuery的核心方法。五、jQuery中事件方法。
JavaScript--jQuery框架
zhqi9277的博客
04-28 1266
概述：jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；
前端 jQuery框架
wk3510的博客
07-29 4172
bootstrap帮我们写好了一个css文件里面定义好了很多的css样式100%;}我们在使用的时候只需要在html中写标签添加响应的class即可学习有哪些class会有什么效果jquery我们使用原生的js，需要实现很多的页面动态效果，所有的效果都需要我们自己手动写逻辑jquery就是使用js代码帮我们写好了很多的动态特效，我们需要使用的时候只需要调用其写好的函数即可。............
框架JQuery
m0_58495313的博客
01-05 1359
JQuery框架知识点，通过JQuery可以非常方便的操作html的元素
jquery 框架分析
12-27
jquery 源码框架解析
jquery框架各版本.zip
09-23
《jQuery框架各版本详解》 jQuery，作为一款广泛使用的JavaScript库，自2006年发布以来，就以其简洁的API和强大的功能深受开发者喜爱。本篇将详细探讨jQuery从早期版本到较新版本的发展历程，以及每个版本的主要...
jquery框架
10-26
**jQuery框架详解** jQuery是一款广泛应用于前端开发的JavaScript库，由John Resig在2006年创建。它简化了JavaScript的DOM操作、事件处理、动画制作和Ajax交互，极大地提高了开发效率，使得开发者能够更加专注于...
基于SSH jQuery框架的餐饮Web App的设计与实现.pdf
08-26
在基于SSH + jQuery框架的餐饮Web App设计与实现中，首先，开发环境选择Windows操作系统，利用Eclipse作为开发工具，这为开发者提供了一个集成化的开发环境，便于代码编写、调试和项目管理。数据库方面，选用Oracle...
jQuery前端框架 - 一小时了解与使用
m0_52336378的博客
06-22 951
jQuery简介：jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。目前超过90%的网站都使用了jQuery库在我们开始学习之前，有几个问题希望大家明白1.什么是jQuery？jQuery是JS写的插件库，说白了，就是一个JS文件。jQuery 极大地简化了JS编程。所以jQuery 相对JS来说，学习起来会很容易。
简单介绍几个Jquery框架
xp9802的专栏
11-13 237
简单介绍几个Jquery框架 1. DWZ    官方网址：http://code.google.com/p/dwz/    官方介绍：DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架.    DWZ富客户端框架设计目标是简单实用、扩展方便、快速开发、RIA思路、轻量级    DWZ支持用html扩展的方式来代替j...
echarts力导向图节点连线动画_基于 HTML5 网络拓扑图的快速开发之入门篇（一）...
weixin_39980893的博客
11-29 728
前言计算机网络的拓扑结构是引用拓扑学中研究与大小，形状无关的点、线关系的方法。把网络中的计算机和通信设备抽象为一个点，把传输介质抽象为一条线，由点和线组成的几何图形就是计算机网络的拓扑结构。网络的拓扑结构反映出网中各实体的结构关系，是建设计算机网络的第一步，是实现各种网络协议的基础，它对网络的性能，系统的可靠性与通信费用都有重大影响。拓扑在计算机网络中即是指连接各结点的形式与方法；在网络中的工作站...
jquery和vue对比
u010227042的博客
05-19 2143
前言：很多人说jquey和vue没有什么可比的，应该和Angular，React来比吧，我到觉得他们倒没有多大的可比性，都是基于mvvm思想设计的框架，无非就是实现的方式不一样，在不同场景下性能上会有一些差异。然而从jquery到vue或者说是到mvvm的转变则是一个思想想的转变，是将原有的直接操作dom的思想转变到操作数据上去，难道不是一个根本性的改变吗？ 1.jquery介绍：想必大家都用过jquery吧，这个曾经也是现在依然最流行的web前端js库，可是现在无论是国内还是国外他的使用率正在渐渐.
✿✿✿JavaScript --- jQuery框架一
naoguoteng的博客
12-31 1008
1.jQuery的介绍和在线学习网址以及下载网址5.jQuery如何达到获取原生的DOM对象6.jQuery选择器(1)常见选择器(2)高级选择器以及方法(4)过滤选择器7.常用到的方法(1)html()和 text()方法(2)attr()和 removeAttr()(3)元素样式操作方法和其他方法8(1)创建节点(2)插入节点(3)包裹节点(4)其他节点操作9.jQuery基础事件相关(1) 基础事件(3)解绑事件(4)简写事件(5)复合事件(6)事件对象event(7)事件之冒泡和默认行为以及行为
JQuery框架总结
weixin_49076273的博客
05-23 1843
一、JQuery对象的引用 1.jq的下载地址：https://jquery.com/download/ 点击Download the uncompressed, development jQuery 版本号 进入js文件后，按ctrl+s保存到电脑中 2.DOM(Document Object Model)，即文档对象模型; DOM最顶层是Window对象，Window对象下面是Document（文档对象）、Navigator(浏览器对象)、Screen（屏幕对象）、History（浏览历史对象）、Loc
【jQuery】jQuery框架
最新发布
m0_64538862的博客
04-09 738
jQuery基本用法；获取位置；滚动距离；显示/隐藏动画；淡入/淡出动画；展开/收起动画；动画队列及停止方法；自定义动画；插入节点；动画回调函数；动画延迟方法；获取元素尺寸；事件参数；删除节点；事件委托；克隆节点；获取DOM对象；入口函数；轮播图插件；懒加载插件lazyload；fullpage插件；日期选择器插件；表单验证插件；插件机制；jQuery方法；表单提交事件；表单序列化
JQuery框架实现抽奖
12-24
JQuery框架可以通过使用CSS3属性和插件来实现抽奖功能。其中，可以使用jQuery点击翻牌抽奖游戏代码和queryRotate插件来实现这个功能。 以下是一个使用jQuery点击翻牌抽奖游戏代码和queryRotate插件的示例： ```...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值