首页 > 其他分享> 文章详细

jQuery简介

2021-07-17 17:31:58 阅读：133 来源： 互联网

标签：jQuery function console 简介元素 box div div1

什么是 jQuery ？

什么是 jQuery ？

jQuery 是一个 JavaScript 函数库。

jQuery 是一个轻量级的"写的少，做的多"的 JavaScript 库。

jQuery 库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

jQuery对比JavaScript

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
		<script type="text/javascript">
			// 原生js写法
			window.onload = function(){
				var oDiv = document.getElementById('div1')
				alert('原生js的' + oDiv)
			}
			
			/*
				onload 是当页面渲染完毕就开始运行
				ready 是当标签加载完毕就运行 所以ready快
			*/
			// jquery写法 速度比原生的快
			// ready的完整写法
			// $(document).ready(function(){
			// 	var $div = $('#div1')
			// 	alert('jquery的' + $div)
			// })
			
			// 简写
			$(function(){
				var $div = $('#div1')
				alert('jquery的' + $div)
			})
		</script>
	</head>
	<body>
		<div id="div1">这是一个div</div>
	</body>
</html>

先输出jQuery再输出JavaScript

获取元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
		<script>
			$(function(){
				var box = $('.box1')
				// 元素的宽高
				console.log(box.width())
				console.log(box.height())
				// 加上内边距的宽高
				console.log(box.innerWidth())
				console.log(box.innerHeight())
				// 加上边框内边距的宽高
				console.log(box.outerWidth())
				console.log(box.outerHeight())
				// 加上内边距，边框，外边距的宽高
				console.log(box.outerWidth(true))
				console.log(box.outerHeight(true))
				//获取元素在浏览器中的位置
				console.log(box.offset())
			})
		</script>
		<style>
			.box1{
				height: 200px;
				width: 100px;
				margin: 20px;
				padding: 40px;
				border: 1px solid #000000;
			}
		</style>
		<title></title>
	</head>
	<body>
		<div class="box1"></div>
	</body>
</html>

选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 不能直接在jQuery引入标签中写代码 -->
		<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
		<script>
			$(function(){
				var $oDiv = $('#div1')
				var $div2 = $('.div2')
				var $li = $('#list1 li')
				
				// jq 可以批量操作 属性可以写驼峰式 也可以加- 有容错
				$oDiv.css({'color':'pink'})
				$div2.css({'backgroundColor':'red'})
				$li.css({'font-size':' 30px'})
			})
		</script>
	</head>
	<body>
		<div id="div1">这是一个div</div>
		
		<div class="div2">这是二个div</div>
		
		<ul id="list1">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</body>
</html>

属性操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
		<title></title>
		<script>
			$(function(){
				// 设置和取出标签内容
				$('div').html('新的输出')
				// 获得div中某个属性的值 如 id
				alert($('div').prop('id'))
				
				// 设置div中某个属性的值
				$('div').prop({'id':'b'})
				
				return 0
			})
			
			
		</script>
		<style>
			#a {
				color: #0000FF;
			}
			#b{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="a">
			旧的输出
		</div>
	</body>
</html>

绑定事件操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
		<script>
			
			/*
				mouseover 鼠标移入 子元素也触发
				mouseout 鼠标移出 子元素也触发
				mouseenter 鼠标移入子元素不触发
				mouseleave 鼠标移出子元素不触发
				focus 元素获得焦点
				blur 元素失去焦点
				resize 窗口大小发生变化
				submit 用户提交表单
			*/
			$(function(){
				// 传统的写法
				// $('#a').click(function(){
				// 	alert('点击')
				// })
				// 绑定多个事件 第一个写事件名空格隔开 第二个写函数
				$(window).resize(function(){
					alert('dddd')
				})
				// 点击事件和鼠标移入事件
				$('#a').bind('click mouseover',function(){
					alert('点击')
					
					// 第一次执行完后 再不会触发移入
					$(this).unbind('mouseover')
				})
			})
		</script>
	</head>
	<body>
		<input type="button" id="a" />
	</body>
</html>

节点操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
		<script>
			$(function(){
				// $a = $('<a href="#">123</a>')
				// $a2 = $('<a href="#">123</a>')
				
				// // 将子元素添加到父元素内部后面
				// // $a.appendTo($('.div1'))
				
				// // 在父元素内部后面添加子元素
				// $('.div1').append($a)
				
				// // 在父元素内部前面添加元素
				// $('.div1').prepend($a2)
				// // 将子元素添加到父元素内部的前面
				// $a2.prependTo($('.div1'))
				
				// // 添加到父元素外部的后面
				// // $a2.insertAfter()
				// // $('.div1').after()
				
				// // 添加到父元素外部的前面
				// $('.div1').before()
				// $a2.insertBefore()
				$a = $('<a href="#">123</a>')
				
				// 为每一个.class添加a标签
				$('.div1').append($a)
				
				// 将两个标签交换位置
				$('p').after($('.div1'))
				
				// 节点操作可以对新建的节点和已有的节点进行操作 新建：插入 已有：剪切粘贴
				//删除节点
				$('.div1').eq(1).remove()
			})
		</script>
	</head>
	<body>
		<div class="div1"></div>
		<div class="div1"></div>
		<div class="div1"></div>
		<p>1</p>
	</body>
</html>

标签：jQuery,function,console,简介,元素,box,div,div1
来源： https://blog.csdn.net/qq_33840688/article/details/118814649

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jQuery简介

什么是 jQuery ？

jQuery对比JavaScript

获取元素

选择器

属性操作

绑定事件操作

节点操作