zoukankan      html  css  js  c++  java
  • 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的主要功能模块

  • 相关阅读:
    IO库 8.5
    IO库 8.4
    标准模板库——IO库
    IO库 8.3
    IO库 8.2
    IO库 8.1
    CF 599D Spongebob and Squares(数学)
    Django入门学习(一)
    hdu 5733
    uva 11210
  • 原文地址:https://www.cnblogs.com/zyj-vaf/p/5517043.html
Copyright © 2011-2022 走看看