jQuery-01
JS和jQuery的入口函数的区别
1.原生JS和jQuery入口函数的加载模式不同
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);
}
- 原生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");
});
jQuery入口函数的其它写法
// 1.第一种写法
$(document).ready(function () {
// alert("hello lnj");
});
// 2.第二种写法
jQuery(document).ready(function () {
// alert("hello lnj");
});
// 3.第三种写法(推荐)
$(function () {
// alert("hello lnj");
});
// 4.第四种写法
jQuery(function () {
alert("hello lnj");
});
jQuery冲突问题
// 1.释放$的使用权
// 注意点: 释放操作必须在编写其它jQuery代码之前编写
// 释放之后就不能再使用$,改为使用jQuery
// jQuery原理.noConflict();
// 2.自定义一个访问符号
var nj = jQuery.noConflict();
nj(function () {
alert("hello lnj");
});
jQuery核心函数
// $();/jQuery原理();就代表调用jQuery的核心函数
// 1.接收一个函数
$(function () {
alert("hello lnj");
// 2.接收一个字符串
// 2.1接收一个字符串选择器
// 返回一个jQuery对象, 对象中保存了找到的DOM元素
var $box1 = $(".box1");
var $box2 = $("#box2");
console.log($box1);
console.log($box2);
// 2.2接收一个字符串代码片段
// 返回一个jQuery对象, 对象中保存了创建的DOM元素
var $p = $("<p>我是段落</p>");
console.log($p);
$box1.append($p);
// 3.接收一个DOM元素
// 会被包装成一个jQuery对象返回给我们
var span = document.getElementsByTagName("span")[0];
console.log(span);
var $span = $(span);
console.log($span);
});
jQuery对象
$(function () {
/*
* 1.什么是jQuery对象
* jQuery对象是一个伪数组
*
* 2.什么是伪数组?
* 有0到length-1的属性, 并且有length属性
*/
var $div = $("div");
console.log($div);
var arr = [1, 3, 5];
console.log(arr);
});
静态方法和实例方法
// 1.定义一个类
function AClass() {
}
// 2.给这个类添加一个静态方法
// 直接添加给类的就是静态方法
AClass.staticMethod = function () {
alert("staticMethod");
}
// 静态方法通过类名调用
AClass.staticMethod();
// 3.给这个类添加一个实例方法
AClass.prototype.instanceMethod = function () {
alert("instanceMethod");
}
// 实例方法通过类的实例调用
// 创建一个实例(创建一个对象)
var a = new AClass();
// 通过实例调用实例方法
a.instanceMethod();