一、jQuery简介
为了简化 JavaScript 的开发,诞生了一些 JavsScript 库。这些JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的 Web2.0 特性的富客户端页面,并且兼容各大浏览器。当前流行的 JavaScript 库有: jQuery, MooTools, Prototype, Dojo, YUI, 其中应用最广泛的就是jQuery。
-
jQuery是继prototype之后又一个优秀的Javascript框架。其宗旨是——WRITE LESS,DO MORE,写更少的代码,做更多的事情。 它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+,Safari 2.0+, Opera9.0+)。
-
jQuery是一个快速的,简洁的javaScript库,使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。
-
jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
-
jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只 需定义id即可。
二、jQuery语法
1、js库的引入
<head>
//src=""内容表示js库的路径
<script src="../jq/jquery-3.4.1.js"></script>
</head>
2、jQuery的基本语法
<script>
$(function(){
});
</script>
或:
<script>
$(document).ready(function(){
});
</script>
第一种较为常用,为第二种的简写方式。
注:该内容可以放在代码的任意位置,头部、正文和尾部都可。
3、jQuery对象与dom对象的互换方法。
- jQuery 对象就是通过jQuery包装DOM对象后产生的对象。
- 虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法。
我们约定:如果获取的是 jQuery 对象, 那么要在变量前面加上 $.
例:
var $variable = jQuery 对象
var variable = DOM 对象
DOM对象与jQuery对象是可以相互转换的
<script>
$(function(){
// 通过dom的id选择器选择id为name的对象
var name = document.getElementById('name');
alert(name.value);//获取dom对象的值
//通过$()方法将dom对象转换为jQuery对象
var $name = $(name);
alert($name.val());//获取jQuery对象的值
//jQuery对象为一个数组对象,可直接通过[index]的方法转换为dom对象
var name1 = $name[0];
//jQuery本身提供.get(index)方法得到相应的DOM对象
var names = $name.get(0);
alert(names.value);
});
</script>