jQuery库精要与应用-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44035889/article/details/102646227

简介

一个优秀的js函数库jQuery官方
对BOM和DOM的封装
jQuery主要对页面进行增删改查(crud)
主要作用：
1.HTML元素选取（选择器）
2.HTML元素操作
3.css处理
4.Js动画效果
5.链式调用
6.读写合一
7.浏览器兼容
8.易拓展插件
9.ajax封装
jQuery的不同版本特点
1.X：兼容老版本IE 文件更大
2.X：部分IE8及以下不支持文件小，执行效率更高
3.X:：完全不支持IE8及以下版本提供新的API，提供不包含ajax/动画API的版本
jQuery引入

1.服务器本地库无网条件下使用缺点服务器压力大
2.CDN远程库必须在有网条件下使用减轻服务器压力(www.bottcdn.cn))

jquery两把利器
jquery核心函数：（$/ jquery）
jquery核心对象：
1.及执行jQuery核心函数返回的对象
2.jquery对象内部包含的是dom元素对象的伪数组
3.有很多的属性和方法，方便操作dom

属性和方法

基本的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>点击确定按钮 提示输入框的值</title>
		<script type="text/javascript">
			//原生jsDOM操作
			window.onload=function(){
				var but1=document.getElementById('but1')
				but1.onclick=function(){
					var username=document.getElementById('username').value
					alert(username)
				}
			}
		</script>
		
		<!--使用jQuery实现-->
		<!--1.引用jquery库-->
		<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script> <!--本地引入-->
		<script type="text/javascript">
			$(function(){  // 绑定文档加载完成的监听
				$('#but2').click(function(){  //给but2绑定点击监听
					var username=$('#username').val()
					alert(username)
				})
			})
		</script>
	</head>
	<body>
		<h3>点击确定按钮 提示输入框的值</h3>
		<input type="text" id="username" value="" />
		<button id="but1">确定js原生版</button>
		<button id="but2">确定jQ版</button>
	</body>
</html>