博学谷it学习技术支持

jQuery

今天聊一聊最新刚学的jQuery这个东西，初步接触感觉功能是非常的强大

什么是jQuery

jQuery是一个优秀的JavaScript库，是一个凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档，操作DOM，执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数。其理念：write less,do more.

这是他的介绍，意思就是说他能帮我们很大的忙，比如我们之前学的写轮播图，等等都可以用这个jquery实现。

常见的JavaScript库

prototype，Do jo，YUI,Ext Js，Moo Tools，当然还有我们的jQuery。我们主要用这个jQuery就可以，这个是一个轻量级的库，拥有强大的选择器等很多有点，有待后人开发。

有什么用

1.HTML元素的选取

2.HTML元素的操作

3.css操作

4.HTML事件函数

5.JavaScript特效和动画

6.HTML DOM遍历和修改

怎么用？

1.下载后引入

先去官网下载对应的版本文件，然后存好位置，再引入 <script src="地址.min.js"></script>

2.写一个简单的代码试用一下

       <head>
       <meta charset="UTF-8">
       <title>dom操作</title>
       <script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
       <script``
          $(function(){
             alert('Hello World');
          });
       </script>
       </head>
    </html>

3.语法展示 $("p").hide() - 隐藏所有段落

$(".test").hide() - 隐藏所有 class="test" 的所有元素

$("#test").hide() - 隐藏所有 id="test" 的元素

4.优势

1,简化了js的写法，用$替代了document.getXxx()

2,可以像CSS选择器一样非常方便的获取元素

3,可以通过修改css样式控制页面的效果

var ele = $("#username");						// jQuery

var ele = document.getElementsByTagName("p");	//js
var ele = $("p");								//jQuery

var ele = document.getElementsByName("username");		//js
var ele = $('input[name="username"]');		// jQuery

var ele = document.getElementsByClassName("info");		//js
var ele = $(".info");							// jQuery

$("div").css("background", "red");
$("div").css({
	"background" : "blue",
	"border" : "2px solid red",
	"font-size" : "30px"
});

5.注意有一个文档就绪事件，就是你写的这个jQuery代码是写在哪一块位置的，这是有区别的

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数，操作可能失败。

<html>
	<head>
		<meta charset="utf-8">
		<title>jq</title>
		<!-- 引入jQuery文件 -->
		<script src="jquery-1.8.3.min.js"></script>
		<!-- 嵌入js代码 -->
		<script>
		// 方式1:还没加载到h1元素,a是null,调用null的资源f12时会出问题
			// var a = document.getElementById("p1");
// alert(a); //null
			// alert(a.innerHTML);
			
			// 方式2: 使用jQuery的文档就绪函数,整个DOM都加载完了才执行
			//jQuery语法:$(选择器).action{ } ;
			$(document).ready(function(){
				var a = document.getElementById("p1");
				alert(a.innerHTML);
			});
			// 方式3: 简写
			$(function(){
				var a = document.getElementById("p1");
				alert(a.innerHTML);
			});
		</script>
	</head>
	<body>
		<h1 id="p1">文档就绪</h1>
	</body>
</html>

这段代码意思就是说：

如果在获取元素时，获取元素的代码执行的时机（时间）比元素本身加载的时间还要早，如果元素还没有加载到就获取，必然是获取不到的！

将获取元素的代码放在文档就绪事件函数中，等浏览器加载完整个网页后，文档就绪事件函数才会执行，此时所有的元素都被加载过了，再获取任何元素都能获取到！

最后

这次先讲到这块吧，算是刚刚进入jQuery，后面还有很多，可不止这一点点啊

前端学习