*****什么是jQuery:
jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率。
*****为什么要使用jquery:
1、原生js提供操作dom的方法太少。且兼容性不好。
2、jquery功能的强大。
- a.轻量级
- b.出色的浏览器兼容
- c.出色的dom操作
- d.链式操作方式
- e.隐式迭代集合(可以对选择对象的集合自动的迭代不需要用for in循环)如$("div:lt(2)").css("border-color","red")/*对前两个div增加css*/
- f.行为层与结构的分离 (如想对dom添加事件,在javascript中添加要声明一次函数,在dom中还要使用一次,jquery只需在jquery部分声明某个元素的某种事件就可以了:$("#myButton").click(function(){代码部分}))
- g.支持扩展
- h.完善的学习资源
- i.开源
怎么使用jquery:
一.引包
在使用jQuery之前,先把jQuery文件引到页面中来。如果在使用jQuery之前,没有引用jQuery文件,或src路径写错,都会报错。
二.入口函数
写法一:
$(document).ready(function(){ $("#btn").click(function(){ alert("事件已绑定"); }) })
写法二:
$(function(){ $("#btn").click(function(){ alert("事件已绑定"); }) })
两者效果一模一样,所以开发中怎么写入口函数?你懂。。。。
此处在说说jquery中的"$",实际上表示一个函数,是jQuery框架暴露在全局中的一个对象。
除了$之外,还提供了另外一个函数:jQuery,也就是说出现$符的地方,就能用jquery替换,为了简写所以才写做$。
到这里,想到原生js的入口函数window.onload = function() {};,那么两者入口函数有什么区别呢?
区别一:书写个数不同
Js入口函数只能出现一次,出现多次会存在事件覆盖的问题。
jQuery的入口函数,可以出现任意多次,并不会存在事件覆盖问题。
区别二:执行时机不同
Js入口函数是在所有的文件资源加载完成后,才执行。这些文件资源包括:页面文档、外部的js文件、外部的css文件、图片等。
jQuery的入口函数,是在文档加载完成后,就执行。这里的文档加载完成指的是:DOM树加载完成后,就可以操作DOM了,不用等到所有的外部资源都加载完成。
3.功能实现代码(事件处理)
这一部分得说说jQuery对象(使用jquery操作dom返回值)和DOM对象(使用js操作dom的返回结果)的相互转换问题。
var btn = document.getElementById(“btnShow”); // btn就是一个DOM对象
var $btn = $(“#btnShow”); // $btn就是一个jQuery对象
var $btn1 = $(btn); // 此时就把DOM对象btn转换成了jQuery对象$btn1
jQuery对象转换成DOM对象:
方法一:
var btn1 = $btn[0]; // 此时就把jQuery对象$btn转换成了DOM对象btn1 (推荐使用此方式)
方法二:
var btn2 = $btn.get(0);// 此时就把jQuery对象$btn转换成了DOM对象btn2
简言之:jQuery拿到DOM对象后又对其做了封装,让其具有了jQuery方法的jQuery对象,说白了,就是把DOM对象重新包装了一下。
这部分先说到这,下一篇来说说JQuery的主要功能模块。