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_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节点的对象. ( ...
随机推荐
- 洛谷 P2725 解题报告
P2725 邮票 Stamps 题目背景 给一组 N 枚邮票的面值集合(如,{1 分,3 分})和一个上限 K -- 表示信封上能够贴 K 张邮票.计算从 1 到 M 的最大连续可贴出的邮资. 题目描 ...
- 软件性能测试技术树（二）----Linux服务器性能
全图: 测试目的: 测试范围&性能指标: 测试与生产环境服务器配置不同的处理方法: 实时CPU监控: 实时内存监控: 实时网络监控: 实时磁盘监控: 万能命令: Linux下的进程追踪命令: ...
- Oracle数据库表分区
一.Oracle数据库表分区概念和理解 1.1.已经存在的表没有方法可以直接转化为分区表. 1.2.不在分区字段上建立分区索引,在别的字段上建立索引相当于全局索引.效率 ...
- 更新版PowerBI发布了-- Power BI Report Server Update – March 2018
新版的PowerBI server 和 Desktop 终于发布了. 详细增加功能见以下链接: 下载最新版PowerBI Report Server: https://powerbi.microso ...
- 网络编程之套接字（tcp）
经过几天高强度的学习,对套接字的编程有了初步的认识,今天对这几天所学的知识总结一下:首先简单阐述一下tcp通信: TCP提供的是可靠的,顺序的,以及不会重复的数据传输,处理流控制,由于TCP是可靠的, ...
- 深夜学算法之SkipList：让链表飞
1. 前言 上次写Python操作LevelDB时提到过,有机会要实现下SkipList.摘录下wiki介绍: 跳跃列表是一种随机化数据结构,基于并联的链表,其效率可比拟二叉查找树. 我们知道对于有序 ...
- swoft 源码解读【转】
官网: https://www.swoft.org/ 源码解读: http://naotu.baidu.com/file/814e81c9781b733e04218ac7a0494e2a?toke ...
- 跟我学ASP.NET MVC之三：完整的ASP.NET MVC程序-PartyInvites
摘要: 在这篇文章中,我将在一个例子中实际地展示MVC. 场景 假设一个朋友决定举办一个新年晚会,她邀请我创建一个用来邀请朋友参加晚会的WEB程序.她提出了四个注意的需求: 一个首页展示这个晚会 一个 ...
- java 中 一个int类型的num，num&1
n&1 把n与1按位与,因为1除了最低位,其他位都为0,所以按位与结果取决于n最后一位,如果n最后一位是1,则结果为1.反之结果为0.(n&1)==1: 判断n最后一位是不是1(可能用 ...
- Go性能优化小结
1 内存优化 1.1 小对象合并成结构体一次分配,减少内存分配次数 做过C/C++的同学可能知道,小对象在堆上频繁地申请释放,会造成内存碎片(有的叫空洞),导致分配大的对象时无法申请到连续的内存空间, ...