jQuery

最新推荐文章于 2022-10-17 22:07:41 发布

萌萌的PP

最新推荐文章于 2022-10-17 22:07:41 发布

阅读量146

点赞数

分类专栏： Java笔记文章标签： jQuery

本文链接：https://blog.csdn.net/qq_38982845/article/details/81949944

版权

Java笔记专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一.jQuery 的下载和安装

1.http://jquery.com/ 下载

2.版本

（1）完整版 : jquery-3.3.1.js -->学习版本(学习源码想高手学习是最好学习方法)
（2）压缩版 : jquery-3.3.1.min.js -->开发版本(压缩版，减少传输)

3.安装

下载完建一个JS文件夹,将下载的源码放进去

引用的时候加上路径即可

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

二.DOM 对象和 jQuery 包装集对象

原始的 Dom 对象只有 DOM 接口提供的方法和属性，通过 js 代码获取的对象都是 dom 对象；而通过 jQuery获取的对象是 jQuery 包装集对象，简称 jQuery 对象，只有 jQuery 对象才能使用 jQuery 提供的方法。

DOM与IQuery的相互转化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button id="mybtn1">button</button>
		<script type="text/javascript">
			// jquery对象包装集
			var jqObj = $('#mybtn1');
			console.log(jqObj);
					
			jqObj = jQuery('#mybtn1');
			console.log(jqObj);
			
			// 原生js对象
			var domObj = document.getElementById('mybtn1');
			console.log(domObj);
									
			// jq->dom
			var jqToDom = jqObj[0];  // ***常用
			jqToDom = jqObj.get(0);
			console.log(jqToDom);
			
			// dom->jq
			var domToJq = $(domObj);  // ***常用
			domToJq = jQuery(domObj);
			console.log(domToJq);
			
		</script>
	</body>
</html>

三.jQuery 选择器

1. 基础选择器 Basics

2. 层次选择器 Hierarchy

3. 表单选择器 Forms

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jq选择器</title>
		<script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			/*$(document).ready(function(){
				alert('aaaaa');
			});*/
			// 页面加载完成以后
			$(function(){
				
				// id选择器
				var jqobj = $('#mydiv1');  // 一个包装集
				console.log(jqobj);
				
				// class 选择器
				var jqobjs =  $('.beau');   // 一个包装集集合
				console.log(jqobjs);
				
				console.log("=======================");
				// 遍历jquery包装集集合
				for(var i=0;i<jqobjs.length; i++){
					console.log(jqobjs[i]);  // dom对象
					console.log($(jqobjs[i]));
				}
				
				console.log("=======================");
				
				// each方法属于jquery对象的方法， this指代集合中当前的元素，this是一个dom对象
				jqobjs.each(function(){
					console.log(this);  // dom对象
					console.log($(this));
				})
								
				// element
				jqobjs = $('div');
				console.log(jqobjs.length);
				
				
				jqobjs = $('*');
				console.log(jqobjs.length);
				
				// 分组选择器
				
				jqobjs = $('div,p');
				console.log(jqobjs.length);
			})
		</script>
	</head>
	<body>
		<div id="mydiv1"></div>
		<div class="beau"></div>
		<div class="beau"></div>
		<p></p>
	</body>
</html>

四.jQuery DOM 操作

常用的从几个方面来操作，查找元素（选择器已经实现）；创建节点对象；访问和设置节点对象的值，以及属性；添加节点；删除节点；删除、添加、修改、设定节点的 CSS 样式；动画操作等。注意：以下的操作方式只适用于 jQuery 对象。

1. 操作元素的属性

a.获取属性

b.设置属性

c.移除属性

2. 操作元素的样式

对于元素的样式，也是一种属性，由于样式用得特别多，所以对于样式除了当做属性处理外还可以有专门的方法进行处理。

1） css({‘样式名’ :’样式值’ ,’样式名 2’ :’样式值 2’ })
例： css({"background-color":"red","color":"#fff"});
2） css(“样式名” ,”样式值” )
例： css('color','white')

3. 操作元素的内容

对于元素还可以操作其中的内容，例如文本，值，甚至是 html。

4. 创建元素

在 jQuery 中创建元素很简单，直接使用核心函数即可

5. 添加元素

6. 删除元素

7. 遍历元素

each()
$(selector).each(function(index,element)) :遍历元素,参数 function 为遍历时的回调函数，index 为遍历元素的序列号，从 0 开始。element 是当前的元素，此时是 dom 元素。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>滚动块</title>
		<style type="text/css">
			div{
				height: 100px;
				width: 100px;
				background-color: royalblue;
				position: absolute;
				top: 80px;
				left: 10px;
			}
		</style>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				
				var obj = $('#mydiv1');
				var btn1 = $('#btn1');
				var btn2 = $('#btn2');
				var btn3 = $('#btn3');
				var btn4 = $('#btn4');
				var btn5 = $('#btn5');
				
				btn1.click(function(){
					obj.css('left','1430px');
				})
				
       				btn2.on('click',function(){
					obj.css('left','0px');
				});
								
				
				btn3.on('click',function(){
					// 让div慢慢向右边移动， left越来越大， 1430px
					
					//console.log(old);
					var id = window.setInterval(function(){
						var old = parseInt(obj.css('left'));  // 100px --> 100
						if(old>1430){
							window.clearInterval(id);
						}else{
							obj.css('left',(old+3) + 'px');
						}
						
					},5);
				});
				
				btn4.on('click',function(){
					// 让div慢慢向左边移动， left越来越小， 10px
					
					//console.log(old);
					var id = window.setInterval(function(){
						var old = parseInt(obj.css('left'));  // 100px --> 100

						if(old<10){
							window.clearInterval(id);
						}else{
							obj.css('left',(old-3) + 'px');
						}
						
					},5);
				});
				
				btn5.on('click',function(){
					// 让div慢慢向两边移动， 
					
					var mytime = 5;
					var mylength = 3;
					setInterval(function(){
						
						var old = parseInt(obj.css('left'));  // 100px --> 100
						
						if(old>1430){
							mylength *= -1;
						}else if(old<100){
							mylength *=-1;
						}
						obj.css('left',old+mylength + 'px');
					},mytime);
				});
				
			})
		</script>
	</head>
	<body>
		<button id="btn1">——></button>
		<button id="btn2"><——</button>
		<button id="btn3">--></button>
		<button id="btn4"><--</button>
		<button id="btn5"><--></button>
		
		<div id="mydiv1"></div>
	</body>
</html>

五.Jquery 事件

六.初见ajax(Asynchronous JavaScript + XML)

2005年 Jesse James Garrett 发表了一篇文章，标题为： “Ajax： A newApproach to Web Applications”。他在这篇文章里介绍了一种技术，用他的话说，就叫： Ajax，是 Asynchronous JavaScript + XML 的简写。这种技术能够向服务器请求额外的数据而无须卸载页面(即刷新)，会带来更好的用户体验。一时间，席卷全球。
学会在eclipse中写jQuery项目,引入Tomcat