JQuery基础(一)
本篇主要介绍了JQuery的作用、使用步骤、基本知识和静态方法
JQuery是JavaScript库
- 简化JavaScript代码操作
- 集成了JavaScript、DOM、CSS和Ajax,兼容不同的浏览器
API:http://api.jquery.com
使用步骤
- 下载JQ文件:www.jquery.com
- 本地引用:
<script type="text/javascript" src="jquery-3.4.1.js">
,也可外部引用 - 入口函数:
原生JS的固定写法
window.onload = function(ev){ your codes }
JQ固定写法,也可以把$
换成jQuery
$(document).ready(function(){ your codes });
简化写法
$(function(){ your codes });
一些事情
- 一般选择1.x版本,可查看到百度、腾讯官网都使用1.x,它支持IE6、7、8
- UNcompress(未压缩、开发版)适合开发阶段阅读源代码
- 生产版 适合发布生产,由于其体积更小,加载更快
jQuery初步
jQ与JS的区别
1.加载模式
- 原生JS会等到DOM元素和图片加载完毕才执行
- JQ不会等图片加载完毕,只等DOM元素加载完毕,就执行
2.入口函数
- 原生JS若写了多个入口函数,后面会覆盖前面
- JQ多个入口函数,不会覆盖前面
$
符号冲突解决
在引入其他框架时,可能会出现符号冲突的问题
- 方式一:
jQuery.noConflict()
须在编写其他jQuery代码之前写。释放$
符号的使用权,后面用jQuery
代替 - 方式二:定义符号代替
var h$ = jQuery.noConflict();
这里用h$
用代替了$
核心函数$()
-
接受一个函数
$(function () { alert(); });
-
接受一个字符串选择器
var $b1=$(".box1");//按类选择 var $b2=$("#box2");//按id选择
-
接受一个代码片段
JQ对象 是一个伪数组
静态方法与实例方法
1.创建
- 静态方法:创建类——
类名.自定义方法名=function(){}
- 实例方法:创建类——
类名.prototype.自定义方法名=function(){}
2.调用
- 静态方法:
类名.自定义方法名
- 实例方法:创建类的对象——
对象名.自定义方法名
一些静态方法
-
each 遍历数组
JQ方式:(参数位置代表的意义固定,但参数名随意,下同)
$.each(yourArr,function (index,value) { console.log(index,value); })
JS方式:
yourArr.forEach(function (t, number) { console.log(number,t); })
-
map 遍历数组,并支持在回调函数中进行处理
JQ方式:
$.map(yourArr,function (t, number) { console.log(number,t); });
JS方式:(ts代表yourArr数组,包括其中每个元素)
yourArr.map(function (t, number, ts) { console.log(number,t,ts); });
-
$.trim() 返回一个字符串:去除原字符串两端的空格
-
$.isWindow() 判断Window对象
-
$.isFunction() 判断函数 参数为
jQuery
时返回true
-
$.isArray() 判断 真数组 对象
-
$.holdReady(true);可以阻止入口函数执行,holdReady(false);入口函数执行
注:
- jQuery本质是一个匿名函数,可以查看源代码结构
- JQuery的each和map的区别
each静态方法,默认返回遍历的原数组对象,不支持在回调函数中进行处理
map静态方法默认返回一个空数组,支持在回调函数中进行处理
以上,本篇主要介绍了JQuery的作用、使用步骤、基本知识和静态方法。