jQuery-基本了解

*****什么是jQuery:

jQueryjs的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率。

*****为什么要使用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的主要功能模块

posted @ 2016-05-22 17:13  半截铅笔  阅读(662)  评论(0编辑  收藏  举报