第一章：初识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. formData 对象 与 Content-Type 类型

    FormData FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据.其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用.如 ...

  2. 关于git 远程仓库密码一直输错的问题

    解决方法, git 换地方使用后需要重新配置秘钥,一个钥匙开一个地方的门: 如果还不行, 在控制面板-用户账户-凭据管理-加添凭证,输入正确的账号密码:因为Windows的凭据管理器里面可能保存了你刚 ...

  3. Java框架中Struts框架的优缺点

    Struts 优缺点优点:1. 实现 MVC 模式,结构清晰,使开发者只关注业务逻辑的实现.2．有丰富的 tag 可以用 ,Struts 的标记库(Taglib),如能灵活动用,则能大大提高开发效率3 ...

  4. Java的家庭记账本程序（I）

    日期:2019.2.26 博客期:037 星期二 Part 1: 今天使用新的"radio"标签,将搜索方式的选则内容更改了,如下图,不过,研究了很久的数据库连接也还是没有成功!嗯 ...

  5. 抽象业务mapper

    1.抽象业务代码 package com.xingyunliushui.dao; import java.util.List; public interface BaseQueryMapper { & ...

  6. sass进阶—变量运算

    /*变量操作 (两个变量之间的运算符需要用空格隔开,否则会报错.)==,!= <,>,<=,>=+,-,*,/,% */ $width1:50px;$width2:100px; ...

  7. AGC-018 C

    题意: 有$X + Y + Z$个人,第$i$个人有$Ai$个金币,$Bi$个银币,$Ci$个铜币. 选出$X$个人获得其金币,选出$Y$ 个人获得其银币,选出$Z$个人获得 其铜币,在不重复选某个人 ...

  8. sklearn保存模型-【老鱼学sklearn】

    训练好了一个Model 以后总需要保存和再次预测, 所以保存和读取我们的sklearn model也是同样重要的一步. 比如,我们根据房源样本数据训练了一下房价模型,当用户输入自己的房子后,我们就需要 ...

  9. Ubuntu+IntelliJ IDEA+Android 配置NDK环境+openCV

    最近需要将Python人证对比模型移植安卓端.安卓端需要使用openCV简单的人像提取处理.在配置openCV前首先需要配置NDK环境. NDK的介绍(http://www.cnblogs.com/l ...

  10. http动词解释及规范

    GET:GET用于信息获取,而且应该是安全的和幂等的. 安全的意味着该操作用于获取信息而非修改信息,不管进行多少次操作,资源的状态都不会改变. 幂等的意味着对同一URL的多个请求应该返回同样的结果. ...