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

个人学习笔记

初识jQuery

1.我的第一个JQuery

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>MyJQuery</title>

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

    <script>

        //JQuery的固定写法

        $(document).ready(function () {

            alert("Hello ,JQuery");

        });

    </script>

</head>

<body>

</body>

</html>

2.JQuery和JS入口函数的区别

原生JS个JQuery的加载模式不相同:
　　原生JS会等到DOM加载完毕,图片也加载完毕之后执行
　　JQuery只要DOM加载完毕就开始执行

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>JQuery和JS入口函数的区别</title>

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

    <script>

        //通过原生JS拿到DOM元素

        window.onload = function (ev) {

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

            console.log(img);

            //可以拿到DOM元素的宽和高

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

            console.log("onload",width);

        }

        //通过JQuery拿到DOM元素,但是JQuery不可以拿到DOM元素的宽和高

        $(document).ready(function () {

           var $img = $("img")[0];

            console.log($img);

        });

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

        window.onload = function (ev) {

            alert("Hello , JavaScript1");

        }

        window.onload = function (ev) {

            alert("Hello , JavaScript2");

        }

        // JQuery编写多个入口函数,后面的不会覆盖前面的

        $(document).ready(function () {

            alert("Hello , JQuery1");

        });

        $(document).ready(function () {

            alert("Hello , JQuery2");

        });

    </script>

</head>

<body>

    <img src="https://img.alicdn.com/tfs/TB1ZXiuQhTpK1RjSZFMXXbG_VXa-520-280.png_q90_.webp" alt="">

</body>

</html>

3.JQuery入口函数的其他写法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>JQuery入口函数的其他写法</title>

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

    <script>

        //第一种写法

        $(document).ready(function () {

           alert("Hello JQuery");

        });

        //第二种写法

        jQuery(document).ready(function () {

           alert("Hello JQuery");

        });

        //第三种写法(推荐)

        $(function () {

           alert("Hello ,JQuery");

        });

        //第四种写法

        jQuery(function () {

           alert("Hello ,JQuery");

        });

    </script>

</head>

<body>

</body>

</html>

4.JQuery的冲突问题
　　原来的$访问符号被覆盖下面介绍解决冲突的办法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>JQuery的冲突问题</title>

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

    <script src="test.js"></script>

    <script>

        //1.释放$的使用权 注意:释放操作必须在编写其他JQuery代码之前,释放之后就不能继续使用$,改为写JQuery

        jQuery.noConflict();

        jQuery(function () {

           alert("Hello jQuery!");

        });

        //2.自定义访问符号

        var jq = jQuery.noConflict();

        jq(function () {

           alert("Hello jQuery!");

        });

    </script>

</head>

<body>

</body>

</html>

JQuery核心函数和工具方法

 5.JQuery的核心函数

　　$();就代表调用JQuery的核心函数

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>JQuery的核心函数</title>

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

    <script>

        //1.接收一个函数

        $(function () {

            alert("Hello jQuery!");

            //2.接收一个字符串代码片段,会被包装成一个JQuery对象,对象中保存了创建的DOM

            var $p = $("<p>我是段落</p>");

            console.log($p);

            //3.接收一个字符串选择器,会被包装成一个JQuery对象,对象中保存了找到的DOM

            var $box1 = $(".box1");

            $box1.append($p);

            var $box2 = $("#box2");

            console.log($box1);

            console.log($box2);

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

            console.log(span);

            //4.接收一个DOM对象,会被包装成一个JQuery对象,对象中保存了找到的DOM

            var $span = $(span);

            console.log($span);

        });

    </script>

</head>

<body>

    <div class="box1"></div>

    <div id="box2"></div>

    <span>我是span</span>

</body>

</html>

6.jQuery对象

　　jQuery 对象是一个伪数组,具有索引,长度

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery对象</title>

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

    <script>

        /*

        jQuery 对象是一个伪数组,具有索引,长度

         */

        $(function () {

            var $div = $("div");

            console.log($div);

        });

        var nums =[1,2,3];

        console.log(nums);

    </script>

</head>

<body>

    <div>div1</div>

    <div>div2</div>

    <div>div3</div>

</body>

</html>

7.静态方法和实例方法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>静态方法和实例方法</title>

    <script>

        //定义一个测试类AClass

        function AClass() {

        }

        //添加一个静态方法并调用

        AClass.staticMethod = function () {

            alert("staticMethod");

        }

        AClass.staticMethod();

        //添加一个实例方法并调用

        AClass.prototype.instanceMethod = function () {

            alert("instanceMethod");

        }

        var a = new AClass();

        a.instanceMethod();

    </script>

</head>

<body>

</body>

</html>

8. 静态方法-each方法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>静态方法-each方法</title>

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

    <script>

        var arr = [1,3,5,7,9];

        /**

         * 第一个参数,遍历到的元素

         * 第二个参数,当前遍历的索引

         * 注意:原生 JS只能遍历数组,不能遍历伪数组

         */

        arr.forEach(function (value,index) {

            console.log(index,value);

        });

        /**

         * 利用JQuery的静态方法each遍历真数组.

         * 第一个参数为索引,第二个参数为值

         */

        $.each(arr,function (index,value) {

            console.log(index,value);

        });

        //定义一个伪数组

        var obj = {0:1,1:3,2:5,3:7,4:9,length:5}

        /**

         * 利用JQuery的静态方法each遍历伪数组.

         * 第一个参数为索引,第二个参数为值

         */

        $.each(obj,function (index,value) {

            console.log(index,value);

        });

    </script>

</head>

<body>

</body>

</html>

9.静态方法-map方法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>静态方法-map方法</title>

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

    <script>

        var arr = [1,3,5,7,9];

        var obj = {0:1,1:3,2:5,3:7,4:9,length:5}

        //1.利用原生 JS的map方法遍历, 不能遍历伪数组

        arr.map(function (value, index, array) {

            console.log(index,value,array);

        })

        /**

         * 第一个参数:要遍历的数组

         * 第二个参数,遍历到每个元素之后执行的回调方法

         *          function的参数:

         *                      第一个参数:遍历到的值

         *                      第二个参数:遍历到的索引

         */

        $.map(arr,function (index,value) {

            console.log(index,value);

        })

        /**

         * 默认返回一个空数组

         * map静态方法可以在回调函数中通过return对数组进行处理

         * 注意:和JQuery的静态方法each一样,也可以遍历伪数组

         */

        var res = $.map(obj,function (index,value) {

            console.log(index,value);

        })

        /**

         * 默认返回要遍历的数组本身

         * each静态方法不支持在回调函数中对遍历的数组进行处理

         * @type {*|jQuery}

         */

        var res2 = $.each(obj,function (index,value) {

            console.log(index,value);

        });

        console.log(res);

        console.log(res2);

    </script>

</head>

<body>

</body>

</html>

10.JQuery其他静态方法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>JQuery其他静态方法</title>

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

    <script>

        var str = "     jQuery      ";

        /**

         * 去掉字符串两端的空格

         * 参数:需要处理的字符串

         * 返回值:处理之后的字符串

         * @type {*|jQuery}

         */

        var res = $.trim(str);

        console.log("---"+str+"---")

        console.log("---"+res+"---")

        /**

         * 判断参数是不是window对象

         * 返回值为布尔类型

         * @type {*|jQuery}

         */

        var res2 = $.isWindow(window);

        console.log(res2)

        var arr = [1,3,5,7,9];

        /**

         * 判断参数是不是一个真数组

         * 返回值为布尔类型

         */

        var res3 = $.isArray(arr);    //真数组返回true

        console.log(res3);

        /**

         * 判断参数是不是一个函数

         * @type {*|jQuery}

         * !!!!注意:JQuery框架本质上就是一个函数

         */

        var res4 = $.isFunction(function () {});

        var res5 = $.isFunction(jQuery);

        console.log(res4);

        console.log(res5);

    </script>

</head>

<body>

</body>

</html>

11.静态方法-holdReady方法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>静态方法-holdReady方法</title>

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

    <script>

        /**

         * 暂停入口函数的执行

         * 参数为true时为暂停

         * 参数为false时为回复

         */

        $.holdReady(true);

        $(function () {

           alert("ready!");

        });

    </script>

</head>

<body>

<button>回复ready时间</button>

<script>

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

    btn.onclick = function () {

        $.holdReady(false);

    }

</script>

</body>

</html>

JQuery --- 第一期 (初识jQuery, JQuery核心函数和工具方法)的更多相关文章

jQuery源码分析-03构造jQuery对象-源码结构和核心函数
3. 构造jQuery对象 3.1源码结构先看看总体结构,再做分解: (function( window, undefined ) { var jQuery = (function() { // 构 ...
【转】jQuery源码分析-03构造jQuery对象-源码结构和核心函数
作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 毕竟是边读边写,不对的地方请告诉我,多多交流共同进步.本章还未写完,完了会提交PDF. 前记: 想系 ...
Jquery第一篇【介绍Jquery、回顾JavaScript代码、JS对象与JQ对象的区别】
什么是Jquery? Jquey就是一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作就是封装了JavaScript,能够简化我们写代码的一个JavaScript库为 ...
jquery 第一节什么是jQuery
简单来说,jQuery就是javascript的一个框架,也可以说是javascript的一个库.
解密jQuery内核 DOM操作的核心函数domManip
domManip是什么 dom即Dom元素,Manip是Manipulate的缩写,连在一起就是Dom操作的意思. .domManip()是jQuery DOM操作的核心函数对封装的节点操作做了参数 ...
Jq&lowbar;DOM元素方法跟JQuery 核心函数跟JQuery 事件方法
JQuery DOM 元素函数描述 .get() 从队列中删除所有未运行的项目. .ind ...
jQuery核心函数和静态方法
jQuery核心函数从jQuery文档中可以看出,jQuery核心函数一共3大类4小类 jQuery(callback) 当DOM加载完成后执行传入的回调函数 <script> $(fu ...
Jquery核心函数
在Jquery中,所有的DOM对象都将封装成Jquery对象,而且只有Jquery对象才能使用Jquery方法或者属性来执行相应的操作. 所以Jquery提供了一个可以将DOM对象封装成Jquery对 ...
Jquery（）核心函数的7个重载方法
(1) jquery() 该函数返回一个空的jQuery对象.在jQuery1.4以后的版本中,改函数返回一个空的jQuery对象.在之后的版本中,该函数会返回一个包含document节点的对象. ( ...

随机推荐

js隐藏div和class
<style type="text/css"> //div用点//class# .footer { display:none; } #footer { displ ...
初识python中的类与对象
这篇博客的路线是由深入浅,所以尽管图画的花花绿绿的很好看,但是请先关注我的文字,因为初接触类的小伙伴直接看类的实现可能会觉得难度大,只要耐着性子看下去,就会有一种“拨开迷雾看未来”的感觉了. 一.py ...
Java 读Properties
import java.io.*; import java.util.Properties; public class Study { public static void main(String[] ...
ARMv8 Linux内核head&period;S源码分析
ARMv8Linux内核head.S主要工作内容: 1. 从el2特权级退回到el1 2. 确认处理器类型 3. 计算内核镜像的起始物理地址及物理地址与虚拟地址之间的偏移 4. 验证设备树的地址是否有 ...
phpstorm ctrl+shift+F键不管用，不弹出搜索弹框
般热键冲突搜狗默认简繁切换组合键位ctrl+shift+F故outlook2011按三建且失效应该能看搜狗输入状态简繁变搜狗设置按键-取消选简繁切换热键即在任务栏的语言地方点击一下再点击语言首选项.进 ...
yum的使用与配置
yum简介 yum,是Yellow dog Updater, Modified 的简称,是杜克大学为了提高RPM 软件包安装性而开发的一种软件包管理器.起初是由yellow dog 这一发行版的开发者 ...
Servlet案例5：用户登录失败信息回显
登录失败信息回显不会的新的一个页面,而是显示在登录页面一种方法是: 登录页面表单中每个字段后添加<span>标签写入失败信息,利用ajax技术通过改变<span>标签的di ...
Linux基础学习（2）--Linux系统安装
第二章——Linux系统安装一.VMware虚拟机安装与使用 1.VMware简介: VMware是一个虚拟PC的软件,可以在现有的操作系统上虚拟出一个新的硬件环境,相当于模拟 ...
zabbix监控k8s出现的pod error status
配置zabbix客户端配置文件 vim /etc/zabbix/zabbix_agentd.conf 添加 Include=/etc/zabbix/zabbix_agentd.d/ #!/bin/b ...
WPF usercontrol 自定义依赖属性
1.依赖属性不同意一般属性,一般属性主要定义在对象中,而依赖属性是存在一个特殊的依赖属性表中.2.当我们触发改变值时,需要通过SetValue这种方式进行触发. UserControl1.xaml: ...