第一章：初识jQuery

一、原生的JS与jQuery的区别

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>03-jQuery和JS入口函数的区别</title>

    <script src="js/jquery-1.12.4.js"></script>

    <script>

        window.onload = function (ev) {

            // 1.通过原生的JS入口函数可以拿到DOM元素

            var images = document.getElementsByTagName("images")[0];

            console.log(images);

            // 2.通过原生的JS入口函数可以拿到DOM元素的宽高

            var width = window.getComputedStyle(images).width;

            console.log("onload", width);

        }

        // 1.原生JS和jQuery入口函数的加载模式不同

        // 原生JS会等到DOM元素加载完毕,并且图片也加载完毕才会执行

        // jQuery会等到DOM元素加载完毕,但不会等到图片也加载完毕就会执行

        $(document).ready(function () {

            // 1.通过jQuery入口函数可以拿到DOM元素

            var $images = $("images");

            console.log($images);

            // 2.通过jQuery入口函数不可以拿到DOM元素的宽高

            var $width = $images.width();

            console.log("ready", $width);

        });

        // 1.原生的JS如果编写了多个入口函数,后面编写的会覆盖前面编写的

        // 2.jQuery中编写多个入口函数,后面的不会覆盖前面的

        window.onload = function (ev) {

            alert("hello lnj1");

        }

        window.onload = function (ev) {

            alert("hello lnj2");

        }

        $(document).ready(function () {

            alert("hello lnj1");

        });

        $(document).ready(function () {

            alert("hello lnj2");

        });

    </script>

</head>

<body>

<img src="https://img.alicdn.com/tfs/TB1P_MofwmTBuNjy1XbXXaMrVXa-190-140.gif" alt="">

</body>

</html>

二、jQuery入口函数的4种写法

    // 第1种写法：

    $(document).ready(function () {

        alert("hello jquery1")

    })

    // 第2种写法：

    jQuery(document).ready(function () {

        alert("hello jquery2")

    })

    // 第3种写法：（推荐）

    $(function () {

        alert("hello jquery3")

    })

    // 第4种写法：

    jQuery(function () {

        alert("hello jquery4")

    })

三、jQuery的冲突问题

问题描述：jQuery使用 $ 符号来作为选择器，如果其他的框架也通用使用 $ 符号，两者产生冲突，后面引入的框架会覆盖掉前面的

    <script src="js/jquery-1.12.4.js"></script>

    <script src="js/test.js"></script>　　　　//自定义的一个框架也使用了 $

    <script>

        // 1.释放$的使用权

        // 注意点: 释放操作必须在编写其它jQuery代码之前编写

        //         释放之后就不能再使用$,改为使用jQuery
　　　　　　jQuery.noConflict();
　　　　　　jQuery(function(){
　　　　　　　　alert('hello world')
　　　　　　　　})

        // 2.自定义一个访问符号

        var nj = jQuery.noConflict();

        nj(function () {

            alert("hello lnj");

        });

    </script>

（李南江jQuery+Ajax）第一章：初识jQuery的更多相关文章

  1. Java 面向对象编程——第一章 初识Java

      第一章    初识Java 1.  什么是Java? Java是一种简单的.面向对象的.分布式的.解释的.安全的.可移植的.性能优异的多线程语言.它以其强安全性.平台无关性.硬件结构无关性.语言简 ...

  2. jquery Ajax请求示例，jquery Ajax基本请求方法示例

    jquery Ajax请求示例,jquery Ajax基本请求方法示例 ================================ ©Copyright 蕃薯耀 2018年5月7日 https: ...

  3. 第一章 初识shiro

    shiro学习教程来自开涛大神的博客:http://jinnianshilongnian.iteye.com/blog/2018936 第一章 初识shiro 简单了解shiro主要记住三张图即可. ...

  4. Cocos2d-x 3.0 红孩儿私家必修 - 第一章 初识Cocos2d-x 3.0project

    第一章    初识Cocos2d-x 3.0project Cocos2d-x 3.0出来了,听说与之前版本号相比修改较大 做为一个游戏开发人员.我们应该欢迎Cocos2d-x持续的更新和强大,Coc ...

  5. C语言编程入门之--第一章初识程序

    第一章 初识程序 导读:计算机程序无时不刻的影响着人类的生活,现代社会已经离不开程序,程序的作用如此巨大,那么程序到底是什么呢?本章主要讨论程序的概念,唤起读者对程序的兴趣,同时对C语言程序与其它语言 ...

  6. JavaScript交互式网页设计 • 【第6章 初识jQuery】

    全部章节   >>>> 本章目录 6.1 jQuery概述 6.1.1 初识 jQuery 6.1.2 jQuery 基本功能 6.1.3 搭建 jQuery 开发环境 6.1 ...

  7. jQuery系列 第一章 jQuery框架简单介绍

    第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...

  8. JQuery制作网页——第五章 初识 jQuery

    1.jQuery简介: ● jQuery由美国人John Resig于2006年创建 ● jQuery是目前最流行的JavaScript程序库,它是对JavaScript对象和函数的封装 ● 它的设计 ...

  9. 第一章 认识jQuery

    jQuery是一个优秀的JavaScript库,它凭借简洁地语法和跨平台的兼容性,极大地简化了开发人员遍历HTML文档,操作DOM,处理事件,执行动画和开发Ajax操作. jQuery优势:1.轻量级 ...

  10. JQuery --- 第一期 (初识jQuery, JQuery核心函数和工具方法)

    个人学习笔记  初识jQuery 1.我的第一个JQuery <!DOCTYPE html> <html lang="en"> <head> & ...

随机推荐

  1. Fatal error: cannot initialize AIO sub-system

    在一台服务器中以各数据库的备份文件为数据文件启动多个MySQL实例供SQL Review使用.之前运行一直没有问题(最多的时候有23个MySQL实例同时运行),后来新配置了一台服务器,启动其对应的实例 ...

  2. LabVIEW--好书推荐与分享

    LabVIEW宝典 此书可以作为工具书,配合LabVIEW的范例程序学习可以达到事半功倍的效果. 链接:https://pan.baidu.com/s/17jm6PznLyGW8rVQ_veaGCg ...

  3. Ubuntu18.04 LTS 安装部署golang最新版本1.10

    1 步骤 //1 直接安装golang-go 目前最新版本是1.10 sudo apt-get install golang-go //2 向/etc/profile追加以下代码 sudo vim / ...

  4. 使用 wordcloud 构建词云图

    from wordcloud import WordCloudfrom matplotlib import pyplot as pltfrom PIL import Imageimport numpy ...

  5. Python知识目录

    目录 一.计算机基础 二.Python基础 三.函数 四.常用模块 五.模块和包 六.面向对象 七.网络编程socket 八.数据库 九.前端 十.Python Web框架 十一.版本控制--GIT ...

  6. 03-django模型(1)

    一.内容回顾 1.路由层 a.简单使用 b.有名分组 c.路由分发 d.反向解析 2.视图层 a.HttpRequest对象 常用的属性 常用方法 b.HttpResponse对象 响应三剑客 3.模 ...

  7. word 内容控件属性编辑

    场景: 别人发给自己一份word模板,基于统一性,里面包含了很多“内容控件”,一般情况下,只需要根据内容控件进行编辑即可,但如果想对内容控件本身做编辑操作,例如删除等. 操作: 单击 文件>选项 ...

  8. Javascript我学之五对象的创建与使用

    本文是金旭亮老师网易云课堂的课程笔记,记录下来,以供备忘. 对象的创建 JavaScript对象有两种类型   1).Native:在ECMAScript标准中定义和描述,包括JavaScript内置 ...

  9. docker-- 卷

    进入容器centos终端中 #docker   attach   c1 在 容器中安装nginx #yum   install  epel-relesae #yum  install  nginx # ...

  10. Service-Level Agreement （服务水平协议）

    Service-Level Agreement (服务水平协议) SLA是为负载测试场景定义的具体目标.例如,评测脚本中任意数量事务的平均响应时间,可以定义具体的目标或阈值.测试运行结束之后,Load ...