前言:
HTML的学习进度逐渐加快,JS和JQuery的学习初步结束。总结了一些前辈指导和书籍上的资料。本篇文章仍会不断更新。
W3School jQuery 参考手册
一、回顾JS(JavaScript)当前遇到的痛点
1.Window.Onload时间有个时间覆盖的问题,只能写一个。
2.代码容错性差
3.浏览器的兼容器差
4.书写很繁琐,代码量多
5.代码很乱,各个页面到处都是
6.动画效果,很难实现。
二、JQuery解决当前问题
min:它是压缩过的版本
区别:我们在开发过程中,会使用未压缩或者是压缩的版本。项目上线的时候,我们一定使用压缩过的版本。
1.1XXX版本 query-1.11.1.js
1.2 2.2XXX版本 不再支持 IE6,7,8
2.引包
要把我们的JQuery源文件
在我们的页面中引入我们的JQuery的文件
问题:
如果遇到这种问题,那肯定是没有引用我们的JQuery的源文件,在去写JQuery的源代码。
事件处理程序
事件源
Js方式:document.getElementById(“id”)
jQuery方式:$(“#id”)
事件
Js方式:document.getElementById(“id”).onclick
jQuery方式: $(“#id”).click
区别:jQuery的事件不带on
l事件处理程序
Js书写方式:
document.getElementById(“id”).onclick = function(){
//语句
}
jQuery书写方式:
$(“#id”).click(function(){//语句
});
jQuery详细介绍
$问题
a)Js命名归法:下划线、字母、$、数字
b)但是不能以数字作为开头
var $
= “我是$符号”;
jQUery的两个变量:$和jQuery
jQuery占用了我们两个变量:$和jQuery
js入口函数跟jQuery入口函数的区别:
1.Js的window.onload事件是等到所有内容,以及我们的外部图片之类的文件加载完了之后,才回去执行
2.jQuery的入口函数是在html所有标签都加载之后,就回去执行。
Js创建对象
三种方式:
1.var obj = {};
2.var obj1 = new Object();
3.var obj2 = Object.create();
1跟2的区别:
推荐使用第一个方式
第二种方式存在效率问题,因为要new对象,会涉及到原型查找的问题。
jQuery基本选择器
回顾CSS选择器
jQuery基本选择器
规律:$(selector).css(“background”,”red”);
jQuery是什么
jQuery就是javascript的一个库,把我们常用的一些功能进行了封装,方便我们来调用,提高我们的开发效率。
Javascipt跟jQuery的区别:
Javascript是一门编程语言,我们用它来编写客户端浏览器脚本。
jQuery是javascript的一个库,包含多个可重用的函数,用来辅助我们简化javascript开发
jQuery能做的javascipt都能做到,而javascript能做的事情,jQuery不一定能做到
jQuery其他选择器
mouseover事件跟mouseenter事件的区别:
mouseover/mouseout事件,鼠标经过的时候会触发多次,每遇到一个子元素就会触发一次。
mouseenter/mouseleave事件,鼠标经过的时候只会触发一次
DOM对象跟jQuery对象相互转换
jQuery对象转换成DOM对象:
方式一:$(“#btn”)[0]
方式二:$(“#btn”).get(0)
DOM对象转换成jQuery对象:
$(document)->把DOM对象转成了jQuery对象
var btn = document.getElementById(“bt n”);
btn->$(btn);