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对象,只需要用 ( ) 把 D O M 对 象 包 装 起 来 , 就 可 以 获 得 一 个 J Q u e r y 对 象 了 , ()把DOM对象包装起来,就可以获得一个JQuery对象了, ()把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);