JQuery

JQuery是什么

1.JQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多Javascript高手加入其team
2.JQuery是继prototype之后又一个优秀的JavaScript框架，其宗旨是–WRITE LESS,DO MORE,写更少的代码,做更多的事情
3.它是轻量级的js库(压缩后只有21K),这是其他的js库所不及的,它兼容CSS3,还兼容各种浏览器(IE6.0+,FF 1.5+,Safari 2.0+,Opera 9.0+)
4.JQuery是一个快速的，简洁的javaScript库,使用户能更方便地处理HTML document、events、实现动画效果,并且方便地为网站提供AJAX交互
5.JQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择
6.JQuery能够使用户的html页保持代码和html内容分离,也就是说,不能再在html里面插入一堆js来调用命令了,只需要定义Id即可

Jquery介绍

JQuery是一个javascript库(JS框架),JQuery可以理解javascript query,该框架提供了很多方法，让我们可以非常轻松地写出动态效果的页面。JQuery就是对javascript进行封装,然后让我们使用更加方便
当前流行的javascript库有
JQuery,MooTools,Prototype,Dojo,YUI,EXT JS DWR

<!-- 引入jquery库 -->
<script type="text/javascript" src="jquery/jquery-3.3.1.js"></script>
	<script type="text/javascript">
		//document dom对象
		//$(document) 是 jquery对象,如果要使用jquery对象,则我们需要引入jquery库
		$(document).ready(function(){	//ready 相当于window.load()
			window.alert("hello world");
		});
	</script>

什么是JQuery对象?

JQuery对象就是通过JQuery包装DOM对象后产生的对象
JQuery对象是JQuery独有的,如果一个对象是JQuery对象,那么它就可以使用JQuery里的方法

$(“#test”).html();

比如:
$(“#test”).html() 意思是指:获取ID为test的元素内的html代码。其中html()是JQuery里的方法
这段代码等同于用DOM实现代码:

Document.getElementById(“id”).innerHTML;

虽然JQuery对象是包装DOM对象后产生的,但是JQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用JQuery里的方法,乱使用会报错
约定:如果获取的是JQuery对象,那么要在变量前面加上$
Var $variable=JQuery对象
Var variable=DOM对象

DOM对象转成JQuery对象

对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个JQuery对象了,$(DOM对象

//<input type="text" name="username" id="username" value="abc123"/><br/>
//获取DOM对象
Var username=document.getElementById(“username”);
Alert(username);
//转化为JQuery对象
Var $username=$(username);
Alert(“”+$username.val());

转换后就可以使用JQuery中的方法了

JQuery对象转成DOM对象

两种转换方式将一个JQuery对象转换成DOM对象:[index]和get(index);

(1)JQuery对象是一个数组对象，可以通过[index]的方法,来得到相应的DOM对象

//<input type="text" name="username" id="username" value="abc123"/><br/>
//获取JQuery对象
Var $username=$(“username”);
Alert($username.val());
//转化为DOM对象
Var username=$username[0];
Alert(username);

(2)JQuery本身提供,通过get(index)方法,得到相应的DOM对象

//转化为DOM对象
Var username1=$username.get(0);
Alert(username1.value);